TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter un widget de panneau photo dans Weebly ?

9

Le panneau photo est utilisé pour afficher une image avec une petite description et un lien ou un bouton d’appel à l’action. C’est un moyen facile d’attirer l’attention des utilisateurs et de les conduire vers la page de destination. Au lieu d’un panneau individuel, vous pouvez également utiliser des panneaux pleine page dans plusieurs colonnes comme menu de restaurant ou pour présenter des destinations pour une agence de voyages. Dans cet article, nous expliquerons comment créer un widget de panneau photo unique et l’utiliser dans plusieurs colonnes sur votre site Weebly.

Les widgets du panneau photo unique ressembleront à ci-dessous et vous pouvez créer un restaurant ou une galerie en améliorant le widget unique.

Comment ajouter un widget de panneau photo dans Weebly ?

Panneau photo unique pour Weebly

Création d’un widget de panneau photo unique

Le panneau unique peut être utilisé indépendamment en tant que widget de panneau photo individuel. Si vous souhaitez l’utiliser dans une colonne, un panneau de photo unique doit être placé à côté de tout autre élément à l’aide de l’élément " Code d’intégration " sur votre site Weebly. Le panneau contient une image, un titre, une description et un bouton d’appel à l’action. Fondamentalement, vous avez besoin d’images, de CSS et de HTML pour créer un panneau et le panneau photo ressemblera à côté avec des écarts mineurs en fonction de votre thème Weebly.

Caractéristiques du widget Panneau photo

  • Ajoutez comme un seul widget ou dans plusieurs colonnes.
  • Fabriqué avec du CSS simple sans requête.
  • Personnalisez la couleur et les polices selon vos besoins.
  • À utiliser pour un appel à l’action ou un widget pleine page comme le menu du restaurant.
  • Entièrement réactif s’adaptant automatiquement à la largeur des appareils mobiles.

Télécharger des images sur le site Weebly

La première étape consiste à télécharger les images requises sur votre site Weebly sous «Thème > Modifier HTML / CSS > Éléments > Télécharger le(s) fichier(s)… ». L’image téléchargée aura le lien suivant :

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

CSS pour panneau photo unique

Nous créons d’abord un panneau de conteneur avec la couleur de fond beige. Il s’agit de la couleur affichée dans la partie inférieure du panneau et vous pouvez la changer pour n’importe quelle couleur en fonction du thème de votre site.

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

Le conteneur aura une image en haut et le contenu en bas. Définissons la hauteur de l’image comme 200px avec un effet de survol.

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

Ensuite, nous définissons le bouton d’appel à l’action avec effet de survol :

/* 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 dernière partie de CSS consiste à définir des styles supplémentaires pour le lien, le paragraphe et le titre.

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

Le CSS complet pour un seul panneau apparaîtra ci-dessous et ajoutera le code sous « Pages > Choisissez la page que vous souhaitez ajouter au panneau > Paramètres de référencement > Code d’en-tête » de votre page Weebly.

Comment ajouter un widget de panneau photo dans Weebly ?

Ajouter un code d’en-tête dans la page

<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 pour panneau photo unique

Une fois le CSS ajouté, ajoutez le code HTML ci-dessous dans un élément « Embed Code ». Assurez-vous de remplacer l’URL de l’image par la vôtre.

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

Création d’un widget de panneau photo pleine page

Prenons l’exemple d’un menu de restaurant avec quatre colonnes et plusieurs rangées d’éléments de menu. Le widget à panneau unique ci-dessus doit être modifié pour s’adapter aux panneaux dans un conteneur flexible de hauteur égale avec quatre colonnes comme c1, c2, c3 et c4 et tous les autres styles restent les mêmes. Vous trouverez ci-dessous l’exemple de manière dont vous pouvez créer plusieurs panneaux sur une seule page.

Comment ajouter un widget de panneau photo dans Weebly ?

Widget de panneau photo Weebly

Vous trouverez ci-dessous le CSS complet que vous pouvez coller sous la section « Header Code » de votre page 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>

Ci-dessous, le code HTML du widget comportant deux lignes contient huit panneaux. Ajoutez le code HTML ci-dessous dans un élément " Embed Code " en remplaçant le contenu factice et l’URL de l’image par les vôtres.

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

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails