Téléchargement & # 39; Aperçu gratuit de la page d’atterrissage Divi, y compris les liens d’ancrage et le CTA

Que vous vendiez des livres physiques ou électroniques, avoir une page d’atterrissage valide peut faire des merveilles. Vous pouvez accéder à cette page d’atterrissage de façon traditionnelle ou la convertir en page d’atterrissage pour l’aperçu du livre. Aperçu du livre la page d’accueil permet aux gens de lire certaines parties ou chapitres de votre livre à l’avance. Il a également des liens d’ancrage qui simplifient la navigation entre différentes parties ou sections. Enfin, vous voulez aussi que le CTA soit au Centre des projecteurs et qu’il dirige le trafic partout où vous vendez des livres.
Dans ce tutoriel, nous allons utiliser Divi pour recréer une incroyable page d’atterrissage d’aperçu de livre à partir de zéro. Si vous souhaitez ajouter une mise en page json à votre site Web maintenant, vous pouvez également télécharger la mise en page json gratuitement. Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit mise en page de la page d’atterrissage pour l’aperçu du livre pour obtenir la mise en page de la page d’atterrissage pour l’aperçu du livre gratuit, vous devez d’abord 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
CSS à la deuxième colonne. CSS ID column 2: style scrollbar Colonne 2 Élément principal ce que nous allons faire ensuite, c’est permettre à la colonne de défiler en ajoutant la ligne de code CSS suivante à l’élément principal de la colonne 2:
Débordement – y: défilement;
Hauteur: 57,87vw;
Comportement de roulement: lisse; Ajouter le formulaire Texte 1 à la colonne 1 ajouter du contenu maintenant que nous avons changé tous les paramètres de ligne, vous pouvez commencer à ajouter le formulaire! Commencez par le formulaire texte dans la colonne 1 et ajoutez quelque chose de votre choix. Paramètres de texte allez aux paramètres de texte du formulaire et faites quelques modifications. Police de texte: couleur latérale: # 666666 taille du texte: 1.6vw (bureau), 3vw (tablette), 4vw (téléphone) hauteur de la ligne de texte: 2vw Ajouter un module séparateur à la visibilité de la colonne 1 le module suivant que nous ajouterons est le module séparateur. Assurez – vous que l’option afficher le séparateur est activée.
Afficher les séparateurs: Oui Ensuite, allez dans l’onglet conception et changez de couleur. Couleur: # 5802ed Le redimensionnement peut également utiliser des valeurs de taille. Poids du séparateur: 4px largeur: 3vw (bureau), 6vw (tablette), 9vw (téléphone) Hauteur: 0px Espacez et ajoutez des remplissages personnalisés en haut et en bas pour créer de l’espace. Marge supérieure: 1vw (bureau), 3vw (tablette), 4vw (téléphone mobile) marge inférieure: 7vw Ajouter le formulaire Texte 2 à la colonne 1 Ajouter le contenu au troisième formulaire, qui est un autre formulaire texte. Ici, nous ajoutons un symbole (►) à la boîte de contenu, suivi du titre du chapitre 1. Nous sommes en train de lier l’ensemble du module à un ID d’ancrage que nous ajouterons plus tard dans cet article. Lier l’URL au formulaire: https:\/\/yourwebsite.com\/pagetitle\/#chapter – 1 Allez aux paramètres de texte pour continuer et modéliser le contenu comme vous le souhaitez. Polices de texte: poids des caractères de bord pour
Ra: 6vw La boîte d’ombre modélise le formulaire de texte en ajoutant une ombre mince. Boîte d’ombre floue forcée: 50 Px couleur d’ombre: rgba (0,0,0,0,09) L’id CSS continue en ajoutant l’ID CSS au formulaire texte. Assurez – vous d’utiliser le même ID CSS que celui que vous avez connecté dans la première colonne de votre ligne. CSS id: Chapter 1 Cloner un formulaire texte deux fois une fois que vous avez stylisé le formulaire texte, clonez – le autant de fois que nécessaire. Modifier le contenu modifie le contenu de chaque formulaire de texte en double. Modifier l’ID CSS et l’ID CSS. CSS id: Chapter 2 CSS id: Chapter 3 Ajouter un formulaire texte à la colonne 3 ajouter du contenu à la colonne suivante et à la dernière colonne! Ajoutez un formulaire texte qui contient certains éléments de votre sélection. Les paramètres de texte vont ensuite dans l’onglet conception et modifient les paramètres de texte. Police de texte: poids de la police de texte latéral: couleur du texte lourd: # FFFFFF taille du texte: 2vw (bureau), 3vw (tablette), 4vw (téléphone) hauteur de la ligne de texte: 2vw direction du texte: Centre L’espacement ajoute un remplissage gauche et droit qui sera personnalisé plus tard. Gauche: 2vw droite: 2vw Ajouter un module bouton à la colonne 3 ajouter une réplique continuer en ajoutant un module bouton à la colonne 3 qui contient la réplique que vous avez sélectionnée. Aligner modifie l’alignement du bouton suivant. Alignement des boutons: Centre Les paramètres du bouton changent également les paramètres du bouton. Utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 1vw (bureau), 1,5vw (tablette), 2,4vw (téléphone) couleur du texte du bouton: # 5802ed couleur de fond du bouton: # FFFFFF largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 10vw espacement des lettres du bouton: 0px poids de la police: ultra bold style de police: majuscules Définissez l’espacement et ajoutez des marges personnalisées et des valeurs de remplissage pour modéliser et positionner les modules. Marji.