TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere il pannello dei contenuti nel sito Weebly?

7

I pannelli di contenuto vengono utilizzati per mostrare contenuti importanti in un tipo di configurazione del tabellone. Puoi impostare un singolo pannello o un insieme di pannelli per mostrare i tuoi contenuti in più colonne. Questo tipo di pannelli è facile da aggiungere in CMS di fascia alta come WordPress con plug-in shortcode per lo più disponibili gratuitamente o a un prezzo nominale. Tuttavia, piattaforme come Weebly sono in ritardo nell’offrire tali elementi. Il nostro obiettivo è combinare la semplicità di Weebly con i semplici codici CSS per garantire che i proprietari dei siti Weebly possano utilizzare anche qualsiasi tipo di elemento come casella di testo colorata, suggerimenti, pannello dei contenuti, etichette, ecc.

Pannello dei contenuti per Weebly

In questo articolo spiegheremo quattro diversi stili di pannelli ciascuno con piccole modifiche utilizzando il codice CSS. Prima di andare con il codice qui sotto c’è un pannello di contenuto di esempio di cosa stiamo parlando.

Per evitare confusione abbiamo usato un set separato di codici per i pannelli, ma se guardi nel codice la maggior parte delle classi CSS sono uguali per tutti i pannelli.

1 pannello dei contenuti semplice

Il pannello del contenuto semplice contiene un’intestazione e il contenuto con lo stesso colore di sfondo mostrato di seguito:

Come aggiungere il pannello dei contenuti nel sito Weebly?

Puoi aggiungere il codice CSS per il pannello dei contenuti semplice in diversi modi:

  • Sotto il foglio di stile principale "main.less" senza e tag
  • Nella sezione " Codice intestazione " della pagina
  • All’interno dell’elemento " Embed Code " insieme al codice HTML.
<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>

Una volta aggiunto il codice CSS, incolla il codice HTML seguente all’interno dell’elemento "Embed Code":

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

Che ne dici di aggiungere il colore di sfondo alla sezione dell’intestazione? Usa il codice CSS / HTML sottostante per aggiungere un pannello di contenuto con il colore dell’intestazione come "Aqua". Invece del colore acqua, puoi usare qualsiasi colore come desideri.

Come aggiungere il pannello dei contenuti nel sito Weebly?

/* 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 Pannello dei contenuti a colori

Aggiungiamo il colore sia all’intestazione che alla sezione del contenuto:

Come aggiungere il pannello dei contenuti nel sito Weebly?

Ed ecco il codice per il pannello dei contenuti a colori:

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

Infine aggiungiamo un piè di pagina al pannello e aggiungiamo alcune note.

Come aggiungere il pannello dei contenuti nel sito Weebly?

Di seguito è riportato il codice per il pannello dei contenuti con piè di pagina:

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

Aggiunta di immagini all’interno del pannello

Sebbene abbiamo mostrato tutti gli esempi con contenuto di testo, puoi aggiungere qualsiasi elemento HTML come contenuto. Ad esempio, di seguito è riportato il pannello dei contenuti con il piè di pagina insieme a un’immagine all’interno.

Come aggiungere il pannello dei contenuti nel sito Weebly?

Parole finali

Come puoi vedere, è molto facile creare widget in Weebly e inserirli su pagine singole o multiple. Puoi personalizzare i pannelli del contenuto per regolare le dimensioni, i colori e inserire elementi all’interno del pannello.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More