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

Come aggiungere il widget del pannello delle icone in Weebly?

5

I pannelli delle icone ti aiutano a mostrare i contenuti in un modo molto attraente. In genere è possibile utilizzarlo su una pagina di destinazione per visualizzare diversi tipi di servizi forniti sul sito. Un singolo pannello può funzionare come una casella di invito all’azione e puoi mostrare più pannelli posizionandoli accanto. Sebbene Weebly offra la casella di chiamata come app, il pannello delle icone con lo stesso stile di colonne creerà un aspetto più accattivante.

Di seguito è riportato il widget del pannello delle icone di cui stiamo parlando e continua a leggere per creare un tale pannello per il tuo sito Weebly.

Caratteristiche del pannello delle icone

  • Puoi aggiungere un numero qualsiasi di pannelli semplicemente aggiungendo un pezzo di codice HTML.
  • Utilizzare come pannello singolo o multiplo.
  • Design reattivo e facile da personalizzare.
  • Ogni pannello contiene un’icona di carattere impressionante, un’intestazione, un paragrafo e un collegamento per saperne di più o un pulsante.
  • Ogni colonna ha la stessa altezza anche se l’altezza del contenuto è diversa.

La creazione di un pannello delle icone è un processo in due fasi: prima definire il CSS e quindi aggiungere l’HTML.

Definizione degli stili per il widget del pannello delle icone

Passaggio 1: definizione di colonne e contenitore del pannello

Creiamo un widget con quattro colonne c1, c2, c3 e c4 di uguale altezza all’interno di un contenitore chiamato 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%; }

Usiamo l’attributo flex per mantenere fissa l’altezza del contenitore padre indipendentemente dall’altezza individuale delle quattro colonne figlio all’interno. Abbiamo usato il 20% di larghezza per ogni colonna per adattarsi alla larghezza del tema Weebly; puoi provare a personalizzare la larghezza in base al tuo tema e al numero di colonne di cui hai veramente bisogno.

Nota: tutti i browser moderni supportano l’attributo flex CSS. Tuttavia, i vecchi browser come Internet Explorer non lo supportano.

Passaggio 2: definizione dello sfondo della colonna

Ora che sono state definite le quattro colonne di uguale altezza, è il momento di definire il colore di sfondo per ogni colonna. Abbiamo utilizzato alcuni colori sicuri per il web, puoi cambiarli con qualsiasi colore di cui hai bisogno.

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

Passaggio 3: definizione dello stile per le icone fantastiche dei caratteri

Usiamo caratteri fantastici per le icone in modo che sia facile da usare e avrai un sacco di icone tra cui scegliere per le tue necessità. L’icona è definita come una casella quadrata con dimensioni 80px x 80px con qualche effetto al passaggio del mouse.

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

Step4 – Stile per elementi aggiuntivi

Di seguito è riportato lo stile per elementi aggiuntivi come intestazione (intestazione), paragrafo (para) e pulsante (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; }

Passaggio 5: aggiungere reattività al widget

Il passaggio finale nella definizione del CSS consiste nell’aggiungere la reattività utilizzando le query multimediali come di seguito:

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

Ora la parte CSS è completata e il CSS completo apparirà come di seguito:

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

Incolla il CSS completo nella sezione "Codice intestazione" della tua pagina Weebly.

Come aggiungere il widget del pannello delle icone in Weebly?

Aggiungi codice intestazione nella pagina

Definizione dell’HTML per il widget del pannello delle icone

Trascina e rilascia un elemento "Codice da incorporare" e aggiungi il codice HTML sottostante all’interno. Questo è per un singolo pannello di icone e l’icona "fa-home" viene utilizzata per mostrare l’icona di una casa. Dai un’occhiata all’elenco di riferimento delle icone fantastiche dei caratteri per scegliere le icone richieste. Sostituisci anche l’intestazione, il paragrafo e il # con i tuoi contenuti e link effettivi.

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

Di seguito è riportato il codice per due pannelli con altezza diversa: uno con un pulsante e l’altro con un collegamento di testo per saperne di più.

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

Nota: utilizzare lo stile in linea per la larghezza=100% per le colonne quando si desidera utilizzare uno o due pannelli insieme ad altri elementi posizionati accanto. Ciò garantisce che il pannello sia allineato all’intera larghezza e non si riduca alla larghezza definita della colonna nello stile. La larghezza effettiva del pannello e dell’elemento adiacente può essere regolata normalmente regolando la larghezza degli elementi nell’editor Weebly.

Di seguito è riportato il codice HTML completo per il widget del pannello delle icone a quattro colonne:

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

Il widget per impostazione predefinita ha colonne senza spazio tra di loro, puoi fornire il margine destro per creare uno spazio tra le colonne.

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

Come aggiungere il widget del pannello delle icone in Weebly?

Puoi utilizzare pannelli singoli, due, tre o quattro con diverse varianti.

Fonte di registrazione: 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