Comment créer une tablette d'aperçu de texte défilant avec Divi

Publié: 2017-08-08

Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment créer une tablette d'aperçu de texte défilant sur votre site Web. L'aperçu du texte sera représenté dans une tablette où les visiteurs pourront faire défiler la tablette pour lire quelques-uns des chapitres partagés.

L'ajout d'une tablette de prévisualisation de texte à votre site Web est un excellent moyen de taquiner vos visiteurs. Vous leur donnez la chance d'explorer une partie du contenu que vous avez créé. Une fois qu'ils ont lu le contenu et qu'ils se sont sentis intrigués par celui-ci, il est plus probable qu'ils voudront lire le reste également. L'utilisation d'une tablette de prévisualisation de texte peut être intéressante dans les cas suivants, par exemple :

Lors de la vente d'un livre
Lorsque vous partagez un ebook gratuit avec vos visiteurs et que vous souhaitez les inciter à télécharger la version complète (en vous abonnant)
Lorsque vous partagez des études de cas ou des témoignages

Pour vous montrer ce que nous voulons dire exactement, nous avons créé un exemple que nous allons vous montrer comment recréer étape par étape :

Vous pouvez ajouter autant de contenu à la tablette que vous le souhaitez. La barre de défilement permettra à vos visiteurs de faire défiler le contenu facilement.

Comment créer une tablette d'aperçu de texte défilant avec Divi

Abonnez-vous à notre chaîne Youtube

Créer et modifier la section

La première chose dont nous aurons besoin pour recréer l'exemple que nous avons créé est une section. Pour faciliter les choses, nous allons ajouter cette section à une nouvelle page et passer au Visual Builder pour expliquer toutes les étapes utilisées pour créer le résultat.

Ajouter une nouvelle page

Pour ajouter une nouvelle page, accédez à votre tableau de bord WordPress > Pages > Ajouter une nouvelle . Une fois que vous avez ajouté la nouvelle page, activez le Divi Builder et passez immédiatement à Visual Builder.

Ajouter une section avec une ligne à deux colonnes

Pour l'exemple que nous recréons, nous n'aurons besoin que d'une seule section. Ajoutez une section standard et dans cette section, créez une ligne à deux colonnes. Nous aurons besoin de la colonne de gauche pour placer la tablette de prévisualisation du texte et de la deuxième colonne pour donner des informations et lancer un appel à l'action.

Ajouter le fond dégradé

La prochaine étape que nous allons expliquer est le fond dégradé. Nous avons opté pour quelque chose de vraiment simple mais qui apporte une belle plus-value à la rubrique. Pour recréer le dégradé de fond, rendez-vous dans les paramètres de votre section. Ensuite, utilisez les deux couleurs suivantes pour votre arrière-plan dégradé dans la sous-catégorie d'arrière-plan :

#e02b20
#f2f2f2

Les paramètres que nous avons utilisés pour le fond dégradé sont les suivants :

Type de dégradé : Linéaire
Direction du gradient : 143 degrés
Position de départ : 28 %
Position finale : 28 %

Première colonne : ajouter le module de code et la tablette d'aperçu de texte

Pour la première colonne, nous allons ajouter le module de code avec la tablette de prévisualisation de texte. Pour compléter la tablette d'aperçu de texte, nous devrons faire trois choses ; ajoutez le module de code, ajoutez les lignes de code HTML dans le module de code et ajoutez les lignes de code CSS nécessaires à la page elle-même. Vous pouvez également ajouter les lignes de code CSS aux options de thème ou au personnalisateur de thème. Mais comme ce n'est pas nécessaire dans ce cas, nous l'ajouterons uniquement à la page que nous avons créée.

Ajouter le module de code

Commencez par ajouter un module de code à la première colonne de la ligne que vous avez créée.

Ajouter le code HTML

Ensuite, ouvrez ce module de code et ajoutez les lignes suivantes dans la zone de contenu :

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

<h1 class="title">Chapter 2</h1>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

Vous remarquerez qu'il y a trois parties dans notre aperçu du texte ; le titre, les paragraphes et le pied de page. Vous pouvez faire l'aperçu du texte aussi longtemps que vous le souhaitez. Pour cet exemple, nous avons ajouté deux chapitres qui sont représentés par un titre et un paragraphe chacun. Vous pouvez bien sûr ajouter plusieurs paragraphes et titres où vous le souhaitez sur la tablette.

Ajouter le code CSS nécessaire

Une fois que vous avez adapté le code HTML à vos besoins, vous pouvez ajouter le code CSS qui donne à votre tablette l'apparence que vous souhaitez. Puisque nous n'aurons besoin de cette tablette que sur la page que nous créons ; nous allons ajouter le code à la page directement. Dans le Visual Builder de votre page, cliquez sur l'icône des paramètres :

Ensuite, allez dans l'onglet CSS et collez les lignes de code CSS suivantes dans le champ CSS personnalisé :

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

Vous pouvez tout changer en fonction de vos besoins dans ces lignes de code CSS. Comme vous pouvez le remarquer dans les lignes de code, il y a cinq parties principales où vous pouvez modifier l'apparence de votre tablette d'aperçu de texte.

L'aspect extérieur de la tablette
L'aspect intérieur de la tablette
Le titre
Les paragraphes
Le pied de page

Vous pouvez ainsi adapter la tablette à tout type de page dans laquelle vous intégrez la tablette d'aperçu de texte.

Deuxième colonne : ajoutez deux modules de texte et un CTA

La dernière chose que nous allons faire est d'ajouter les modules dans la colonne de droite. Il est important d'informer les gens de ce qu'ils vont lire dans la tablette d'aperçu de texte. C'est aussi l'occasion idéale de profiter d'un CTA. Plus le CTA est proche de la tablette d'aperçu de texte réelle, et plus il est visible, plus les gens sont susceptibles d'agir après avoir lu l'aperçu du texte.

Premier module de texte

Commencez par ajouter le premier module de texte à la deuxième ligne. Ouvrez les paramètres et notez un titre dans la zone de contenu dans la sous-catégorie Texte du contenu. De plus, accédez à l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

Police de texte : script de danse
Style de police de texte : gras et italique
Taille de la police de texte : 40 (ordinateur de bureau), 35 (tablette), 30 (téléphone)
Couleur du texte : #1c1c1c
Hauteur de la ligne de texte : 1,7 em

Faites défiler le même onglet et ajoutez « 40 % » à la marge supérieure.

Deuxième module de texte

De plus, ajoutez le deuxième module de texte. Commencez par ajouter le texte dans la zone Contenu de l'onglet Contenu et passez à l'onglet Conception. Dans l'onglet Conception, effectuez également les ajustements suivants dans la sous-catégorie Texte :

Police du texte : Arimo
Taille de la police de texte : 14
Hauteur de la ligne de texte : 1,7 em

Module de boutons

Enfin, nous devrons également ajouter un module de bouton à la deuxième colonne. Nous avons fait correspondre les couleurs du CTA au fond dégradé. Tout d'abord, ajoutez le module de boutons et ouvrez les paramètres. Ensuite, ajoutez le CTA et l'URL dans l'onglet Contenu. Continuez en passant à l'onglet Conception et en effectuant les ajustements suivants dans la sous-catégorie Bouton :

Utiliser des styles personnalisés pour le bouton : Oui
Texte de la taille du bouton : 14 (ordinateur de bureau et tablette), 12 (téléphone)
Couleur du texte du bouton : #f9f9f9
Couleur d'arrière-plan du bouton : #e02b20
Largeur de la bordure du bouton : 0
Rayon de bordure de bouton : 3
Police des boutons : Arimo

Astuce : si vous faites la promotion de votre ebook via l'aperçu du texte, vous pouvez également lier un formulaire d'inscription Trigger on Click Bloom, comme expliqué dans le post suivant.

Le résultat

Si vous avez suivi toutes les étapes de cet article, vous devriez avoir obtenu le résultat suivant pour l'aperçu de votre livre :

Emballer

Avec le module de code, vous pouvez être aussi créatif que vous le souhaitez. Cet article était un exemple de la diversité que vous pouvez apporter à votre site Web Divi si vous intégrez certains éléments de vos préférences personnelles. Si vous avez suivi cet article étape par étape, vous devriez avoir pu recréer l'aperçu du livre et l'utiliser sur votre site Web. Vous pouvez non seulement utiliser l'aperçu du livre pour les sites Web d'auteurs, mais vous pouvez également l'utiliser pour prévisualiser un livre électronique que vous avez créé et à partir duquel vous souhaitez créer votre liste de diffusion. Si vous avez des questions ou des suggestions ; n'hésitez pas à nous laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !