Comment concevoir une tablette contenant un résumé coulissant dans Divi

L’ajout de contenu provocateur sur un site Web peut être une stratégie de marketing efficace. Il est particulièrement utile pour promouvoir des choses comme les livres électroniques. Donnez – leur un aperçu du contenu et demandez – leur plus. Dans le tutoriel d’aujourd’hui, nous vous montrerons comment afficher du contenu provocant sur une tablette coulissante dans Divi. Pour ce faire, nous utiliserons les options intégrées de Divi pour convertir les colonnes en conteneurs coulissants (conçus comme des tablettes) qui peuvent contenir n’importe quel type de contenu que vous voulez. Vous pouvez l’utiliser pour promouvoir le premier chapitre de n’importe quel livre électronique, voir des exemples de projets dans votre collection, ou tout autre type de contenu.
Allons – y! Voici une vue rapide de la tablette que nous allons créer dans ce tutoriel avec un résumé glissant. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les 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! Pour importer une disposition de section dans la Bibliothèque Divi, allez à
Pour de meilleurs résultats, ajoutez une image d’environ 600 x 850 pixels. Dans l’onglet conception, mettez à jour les styles suivants pour les icônes et les titres:
Couleur de l’icône: # 000000 taille de la police de l’icône: 80 Px (bureau et tablette), 70 Px (téléphone mobile) Police de l’en – tête: Montserrat alignement du texte de l’en – tête: couleur du texte de l’en – tête central: # 000000 Nous pouvons ajuster la hauteur du Blurb pour correspondre à la hauteur de la colonne afin de remplir la tablette avec 100% de hauteur. Cette valeur en pourcentage de hauteur ne s’applique qu’aux colonnes dont la hauteur est définie. Ensuite, nous pouvons déplacer l’icône et le titre au bas de la colonne en ajoutant un remplissage supérieur. Pour ajuster la taille et la distance de Blurb, mettre à jour ce qui suit:
Hauteur: 100% marge: 25px remplissage du Bas: 400px (bureau et tablette), 270px (téléphone) Le prochain élément de teaser sera l’image de la couverture du livre. Pour ajouter une image, il suffit d’ajouter un module image sous le module Blurb. Puis Téléchargez la même image pour l’arrière – plan Blurb. Notre dernier article provocant sera un texte contenant des chapitres fictifs de nos livres électroniques. Pour ajouter du texte, ajoutez un nouveau formulaire de texte sous l’image précédente. Ensuite, collez le code HTML suivant dans la carte de texte du corps: Chapitre 1 Tout le monde peut commettre des erreurs, mais les accusations, les droits d’autrui, les droits de l’inventeur et les droits du quasi – architecte doivent être interprétés. Nemo enim ipsam voluntem quia voluptas sit aspernatur auto Edit auto fugit, sed quia consequentur Magni Dolores EOS qui ration voluntem sequi nesciunt.
Nemo enim ipsam voluptem quia voluptas si aspernatur auto Edit auto fugit, sed quia consequeunt
Sktop), 90% (tablette et téléphone) largeur maximale: 1080px (bureau), 488px (tablette et téléphone) À ce stade, nous pouvons ajouter d’autres éléments à la colonne 2 au besoin. Pour cet exemple, j’a i ajouté un module texte et un module bouton et je les ai dessinés de la même façon que dans notre paquet de mise en page ebook. Résultats finaux examinons maintenant les résultats finaux. Découvrez le contenu de défilement disponible sur votre tablette. Voici comment empiler les tablettes et les écrans de téléphone. La meilleure chose à propos de cette tablette coulissante est probablement sa polyvalence. Comme la tablette est essentiellement une colonne Divi, vous pouvez utiliser n’importe quel nombre de modules Divi (texte, images, boutons) pour concevoir le contenu à mettre en évidence. J’espère que cela sera utile la prochaine fois que vous aurez besoin d’afficher du contenu provocant sur le site. J’ai hâte d’entendre vos commentaires. Bonjour!