Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Comment créer une tablette de prévisualisation de contenu dans Divi

Rifat Tutoriels Divi Oct 6, 2021

Les éléments de démonstration/aperçu peuvent être une tactique marketing efficace si vous les utilisez sur votre site Web. C'est particulièrement utile lorsqu'il s'agit de promouvoir des produits numériques tels que des livres électroniques. Vous les taquinez avec un avant-goût de ce qui les attend, alors ils en redemanderont. Dans l'article d'aujourd'hui, nous allons vous apprendre à utiliser la tablette déroulante de Divi pour afficher du matériel teaser. En utilisant les fonctionnalités intégrées de Divi , nous allons transformer une colonne en un conteneur déroulant (destiné à ressembler à une tablette) pouvant contenir tout type d'informations. Vous pouvez promouvoir les premiers chapitres de n'importe quelle conception de livre électronique de votre portfolio ou d'un autre contenu avec cet outil.

Allez, allons-y !

Aperçu de la conception

Ici, vous pouvez voir à quoi ressemblera une tablette de prévisualisation de contenu défilant une fois la conception terminée.

Segment de conception Partie 1 : Structure du conteneur

Créez une nouvelle page à partir du tableau de bord et avancez avec Edit with Divi . Sélectionnez ensuite Build From Scratch et commencez à construire.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Ajout de ligne

Commençons par une ligne à deux colonnes. N'oubliez pas que nous créons ceci dans la section par défaut.

Paramètres : Colonne 1

Couleur de l'arrière plan

Ensuite, allez dans les options de la colonne 1 et donnez-lui un fond blanc.

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

Bordure et rembourrage

Maintenant, ajoutez un peu de remplissage à la colonne et ajoutez une bordure dessus.

  • Remplissage : 25px (haut, bas, gauche, droite)
  • Coins arrondis : 20px
  • Largeur de la bordure : 30 px
  • Couleur de la bordure : #000000

Boîte ombre

Pour rendre cette conception un peu plus détaillée et plus profonde, ajoutons-y une ombre à paupières.

  • Box Shadow : voir capture d'écran
  • Position horizontale de l'ombre de la boîte : 5px
  • Position verticale de l'ombre de la boîte : 5px
  • Couleur de l'ombre : #5555555

Hauteur et largeur personnalisées à l'aide de CSS

Pour rendre le contenu consultable, définissez la hauteur de la colonne sur une valeur spécifique. Le contenu dépassera désormais la taille maximale de la colonne. Nous voulons que le rapport hauteur/largeur de la tablette reste stable, il est donc logique de définir une largeur complète pour la colonne. Accédez à l'onglet Avancé et apportez les modifications suivantes à la hauteur et à la largeur de la colonne :

Ajoutez le CSS personnalisé suivant à la version Desktop sur l'élément principal sous l'option CSS personnalisé.

height:650px;
max-width: 488px;

Ajoutez maintenant le code à la version mobile.

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;

Débordement vertical : défilement

Le contenu finira par déborder en raison de la nouvelle hauteur définie de la colonne. Réglez l'option de débordement vertical visible sur "scroll" pour vous assurer que le matériau qui déborde peut être observé en faisant défiler la colonne.

  • Débordement vertical : défilement

Segment de conception, partie 2 : ajouter du contenu à la tablette

Nous allons maintenant ajouter du contenu à la colonne ou à la tablette. Vous pouvez afficher n'importe quoi à l'intérieur des modules Divi. Ici, nous allons faire un ebook montrant où il y aura du contenu, une image de couverture et un bouton d'action créé par le module de présentation.

Bouton CTA avec fond d'image

Nous ajouterons un module de présentation à la tablette qui informera le visiteur de faire défiler. Outre l'icône de présentation et le texte, nous utiliserons une image d'arrière-plan comme aperçu de la couverture.

Paramètres du module Blurb

Apportez les ajustements suivants au module de présentation.

  • Titre : Faites défiler jusqu'à Aperçu
  • Utiliser l'icône : OUI
  • Icône : voir capture d'écran
  • Couleur d'arrière-plan du dégradé de gauche : transparent
  • Dégradé d'arrière-plan à droite : #ffffff
  • Position de départ : 20 %
  • Position finale : 85 %
  • Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Modifiez les paramètres suivants dans l'onglet Conception.

  • Couleur de l'icône : #000000
  • Taille de la police de l'icône : 80 px (ordinateur de bureau et tablette), 70 px (téléphone)
  • Police du titre : Montserrat
  • Alignement du texte du titre : au centre
  • Couleur du texte du titre : #000000

Nous pouvons ajuster la hauteur du texte de présentation pour qu'elle corresponde à la hauteur de la colonne pour remplir la tablette. Parce que notre colonne a une taille prédéterminée, ce pourcentage de hauteur fonctionne. Une fois que nous aurons ajouté un rembourrage supérieur, nous pourrons déplacer l'icône et le titre en bas de la colonne.

Pour dimensionner et espacer le texte de présentation, mettez à jour les éléments suivants :

  • Hauteur : 100 %
  • Marge : 25px en bas
  • Rembourrage : 400 px (ordinateur de bureau et tablette), 270 px (téléphone)

Image de couverture de livre

Le prochain élément que nous allons ajouter est une image de couverture. Ajoutez un module d'image sous le module de présentation précédent.

Utilisez la même image utilisée sur le module de présentation.

Contenu du texte

Le dernier élément sur la tablette que nous allons ajouter est du contenu textuel. Utilisez le module de texte pour cela.

Ajoutez ensuite le code suivant au corps de la section Texte .

>h3/h3h3/h3

Dans l'onglet Conception, mettez à jour les styles suivants.

  • Police de la rubrique 3 : Montserrat
  • Titre 3 Poids de la police : Ultra gras
  • Titre 3 Alignement du texte : Centre
  • Titre 3 Hauteur de ligne : 1,3 em
  • Rembourrage : 10 % (haut et bas)

Segment de conception, partie 3 : retouche finale

Paramètre de ligne - Mis à jour

Maintenant que tout le contenu est en place, ajustons les paramètres de ligne pour le rendre plus réactif.

  • Largeur : 100 % (ordinateur de bureau), 90 % (tablette et téléphone)
  • Largeur maximale : 1080px (ordinateur de bureau), 488px (tablette et téléphone)

Contenu de la colonne 2

Jusqu'à présent, nous n'avons fait que le travail de la colonne 1. Maintenant, nous allons ajouter du contenu dans la colonne 2 pour rendre notre design plus attrayant et captivant. Nous ajouterons des modules de texte et des modules de boutons pour rendre le design plus naturel.

Sortie finale

Alors, voici une belle tablette de prévisualisation de contenu réalisée par Divi.

Emballer

L'avantage le plus important de cette conception de module/tablette de prévisualisation est que nous pouvons l'utiliser dans diverses situations. De ce fait, la tablette étant essentiellement une colonne Divi, le matériel que vous souhaitez présenter peut être conçu à l'aide d'un nombre quelconque de modules Divi (texte, image, bouton). Si vous avez besoin d'offrir du contenu de prévisualisation / aperçu sur votre site Web à l'avenir, j'espère que cela sera utile. Partagez vos réflexions dans la section des commentaires, et n'oubliez pas de partager avec vos amis car ils pourraient en avoir besoin !