skip to Main Content

Comment créer un design idéal pour les aperçus d’eBook avec Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Aujourd’hui, je vais vous montrer comment concevoir un design pour des critiques de livre accrocheuses à l’aide de Ebook Layout Pack de Divi et des options intégrées de Divi uniquement. C’est un excellent moyen d’ajouter des preuves sociales à vos pages de destination, d’accroître la crédibilité et de partager de manière élégante les critiques courtes des internautes.

Commençons la conception

Transférer la mise en page de la page de destination du pack d’ebooks

La première chose à faire est de créer une nouvelle page à l’aide de la présentation de la page de destination de l’Ebook Layout Pack que vous trouverez dans les présentations prédéfinies.

Ajouter une nouvelle section

Faites défiler la mise en page et ajoutez une nouvelle section à l’endroit où vous souhaitez afficher les critiques de livres.

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante:

Colonne 1 Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé à la première colonne.

  • Couleur 1: #ffffff
  • Couleur 2: #f4f4f4
  • Colonne 1 Position de départ: 12%
  • Colonne 1 Position finale: 12%

Colonne 2 Couleur de fond

Ajoutez également une couleur d’arrière-plan personnalisée à la deuxième colonne.

  • Colonne 2 Couleur de fond: #9400ff

Dimensionnement

Passez à l’onglet Conception et supprimez tout l’espace personnalisé entre les colonnes en utilisant les paramètres suivants:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1

Espacement

Nous modifions également les paramètres d’espacement des lignes.

  • Marge supérieure: 100px
  • Marge inférieure: 100px
  • Top Rembourrage: 0px
  • Rembourrage inférieur: 0px

Ajouter un module d’image à la colonne 1

Upload 1:1 Image

Une fois que vos paramètres de ligne sont en place, vous pouvez commencer à ajouter les différents modules, en commençant par un module d’image dans la première colonne. Téléchargez une image de votre choix mais assurez-vous que le rapport d’image est de 1: 1. Cela signifie que la hauteur et la largeur doivent porter la même valeur.

Image Alignment

Sélectionnez l’alignement de l’image de gauche dans l’onglet Conception.

  • Alignement de l’image: gauche

Dimensionnement

Nous modifions également la largeur de ce module pour différentes tailles d’écran.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • Largeur: 20% (bureau et tablette), 30% (téléphone)

Espacement

Pour permettre un chevauchement sur le côté gauche de la ligne, nous ajoutons une valeur de marge gauche négative dans les paramètres d’espacement du module Image.

  • Marge gauche: -30px

Frontière

Pour compléter la conception de l’image, nous ajoutons également ’50vw’ à chacun des coins dans les paramètres de bordure. Cela garantira que l’image conserve sa forme circulaire à travers différentes tailles d’écran.

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

Ajouter des symboles étoiles à la zone de contenu

Passons au module suivant, qui est le module de texte de classement. Pour mettre en valeur le nombre d’étoiles, nous allons utiliser des symboles. Continuez, copiez les symboles suivants et collez-les dans la zone de contenu d’un nouveau module texte: ★★★★.

Couleur de fond

Changer le fond du module ensuite.

  • Couleur de fond: # 9400ff

Paramètres du texte

Passez à l’onglet Conception et modifiez également les paramètres de texte.

  • Text Font: Montserrat
  • Poids de la police du texte: Lourd
  • Taille du texte: 45px (bureau), 30px (tablette), 25px (téléphone)
  • Hauteur de la ligne de texte: 1em
  • Alignement du texte: centre

Dimensionnement

Continuez en modifiant la largeur du module.

  • Largeur: 35%

Espacement

Et ajoutez un espacement personnalisé.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Marge gauche: 50px
  • Marge droite: 50px
  • Top Rembourrage: 20px
  • Rembourrage inférieur: 20px

Boîte ombre

Pour mettre en surbrillance la case d’évaluation, nous allons ajouter une ombre subtile.

  • Box Shadow Blur Force: 50px
  • Couleur de l’ombre: rgba(0,0,0,0,3)

Transformer Traduire

Enfin, nous repositionnerons le module de texte à l’aide de valeurs de conversion de traduction personnalisées. Vous pouvez reporter cette étape jusqu’à ce que vous ayez également ajouté tous les modules à votre colonne.

  • Droite: 360px (bureau), -84px (tablette), -70px (téléphone)
  • Bas : -113px (bureau), 190px (tablette), 141px (téléphone)

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

Ajouter du contenu

Le prochain module dont nous avons besoin dans la colonne 1 est un autre module de texte. Ajoutez le contenu de votre choix et un lien vers le critique et le livre.

Paramètres du texte

Passez à l’onglet Conception et modifiez les paramètres de texte en conséquence:

  • Text Font: Montserrat
  • Taille du texte: 18px

Lien texte paramètres

Changer la couleur du texte du lien aussi.

  • Couleur du texte du lien: #9400ff

Espacement

Ensuite, accédez aux paramètres d’espacement et repositionnez l’élément à l’aide de valeurs de marge personnalisées.

  • Marge supérieure: -100px (bureau), 0px (tablette et téléphone)
  • Marge gauche: 200px (bureau), 50px (tablette), 20px (téléphone)
  • Marge droite: 50px (tablette), 20px (téléphone)

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

Ajouter du contenu H3

Passons au module suivant, qui est un module de texte contenant le titre de la révision H3.

Paramètres de texte H3

Passez à l’onglet Conception et modifiez les paramètres de texte H3.

  • Heading 3 Font: Montserrat
  • Titre 3 Poids de police: gras
  • Titre 3 Couleur du texte: #000000

Espacement

Ajoutez également une marge personnalisée.

  • Marge supérieure: 80px (bureau), 50px (tablette et téléphone)
  • Marge gauche: 50px (bureau et tablette), 20px (téléphone)
  • Marge droite: 50px (bureau et tablette), 20px (téléphone)

Ajouter le module de texte 4 à la colonne 1

Ajouter du contenu

Passons au prochain et dernier module dont nous avons besoin dans la colonne 1, qui est un autre module de texte avec la révision proprement dite.

Espacement

Accédez aux paramètres d’espacement de ce module et appliquez les paramètres suivants:

  • Marge supérieure: 20px
  • Marge inférieure: 50px
  • Marge gauche: 50px (bureau et tablette), 20px (téléphone)
  • Marge droite: 50px (bureau et tablette), 20px (téléphone)

Ajouter un module d’image à la colonne 2

Modifier les réglages CSS de la colonne 2

Nous allons utiliser les propriétés flex pour aligner l’image au centre :

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

display: flex;

Télécharger l’image de couverture du livre

Dans la deuxième colonne, nous aurons besoin de deux modules, à commencer par un module d’image portant la couverture du livre. Pour ce tutoriel, nous utilisons les couvertures de livre fournies avec le livre de présentation de Divi, mais vous pouvez également ajouter votre propre couverture de livre.

Dimensionnement

Passez à l’onglet Conception du module Image et modifiez la largeur.

  • Largeur: 79% (bureau), 40% (tablette et téléphone)

Avancé Element Principal

Nous allons ici tenter d’aligner l’image au centre.

  • align-self: center;

Clonez la conception autant de fois que vous le souhaitez

Une fois que vous avez créé la première critique de livre, vous pouvez cloner toute la ligne autant de fois que vous le souhaitez, en fonction du nombre de critiques que vous souhaitez afficher sur votre page de destination.

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment concevoir de superbes critiques de livres pour vos prochaines pages de publication d’ebooks. Cela vous aide à ajouter une preuve sociale à votre page et à convaincre les visiteurs de la crédibilité de votre livre. Si vous avez des questions ou des suggestions, veillez à laisser un commentaire dans la section des commentaires ci-dessous !

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
3 Partages
Partagez3
Tweetez
Enregistrer