TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till informationsmeddelandeboxar på Weebly -webbplatsen?

8

Att markera viktig information i en artikel hjälper till att förmedla budskapet framgångsrikt till användarna. I allmänhet kan du använda meddelandefält för att visa tips, hjälp, varning, varning och många andra typer av information. Ramverk som Bootstrap erbjuder fördefinierade varningskomponenter för att lägga till dessa infomeddelande rutor. På samma sätt kan du använda plugins på innehållshanteringssystem som WordPress. På Weebly kan du skapa infomeddelandefält med hjälp av enkel CSS. I den här artikeln kommer vi att förklara hur du lägger till infomeddelande i Weebly -webbplatsen baserat på Bootstrap -varningskomponenten.

Info Meddelande rutor

Vi kommer att skapa meddelanderutor med två olika stilar.

  • Använda teckensnittsikoner
  • Använda små ikonbilder

Teckensnittsikoner är ett bra alternativ om du använder Font Awesome på din webbplats. Annars kan du välja bildalternativ istället för teckensnittsikoner.

Funktion i infomeddelandeboxar

Informationsmeddelandena har följande funktioner:

  • Tillverkad med CSS och fullt responsiv automatisk anpassning på mobila enheter.
  • Styles innehåller meddelandefältet för information, framgång, varning, fara, tips, hjälp och meddelande. Du kan också definiera din egen anpassade meddelanderuta utifrån koden.
  • Lägg till enskilda meddelandefält baserat på ditt behov. Till exempel, när du vill visa ett tips använder du "tipsmeddelandefält" och för en varning "varningsmeddelandefält". Detta kan styras inom HTML -klistrad inuti "Bädda in kod" -elementet.
  • Färger och teckensnitt kan anpassas efter behov.
  • Anmälningsrutans bredd kan utökas till hela skärmens bredd eller förkortas för att passa innehållets längd.

1 Meddelandefält med info med teckensnittsikoner

Nedan är hur rutorna kommer att se ut som innehåller CSS -färglåda och en teckensnittsikoner före texten.

Hur lägger jag till informationsmeddelandeboxar på Weebly -webbplatsen?

Det första steget för att skapa dessa inforutor är att länka typsnittet fantastiska ikoner CSS till sidhuvudet på din webbplats. För att göra det, lägg till koden nedan under avsnittet "Inställningar> SEO> Rubrikkod" i din Weebly -webbplatsredigerare.

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

Hur lägger jag till informationsmeddelandeboxar på Weebly -webbplatsen?

Lägg till rubrikkod på Weebly -webbplatsnivå

Det andra steget är att lägga till CSS -koden nedan 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; }

Hur lägger jag till informationsmeddelandeboxar på Weebly -webbplatsen?

Redigera huvud -CSS -fil i Weebly

När du har lagt till CSS -koden går du till sidan där du vill lägga till informationsrutan. Kopiera och klistra in HTML -koden nedan genom att dra ett " Bädda in kod " -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>

Varje

… </ div> -tagg täcker olika typer av meddelanden. Till exempel, för att lägga till en framgångsruta, lägg bara till nedanstående HTML -kod:
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

Vi har använt font awesome 4.7 på detta exempel. Du kan använda version 5 eller 6 genom att ersätta CSS och motsvarande klasser i HTML.

2 Info -meddelanderuta med ikonbilder

Den andra stilen med meddelandefält använder små bilder istället för typsnittsikoner och kommer att se ut nedan:

Hur lägger jag till informationsmeddelandeboxar på Weebly -webbplatsen?

Denna widget behöver följande fyra ikonbilder, högerklicka och ladda ner bilderna till din lokala dator.

Ladda upp bilderna under "Tema> Redigera HTML / CSS> Tillgångar> Ladda upp fil (er) …" på din Weebly -webbplats. Filvägen för en uppladdad Weebly-bild kommer att vara " https://your-site-name.com/files/theme/info.png ". Alternativt kan du högerklicka på den uppladdade filen och få rätt filsökväg för den bilden.

När du har rätt filsökväg för de uppladdade bilderna lägger du till CSS -koden nedan i din "main.less" -fil. Glöm inte att uppdatera bildadresserna med bildwebbadresserna för din Weebly -webbplats.

.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å till sidan där du vill lägga till meddelanderutan och sätt in HTML -koden nedan i ett "Bädda in kod" -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>

Om du bara vill använda en ruta använder du motsvarande kod inom

… </ p> taggar.

Obs! Du har två andra alternativ istället för att lägga till CSS -kod under rubriksektionen på webbplatsens "Inställningar". Den ena är att infoga koden under filen "main.less" och den andra är att lägga till koden under rubriksektionen på den specifika sidan för att endast gälla på den sidan. I båda scenarierna se till att lägga till koden inom … taggen.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer