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

Widget con 4 icone fantastiche per il sito Weebly

10

Il widget Icone aiuta a creare un pannello di invito all’azione accattivante e a visualizzare qualsiasi tipo di informazione. Poiché ci sono enormi set di icone disponibili gratuitamente da varie risorse, è facile mostrare le informazioni necessarie utilizzando un’unica icona attraente invece di descrivere con un testo più lungo. Soprattutto le icone fantastiche dei caratteri sono un’ottima alternativa alle immagini in questo contesto. In questo articolo esploriamo il processo di creazione di widget di icone fantastiche per i caratteri per il sito Weebly.

Di seguito è riportato il widget (stile 1) con 4 icone e puoi aggiungere o rimuovere le icone di cui hai bisogno.

Mostriamo altri tre stili con variazioni:

Fare clic sul pulsante di download sottostante per ottenere il codice completo per tutti gli stili del widget del pannello delle icone. E continua a leggere per sapere come aggiungere questi widget sul tuo sito Weebly.

Creazione di widget di icone per il sito Weebly

Facciamo un esempio di creazione di un widget "Contattaci" con le seguenti quattro opzioni:

  • Invia una email
  • Chiamaci
  • Chatta adesso
  • Visita il forum

Questo è un widget CSS puro in cui convertiamo un semplice elenco in un widget di icone utilizzando icone fantastiche di font. Ogni widget icone contiene le seguenti parti:

  • Contenitore del pannello (contiene tutti e 4 gli elementi)
  • Colonna: contiene un singolo elemento
  • Articolo – contenente un’icona e un’intestazione
  • Icona – icona del carattere fantastico
  • Intestazione H2 che per impostazione predefinita utilizza lo stile dell’elemento titolo Weebly.

Passaggio 1 – Definizione degli stili per il widget Icone

Per prima cosa definiamo la larghezza della colonna come 21% in modo che 4 elementi possano adattarsi alla larghezza del tuo tema Weebly. Abbiamo rimosso i punti elenco negli elenchi con la proprietà "list-style:none" e ogni elemento dell’elenco avrà un margine (in basso e a sinistra) con il movimento a sinistra. Puoi modificare tutti questi stili per adattarli al tuo layout. Nota che abbiamo usato il margine 20px per creare spazio tra gli elementi della lista.

/* Individual Column */ .column { display:inline-block; float:left; margin:0 0 20px 20px; list-style:none; width:21%; }

Successivamente creiamo pannelli con un colore di sfondo comune come "verde chiaro" insieme agli stili per gli elementi dell’elenco (ul e li). Usiamo "border-radius:10px;" per creare angoli arrotondati per i pannelli, rimuovere questa riga se si desidera visualizzare le icone quadrate.

/* Panel */ #panel { position:relative; z-index:1; } #panel ul li { text-align:center; border:1px solid; } #panel ul li *{ margin:0; padding:0; } #panel ul li .icon { margin-bottom:28px; } #panel ul li article { display:block; padding:30px 0 15px 0; } #panel ul li { color:#464646; background-color: lightgreen; border-color:#D7D7D7; border-radius: 10px; } #panel ul li a { color:inherit; } #panel ul li:hover a { color:#51C4BE; }

Il prossimo passo è definire gli stili per le fantastiche icone dei caratteri come di seguito. Abbiamo usato la larghezza e l’altezza dei pulsanti dell’icona come 130 px, il raggio del bordo come 50% per renderli circolari e la dimensione dell’icona come 46 px. È possibile rimuovere il raggio del bordo per rendere le icone in formato quadrato e aumentare/diminuire la dimensione dell’icona modificando l’attributo della dimensione del carattere.

/* Button */ .icon { display:inline-block; } .icon i { position:relative; width:130px; height:130px; line-height:130px; z-index:1; } .icon i, .icon i::after { border-radius:50%; } .icon .fa { font-size:46px; } .icon i::after { position:absolute; top:15px; right:15px; bottom:15px; left:15px; border:1px solid; content:""; z-index:-1; } .icon i { color:#FFFFFF; background-color:#51C4BE;/* IE9 Fallback */ background:linear-gradient(to top right, #256D6A, #51C4BE); } .icon i::after { border-color:rgba(255,255,255,.5); } .icon:hover i::after { background-color:#51C4BE; } #panel ul li:hover .icon i { text-shadow:0 1px 0 #CCCCCC,0 2px 0 #333333,0 1px 0 #BBBBBB,0 4px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25) } #panel ul li:nth-child(1):hover .icon i::after { background-color:#F9CD36; /* Yellow */ } #panel ul li:nth-child(2):hover .icon i::after { background-color:#FF7659; /* Orange */ } #panel ul li:nth-child(3):hover .icon i::after { background-color:#9771BD;/* Purple */ } #panel ul li:nth-child(4):hover .icon i::after { background-color:#F36174;/* Red */ }

I colori giallo, arancione, viola e rosso vengono utilizzati per il colore del passaggio del mouse delle icone che può anche essere modificato in base alle proprie necessità. L’ultimo passaggio nella parte CSS del widget consiste nell’aggiungere query multimediali per rendere il widget reattivo sui dispositivi mobili.

/* Media Queries */ @media screen and (max-width:750px){ #panel ul li { display:inline-block; float:left; width:48.46625766871166%; margin:0 3.06748466257669% 15px 0;} #panel ul li:nth-child(even){ margin-right:0; clear:right; } } @media screen and (max-width: 450px){ #panel ul li { display: block; float: none; width: 95%; } }

Passaggio 2 – Aggiunta di CSS nel sito Weebly

Puoi scaricare il sorgente completo del file CSS denominato "icons_style.css" e caricarlo sul tuo sito Weebly in "Tema > Modifica HTML / CSS > Risorse" (puoi anche caricare il file nella sezione). Il percorso del file caricato del tuo file CSS sarà " http://yoursite.com/files/theme/icons_style.css ". Oltre a questo file CSS abbiamo anche bisogno di un fantastico file CSS per i font ed è necessario collegare entrambi i file nella pagina richiesta.

Widget con 4 icone fantastiche per il sito Weebly

Carica file nell’editor di codice Weebly

Ora vai alla pagina in cui desideri aggiungere il widget e collega i due file CSS come di seguito nella sezione "Pagine> Scegli la tua pagina> Impostazioni SEO > Codice intestazione".

Widget con 4 icone fantastiche per il sito Weebly

Aggiungi codice intestazione nella pagina

<link href="/files/theme/icons_style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Passaggio 3 – Aggiunta di HTML

L’ultimo passaggio consiste nell’aggiungere il codice HTML richiesto all’interno dell’elemento " Embed Code " sulla tua pagina Weebly. L’esempio sopra è trattato in "Icons Widget 1.html" che puoi ottenere dai file sorgente scaricati. Fare clic con il tasto destro del mouse e copiare il codice HTML sorgente e incollarlo all’interno dell’elemento "Embed Code". Non dimenticare di rimuovere i primi due collegamenti CSS dal codice sorgente HTML che vengono utilizzati a scopo dimostrativo. Il codice HTML dovrebbe essere simile al seguente:

<div id="panel"> <ul> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-envelope"></i></a> <h2><a href="#">Send Email</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-phone"></i></a> <h2><a href="#">Call Us</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-comments"></i></a> <h2><a href="#">Chat Now</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-group"></i></a> <h2><a href="#">Visit Forum</a></h2> </article> </li> </ul> </div>

Widget per la personalizzazione delle icone

Tutti gli stili richiesti sono definiti nel file "icons_style.css" che puoi personalizzare secondo le tue necessità. Abbiamo aggiunto altri tre esempi nel download di origine in cui abbiamo utilizzato gli stili in linea per modificare gli elementi richiesti mantenendo "icons_style.css" così com’è.

  • Usa Icon Widget 2.html per sfondi diversi per ogni pannello.
  • Prova Icon Widget 3.html per i pannelli di sfondo bianco con diverse icone di colore sfumato.
  • Usa Icon Widget 4.html con icone social senza bordo del pannello.

Puoi cambiare il testo / le icone in HTML e fare riferimento all’elenco delle icone fantastiche dei caratteri per scegliere l’icona di cui hai bisogno.

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