Utilisez les boutons de défilement animés pour concevoir une disposition Divi en plein écran unique

Vue de l’image de fond: taille réelle Dans l’onglet conception, changez la disposition en orientation centrale et sélectionnez pour l’afficher en plein écran.
Direction du texte et du logo: création centrale plein écran: Oui Colorez votre titre afin que vous puissiez lire le texte plus facilement. Couleur de fond superposée: rgba (10,47,94,0,8) Par conséquent, le texte du titre du dessin ou modèle, Texte de contenu no 1 et boutons avec les paramètres suivants: police de titre: Poppins poids de la police de titre: demi – gras taille du texte de titre: 4vw hauteur de la ligne de titre: 1.2emcontent Character: Karla poids de la police de contenu: taille normale du texte de contenu: 16px hauteur de la ligne de contenu: 1.5em
Utiliser un style personnalisé pour le bouton 1: s button 1 taille du texte: 18px button Background color 1: # 4daaf2 button 1 Border color: # 4daaf2 radius Border button 1: 100 Px button Character 1: Karla button 1 Weight: bold Cela s’appliquera à notre titre complet. Commencez à vous amuser! Créez une section de bouton de défilement personnalisée pour ce bouton de défilement et je veux qu’il soit rincé sur le côté gauche de la page. Ajoutez ensuite une ligne et trois colonnes à votre section. Ensuite, ajoutez un module bouton dans la colonne de gauche. Mettre à jour les paramètres du module bouton comme suit: texte du bouton: plus d’informations URL du bouton: # deux URL # deux seront utilisées comme liens d’ancrage vers le Haut de la section suivante, qui contiendra l’ID CSS correspondant \
FFFFFF background Gradient button Right: # dddddd gradient direction: 90 deg start position: 70% end position: 0%
Largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 0px caractère du bouton: Karla poids du bouton: gras icône du bouton: [flèche vers le bas] afficher uniquement l’icône lorsque vous passez le bouton: pas de remplissage personnalisé: 1,5em en haut, 1,5em en bas, 30% animation à gauche: direction de l’animation coulissante: vers le haut dans l’onglet avancé, Ajoutez le CSS personnalisé suivant à la zone d’entrée de l’élément principal: afficher: bloc! Important
Cela permet au bouton d’occuper toute la largeur de la colonne. Ensuite, ajoutez le CSS suivant à la zone d’entrée suivante:
Position: absolue; Droite: 12%;
Ceci place l’icône flèche à droite du bouton. Enregistrez vos paramètres. Maintenant, nous devons personnaliser le réglage de la Section pour que les boutons apparaissent sur toute la largeur ci – dessus et obtenir l’espacement correct. Mettre à jour les paramètres de la section suivante: couleur de fond: rgba (255255255,0) Marge personnalisée: – 112 Px remplissage personnalisé en haut: 0px en haut 0px en bas Ajuster l’espacement des lignes maintenant, nous devons également ajuster l’espacement des lignes. Mettre à jour les paramètres de ligne suivants.
Faire cette ligne pleine largeur: s utiliser la largeur de marge personnalisée: s largeur de marge: 1 remplissage personnalisé: 0px en haut, 0px en bas Regardez la page en direct maintenant. Lorsque vous chargez une page, vous verrez un bouton contextuel en bas à gauche du titre plein écran. Créer la section 3: boîte de menu et contenu de premier plan maintenant que nous avons des boutons de défilement, nous avons ajouté une autre section pour créer une section de défilement unique. Crée une section générale avec une structure de colonne d’un tiers à deux tiers. Qu
Cette structure de colonne est importante parce qu’elle nous permet de créer une colonne de gauche de la même taille que la colonne juste au – dessus. Avant de commencer à ajouter un module, nous mettons d’abord à jour les paramètres de cette section avec la couleur de fond: # eaedf2custom fill: 0px top, 0px Bottom dans l’onglet avancé, ajoutez l’ID CSS personnalisé \
Dans l’onglet contenu, Rafraîchissez la couleur de fond de la colonne 1 à # FFFFFF. Ceci servira de fond à la boîte de menu sous le bouton. Puis mettre à jour le remplissage suivant pour la colonne: remplissage personnalisé: 10% remplissage personnalisé inférieur colonne 2: 10% en haut, 10% à gauche, 6% à droite Nous sommes maintenant prêts à ajouter le module barre latérale à la colonne de gauche. Mais avant cela, vous devez créer un menu personnalisé. Pour des raisons de temps, je vais vous montrer comment créer un menu. Voici: Allez à apparence > menu cliquez sur créer un nouveau menu ajouter un titre de menu cliquez sur le bouton créer un menu pour sélectionner des pages, des messages, etc. À inclure dans le menu. Ou créer un lien personnalisé. Organiser la structure du menu enregistrer le menu Créer un widget de menu personnalisé suivez ces étapes pour créer un widget de menu de navigation afin que vous puissiez l’ajouter à notre page via Visual Builder. Allez à apparence > Widget créer une nouvelle zone de Widget en entrant un nom de Widget, puis cliquez sur le bouton créer un widget drag dans le menu de navigation pour le faire glisser dans la nouvelle zone de Widget que vous avez créée. Ouvrir les paramètres du Widget
Sélectionnez ensuite le menu que vous venez de créer. Cliquez sur Enregistrer Maintenant, nous pouvons retourner à la page et distribuer Visual Builder. Ajouter un module de barre latérale avec un nouveau menu dans la colonne de gauche en bas, ajouter un module de barre latérale. Mettre à jour la barre latérale pour inclure la zone Widget que vous venez de créer: Module de barre latérale de conception vous pouvez maintenant faire correspondre la conception du lien de menu à la mise en page en mettant à jour les paramètres de conception suivants: afficher le séparateur de bordure: aucun caractère de corps: Karla caractère de corps: texte gras couleur du corps: # 0a2f5e taille du corps: 24 Px (bureau), 20 Px (tablette) hauteur de la ligne du corps: 2.3 rembourrage personnalisé: 20 Px en haut, 10% en bas, 30% à gauche 30% rembourrage aide à s’aligner sur le texte du bouton qui a également 30% rembourrage en haut. Ombre du cadre: [voir capture d’écran] position horizontale de l’ombre du cadre: 0px position verticale de l’ombre du cadre: 0px intensité du cadre flou: 0px force de diffusion de l’ombre du cadre: 1px couleur de l’ombre: \ # f1f1f1 il s’agit d’une méthode créative pour ajouter une bordure à l’extérieur du cadre et faire défiler les boutons et Boîte de menu. Ajoutez du contenu dans la colonne de droite des deux tiers de la colonne de droite de cette section, et nous ajouterons du contenu pour vous montrer comment utiliser cette mise en page sur le site. Tout d’abord, ajoutez un module séparateur avec les paramètres suivants: Couleur: # 0a2f5e emplacement du séparateur: centre vertical poids du séparateur: 2px hauteur: 18px largeur: 100 Px sous le module séparateur, ajoutez un module texte avec: 01. À propos Puis mettre à jour les paramètres de conception comme suit: titre 2 caractères: Poppins titre texte couleur 2: # 0a2f5e titre 2 dimensions
Tous les modules de la colonne de droite mettent à jour le contenu de la colonne de gauche. Ensuite, ajoutez l’image dans la colonne de droite. C’est le résultat final… Changer la position du bouton de défilement pour changer la position du bouton, il suffit de le faire glisser dans l’une des trois colonnes de la ligne. C’est si simple! Ce bouton de défilement personnalisé avec une boîte de menu vous fera certainement penser à toutes les différentes applications. Tout d’abord, vous pouvez intégrer le menu dans la boîte sous le bouton de défilement avec n’importe quoi! Ce serait un bon endroit pour communiquer, envoyer des courriels ou d’autres appels à l’action. Voici une option… Il est également beau sur les appareils mobiles. Cette disposition est idéale pour les appareils mobiles. Le bouton de défilement ajuste simplement la largeur totale de l’écran de la tablette et du smartphone. J’aime vraiment construire cette mise en page et explorer les possibilités qu’elle offre. Les boutons de défilement personnalisés eux – mêmes sont un bon moyen de rendre la partie plein écran plus visible. J’espère que ce design vous aidera à créer des boutons et des CTA plus uniques pour votre site Web. J’ai hâte d’entendre vos commentaires. Bonjour!