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

Hvordan legge til ikonpanel -widget i Weebly?

1

Ikonpaneler hjelper deg med å vise innhold på en veldig attraktiv måte. Du kan vanligvis bruke dette på en landingsside for å vise forskjellige typer tjenester som tilbys på nettstedet. Et enkelt panel kan fungere som en oppfordring til handling, og du kan vise flere paneler ved å plassere det ved siden av. Selv om Weebly tilbyr call out -boksen som en app, vil ikonpanelet med like kolonnestil skape et mer tiltalende utseende.

Nedenfor er ikonpanel -widgeten hva vi snakker og les videre for å lage et slikt panel for ditt Weebly -nettsted.

Ikonpanelfunksjoner

  • Du kan legge til et hvilket som helst antall paneler bare ved å legge til en HTML -kode.
  • Bruk som en eller flere paneler.
  • Responsiv design og enkel å tilpasse.
  • Hvert panel inneholder et fantastisk ikon for skrifttyper, en overskrift, et avsnitt og en les mer -lenke eller en knapp.
  • Hver kolonne er like høy, selv om innholdshøyden er forskjellig.

Å lage et ikonpanel er en to -trinns prosess – først definer CSS og legg deretter til HTML.

Definere stiler for ikonpanel -widget

Trinn 1 – Definere kolonner og panelbeholder

La oss lage en widget med fire kolonner c1, c2, c3 og c4 som har samme høyde i en beholder kalt 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 bruker flex -attributtet for å holde den overordnede beholderhøyden fast uavhengig av den individuelle høyden på de fire underkolonnene inne. Vi har brukt 20% bredde for hver kolonne for å passe inn i Weebly -temaets bredde; du kan prøve å tilpasse bredden basert på temaet ditt og antall kolonner du virkelig trenger.

Merk: Alle moderne nettlesere støtter CSS flex -attributtet. Gamle nettlesere som Internet Explorer støtter imidlertid ikke dette.

Trinn 2 – Definere kolonnens bakgrunn

Nå som de fire like høyde -kolonnene er definert, er det på tide å definere bakgrunnsfarge for hver kolonne. Vi har brukt noen nettsikre farger, du kan bytte til hvilken som helst farge du trenger.

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

Trinn 3 – Definere stil for ikonene for fantastiske skrifttyper

Vi bruker font fantastisk for ikoner, slik at den er enkel å bruke, så vel som du vil ha mange ikoner å velge for ditt behov. Ikonet er definert som en firkantet boks med 80px x 80px størrelse med litt sveveeffekt.

/* 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; }

Trinn 4 – Stil for tilleggselementer

Nedenfor er stilen for flere elementer som overskrift (overskrift), avsnitt (ledd) og 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; }

Trinn 5 – Legge til respons til widgeten

Det siste trinnet i å definere CSS er å legge til lydhørhet ved hjelp av mediespørsmål som nedenfor:

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

Nå er CSS -delen fullført, og den komplette CSS vil se ut som nedenfor:

/* 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>

Lim inn hele CSS under "Header Code" -delen på Weebly -siden din.

Hvordan legge til ikonpanel -widget i Weebly?

Legg til topptekst på siden

Definere HTML for Icon Panel Widget

Dra og slipp et "Embed Code" -element, og legg til HTML -koden nedenfor. Dette er for et enkelt ikonpanel og "fa-home" -ikonet brukes til å vise et hjemikon. Sjekk referanselisten for fantastiske ikoner for fontene for å velge de nødvendige ikonene. Erstatt også overskriften, avsnittet og # med det faktiske innholdet og lenken din.

<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>

Nedenfor er koden for to paneler med forskjellig høyde – den ene har en knapp og den andre har en leseliste.

<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>

Merk: Bruk innebygd stil for bredde = 100% for kolonner når du vil bruke enkelt eller to paneler sammen med noen andre elementer plassert ved siden av. Dette sikrer at panelet er justert til hele bredden og ikke krymper til den definerte bredden på kolonnen i stilen. Den faktiske bredden på panelet og det tilstøtende elementet kan justeres som normalt ved å justere bredden på elementene på Weebly editor.

Nedenfor er den komplette HTML -koden for widget med fire kolonner med ikonpaneler:

<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 kolonner uten mellomrom. Du kan gi høyre margin for å skape gap mellom kolonnene.

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

Hvordan legge til ikonpanel -widget i Weebly?

Du kan bruke enkelt, to, tre eller fire paneler med forskjellige varianter.

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