Téléchargez un aperçu GRATUIT du livre Divi Landing Page Layout, y compris les liens d'ancrage et les CTA

Que vous vendiez un livre physique ou un livre électronique, avoir une page de destination efficace peut faire des merveilles. Vous pouvez aborder cette page de destination de manière traditionnelle ou la transformer en page de destination d'aperçu de livre. Une page de destination d'aperçu de livre permet aux gens de lire certaines parties ou certains chapitres de votre livre à l'avance. Il est également équipé de liens d'ancrage qui facilitent la navigation dans les différentes parties ou chapitres. Pour couronner le tout, vous souhaitez également mettre en avant un CTA qui générera du trafic là où vous vendez votre livre.

Dans ce tutoriel, nous allons recréer une superbe page de destination d'aperçu de livre à partir de zéro avec Divi. Vous pourrez également télécharger gratuitement la mise en page JSON si vous souhaitez l'ajouter immédiatement à votre site Web.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page de la page de destination de l'aperçu du livre

Pour mettre la main sur la mise en page gratuite de la page de destination de l'aperçu du livre, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section régulière

Espacement

Commencez par créer une nouvelle page et ajoutez-y une section régulière. Ouvrez les paramètres de la section et supprimez tous les rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une rangée

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan blanche.

• Couleur d'arrière-plan : #ffffff

Colonne 3 Fond dégradé

Ajoutez également un arrière-plan dégradé à la troisième colonne.

• Couleur 1 : #6a30ff
• Couleur 2: #a202ff
• Type de dégradé de la colonne 3 : linéaire
• Direction du gradient de la colonne 3 : 166 deg

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et laissez la ligne occuper toute la largeur de l'écran en ajoutant les paramètres de dimensionnement suivants :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Passez aux paramètres d'espacement et supprimez le rembourrage personnalisé en haut et en bas de la ligne. Ajoutez également des valeurs de remplissage aux première et troisième colonnes.

• Rembourrage supérieur : 0vw
• Rembourrage inférieur : 0vw
• Rembourrage supérieur de la colonne 1 : 15vw (ordinateur de bureau), 10vw (tablette et téléphone)
• Rembourrage inférieur de la colonne 2: 15vw (ordinateur de bureau), 10vw (tablette et téléphone)
• Remplissage gauche de la colonne 1 : 7vw

Identifiant CSS de la colonne 2

Comme vous pouvez le remarquer dans l'aperçu de cet article, une barre de défilement est attachée à la deuxième colonne. Si vous souhaitez styliser cette barre de défilement plus tard dans la publication, allez-y et ajoutez un identifiant CSS à la deuxième colonne.

• ID CSS de la colonne 2 : style-scrollbar

Colonne 2 Élément principal

La prochaine chose que nous allons faire est de permettre à la colonne de défiler en ajoutant les lignes de code CSS suivantes à l'élément principal de la colonne 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Maintenant que nous avons modifié tous les paramètres de ligne, nous pouvons commencer à ajouter les modules ! Commencez avec un module de texte dans la colonne 1 et ajoutez du contenu de votre choix.

Paramètres de texte

Accédez aux paramètres de texte du module et apportez quelques modifications.

• Police du texte : Lato
• Couleur : #666666
• Taille du texte : 1.6vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Hauteur de la ligne de texte : 2vw

Ajouter un module diviseur à la colonne 1

Visibilité

Le prochain module que nous ajouterons est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, allez dans l'onglet design et changez la couleur.

• Couleur: #5802ed

Dimensionnement

Jouez également avec les valeurs de dimensionnement.

• Poids du diviseur : 4px
• Largeur : 3vw (ordinateur de bureau), 6vw (tablette), 9vw (téléphone)
• Hauteur : 0px

Espacement

Et ajoutez un rembourrage supérieur et inférieur personnalisé pour créer de l'espace.

• Marge supérieure : 1vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Marge inférieure : 7vw

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu

Passons au troisième module, qui est un autre module de texte. Ici, nous avons ajouté un symbole (►) suivi du titre du premier chapitre à la zone de contenu.

Ajouter un lien

Nous lions l'ensemble de ce module à un identifiant d'ancrage que nous ajouterons plus tard dans cet article.

• URL du lien du module : https://yourwebsite.com/pagetitle/#chapter-1

Paramètres de texte

Continuez en allant dans les paramètres de texte et stylisez le contenu exactement comme vous le souhaitez.

• Police du texte : Lato
• Poids de la police de texte : léger
• Couleur du texte : #666666
• Taille du texte : 1.3vw (ordinateur de bureau), 2vw (tablette), 3.3vw (téléphone)

Espacement

Ajoutez également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw

Cloner le module de texte #2 deux fois

