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

Comment ajouter un curseur d’image d’accordéon dans le site Weebly ?

22

Weebly propose un élément de diaporama d’images traditionnel pour ajouter des curseurs à votre site. Malheureusement, cela est loin d’être plus proche des diaporamas modernes proposés par des fournisseurs ou des plugins tiers. Vous pouvez créer de superbes curseurs de style accordéon personnalisés faits uniquement avec CSS. Dans cet article, nous expliquerons comment créer un curseur d’image accordéon CSS dans le site Weebly

Curseur d’image accordéon Weebly

Voici à quoi ressemblera le curseur élégant sur votre site Weebly.

Comment ajouter un curseur d'image d'accordéon dans le site Weebly ?

Curseur d’accordéon CSS

Comment ajouter un curseur d’image accordéon dans Weebly?

Maintenant que vous avez vu le curseur et si cela vous convient, voici une instruction étape par étape sur l’ajout du curseur sur votre site. Le processus consiste en trois étapes simples :

  • Téléchargement d’images pour le curseur
  • Ajout de code CSS au niveau d’une page ou d’un site
  • Ajout de code HTML à l’aide de l’élément de code intégré

Étape 1 – Téléchargement d’images pour le curseur d’accordéon

Préparez toutes vos images avec la taille requise. Dans cet exemple, nous avons utilisé des images avec une largeur = 640 px. Téléchargez toutes les images sur votre site sous "Thème > Modifier HTML / CSS > Actifs > Télécharger le(s) fichier(s)…".

Comment ajouter un curseur d'image d'accordéon dans le site Weebly ?

Télécharger des images dans l’éditeur de code Weebly

Vous devez conserver les URL des images téléchargées qui doivent être utilisées à l’étape 3. L’URL d’une image téléchargée ressemblera à :

https://your-site-name.com/files/theme/image-name.jpg

Alternativement, vous pouvez cliquer avec le bouton droit sur l’image et obtenir l’URL qui devrait ressembler à ci-dessous :

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Comment ajouter un curseur d'image d'accordéon dans le site Weebly ?

Obtenir l’URL de l’image téléchargée

Après avoir téléchargé toutes vos images, cliquez sur le bouton « Enregistrer » et fournissez un nom personnalisé pour votre thème.

Étape 2 – Ajout du code CSS

Si vous souhaitez ajouter le curseur uniquement sur des pages particulières, ajoutez le code CSS ci-dessous dans la section "Pages> Choisissez la page> Paramètres SEO> Code d’en-tête" des pages requises.

Comment ajouter un curseur d'image d'accordéon dans le site Weebly ?

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

Si vous souhaitez ajouter le curseur sur plusieurs pages, nous vous recommandons de l’ajouter dans le CSS principal sous «Thème > Modifier HTML / CSS > Style > main.less ». Vous pouvez également ajouter le code dans la section "Paramètres > SEO > Code d’en-tête".

Comment ajouter un curseur d'image d'accordéon dans le site Weebly ?

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

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

Vous pouvez personnaliser l’un des styles selon vos besoins.

Étape 3 – Ajout de code HTML

La dernière étape consiste à ajouter le code HTML ci-dessous du curseur en faisant glisser et en déposant un élément de code d’intégration sur la zone de contenu d’une page requise. N’oubliez pas de remplacer les liens d’image par vos propres liens de l’étape 1.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Remarque : après avoir ajouté le code HTML, vous pouvez voir les images sont répertoriées les unes sous les autres dans l’ éditeur Weebly. C’est bien car les effets CSS ne sont pas appliqués dans la page, publiez la page pour voir le curseur réel.

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