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

Hur lägger jag till ikonpanelwidget i Weebly?

2

Ikonpaneler hjälper dig att visa upp innehåll på ett mycket attraktivt sätt. Du kan i allmänhet använda detta på en målsida för att visa olika typer av tjänster som tillhandahålls på webbplatsen. En enda panel kan fungera som en uppmaningsbox och du kan visa flera paneler genom att placera bredvid. Även om Weebly erbjuder call out -rutan som en app, kommer ikonpanelen med samma kolumnstil att skapa ett mer tilltalande utseende.

Nedan finns ikonpanelens widget vad vi pratar om och läs vidare för att skapa en sådan panel för din Weebly -webbplats.

Ikonpanelens funktioner

  • Du kan lägga till valfritt antal paneler bara genom att lägga till en bit HTML -kod.
  • Använd som en eller flera paneler.
  • Lyhörd design och lätt att anpassa.
  • Varje panel innehåller en fantastisk ikon för teckensnitt, en rubrik, ett stycke och en läs mer länk eller en knapp.
  • Varje kolumn har samma höjd även om innehållshöjden är olika.

Att skapa en ikonpanel är en tvåstegsprocess – definiera först CSS och lägg sedan till HTML.

Definiera stilar för ikonpanelwidget

Steg 1 – Definiera kolumner och panelbehållare

Låt oss skapa en widget med fyra kolumner c1, c2, c3 och c4 med samma höjd i en behållare som kallas panel_container.

/* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; }

Vi använder flexattributet för att hålla den överordnade behållarens höjd fast oavsett den individuella höjden på de fyra underkolumnerna inuti. Vi har använt 20% bredd för varje kolumn för att passa in i Weebly -temas bredd; du kan försöka anpassa bredden utifrån ditt tema och antalet kolumner du verkligen behöver.

Obs! Alla moderna webbläsare stöder CSS flex -attribut. Gamla webbläsare som Internet Explorer stöder dock inte detta.

Steg 2 – Definiera kolumnens bakgrund

Nu när de fyra lika höga kolumnerna är definierade är det dags att definiera bakgrundsfärg för varje kolumn. Vi har använt några webbsäkra färger, du kan byta till vilken färg du behöver.

/* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; }

Step3 – Definiera stil för fantastiska teckensnittsikoner

Vi använder teckensnitt fantastiskt för ikoner så att det är lätt att använda och du har många ikoner att välja för dina behov. Ikonen definieras som en fyrkantig ruta med 80px x 80px storlek med viss sväveffekt.

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; }

Steg 4 – Stil för ytterligare element

Nedan finns stilen för ytterligare element som rubrik (rubrik), stycke (stycke) och knapp (btn).

/* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; }

Steg 5 – Lägga till lyhördhet för widgeten

Det sista steget i att definiera CSS är att lägga till lyhördhet med hjälp av mediefrågor enligt nedan:

/* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } }

Nu är CSS -delen klar och hela CSS kommer att se ut nedan:

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> /* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; } /* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; } /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; } /* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; } /* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Klistra in hela CSS under avsnittet "Rubrikkod" på din Weebly -sida.

Hur lägger jag till ikonpanelwidget i Weebly?

Lägg till rubrikkod på sidan

Definiera HTML för Icon Panel Widget

Dra och släpp ett "Bädda in kod" -element och lägg till HTML -koden nedan. Detta är för en enda ikonpanel och "fa-home" -ikon används för att visa en hemikon. Kolla referenslistan för fantastiska ikoner för teckensnitt för att välja dina önskade ikoner. Ersätt också rubriken, stycket och # med ditt faktiska innehåll och länk.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Width is defined as 100% to align within a row */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Nedan finns koden för två paneler med olika höjd – en med en knapp och den andra med en läs mer textlänk.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="para"><a href="#">Read More</a></div> </div> </div>

Obs: Använd inline -stil för bredd = 100% för kolumner när du vill använda en eller två paneler tillsammans med några andra element placerade bredvid. Detta säkerställer att panelen är anpassad till hela bredden och inte krymper till den definierade bredden på kolumnen i stilen. Den faktiska bredden på panelen och det intilliggande elementet kan justeras som vanligt genom att justera bredden på elementen i Weebly editor.

Nedan finns den fullständiga HTML -koden för widgeten med fyra kolumnikoner:

<div class="panel_container"> <div class="c1"> <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <div class="icon"><span class="fa fa-download"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <div class="icon"><span class="fa fa-shopping-cart"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Widgeten har som standard kolumner utan utrymme mellan dem. Du kan ge höger marginal för att skapa gap mellan kolumnerna.

.c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; margin-right: 20px; /* Add right margin to create space between panels */ }

Hur lägger jag till ikonpanelwidget i Weebly?

Du kan använda enkla, två, tre eller fyra paneler med olika varianter.

Inspelningskälla: 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