TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä kuvakepaneelin widget Weeblyyn?

7

Kuvakepaneelien avulla voit esitellä sisältöä erittäin houkuttelevalla tavalla. Voit yleensä käyttää tätä aloitussivulla näyttääksesi erilaisia ​​sivustolla tarjottavia palveluita. Yksi paneeli voi toimia toimintakehotusruuduna, ja voit näyttää useita paneeleja asettamalla viereen. Vaikka Weebly tarjoaa kutsulaatikon sovelluksena, kuvakepaneeli, jossa on samanlainen sarake, luo houkuttelevamman ilmeen.

Alla on kuvakepaneeli -widget, mistä puhumme, ja lue lisää luodaksesi tällaisen paneelin Weebly -sivustollesi.

Kuvakepaneelin ominaisuudet

  • Voit lisätä minkä tahansa määrän paneeleja lisäämällä vain HTML -koodin.
  • Käytä yhtenä tai useampana paneelina.
  • Reagoiva muotoilu ja helppo muokata.
  • Jokainen paneeli sisältää mahtavan fontin kuvakkeen, otsikon, kappaleen ja Lue lisää -linkin tai -painikkeen.
  • Jokainen sarake on yhtä korkea, vaikka sisällön korkeus on erilainen.

Kuvakepaneelin luominen on kaksivaiheinen prosessi – määritä ensin CSS ja lisää sitten HTML.

Tyylien määrittäminen kuvakepaneelin widgetille

Vaihe 1 – Sarakkeiden ja paneelisäiliön määrittäminen

Luodaan widget, jossa on neljä saraketta c1, c2, c3 ja c4, joiden korkeus on sama, säiliössä nimeltä 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%; }

Käytämme flex -määritettä pitämään yläsäiliön korkeuden kiinteänä riippumatta sisällä olevien neljän alisarakkeen korkeudesta. Olemme käyttäneet 20% leveyttä jokaiselle sarakkeelle Weebly -teeman leveyden mukaan; voit yrittää muokata leveyttä teemasi ja todella tarvitsemiesi sarakkeiden määrän perusteella.

Huomaa: Kaikki nykyaikaiset selaimet tukevat CSS flex -määritettä. Vanhat selaimet, kuten Internet Explorer, eivät kuitenkaan tue tätä.

Vaihe 2 – Sarakkeen taustan määrittäminen

Nyt kun neljä yhtä korkeaa saraketta on määritetty, on aika määrittää taustaväri kullekin sarakkeelle. Olemme käyttäneet joitain verkkoturvallisia värejä, voit vaihtaa minkä tahansa värin.

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

Vaihe 3 – Font Awesome -kuvakkeiden tyylin määrittäminen

Käytämme mahtavaa kirjasintyyppiä kuvakkeille, jotta sitä on helppo käyttää, ja sinulla on runsaasti kuvakkeita, joita voit valita tarpeidesi mukaan. Kuvake on määritetty neliömäiseksi laatikoksi, jonka koko on 80 x 80 pikseliä ja jollakin hiiren vaikutuksella.

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

Vaihe 4 – Tyyli lisäelementteille

Alla on tyyli lisäelementeille, kuten otsikko (otsikko), kappale (para) ja painike (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; }

Vaihe 5 – Responsiivisuuden lisääminen widgettiin

Viimeinen vaihe CSS: n määrittämisessä on lisätä reagointikykyä käyttämällä mediakyselyitä seuraavasti:

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

Nyt CSS -osa on valmis ja täydellinen CSS näyttää seuraavalta:

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

Liitä koko CSS Weebly -sivusi Otsikkokoodi -osioon.

Kuinka lisätä kuvakepaneelin widget Weeblyyn?

Lisää otsikkokoodi sivulle

HTML -kuvakkeen määrittäminen kuvakepaneelin widgetille

Vedä ja pudota Upota koodi -elementti ja lisää alla oleva HTML -koodi sisälle. Tämä koskee yksittäistä kuvakepaneelia ja "fa-home" -kuvaketta käytetään koti-kuvakkeen näyttämiseen. Tutustu fonttien mahtavien kuvakkeiden viiteluetteloon tarvittavien kuvakkeiden valitsemiseksi. Korvaa myös otsikko, kappale ja # todellisella sisällölläsi ja linkilläsi.

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

Alla on kahden eri korkeuden paneelin koodi – toisessa on painike ja toisessa lukee lisää tekstilinkki.

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

Huomautus: Käytä inline -tyyliä leveydelle = 100% sarakkeille, jos haluat käyttää yhtä tai kahta paneelia yhdessä joidenkin muiden vieressä olevien elementtien kanssa. Tämä varmistaa, että paneeli on kohdistettu koko leveydelle eikä kutistu tyylin sarakkeen määritettyyn leveyteen. Paneelin ja viereisen elementin todellista leveyttä voidaan säätää normaalisti säätämällä elementtien leveyttä Weebly -editorissa.

Alla on neljän sarakkeen kuvakepaneelin widgetin täydellinen HTML -koodi:

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

Widgetissä on oletuksena sarakkeita, joiden välissä ei ole välilyöntiä. Voit luoda oikean marginaalin, jotta sarakkeiden väliin jää aukko.

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

Kuinka lisätä kuvakepaneelin widget Weeblyyn?

Voit käyttää yksittäisiä, kaksi, kolme tai neljä paneelia eri muunnelmilla.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja