Comment créer une navigation fixe à 4 coins en utilisant Divi

Un design de navigation unique peut apporter un petit avantage à n’importe quel site Web. Par exemple, la navigation fixe à quatre coins est un bon moyen d’offrir au public plus d’options pour interagir avec la conception du site. En fait, il ajoute une autre couche à la conception de l’expérience utilisateur pour l’ensemble du site. Dans cet article, nous vous montrerons comment créer votre propre navigation fixe à 4 coins. Nous expliquerons comment créer deux styles légèrement différents, mais ce n’est que la pointe de l’iceberg. Comme la navigation est créée avec les éléments intégrés de Divi, les possibilités de personnalisation sont infinies.
Nous espérons que cette idée vous inspirera à créer un merveilleux design de navigation fixe à 4 coins pour le prochain projet Divi. On y va. Jetons un coup d’oeil rapide à la navigation Quad que nous allons créer aujourd’hui. Le premier style place le bouton sur le bord de l’écran, tandis que l’autre style a un flotteur interne. Style # 1 Style # 2 Créez une nouvelle page blanche ouvrez une nouvelle page et sélectionnez la page blanche dans les propriétés de la page avant d’utiliser Divi Edit. Une fois terminé, activez Divi Builder. Après avoir accédé à Divi Visual Builder, chargez la page d’atterrissage du paquet de mise en page crypto – Currency à partir de l’onglet mise en page par défaut. 2. Créer une nouvelle section de 4 lignes de colonne ajouter une nouvelle section générale de 4 lignes de colonne pour créer 4 éléments de navigation, nous avons besoin d’une nouvelle section de 4 lignes de colonne. Faites défiler vers le bas de la page pour ajouter une nouvelle section normale. Ensuite, sélectionnez une ligne avec 4 colonnes de la même taille. Avant d’ajouter un module, supprimez le remplissage partiel par défaut, en vous assurant que le remplissage partiel est supprimé en ajoutant « 0px » en haut et en bas. De plus, vérifiez à nouveau que la section n’a pas de couleur de fond ou de fond gradué.
Remplissage supérieur: 0px remplissage intérieur
Plus tard: 0px Augmentez l’index Z, et nous voulons que cette section soit supérieure à toutes les autres sections lorsque vous Défilez. C’est pourquoi nous devons augmenter la valeur de l’indice Z de la section. Pour ce faire, ouvrez l’onglet avancé, allez aux paramètres de visibilité et augmentez l’index Z. index Z: 10 3. Redimensionner la ligne ensuite, nous devons ajuster le réglage de la taille de la ligne. Ouvrez l’onglet conception et Ajustez les paramètres en conséquence: utilisez une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 hauteur de colonne équilibrée: non largeur: 100% largeur maximale: 100% Supprimer le remplissage de ligne par défaut pour s’assurer qu’il n’y a pas d’espace libre au bas de la page, supprimer le remplissage de ligne par défaut. Dans l’onglet conception, changez l’entrée d’espacement pour les remplissages supérieurs et inférieurs en 0px. Ajouter un module à la colonne. Il est temps d’ajouter quelques modules à chaque colonne, en commençant par la gauche et la droite. Colonne # 1: colonne d’image # 2: colonne de bouton # 3: Focus sur les médias sociaux colonne # 4: bouton 4. Définir le style de chaque colonne colonne colonne 1 – Ajouter le logo de l’entreprise au module image
Ouvrez le module image dans la colonne 1. Téléchargez votre logo (largeur 220 pixels, hauteur 100 pixels). Assurez – vous qu’il s’agit d’une image transparente avec le logo centré. Nous voulons que le logo soit placé dans le coin supérieur gauche de la page, donc nous devons aligner le formulaire à gauche. Ouvrez l’onglet conception dans le formulaire image et sélectionnez alignement de l’image à gauche. Alignement: à gauche Ajouter un CSS personnalisé pour corriger l’emplacement du module pour s’assurer que l’emplacement du module reste le même, allez à l’onglet avancé et ajoutez un CSS personnalisé à l’élément principal.
Position: fixe;
En haut: 0;
Gauche: 0; Colonne # 2 – ajouter un bouton à la colonne N maintenant
Passez le curseur sur les deux réseaux sociaux restants et collez le style. Ajoutez un CSS personnalisé au formulaire Enfin, sur l’onglet avancé, ajoutez le code CSS suivant pour que le formulaire soit collé dans le coin supérieur droit de la page:
Position: fixe;
En haut: 0;
Droite: 0; Colonne # 4 – copiez les boutons de style de module du module # 2 et Ajustez – les de sorte que les boutons du module # 4 ressemblent aux boutons du module # 2, et nous utiliserons l’option copier les styles de module. Tout d’abord, faites un clic droit sur le formulaire de bouton dans la colonne 2, cliquez sur copier le style de formulaire et collez – le dans le formulaire de bouton dans la colonne 4. Il est temps de modifier les paramètres de l’onglet contenu. Premièrement, changez le contenu du texte. Texte: de \
Ensuite, changez l’alignement des boutons. Alignement: de gauche à droite Enfin, modifiez le code CSS personnalisé dans l’onglet avancé: changez le Code en: position: fixe;
En bas: 0;
Droite: 0; Conséquences 5. Modifier le CSS personnalisé pour obtenir le deuxième exemple de style dans le premier exemple de style, et le coin est attaché au coin. Pour mettre en œuvre le deuxième style, il suffit d’ajuster le code CSS de sorte que le module d’angle flotte légèrement vers l’intérieur. Il suffit d’ajuster la position du module CSS personnalisé 1 dans l’onglet avancé des quatre modules: fixe;
En haut: 1vw;
Gauche: 1vw; Position du module no 2: fixe;
En bas: 2vw;
Gauche: 2vw; Position du module 3: fixe;
En haut: 3vw;
Gauche: 2vw; Position du module 4: fixe;
En bas: 2vw;
Droite: 2vw; Résultats finaux Conclusion ce tutoriel ne traite que des surfaces qui utilisent Divi pour la navigation fixe à 4 angles. En fin de compte, vous pouvez choisir n’importe quelle forme pour chaque colonne tant que vous conservez le CSS personnalisé que nous avons fourni. Nous espérons que ce tutoriel créatif vous encouragera à créer votre propre navigazi