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 d’icônes dans Weebly ?

1

Les panneaux d’icônes vous aident à présenter le contenu de manière très attrayante. Vous pouvez généralement l’utiliser sur une page de destination pour afficher différents types de services fournis sur le site. Un seul panneau peut fonctionner comme une boîte d’appel à l’action et vous pouvez afficher plusieurs panneaux en les plaçant à côté. Bien que Weebly propose une boîte d’appel en tant qu’application, un panneau d’icônes avec un style de colonne égal créera un aspect plus attrayant.

Vous trouverez ci-dessous le widget du panneau d’icônes dont nous parlons et lisez la suite pour créer un tel panneau pour votre site Weebly.

Fonctionnalités du panneau d’icônes

  • Vous pouvez ajouter n’importe quel nombre de panneaux en ajoutant simplement un morceau de code HTML.
  • Utiliser comme un seul ou plusieurs panneaux.
  • Conception réactive et facile à personnaliser.
  • Chaque panneau contient une icône de police géniale, un titre, un paragraphe et un lien en savoir plus ou un bouton.
  • Chaque colonne est de hauteur égale même si la hauteur du contenu est différente.

La création d’un panneau d’icônes est un processus en deux étapes : définissez d’abord le CSS, puis ajoutez le HTML.

Définition des styles pour le widget du panneau d’icônes

Étape 1 – Définition des colonnes et du conteneur de panneaux

Créons un widget avec quatre colonnes c1, c2, c3 et c4 ayant la même hauteur dans un conteneur appelé 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%; }

Nous utilisons l’attribut flex pour maintenir la hauteur du conteneur parent fixe quelle que soit la hauteur individuelle des quatre colonnes enfants à l’intérieur. Nous avons utilisé 20 % de largeur pour chaque colonne afin de s’adapter à la largeur du thème Weebly ; vous pouvez essayer de personnaliser la largeur en fonction de votre thème et du nombre de colonnes dont vous avez vraiment besoin.

Remarque : tous les navigateurs modernes prennent en charge l’attribut CSS flex. Cependant, les anciens navigateurs comme Internet Explorer ne le prennent pas en charge.

Étape 2 – Définir l’arrière-plan de la colonne

Maintenant que les quatre colonnes de hauteur égale sont définies, il est temps de définir la couleur d’arrière-plan pour chaque colonne. Nous avons utilisé des couleurs sécurisées pour le Web, vous pouvez changer la couleur dont vous avez besoin.

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

Étape 3 – Définir le style des icônes de police géniales

Nous utilisons une police géniale pour les icônes afin qu’elle soit facile à utiliser et que vous ayez beaucoup d’icônes à choisir selon vos besoins. L’icône est définie comme une boîte carrée avec une taille de 80px x 80px avec un effet de survol.

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

Étape 4 – Style pour les éléments supplémentaires

Vous trouverez ci-dessous le style d’éléments supplémentaires tels que le titre (titre), le paragraphe (para) et le bouton (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; }

Étape 5 – Ajout de réactivité au widget

La dernière étape de la définition du CSS consiste à ajouter de la réactivité à l’aide des requêtes média comme ci-dessous :

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

Maintenant, la partie CSS est terminée et le CSS complet ressemblera à ci-dessous :

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

Collez le CSS complet dans la section "Header Code" de votre page Weebly.

Comment ajouter un widget de panneau d'icônes dans Weebly ?

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

Définition du code HTML pour le widget du panneau d’icônes

Faites glisser et déposez un élément « Code d’intégration » et ajoutez le code HTML ci-dessous à l’intérieur. Ceci est pour un panneau d’icône unique et l’icône "fa-home" est utilisée pour afficher une icône d’accueil. Consultez la liste de référence des icônes de police géniales pour choisir les icônes requises. Remplacez également le titre, le paragraphe et le # par votre contenu et votre lien réels.

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

Vous trouverez ci-dessous le code pour deux panneaux de hauteur différente – l’un avec un bouton et l’autre avec un lien texte en savoir plus.

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

Remarque :utilisez le style en ligne pour la largeur = 100 % pour les colonnes lorsque vous souhaitez utiliser un ou deux panneaux avec d’autres éléments placés à côté. Cela garantit que le panneau est aligné sur toute la largeur et ne rétrécit pas à la largeur définie de la colonne dans le style. La largeur réelle du panneau et de l’élément adjacent peut être ajustée normalement en ajustant la largeur des éléments sur l’éditeur Weebly.

Vous trouverez ci-dessous le code HTML complet du widget du panneau d’icônes à quatre colonnes :

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

Le widget par défaut a des colonnes sans espace entre elles, vous pouvez fournir une marge de droite pour créer un espace entre les colonnes.

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

Comment ajouter un widget de panneau d'icônes dans Weebly ?

Vous pouvez utiliser un, deux, trois ou quatre panneaux avec différentes variantes.

Source d’enregistrement: 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