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

Kuinka lisätä sisältöpaneeli Weebly -sivustoon?

1

Sisältöpaneeleja käytetään esittelemään tärkeää sisältöä näyttötaulun tyyppisissä asetuksissa. Voit määrittää yksittäisen paneelin tai paneelisarjan näyttämään sisältösi useissa sarakkeissa. Tämäntyyppiset paneelit on helppo lisätä huippuluokan sisällönhallintajärjestelmään, kuten WordPressiin, ja lyhyen koodin laajennukset ovat enimmäkseen saatavilla ilmaiseksi tai nimellishintaan. Weeblyn kaltaiset alustat ovat kuitenkin myöhässä tarjoamaan tällaisia ​​elementtejä. Tavoitteenamme on yhdistää Weeblyn helppokäyttöisyys yksinkertaisten CSS -koodien kanssa varmistaaksemme, että Weebly -sivustojen omistajat voivat käyttää myös kaikenlaisia ​​elementtejä, kuten värillistä tekstiruutua, työkaluvinkkejä, sisältöpaneelia, tarroja jne.

Weeblyn sisältöpaneeli

Tässä artikkelissa selitämme neljää erilaista paneelityyliä, joissa on pieniä muutoksia CSS -koodin avulla. Ennen kuin käytämme alla olevaa koodia, on esimerkki sisältöpaneelista, mistä puhumme.

Sekaannusten välttämiseksi olemme käyttäneet paneeleille erillistä koodisarjaa, mutta jos tarkastelet koodia, useimmat CSS -luokat ovat samat kaikille paneeleille.

1 Yksinkertainen sisältöpaneeli

Yksinkertainen sisältöpaneeli sisältää otsikon ja sisällön, jolla on sama taustaväri kuin alla:

Kuinka lisätä sisältöpaneeli Weebly -sivustoon?

Voit lisätä yksinkertaisen sisältöpaneelin CSS -koodin eri tavoin:

  • Päätyylitaulukon "main.less" alla ilman tunnisteita
  • In " Otsikko Koodi ” osioon
  • Inside ” Upota koodi ” elementti mukana HTML-koodia.
<style> .panel { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #d8d8d8; } .panel > .panel-heading { color: #333333; background-color: #f4f4f4; border-color: #d8d8d8; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style>

Kun CSS -koodi on lisätty, liitä alla oleva HTML -koodi Upota koodi -elementtiin:

<!-- Content Panel --> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Default Panel</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Default Panel -->

Entä taustavärin lisääminen otsikko -osioon? Käytä alla olevaa CSS / HTML -koodia lisätäksesi sisältöpaneelin, jonka otsikkoväri on "Aqua". Vesivärin sijasta voit käyttää mitä tahansa väriä haluamallasi tavalla.

Kuinka lisätä sisältöpaneeli Weebly -sivustoon?

/* CSS Code Start */ <style> .panel-aqua { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #86b998; } .panel-aqua > .panel-heading { background-color: #66a67c; border-color: #a6ccb4; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style> /* CSS Code End */ <!-- HTML Code for Panel with Aqua Header --> <div class="panel-aqua"> <div class="panel-heading"> <h3 class="panel-title">Panel withh Aqua Header</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Aqua Panel -->

3 Täysvärinen sisältöpaneeli

Lisäämme väriä sekä otsikko- että sisältöosioon:

Kuinka lisätä sisältöpaneeli Weebly -sivustoon?

Ja tässä on värillinen sisältöpaneelin koodi:

/* CSS Code Start */ <style> .panel-brown { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #6f6f55; } .panel-brown > .panel-heading { background-color: #52523f; border-color: #8c8c6b; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #6f6f55; color: #FFFFFF; } </style> /* CSS Code End */ <!-- HTML for Full Color Panel in Brown --> <div class="panel-brown"> <div class="panel-heading"> <h3 class="panel-title">Full Color Panel in Brown</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Brown Panel -->

Lopuksi lisätään alatunniste paneeliin ja lisätään muistiinpanoja.

Kuinka lisätä sisältöpaneeli Weebly -sivustoon?

Alla on alatunnisteen sisältävän sisältöpaneelin koodi:

/* Start of CSS for Content Panel with Footer */ <style> .panel-with-footer { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #bc5e43; } .panel-with-footer > .panel-heading { color: #ffffff; background-color: #bc5e43; border-color: #e4bfb4; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #c97e69; color: #FFFFFF; } .panel-footer { background: #bc5e43; border-color: #e4bfb4; color: #FFFFFF; padding: 10px 15px; border-top: 1px solid #d8d8d8; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } </style> /* End of CSS for Content Panel with Footer */ <!-- HTML for Content Panel with Footer --> <div class="panel-with-footer"> <div class="panel-heading"> <h3 class="panel-title">Content Panel with Footer</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="panel-footer">Panel Footer</div></div> <!-- End Panel with Footer-->

Kuvien lisääminen sisäpaneeliin

Vaikka olemme näyttäneet kaikki esimerkit tekstisisällöstä, voit lisätä minkä tahansa HTML -elementin sisältöksi. Esimerkiksi alla on sisältöpaneeli, jossa on alatunniste ja kuva sisällä.

Kuinka lisätä sisältöpaneeli Weebly -sivustoon?

Lopulliset sanat

Kuten näette, widgetien luominen Weeblyssä on erittäin helppoa ja lisättävä yksittäisille tai useille sivuille. Voit mukauttaa sisältöpaneeleja säätääksesi kokoa, värejä ja lisätäksesi elementtejä paneelin sisään.

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