Comment créer une section élégante d’information produit en utilisant Divi Segmentation d’image

Le traitement créatif des images a certainement contribué à attirer l’attention sur le CTA. Dans cet article, nous vous montrerons comment reconstruire une belle Section d’information produit en utilisant Divi Split image. Le design que nous sommes en train de remodeler est beau et accrocheur et peut être personnalisé en fonction de vos besoins. Vous pouvez également télécharger gratuitement les fichiers de conception 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 Télécharger la mise en page gratuite de l’image segmentée pour obtenir la mise en page gratuite de l’image segmentée, vous devez d’abord utiliser les boutons ci – dessous pour télécharger. 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! Utilisez Photoshop et illustrateur pour créer des images segmentées avant de commencer à utiliser Divi, vous devez préparer une série d’images à télécharger. Parce qu’il s’agit d’un effet de segmentation d’image, vous avez besoin de deux images très appropriées. Il te faut deux div.
Et faites – le glisser dans la colonne 2. Modifier le contenu bien sûr, vous devez modifier le contenu dans le formulaire copier le texte. Ajouter un formulaire d’invitation à l’action à la colonne 1 ajouter du contenu sous le formulaire texte dans la colonne 1 Ajouter un formulaire d’invitation à l’action qui contient certains éléments de votre choix. Bouton corps du titre Ajoutez un lien pour continuer en ajoutant un lien au bouton CTA. Ajoutez du papier peint et des couleurs de fond à votre tablette et à votre appareil mobile. Couleur de fond: tablette + téléphone: blanc sale Texte du titre sur l’onglet conception, modélisez les paramètres du texte H4. Titre niveau de texte: H4 caractères H4: Open San Color H4: dark grey # 333333 taille du texte H4: desktop: 1.4vw tablette: 4.5vw Téléphone: 7vw espacement des lettres H3: 2px largeur de ligne H3: 1.5 em Le corps modifie les paramètres du texte du corps plus tard. Caractères du corps: ouvrir sans texte alignement du corps: intergiciel couleur du corps: gris foncé # 333333333 taille du corps: Bureau: 0,9vw tablette: 3vw Téléphone: 4vw hauteur du corps: 1,8 em Les boutons styles sont également des boutons. Taille du texte du bouton: Bureau: tablette 1vw: 2.2vw Téléphone: 3.8vw couleur de police du bouton: gris foncé # 333333 couleur de fond du bouton: tablette + téléphone: vert vif # b7e778 largeur du bord du bouton: Bureau: 1px couleur du bord du bouton: Bureau: gris foncé # 333333 rayon du bord du bouton: 1vw Espacement et ajouter des valeurs d’espacement personnalisées. Marge supérieure: Bureau + tablette: – 2vw téléphone mobile: 3vw marge gauche et droite: Bureau: 0vw tablette + téléphone mobile: 4vw Enfin, et ce n’est pas le moins important, il peut façonner les bords sur différentes tailles d’écran. Filet: 1vw full Corner style: Tablet + mobile: Four Panel width: Tablet + mobile: 1px Board color: Tablet + T