Une fois que vous avez terminé de modifier le module de texte, clonez-le deux fois (ou jusqu'à autant de chapitres que vous souhaitez partager).

Modifier le contenu

Modifiez le contenu de chacun des doublons.

Modifier les liens

Avec l'ID d'ancrage à la fin de l'URL du lien du module. Dans ce cas, cela signifie ajouter '#chapter-2' au premier doublon et '#chapter-3' au second.

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passons à la colonne suivante, qui est défilante. Ici, nous allons utiliser des modules de texte pour ajouter différentes pages de l'aperçu du livre. Commencez par ajouter le premier module de texte avec du contenu de votre choix.

Couleur de l'arrière plan

Ensuite, allez dans les paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan blanche.

• Couleur d'arrière-plan : #ffffff

Paramètres de texte

Modifiez également les paramètres de texte.

• Police du texte : Lato
• Taille du texte : 0.8vw (ordinateur de bureau), 1.6vw (tablette), 2.1vw (téléphone)
• Hauteur de la ligne de texte : 1.7vw (ordinateur de bureau), 3.3vw (tablette), 3.8vw (téléphone)

Paramètres de texte H2

Jouez également avec les paramètres de texte H2.

• Police de titre 2 : Lato
• En-tête 2 Poids de la police : lourd
• Titre 2 Couleur du texte : #5802ed
• Titre 2 Taille du texte : 2vw (ordinateur de bureau), 2.5vw (tablette), 2.9vw (téléphone)
• En-tête 2 Hauteur de ligne : 2,3 vw

Espacement

Continuez en accédant aux paramètres d'espacement et en ajoutant les valeurs de marge et de remplissage personnalisées suivantes :

• Marge supérieure : 2vw (ordinateur de bureau), 7vw (tablette), 10vw (téléphone)
• Marge inférieure : 2vw (ordinateur de bureau), 7vw (tablette), 10vw (téléphone)
• Marge gauche : 5vw
• Marge droite : 5vw
• Rembourrage supérieur : 6vw
• Rembourrage inférieur : 6vw
• Rembourrage gauche : 6vw
• Rembourrage droit : 6vw

Boîte ombre

Façonnez le module de texte en ajoutant une ombre de boîte subtile.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.09)

Identifiant CSS

Continuez en ajoutant un identifiant CSS au module de texte. Assurez-vous que vous utilisez le même identifiant CSS que celui auquel vous étiez lié dans la première colonne de la ligne.

• Identifiant CSS : chapitre-1

Cloner le module de texte deux fois

Une fois que vous avez stylisé le module de texte, clonez-le autant de fois que vous le souhaitez.

Modifier le contenu

Modifiez le contenu de chaque doublon de module de texte.

Modifier les identifiants CSS

Avec les identifiants CSS.

• Identifiant CSS : chapitre-2
• Identifiant CSS : chapitre-3

Ajouter un module de texte à la colonne 3

Ajouter du contenu

Passons à la prochaine et dernière colonne ! Ajoutez un module de texte avec du contenu de votre choix.

Paramètres de texte

Ensuite, allez dans l'onglet conception et modifiez les paramètres du texte.

• Police du texte : Lato
• Poids de la police de texte : lourd
• Couleur du texte : #ffffff
• Taille du texte : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Hauteur de la ligne de texte : 2vw
• Orientation du texte : Centre

Espacement

Ajoutez ensuite un rembourrage personnalisé à gauche et à droite.

• Gauche : 2vw
• À droite : 2vw

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Continuez en ajoutant un module de bouton à la troisième colonne avec une copie de votre choix.

Alignement

Modifiez ensuite l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez également les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1 vw (ordinateur de bureau), 1,5 vw (tablette), 2,4 vw (téléphone)
• Couleur du texte du bouton : #5802ed
• Couleur d'arrière-plan du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Rayon de bordure de bouton: 10vw
• Espacement des lettres des boutons : 0px
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Et ajoutez des valeurs de marge et de remplissage personnalisées pour styliser et positionner le module.

• Marge supérieure : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 7vw (tablette), 9vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 7vw (tablette), 9vw (téléphone)

Barre de défilement des styles

Ouvrir les paramètres de la page

La dernière partie de ce tutoriel est consacrée au style de la barre de défilement de la deuxième colonne. Que vous styliez ou non la barre de défilement de la colonne dépend entièrement de vous. Ne pas styliser cela ne change rien à la fonctionnalité. Si vous décidez de styliser la barre de défilement, ouvrez les paramètres de la page.

Ajouter un code CSS

Ensuite, allez dans l'onglet avancé et ajoutez du CSS personnalisé à la case CSS personnalisé et le tour est joué !

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer une page de destination d'aperçu de livre époustouflante et efficace avec des liens d'ancrage vers différentes parties ou chapitres de votre livre et un CTA qui se démarque. Nous avons également partagé la mise en page JSON gratuitement afin que vous puissiez commencer à l'ajouter à n'importe quel site Web que vous créez immédiatement ! Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.