Comment utiliser Divi pour créer des POP – ups qui bloquent les coins de contenu

Chaque semaine, nous vous proposons un nouveau paquet gratuit de mise en page Divi que vous pouvez utiliser pour votre prochain projet. Pour l’un de ces paquets de mise en page, nous partageons également un cas d’utilisation qui vous aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre plan de conception Divi en cours, nous vous montrerons comment créer des POP – ups qui bloquent les coins de contenu en utilisant Divi et Resort Layout packs. Le concept de blocage du module d’activation du contenu est simple. Les gens doivent entrer leur adresse e – mail, et une fois entré, le contenu caché est affiché. Par exemple, vous pouvez partager des codes de réduction avec ce contenu caché. Pour ce faire, nous utiliserons le plug – in Bloom et ajouterons le Code court du module d’activation de contenu bloqué à un module texte que nous modélisons comme une fenêtre contextuelle. Le module texte comprendra également une animation avec un délai d’animation afin que le module texte ressemble à une fenêtre contextuelle.
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 Installer le plug – in bloom télécharger Bloom la première chose que vous devez faire est de télécharger le plug – in bloom. Si vous êtes déjà membre du thème elegant, vous pouvez trouver le plugin en entrant dans la zone des membres. Là, vous pouvez télécharger des fichiers compressés. Si vous n’êtes pas encore membre d’elegant theme, vous devez d’abord acheter un abonnement. Une fois le Bloom téléchargé, vous pouvez le télécharger sur le site WordPress en allant dans les plugins > Ajouter nouveau et en cliquant sur les plugins de téléchargement en haut de la page. Ensuite, téléchargez le fichier compressé et cliquez sur Installer maintenant. N’oubliez pas d’activer le plug – in après le chargement. Configurer le module d’activation florale ajouter un nouveau module de contenu de bloc maintenant nous pouvons commencer à créer
Largeur hors tout: Oui utilisation de la largeur personnalisée de la gouttière: Oui largeur de la gouttière: 1 L’espacement passe au prochain réglage d’espacement et ajoute \ Ensuite, retournez au plug – in Bloom et copiez le Code court du module optin que vous avez créé dans la partie précédente de ce tutoriel. Ajoutez tout ce que vous voulez que les gens affichent après avoir rempli le formulaire d’activation. Dans l’exemple ci – dessous, vous pouvez voir que nous partageons des codes de coupon, mais vous pouvez partager n’importe quel type d’information. Couleur de fond allez aux paramètres de fond du formulaire et ajoutez une couleur de fond entièrement blanche. Couleur de fond: # FFFFFF Les paramètres de texte passent à l’onglet conception et changent les paramètres de texte. Police de texte: Open sans text color: # 0f87ff text size: 15px Le paramètre de texte H3 modifie également la police utilisée pour copier H3. Caractère de titre 3: affichage de la guilde Espacement et forme des modules, nous ajouterons des marges personnalisées et des valeurs de remplissage. Nous avons également ajusté toutes ces valeurs pour nous assurer que la conception correspond à n’importe quelle taille d’écran utilisée par les visiteurs. Marge supérieure: – 17vw marge gauche: 65vw (bureau), 37vw (tablette), 3vw (téléphone mobile) Marge droite: 0px marge supérieure: 5vw (bureau), 11vw (tablette), 13vw (téléphone mobile) marge inférieure: 5vw, 11vw (tablette), 13vw (téléphone mobile) Marge gauche
Entre: 6vw (bureau), 11vw (tablette), 16vw (téléphone mobile) rempli à droite: 6vw (bureau), 11vw (tablette), 16vw (téléphone mobile) Continuez à ajouter des bordures en allant aux paramètres de bordure du formulaire de texte et en ajoutant 500vw à chaque coin, sauf en bas à droite. Zone d’ombre ajoutez une zone d’ombre à côté pour mettre en évidence le formulaire de texte. Boîte d’ombre floue forcée: 150 Px couleur d’ombre: rgba (0,0,0,0,3) Animation Enfin, nous avons ajouté une animation de droite à gauche pour créer un effet pop – up. Répétition de l’animation: direction de l’animation une fois: durée de l’animation à gauche: 500 ms retard de l’animation: 1000 MS intensité de l’animation: 16% Une fois que vous avez créé la première fenêtre contextuelle qui bloque le coin contenu, vous pouvez continuer à cloner toute la ligne de contenu. Placer la ligne de copie ici: Supprimer le remplissage inférieur d’une section supprimer le remplissage inférieur d’une section qui place une ligne. Remplissage du Bas: 0px Changez les paramètres d’espacement des formulaires de texte, puis ouvrez les paramètres des formulaires de texte et changez les valeurs de marge personnalisées. Marge gauche: 0vw marge droite: 65vw (bureau), 37vw (tablette), 3vw (téléphone) Modifier le filet du formulaire de texte pour vous assurer que vous avez également modifié le filet. Utilisez \ Changez les paramètres d’animation du module texte. Enfin, changez la direction de l’animation à droite et vous êtes prêt! Direction de l’animation: droite Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille! Bureau Mobile Dans cet article, nous vous montrons comment créer des POP – ups qui bloquent les coins de contenu en utilisant Divi, le plug – in Bloom et le paquet de mise en page de la station. Vous pouvez utiliser qu