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

Comment créer un diaporama d’en-tête dans un site gratuit de Weebly ?

12

Le diaporama d’en-tête est une fonctionnalité merveilleuse qui donne un aspect professionnel à votre site. Il s’agit d’une fonctionnalité professionnelle de Weebly et disponible uniquement pour les thèmes non réactifs. Les utilisateurs gratuits peuvent également utiliser d’autres méthodes pour modifier HTML/CSS et y parvenir. Dans cet article, nous expliquons comment ajouter un diaporama d’en-tête Nivo dans votre site gratuit Weebly.

Nivo est un curseur jQuery populaire et nous avons un widget gratuit pour ajouter un diaporama dans la zone de contenu. Ici, nous utiliserons le même widget de curseur Nivo avec des modifications mineures pour l’ajouter dans la zone d’en-tête des thèmes Weebly réactifs. Vous pouvez voir les quatre styles différents de démo en cliquant sur les boutons ci-dessous :

Dans cet exemple, nous avons utilisé quatre images. La deuxième image (up.jpg) est liée à une page Web et a une simple légende de texte. La quatrième image (nemo.jpg) a une légende de texte avec un lien hypertexte.

Étape 1 – Prêt avec vos images

Les démos ci-dessus utilisent le thème Weebly "Ace Soccer – Birdseye" et les images sont utilisées avec une taille de 618 x 246 px. Nous vous recommandons d’utiliser des images à plus haute résolution avec un rapport largeur/hauteur similaire pour une meilleure qualité.

Étape 2 – Télécharger et télécharger des fichiers de curseur

Téléchargez tous les fichiers de curseur requis. Connectez-vous à votre site Weebly et accédez à la section «Thème > Modifier HTML / CSS > Actifs ». Créez un nouveau dossier appelé «nivo ».

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Création d’un nouveau dossier dans l’éditeur de code Weebly

Téléchargez tous les fichiers de curseur dans le dossier « nivo ». N’oubliez pas qu’il y a quatre images de démonstration dans le fichier d’archive, vous pouvez toujours remplacer les images par vos propres images.

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Télécharger des fichiers dans Weebly

Cliquez sur le bouton + en regard de l’onglet « Type d’en-tête » et créez un nouveau type d’en-tête appelé « Nivo-Bar ». Nous souhaitons ajouter le diaporama d’en-tête Nivo avec le thème Bar dans ce type d’en-tête.

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Création d’un nouveau type d’en-tête

Copiez tout le contenu de "no-header.html" et collez-le dans le type d’en-tête "Nivo-Bar.html".

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Nouveau type d’en-tête pour le diaporama

Il y a trois parties à ajouter dans la mise en page "Nivo-Bar.html" – CSS, Scripts et HTML. Insérez le CSS ci-dessous dans la section head de la mise en page.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Cela devrait ressembler à ci-dessous dans l’éditeur :

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Insertion de CSS dans le type d’en-tête

Insérez les scripts ci-dessous juste avant la fermeture de la balise body.

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Cela devrait ressembler à ci-dessous dans l’éditeur :

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Insertion de scripts dans le type d’en-tête

La dernière partie consiste à insérer le code HTML ci-dessous juste au-dessus de la section "main-wrap". Assurez-vous de remplacer les URL de l’image et du lien hypertexte par les vôtres.

<div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Cela devrait ressembler à ci-dessous dans l’éditeur :

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Insérer du HTML dans le type d’en-tête

Le code final du type d’en-tête "Nivo-Bar.html" devrait être comme ci-dessous. N’oubliez pas qu’il s’agit d’un site gratuit de Weebly et que le thème que nous avons utilisé est "Ace Soccer – Birdseye".

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> </head> <body class='no-header-page page-has-banner wsite-theme-dark'> <div class="wrapper"> <div class="birdseye-header"> <div class="nav-wrap"> <div class="container"> <div class="logo">{logo}</div> <div class="nav desktop-nav">{menu}</div> <label class="hamburger"><span></span></label> </div> </div> </div> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <div class="main-wrap"> {{#sections}} <div class="container">{content}</div> {{/sections}} </div> <div class="footer-wrap"> <div class="container"> <div class="footer">{footer}</div> </div><!-- end container --> </div><!-- end footer-wrap --> </div><!-- /.wrapper --> <div id="navMobile" class="nav mobile-nav"> <label class="hamburger"><span></span></label> {menu} </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script> <script type="text/javascript" src="/files/theme/plugins.js"></script> <script type="text/javascript" src="/files/theme/custom.js"></script> </body> </html>

Enregistrez les modifications et publiez votre site.

Lorsque vous souhaitez afficher le diaporama d’en-tête sur une page, choisissez le type d’en-tête "Nivo-Bar" sous l’onglet "Pages" pour cette page spécifique.

Comment créer un diaporama d'en-tête dans un site gratuit de Weebly ?

Choix du type d’en-tête pour une page spécifique

Le diaporama est proposé avec 4 thèmes différents et 12 effets de transition d’image. Le thème peut être modifié en changeant la classe CSS dans le code HTML. Dans l’exemple ci-dessus, nous avons un thème de barre utilisateur avec la classe CSS "theme-bar", vous pouvez également utiliser "theme-default", "theme-dark" ou "theme-light". Vous pouvez également créer quatre types d’en-tête différents et choisir le style de thème requis pour différentes pages.

Par défaut, un effet de transition aléatoire sera appliqué à chaque image. Vous pouvez mentionner le type de transition spécifique pour chaque image en utilisant la fonction "transition de données" dans le code HTML. Vous trouverez ci-dessous un exemple de code HTML utilisant un effet de transition différent pour chaque image avec le thème par défaut.

<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Vous pouvez lire les options de personnalisation complètes pour modifier l’effet de transition, le thème, la vitesse d’animation, les commandes de navigation et l’ajout de vignettes.

Vous recherchez un curseur de style accordéon comme indiqué ci-dessous ? Apprenez à ajouter un curseur accordéon à votre site Weebly.

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