TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til infomeldingsbokser på Weebly Site?

0

Å markere viktig informasjon i en artikkel bidrar til å formidle budskapet vellykket til brukerne. Vanligvis kan du bruke meldingsbokser til å vise tips, hjelp, advarsel, varsel og mange andre typer informasjon. Rammer som Bootstrap tilbyr forhåndsdefinerte varselkomponenter for å legge til disse infomeldingsboksene. På samme måte kan du bruke plugins på innholdshåndteringssystemer som WordPress. På Weebly kan du lage infomeldingsbokser ved hjelp av enkel CSS. I denne artikkelen vil vi forklare hvordan du legger til infomeldingsboksWeebly -nettstedet basert på Bootstrap -varselkomponenten.

Informasjonsmeldingsbokser

Vi lager meldingsbokser med to forskjellige stiler.

  • Bruke skriftikoner
  • Bruke små ikonbilder

Skriftikoner er et godt alternativ hvis du bruker Font Awesome på nettstedet ditt. Ellers kan du velge bildealternativet i stedet for skriftikoner.

Funksjon i infomeldingsbokser

Informasjonsmeldingsboksene vil ha følgende funksjoner:

  • Laget med CSS og fullt responsiv automatisk justering på mobile enheter.
  • Stiler inneholder meldingsboksen for informasjon, suksess, advarsel, fare, tips, hjelp og kunngjøringsmeldinger. Du kan også definere din egen tilpassede meldingsboks basert på koden.
  • Legg til individuelle meldingsbokser basert på ditt behov. For eksempel, når du vil vise et tips, bruk "tipsmeldingsboks" og for en advarsel, bruk "advarselsmeldingsboks". Dette kan kontrolleres i HTML limt inn i "Embed Code" -elementet.
  • Farger og fonter kan tilpasses etter behov.
  • Bredden på varslingsboksen kan utvides til full bredde på skjermen eller forkortes for å passe innholdslengden.

1 Informasjonsmeldingsboks med skriftikoner

Nedenfor ser du hvordan boksene vil inneholde CSS -fargeboksen og en skriftikon foran teksten.

Hvordan legge til infomeldingsbokser på Weebly Site?

Det første trinnet for å lage disse infoboksene er å koble de fantastiske ikonene CSS til skriften i overskriftsdelen på nettstedet ditt. For å gjøre det, legg til koden nedenfor under "Innstillinger> SEO> Overskriftskode" i Weebly -nettstedredigereren.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Hvordan legge til infomeldingsbokser på Weebly Site?

Legg til topptekst på Weebly -nettstednivå

Det andre trinnet er å legge til CSS -koden under filen "main.less".

.webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; /* width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; */ } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-success { background-color: #2ecc71; } .webnots-success:before { content: "f00c"; margin-left: -2px; } .webnots-failure { background-color: #e74c3c; } .webnots-failure:before { content: "f00d"; } .webnots-warning { background-color: #e67e22; } .webnots-warning:before { content: "f12a"; margin-left: 5px; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; } .webnots-notice { background-color: #bea474; } .webnots-notice:before { content: "f0a1"; margin-left: -1px; }

Hvordan legge til infomeldingsbokser på Weebly Site?

Redigerer hoved CSS -fil i Weebly

Når du har lagt til CSS -koden, går du til siden du vil legge til infomeldingsboks. Kopier og lim inn HTML -koden nedenfor ved å dra et " Embed Code " -element:

<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div> <div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div> <div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div> <div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div> <div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div> <div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div> <div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>

Hver

… </ div> tagger dekker forskjellige typer meldinger. For eksempel, for å legge til en suksessboks, legg bare til HTML -koden nedenfor:
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

Vi har brukt font awesome 4.7 på dette eksemplet. Du kan bruke versjon 5 eller 6 ved å erstatte CSS og tilhørende klasser i HTML.

2 Informasjonsmeldingsboks med ikonbilder

Den andre stilen med meldingsbokser bruker små bilder i stedet for skriftikoner og vil se ut som nedenfor:

Hvordan legge til infomeldingsbokser på Weebly Site?

Denne widgeten trenger følgende fire ikonbilder, høyreklikk og last ned bildene til din lokale PC.

Last opp bildene under "Tema> Rediger HTML / CSS> Eiendeler> Last opp fil (er) …" på ditt Weebly -nettsted. Filbanen til et opplastet Weebly-bilde vil være som " https://your-site-name.com/files/theme/info.png ". Alternativt kan du høyreklikke på den opplastede filen og få den riktige filbanen til bildet.

Når du har riktig filbane for de opplastede bildene, legger du til CSS -koden nedenfor i filen "main.less". Ikke glem å oppdatere bildens URL -er med bildene til URL -adressene til Weebly -nettstedet.

.info_alert { background-image: url(https://img.webnots.com/2015/10/info.png); border: 1px solid #CCCCCC; background-color: #E0E0E0; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; } .warning_alert { background-image: url(https://img.webnots.com/2015/10/warning.png); border: 1px solid #FE7736; background-color: #FFBD59; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .danger_alert { background-image: url(https://img.webnots.com/2015/10/danger.png); border: 1px solid #FF0F0F; background-color: #FF8080; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .success_alert { background-image: url(https://img.webnots.com/2015/10/success.png); border: 1px solid #83CD52; background-color: #8DE182; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: #060; }

Gå til siden du vil legge til meldingsboksen, og sett inn HTML -koden nedenfor i et "Embed Code" -element.

<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p> <p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p> <p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p> <p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>

Hvis du bare vil bruke én boks, bruker du den tilsvarende koden i

​​… </ p> tagger.

Merk: Du har to andre alternativer, i stedet for å legge til CSS -kode under overskriftsdelen av nettstedets “Innstillinger". Den ene er å sette inn koden under "main.less" -filen, og den andre er å legge til koden under overskriftsseksjonen på den aktuelle siden for bare å være effektiv på den siden. I begge scenariene må du legge til koden i… -taggen.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon