Créer une partie d’un héros Polaroid en utilisant l’option Divi Transform

La section héros créatif rend le site mémorable et spécial. Cette partie du dessin du héros Polaroid évoque le désir de voyager. En utilisant l’option de transformation de colonne, vous pouvez organiser Polaroid au besoin comme ils le font sur une table. Vous pouvez recréer ce profil de héros Polaroid en utilisant votre propre image carrée. Vous pouvez également télécharger gratuitement le fichier json! On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Pour obtenir le design de la partie héros de polaroid gratuite, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Abonnez – vous à notre chaîne YouTube et commençons à recréer ajouter une nouvelle section pour commencer à ajouter une nouvelle section à la page que vous travaillez. Séparateur inférieur ajouter un séparateur inférieur vert menthe poivrée. Positionnement
Visionneur: style du séparateur inférieur: # 12 couleur du séparateur: menthe poivrée # d2f2d0 hauteur du séparateur: 23vw L’espacement ajuste l’espacement des sections. Marge supérieure: 7vw marge inférieure: 0px marge supérieure et inférieure: 0px Ajoute une nouvelle structure de ligne aux colonnes consécutives en ajoutant de nouvelles lignes à la section. Sélectionnez la structure de colonne suivante: Maintenant, redimensionnez la ligne. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 90vw largeur maximale: 100% L’espacement ajuste ensuite le remplissage supérieur et inférieur dans le réglage de l’espacement. Remplissage supérieur et inférieur: 0px Écran ajouter une ligne de code CSS à l’élément principal de la ligne d’écran afin que les colonnes restent côte à côte sur un écran plus petit.
CSS personnalisé – principaux éléments: affichage: Flex; Affichage: Flex; Ajouter le module image à la colonne 1 charger l’image carrée ajouter le module image à la colonne 1 et charger l’image carrée. Étalonnage maintenant, réglez l’étalonnage du module. Alignement des modules: Centre Ensuite, créez un module pleine largeur. Largeur totale: Oui Ajouter un formulaire de texte à la colonne 1 ajouter du contenu ajouter un formulaire de texte et entrer du contenu. Nous utiliserons le mot \
Redimensionner utilise 100% de la largeur dans les paramètres de redimensionnement. Largeur: 100% L’espacement ajuste maintenant l’espacement. Bord supérieur: 1vw Cloner le module deux fois et placer les modules dupliqués dans les colonnes restantes Modifier les images et les répliques modifier les images dans chaque module d’image dupliqué. Si votre design
N si n écessaire, le contenu du texte sera également modifié. Configuration de la colonne 1 l’arrière – plan se poursuit en ouvrant les paramètres de la colonne 1 de la ligne. Réglez l’arrière – plan en blanc pour créer l’effet polaroid. Couleur de fond: blanc L’espacement ajoute un remplissage plus bas pour créer un bord inférieur plus large du polaroid.
Emballage inférieur: 2vw Bordure ajouter une bordure pour compléter l’effet visuel polaroid. 4 largeur du bord: 1vw largeur du bord supérieur: 2vw largeur du bord droit: 2vw largeur du bord inférieur: 1vw largeur du bord gauche: 2vw couleur du bord: blanc La boîte d’ombre complète les paramètres de la colonne 1 en ajoutant des ombres minces. Ombres de boîte: # 1 Étendre les paramètres de colonne 1 Étendre les paramètres de colonne en utilisant l’option style étendu. Pour revenir à la fenêtre de configuration de la ligne principale, cliquez sur les trois points à droite de l’onglet première colonne. Sélectionnez le style de projet étendu et sélectionnez sur cette ligne. La colonne de style de transformation 1 ajuste maintenant les paramètres de transformation dans la première colonne. Translation: X – 11vw, y – 6vw Translation Wheel: 341 Degrees, first option Transformez la colonne de style 2, puis Ajustez les paramètres de transformation pour la deuxième colonne. Décalage de transformation: Axe X – 22w, axe y 0vw roue de transformation: 10 degrés, première option Colonne 3 style de transformation Enfin, ajuster les paramètres de transformation de la colonne 3. Échelle de transformation: 68 transformation transformation transformation transformation transformation transformation transformation transformation sur deux axes: Axe X – 46w, axe y 12vw roue de transformation: 31 degrés, première option Ajouter un nouveau fond de section ajouter une nouvelle section et appliquer un fond vert menthe à la section. Couleur de fond: menthe poivrée Le séparateur inférieur spécifie le séparateur inférieur pour la section. Position du séparateur: style du séparateur inférieur: # 12 couleur du séparateur: blanc # FFFFFF hauteur du séparateur
Et: 23vw L’espacement supprime le remplissage supérieur par défaut. Remplissage supérieur: 0px Ajouter une nouvelle structure de ligne pour les colonnes consécutives en ajoutant une nouvelle ligne contenant 3 colonnes. Copier et coller des styles de ligne à partir de la première section en utilisant la vue wireframe
Tout d’abord, cliquez sur les trois points à droite du menu de ligne dans la première partie. Sélectionnez copier le style de ligne. Ensuite, cliquez sur les trois points à droite du menu de la deuxième branche. Sélectionnez coller le style de ligne. Copier et coller les paramètres de colonne copiez maintenant les paramètres de colonne sur la première ligne et collez – les dans les colonnes 1 et 2 de la nouvelle ligne. Tout d’abord, ouvrez les paramètres de ligne dans la première ligne. Ensuite, cliquez sur les trois points à droite de l’onglet de la première colonne et sélectionnez copier le style de l’objet. Ensuite, faites défiler vers le bas vers la nouvelle ligne et ouvrez l’onglet paramètres. Enfin, cliquez sur les trois points à droite de la première colonne et sélectionnez coller le style de l’objet. Style de transformation colonne 1 maintenant, Ajustez le style de transformation dans la colonne 1. Échelle de transformation: 75% deux axes transformation transformation transformation: Axe X – 8W, axe Y – 14vw roue de transformation: 35 degrés première option Transformez le style colonne 2, puis changez le style de transformation dans la colonne 2. Traduction de transformation: Axe X – 17w, axe y 2vw roue de transformation: 346 degrés première option Ajouter un module d’image dupliqué et faire glisser le module d’image retourne maintenant à la vue wireframe pour copier et faire glisser les deux modules d’image. Tout d’abord, copiez le premier module d’image deux fois dans la première partie. Ensuite, faites – les glisser dans les première et deuxième colonnes de la section II. Changez l’image de chaque module en une nouvelle image carrée. Ajoutez un formulaire de texte en double et faites glisser le formulaire de texte après l’image pour faire de même avec le formulaire de texte. Je répète.