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

Comment ajouter des boîtes de message d’information dans le site Weebly ?

7

Mettre en évidence les informations importantes dans un article aide à transmettre le message avec succès aux utilisateurs. En règle générale, vous pouvez utiliser des boîtes de message pour présenter des conseils, de l’aide, des avertissements, des alertes et de nombreux autres types d’informations. Des frameworks tels que Bootstrap offrent un composant d’alerte prédéfini pour l’ajout de ces boîtes de message d’information. De même, vous pouvez utiliser des plugins sur des systèmes de gestion de contenu comme WordPress. Sur Weebly, vous pouvez créer des boîtes de message d’information en utilisant un simple CSS. Dans cet article, nous expliquerons l’ajout d’une boîte de message d’information sur le site Weebly en fonction du composant d’alerte Bootstrap.

Boîtes de message d’information

Nous allons créer des boîtes de message avec deux styles différents.

  • Utiliser des icônes de police
  • Utilisation de petites images d’icônes

Les icônes de polices sont une bonne option si vous utilisez Font Awesome sur votre site. Sinon, vous pouvez choisir l’option image au lieu des icônes de police.

Fonctionnalité des boîtes de message d’information

Les boîtes de message d’information auront les caractéristiques suivantes :

  • Fabriqué avec CSS et alignement automatique entièrement réactif sur les appareils mobiles.
  • Les styles incluent la boîte de message pour les messages d’information, de réussite, d’avertissement, de danger, de conseils, d’aide et d’annonce. Vous pouvez également définir votre propre boîte de message personnalisée en fonction du code.
  • Ajoutez des boîtes de messages individuelles en fonction de vos besoins. Par exemple, lorsque vous souhaitez afficher une astuce, utilisez la « boîte de message d’astuce » et pour un avertissement, utilisez la « boîte de message d’avertissement ». Cela peut être contrôlé dans le code HTML collé dans l’élément « Embed Code ».
  • Les couleurs et les polices peuvent être personnalisées selon vos besoins.
  • La largeur de la zone de notification peut être étendue à toute la largeur de l’écran ou raccourcie pour s’adapter à la longueur du contenu.

1 boîte de message d’information avec des icônes de police

Vous trouverez ci-dessous à quoi ressembleront les boîtes contenant une boîte de couleur CSS et des icônes de police avant le texte.

Comment ajouter des boîtes de message d'information dans le site Weebly ?

La première étape pour créer ces boîtes d’informations consiste à lier les icônes CSS de police géniales à la section d’en-tête de votre site. Pour ce faire, ajoutez le code ci-dessous dans la section "Paramètres > SEO > Code d’en-tête" dans votre éditeur de site Weebly.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Comment ajouter des boîtes de message d'information dans le site Weebly ?

Ajouter un code d’en-tête au niveau du site Weebly

La deuxième étape consiste à ajouter le code CSS ci-dessous sous le fichier "main.less".

.webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; /* width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; */ } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-success { background-color: #2ecc71; } .webnots-success:before { content: "f00c"; margin-left: -2px; } .webnots-failure { background-color: #e74c3c; } .webnots-failure:before { content: "f00d"; } .webnots-warning { background-color: #e67e22; } .webnots-warning:before { content: "f12a"; margin-left: 5px; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; } .webnots-notice { background-color: #bea474; } .webnots-notice:before { content: "f0a1"; margin-left: -1px; }

Comment ajouter des boîtes de message d'information dans le site Weebly ?

Modification du fichier CSS principal dans Weebly

Une fois que vous avez ajouté le code CSS, accédez à la page sur laquelle vous souhaitez ajouter un message d’information. Copiez et collez le code HTML ci-dessous en faisant glisser un élément " Embed Code " :

<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div> <div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div> <div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div> <div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div> <div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div> <div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div> <div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>

Chaque balise < div >… </ div > couvre différents types de messages. Par exemple, pour ajouter une case de réussite, ajoutez simplement le code HTML ci-dessous :

<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

Nous avons utilisé la police Awesome 4.7 sur cet exemple. Vous pouvez utiliser la version 5 ou 6 en remplaçant le CSS et les classes correspondantes dans le HTML.

2 Boîte de message d’information avec des images d’icônes

Le deuxième style de boîtes de message utilise de petites images au lieu d’icônes de police et ressemblera à ci-dessous :

Comment ajouter des boîtes de message d'information dans le site Weebly ?

Ce widget a besoin des quatre images d’icônes suivantes, faites un clic droit et téléchargez les images sur votre PC local.

Téléchargez les images sous «Thème > Modifier HTML / CSS > Éléments > Télécharger le(s) fichier(s)…» de votre site Weebly. Le chemin du fichier d’une image Weebly téléchargée sera comme " https://your-site-name.com/files/theme/info.png ". Alternativement, vous pouvez cliquer avec le bouton droit sur le fichier téléchargé et obtenir le chemin de fichier correct de cette image.

Une fois que vous avez le chemin de fichier correct des images téléchargées, ajoutez le code CSS ci-dessous dans votre fichier "main.less". N’oubliez pas de mettre à jour les URL des images avec les URL des images de votre site Weebly.

.info_alert { background-image: url(https://img.webnots.com/2015/10/info.png); border: 1px solid #CCCCCC; background-color: #E0E0E0; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; } .warning_alert { background-image: url(https://img.webnots.com/2015/10/warning.png); border: 1px solid #FE7736; background-color: #FFBD59; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .danger_alert { background-image: url(https://img.webnots.com/2015/10/danger.png); border: 1px solid #FF0F0F; background-color: #FF8080; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .success_alert { background-image: url(https://img.webnots.com/2015/10/success.png); border: 1px solid #83CD52; background-color: #8DE182; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: #060; }

Accédez à la page sur laquelle vous souhaitez ajouter la boîte de message et insérez le code HTML ci-dessous dans un élément « Code d’intégration ».

<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p> <p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p> <p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p> <p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>

Si vous souhaitez n’utiliser qu’une seule case, utilisez le code correspondant dans les balises < p >…</ p >.

Remarque : vous avez deux autres options, au lieu d’ajouter du code CSS dans la section d’en-tête des « Paramètres » du site. L’une consiste à insérer le code sous le fichier "main.less" et l’autre consiste à ajouter le code sous la section d’en-tête de la page en question pour qu’il soit effectif uniquement sur cette page. Dans les deux scénarios, assurez-vous d’ajouter le code dans la balise ….

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