Site Web Wix à partir de zéro - Ajouter une bande


Dans ce tutoriel, nous continuerons à travailler sur notre site Web Wix que nous construisons à partir de zéro. Nous ajouterons notre première bande sur la page.

Vous pouvez considérer une bande dans l'éditeur Wix comme un élément div html qui s'étend sur la largeur de la page Web. Vous pouvez ajouter une image, une vidéo, du texte, une galerie ou d'autres éléments à la bande. Tout comme un div en html, tout ce qui est ajouté à l'intérieur de cette bande sera enfermé dans la bande et traité comme un élément.

Ajoutons notre première bande à la page et ajoutons une image d'arrière-plan et du texte à la bande. Enfin, nous allons définir les paramètres de l'effet de défilement.

  1. Cliquez sur l'icône Plus dans le menu de gauche et sélectionnez Supprimer dans la liste.

  2. Cliquez sur la bande Classic Black.

    Changeons la couleur en rose, qui est la couleur principale de notre image de fond.

  3. Cliquez avec le bouton droit sur la bande et choisissez Changer l'arrière-plan de la bande. Dans la fenêtre Strip Background, cliquez sur Settings.

  4. Cliquez sur la case de couleur pour ouvrir le sélecteur de couleurs. Cliquez sur Ajouter une couleur et saisissez # deb0bf ou le code couleur html de votre choix. Ferme la fenêtre.

Nous savons que nous voulons que la bande soit haute de 450 px. Si la barre d'outils n'est pas ouverte, faisons-le maintenant.

  1. Dans le menu supérieur de l'éditeur Wix, cliquez sur Outils, puis sur Barre d'outils.

  2. Sélectionnez la bande et définissez la hauteur sur 400 px dans la barre d'outils.

    Maintenant, nous pouvons ajouter notre image de fond.

  3. Cliquez avec le bouton droit sur la bande et choisissez Changer l'arrière-plan de la bande.

  4. Cliquez sur le bouton Image pour ouvrir le Media Manager. Sélectionnez votre image et cliquez sur Changer l'arrière-plan.

  5. Revenez à la fenêtre Strip Background et cliquez sur Settings.

    Ajustons la position de l'image dans la bande.

  6. Utilisez la grille de neuf carrés au bas de la fenêtre Réglage de l'image pour choisir la meilleure position de l'image. Par exemple, je voulais utiliser l'espace ouvert en haut à gauche de l'image pour une superposition de texte. J'ai donc utilisé le carré supérieur gauche sur la grille.

    Ajoutons l'effet de défilement Parallax.

  7. Dans la section Effets de défilement, sélectionnez l'option Parallax.

Enfin, nous pouvons ajouter du texte à la bande.

  1. Cliquez sur l'icône Plus et choisissez Texte. Dans le menu Texte, choisissez Grand en-tête.

  2. Faites glisser la zone de texte vers le coin supérieur gauche ou la position la mieux adaptée à votre conception. Vous devriez voir le message contextuel Attach to Strip.

  3. Remplacez le texte par défaut par votre propre texte.

Captures d'écran utilisées avec la permission de Wix.com, Inc.

Comment créer un site web WIX - 2019 (Mai 2022)



Tags Article: Site Web Wix à partir de zéro - Ajouter une bande, art numérique et design, ajouter une bande dans l'éditeur Wix