Comment créer un drapeau 3D avec effet de curseur de souris dans Divi

Sur le site WordPress. Si vous souhaitez créer votre propre image post, vous aurez besoin d’un éditeur de photos comme Photoshop, gimp ou sketch. Vous pouvez également utiliser les images fournies dans la mise en page ci – dessus pour téléchargement gratuit. En plus de cela, nous allons tout construire à partir de zéro à l’avant de Divi Builder. La façon la plus simple de créer un logo pour ce dessin est de créer un petit bloc d’image répétable que nous pouvons ajouter comme image de fond et répéter verticalement le long d’une section ou d’une ligne de la page. Si vous voulez sauter cette étape, vous pouvez commencer par importer la mise en page json incluse dans le téléchargement gratuit ci – dessus. Cependant, si vous voulez créer votre propre couleur avec une couleur personnalisée de votre choix, voici comment le faire.
Pour cet exemple, je vais utiliser Photoshop, mais pour d’autres éditeurs de photos populaires, le processus est très similaire. Dans Photoshop, cliquez pour créer un nouveau document avec une hauteur et une largeur personnalisées de 25px. Réglez la couleur du premier plan au noir (# 000000) ou à la couleur souhaitée. Sélectionnez ensuite l’outil Bucket et cliquez à l’intérieur d’une couche carrée vide Pour dessiner le carré en noir. Ensuite, sauvegardez l’image sur votre ordinateur sous forme de JPEG. C’est l’image que nous utiliserons dans la conception pour créer des messages pour notre conception de logo 3D. Une fois que vous êtes prêt à mettre en œuvre la conception de panneaux 3D dans Divi, assurez – vous de créer une nouvelle page, de spécifier un titre pour la page et de déployer Divi Builder à l’avant. Sélectionnez l’option créer à partir de zéro.
Ta toile t’attend! Créez maintenant une nouvelle section générale qui convertit les lignes en colonnes. Avant d’ajouter un module, ouvrez les paramètres de ligne et mettez à jour ce qui suit: image de fond: [insérer une image carrée personnalisée pour le post] taille de l’image de fond: taille réelle répétition de l’image de fond: dupliquer y (ve)
Faire tourner la marque à différents angles autour du pôle magnétique. Continuer à copier la ligne et mettre à jour le module Blurb dans la nouvelle ligne comme suit:
Changement de roue X: – 30 degrés Copier la ligne pour créer un troisième drapeau et mettre à jour le module Blurb pour la nouvelle ligne comme suit: changer le volant de l’axe X: 40 degrés Changez la direction du deuxième panneau toutes les flèches pointent dans la même direction. Pour changer de direction de gauche à droite, nous devons mettre à jour légèrement les paramètres du module Blurb. Ouvrez les paramètres du module Blurb sur la deuxième ligne (au milieu) et mettez à jour ce qui suit: icône: Flèche droite (voir capture d’écran) Direction du texte: à gauche Nous pouvons inverser l’ordre du contenu de Blurb de sorte que le texte soit à gauche et que les icônes soient à droite. Pour ce faire, nous devons ajouter une ligne de CSS personnalisés à l’élément principal, comme suit:
Direction: RTL; Maintenant que le contenu de l’avis a été inversé, vous avez un panneau pointant vers une nouvelle direction! Une chose intéressante à propos de cette configuration est que vous pouvez facilement passer à l’état ajouté à la souris pour ramener les modules tournés à la rotation originale (0 degré). Cela permet à l’utilisateur d’interagir avec le contenu pendant qu’il survole le module et d’avoir une vue claire du texte. Puisque nous voulons ajouter le même état lorsque vous passez le curseur sur les trois modules Blurb, utilisez multiselect pour sélectionner les trois modules Blurb et ouvrez les paramètres de l’un des modules pour afficher le mode de configuration de l’élément. Puis mettez à jour ce qui suit:
Changer la roue de l’axe X (vol stationnaire): 0 degrés Enregistrez les paramètres et vous avez terminé! Vérifiez la conception et la fonctionnalité jusqu’à maintenant. En utilisant l’image de fond de la dernière étape pour personnaliser notre section, nous pouvons ajouter un nouveau imm