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

Come aggiungere il widget del pannello foto in Weebly?

4

Il pannello foto viene utilizzato per visualizzare un’immagine insieme a una piccola descrizione e un collegamento o pulsante di invito all’azione. Questo è un modo semplice per attirare l’attenzione dell’utente e portarlo alla pagina di destinazione. Invece di un singolo pannello, puoi anche utilizzare pannelli a pagina intera in più colonne come menu di un ristorante o per mostrare le destinazioni per un’agenzia di viaggi. In questo articolo spiegheremo come creare un widget per pannello fotografico singolo e utilizzarlo in più colonne sul tuo sito Weebly.

I widget del singolo pannello delle foto appariranno come sotto e puoi creare un ristorante o una galleria migliorando il singolo widget.

Come aggiungere il widget del pannello foto in Weebly?

Pannello fotografico singolo per Weebly

Creazione di un singolo widget pannello foto

Il pannello singolo può essere utilizzato indipendentemente come widget del pannello fotografico individuale. Se si desidera utilizzarlo in una colonna, è necessario posizionare un singolo pannello di foto accanto a qualsiasi altro elemento utilizzando l’elemento " Codice di incorporamento " sul proprio sito Weebly. Il pannello contiene un’immagine, un titolo, una descrizione e un pulsante di invito all’azione. Fondamentalmente hai bisogno di immagini, CSS e HTML per creare un pannello e il pannello delle foto apparirà accanto con piccole deviazioni in base al tuo tema Weebly.

Funzionalità del widget Pannello foto

  • Aggiungi come un singolo widget o in più colonne.
  • Realizzato con semplici CSS senza query.
  • Personalizza il colore e i caratteri secondo le tue esigenze.
  • Utilizzare per un invito all’azione o un widget a pagina intera come il menu del ristorante.
  • Reattivo completo che si adatta automaticamente alla larghezza dei dispositivi mobili.

Caricamento di immagini nel sito Weebly

Il primo passo è caricare le immagini richieste sul tuo sito Weebly in "Tema > Modifica HTML / CSS > Risorse > Carica file/i…". L’immagine caricata avrà il seguente link:

https://yoursite.com/files/theme/image.jpg

CSS per pannello foto singola

Per prima cosa creiamo un pannello contenitore con il colore di sfondo beige. Questo è il colore visualizzato nella parte inferiore del pannello e puoi cambiarlo in qualsiasi colore per adattarlo al tema del tuo sito.

/* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; }

Il contenitore avrà un’immagine in alto e il contenuto in basso. Definiamo l’altezza dell’immagine come 200 px insieme a qualche effetto hover.

/* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; }

Successivamente, definiamo il pulsante di invito all’azione con effetto hovering:

/* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; }

La parte finale del CSS consiste nel definire stili aggiuntivi per link, paragrafo e intestazione.

/* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; }

Il CSS completo per un singolo pannello apparirà sotto e aggiungerà il codice sotto “Pagine > Scegli la pagina che vuoi aggiungere al pannello > Impostazioni SEO > Codice intestazione" della tua pagina Weebly.

Come aggiungere il widget del pannello foto in Weebly?

Aggiungi codice intestazione nella pagina

<style> /* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } </style>

HTML per pannello foto singola

Una volta aggiunto il CSS, aggiungi il codice HTML sottostante all’interno di un elemento "Codice da incorporare". Assicurati di sostituire l’URL dell’immagine con il tuo.

<div class="panel_container"> <div> <img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif"> <h3 class="heading">Weebly Carbon Upgrade</h3> <p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Creazione di un widget pannello foto a pagina intera

Prendiamo un esempio di menu di un ristorante con quattro colonne e più righe di voci di menu. Il widget a pannello singolo sopra deve essere modificato per adattare i pannelli in un contenitore flessibile di uguale altezza con quattro colonne come c1, c2, c3 e c4 e tutti gli altri stili rimangono gli stessi. Di seguito è riportato il modo di esempio, è possibile creare più pannelli in una singola pagina.

Come aggiungere il widget del pannello foto in Weebly?

Widget pannello foto Weebly

Di seguito è riportato il CSS completo che puoi incollare nella sezione "Codice intestazione" della tua pagina Weebly:

<style> /* Photo Panel Container Definition */ .photo_panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; margin: 10px 10px 80px 10px; } .c1, .c2, .c3, .c4 { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } .c1, .c2, .c3 { margin-right: 15px; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } @media only screen and (max-device-width: 768px) { .photo_panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Di seguito è riportato l’HTML per il widget che ha due righe e contiene otto pannelli. Aggiungi il codice HTML sottostante all’interno di un elemento " Codice di incorporamento " sostituendo il contenuto fittizio e l’URL dell’immagine con il tuo.

<!-- First Row Contains 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Second Row Contains another 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->

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