Ajouter des ombres transformées à la réplique en utilisant Divi

Avec les nouvelles options de conversion de Divi, vous pouvez créer une belle conception web tout en visualisant tous les paramètres de conversion en temps réel. En combinant différents modules les uns avec les autres, vous obtenez des effets uniques et sans soudure qui vous aideront à améliorer l’apparence de la partie que vous travaillez. Dans cet article, nous nous concentrerons sur la création d’ombres de transformation pour les répliques en utilisant uniquement les options intégrées de Divi. Vous pouvez également télécharger gratuitement l’exemple de fichier json. Allons – y! 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échargement gratuit de la mise en page de Transformed Shadows Hero pour obtenir gratuitement la mise en page de Transformed Shadows Hero, vous devez d’abord la 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
Commençons par recréer la section héros ajouter une nouvelle section spaziatur
A la première chose que vous devez faire est d’ajouter une nouvelle section générale à une nouvelle page ou à une page existante. Active les paramètres de section et supprime toutes les écoutilles par défaut en haut et en bas. Remplissage supérieur: 0px remplissage inférieur: 0px Débordement passez à l’onglet avancé et assurez – vous que la section cachée déborde. Plus loin dans cet article, nous utiliserons quelques options de transformation pour cacher le débordement pour nous assurer que rien ne dépasse le conteneur de section. Débordement horizontal: masquer le débordement vertical: masquer Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, activer les paramètres de ligne et permettre aux lignes de prendre toute la largeur de l’écran en appliquant les paramètres suivants: utiliser une largeur d’espacement personnalisée: Oui largeur d’espacement: 1 hauteur de colonne équilibrée: Oui largeur: 100% largeur maximale: 100% L’espacement passe aux paramètres d’espacement, supprime le remplissage inférieur par défaut et ajoute un espacement personnalisé à gauche et à droite de la ligne.
Remplissage en bas: 0px remplissage à gauche: 4vw remplissage à droite: 4vw Ajouter un formulaire Texte 1 à la colonne 1 ajouter du contenu il est temps de commencer à ajouter différents formulaires, en commençant par les formulaires texte. Entrez votre copie préférée. Paramètres de texte passer à l’onglet conception et modifier les paramètres de texte en conséquence: caractères de texte: playfairdisplay text alignment: Right text color: # FFFFFF text size: 11vw text Line height: 1EM Longueur verticale de l’ombre de texte: 0,02 emtext Shadow Fuzzy Intensity: 0,16 emtext Shadow color: rgba (0,0,0,0,44) Cloner le module de texte # 1 une fois le premier module de texte terminé, vous pouvez le cloner et le modifier
: Text Character: Open sans text alignment: Right text this Line height: 2.3 em Changez la largeur du module sur différentes tailles d’écran dans les paramètres de taille. Largeur: 53% (bureau), 70% (tablette), 90% (téléphone) Alignement du module: à droite Ajouter un module bouton à la colonne 1 Ajouter une copie au module suivant et au dernier module de la colonne 1, qui est un module bouton. Saisissez une copie de la sélection. L’alignement passe à l’onglet conception et modifie l’alignement des boutons. Alignement des boutons: à droite Les paramètres du bouton changent également les paramètres du bouton. Chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 20 Px couleur de fond du bouton: # 5e96bb largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 50 Px caractères du bouton: affichage Playfair L’espacement e complète le style du bouton en utilisant le réglage de l’espacement. Marge supérieure: 2vw marge inférieure: 3vw marge supérieure: 20px marge inférieure: 20px marge gauche: 50 Px marge droite: 50 px Ajouter le module image 1 à la colonne 2 télécharger l’image 1: 1 à la colonne 2! Ici, nous avons besoin de deux modules d’image. À partir du premier module d’image, Téléchargez l’image à l’échelle 1: 1. Cela signifie que la largeur et la hauteur doivent avoir les mêmes valeurs de pixels. Assurez – vous que votre image est carrée, ce qui vous aidera à la arrondir dans les prochaines étapes. Allez aux paramètres de taille du module image et activez l’option force Full Width. Largeur totale: Oui Espacement nous avons également ajouté une marge supérieure. Bord supérieur: 2vw Pour faire du module image un cercle, nous ajouterons \
Si la taille. Enfin, nous ajouterons également des ombres de cadre au module image en utilisant les paramètres suivants: position horizontale des ombres de cadre: – 300 Px position verticale des ombres de cadre: – 300 Px couleur des ombres: rgba (94150187,0,28) Ajouter le module d’image no 2 à la colonne 2 charger l’image 1: 1 pour passer au deuxième module d’image dans la colonne 2. Encore une fois, nous nous assurons que l’image téléchargée est à l’échelle 1: 1. Passez à l’onglet conception et changez la largeur. Largeur: 62% Border ajoute également \