Comment créer une page de destination de sommet virtuel avec Divi
Publié: 2020-07-02La promotion d'un événement virtuel implique un certain nombre de stratégies promotionnelles. La création d'une page de destination invitante en fait partie. Créer une page de destination pour votre sommet virtuel est le moyen idéal pour rendre votre public curieux. Avec la bonne combinaison de sections, vous pouvez inviter, informer et collecter les participants inscrits. Aujourd'hui, nous allons vous montrer comment créer une page de destination de sommet virtuel avec cinq sections. La conception comprend des images bicolores et des séparateurs de section de défilement. Nous avons également inclus un fichier JSON téléchargeable si vous souhaitez ignorer le didacticiel pas à pas. Dans le dossier, vous trouverez également les graphiques d'en-tête et de pied de page au format PNG et AI.
Allons-y !
Aperçu
Jetons un coup d'œil à la conception de la page de destination sur différentes tailles d'écran.
Bureau
Tablette
Mobile
Téléchargez la page de destination du Sommet virtuel GRATUITEMENT
Pour mettre la main sur la mise en page gratuite de la page de destination du sommet virtuel, 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 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.
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 !
Sections de la page de destination du Sommet virtuel
Pour que votre page de destination fasse son travail, elle a besoin d'un ensemble spécifique de sections. En plus d'attirer l'attention du spectateur, les pages de destination doivent également être converties. Une page de destination de sommet virtuel, par exemple, doit inclure des informations pertinentes et un appel à l'action. Toutes les sections doivent passer de l'une à l'autre de manière transparente pour que le spectateur se sente inspiré pour agir et s'inscrire.
Nous avons inclus les sections suivantes dans la page de destination du Sommet virtuel :
Entête
La section d'en-tête comprend des informations importantes telles que le titre du sommet et la date de l'événement. C'est l'information la plus importante, c'est pourquoi elle est tout en haut. Aucun en-tête n'est complet sans un appel à l'action et une navigation facile vers le reste de la page.
Dans notre conception, nous avons inclus deux boutons avec des liens d'ancrage qui permettent d'accéder aux sections des intervenants et du programme. Plus important encore, nous avons inclus un bouton avec un lien vers la section d'inscription. Tout au long de la page, tous les boutons « s'inscrire » se ressemblent, afin d'avoir une unité visuelle dans le design.
Informations
La deuxième section est une section d'information qui incite le spectateur à envisager de participer au sommet virtuel. Dans la conception, nous avons ajouté quatre textes de présentation et une image qui peut être facilement transformée en vidéo. Les textes de présentation énumèrent quatre raisons d'assister au sommet et l'image (ou la vidéo) est le visuel pour soutenir la décision.
Les haut-parleurs
Dans la section suivante, vous trouverez un ensemble de six modules de personne. C'est ici que vous présentez les intervenants qui participeront au sommet. Chaque module comprend les éléments suivants :
- Image
- Nom
- Position
- La description
- Liens vers les réseaux sociaux
Assurez-vous de saisir toutes les informations pertinentes pour chaque haut-parleur. Essayez également d'utiliser le même nombre de lignes dans le corps du texte pour que le design reste net. Comme vous pouvez le voir, nous avons utilisé un effet de couleur bicolore sur toutes les photos des haut-parleurs pour donner au design un aspect et une sensation intéressants. Il y a un tutoriel étape par étape ci-dessous sur la façon d'obtenir cet effet dans Photoshop.
Si vous avez plus de six haut-parleurs, dupliquez simplement la rangée ou clonez les modules en rangées avec plus ou moins de colonnes.
L'horaire
La section calendrier est la suivante. Dans ce domaine, nous avons élégamment partagé le programme du sommet et fait en sorte qu'il soit structurel. Pour conserver le style de la conception du texte, assurez-vous de modifier le contenu mais pas les niveaux de titre. Essayez de garder le contenu à peu près de la même longueur pour que le design reste soigné.
Les lignes sont organisées par jours avec une image de titre et un groupe de textes de présentation. Au bas de la dernière colonne, vous pouvez trouver un bouton d'appel à l'action pour que le public puisse s'inscrire.
S'inscrire
Le dernier mais non le moindre est la section d'inscription. Nous avons inclus un compte à rebours pour ajouter un sentiment d'urgence. Le formulaire de contact doit être directement lié à votre liste RSVP afin que chaque invité soit enregistré automatiquement.
Tout au long de la conception de la page de destination du sommet virtuel, vous trouverez trois boutons qui permettent d'accéder à cette section pour une génération de prospects optimisée.
Créer une carte de dégradé bicolore avec Photoshop
Ouvrir une image dans Adobe Photoshop
Si vous souhaitez imiter les images bicolores dans notre conception, suivez les étapes ci-dessous. Tout d'abord, ouvrez une image dans Photoshop.
Ouvrir les ajustements et sélectionner la carte de dégradé
Ouvrez la barre d'outils des ajustements et cliquez sur la carte de dégradé. Dans l'onglet Propriétés, double-cliquez sur la barre de dégradé pour ouvrir la fenêtre contextuelle des paramètres.
Ajuster les couleurs du dégradé
Dans les paramètres de dégradé, double-cliquez sur chaque couleur pour personnaliser les paramètres.
Pour obtenir l'effet de notre conception, ajustez le dégradé comme suit :
- Type de dégradé : solide
- Douceur : 100 %
- Opacité Stop #1 : 100 %
- Arrêt de couleur #2
- Violet foncé #202060
- Poste : 19 %
- Milieu :
- Opacité médiane : 85 %
- Milieu de couleur : 50 %
- Opacité Stop #2 : 55 %
- Arrêt de couleur #
- Violette #f895f8
- Poste : 100 %
Enregistrer en tant que carte de dégradé personnalisée
Ajoutez un nom à votre dégradé et cliquez sur nouveau pour l'enregistrer. Il sera ensuite stocké dans votre bibliothèque de dégradés. Enregistrez l'image pour le Web à une hauteur de 700 pixels. Répétez le processus avec autant d'images que nécessaire. Après avoir appliqué la carte de dégradé, sélectionnez votre dégradé enregistré.
1. Créer une section d'en-tête
Ajouter une nouvelle section
Fond
Commençons à recréer la page de destination du sommet virtuel. Créez une nouvelle page et ouvrez-la avec le Divi Builder. Avant d'ajouter des lignes, ajoutez une image d'arrière-plan et un dégradé à une nouvelle section. Vous trouverez le graphique d'arrière-plan dans le dossier téléchargeable ci-dessus.
- Dégradé de fond
- Couleur 1 : #1f4068
- Couleur 2: #202040
- Image d'arrière-plan : graphique d'en-tête
Dimensionnement
Ajustez ensuite la hauteur minimale.
- Hauteur minimale : 1050px
Espacement
L'espacement aussi.
- Rembourrage supérieur et inférieur
- Table et téléphone : 90px
Visibilité
Enfin, ajustez les paramètres de visibilité dans l'onglet avancé.
- Débordement horizontal et vertical : masqué
Ajouter une nouvelle ligne
Structure des colonnes
Ajoutez une ligne avec trois colonnes. Sélectionnez la structure de colonne 1/2, 1/4, 1/4.
Dimensionnement
Ajustez la taille de la ligne comme suit :
- Largeur: 90%
- Largeur maximale : 1800px
- Alignement : Centre
Espacement
\Ajoutez également une marge supérieure.
- Marge supérieure : 200px
Colonne 2, 3 Paramètres
Espacement
Ajustez les paramètres des colonnes 2 et 3. D'abord l'espacement
- Marge supérieure : 30px
Visibilité
Ensuite, masquez les colonnes sur le téléphone.
- Désactiver sur : Téléphone
Ajouter le 1er module de texte à la colonne 1
Texte
Ajoutez un premier module de texte dans la colonne 1. Insérez le titre comme contenu H1.
- Corps : Contenu H1
Texte d'en-tête
Dans l'onglet Conception, stylisez ensuite le texte de l'en-tête.
- Niveau de titre : H1
- Police : Alata
- Poids : gras
- Alignement : Centre
- Couleur: Blanc cassé #eaeaea
- Taille
- Bureau : 85px
- Tablette : 70 pixels
- Téléphone : 44px
- Espacement des lettres : 2px
- Hauteur de ligne : 1,1 em
- Ombre de texte : 1ère option
- Couleur de l'ombre : rgba(o,0,0,0.26)
Ajouter le 2e module de texte à la colonne 1
Texte
Ajoutez un deuxième module de texte. Insérez la date en tant que contenu H2.
- Corps du texte : Contenu H2, 15 + 16 juillet 2020
Texte d'en-tête
Stylisez ensuite le texte de l'en-tête.
- Niveau de titre : H2
- Police : Alata
- Poids : Régulier
- Alignement : Centre
- Couleur : Fuchsia #b030b0
- Taille
- Ordinateur de bureau et tablette : 60 pixels
- Téléphone : 45 pixels
- Hauteur de ligne : 1,3 em
Espacement
Ajoutez également de l'espacement.
- Rembourrage inférieur : 20px
Ajouter un module de bouton à la colonne 1
Texte
Ajoutez un module de bouton pour l'appel à l'action.
- Bouton : S'inscrire
Relier
Ajoutez le lien d'ancrage.
- URL du lien : #S'inscrire
Alignement
Passez à l'onglet Conception et définissez l'alignement.
- Alignement des boutons : Centre
Styles personnalisés de boutons
Stylisez le bouton aussi.
- Taille du texte
- Bureau : 30 pixels
- Tablette : 25 pixels
- Téléphone : 20px
- Couleur du texte : Blanc #ffffff
- Fond : Violet #602080
- Rayon de bordure : 35px
- Espacement des lettres : 1px
- Police : Alata
Espacement
Enfin, ajustez l'espacement.
- Marge supérieure
- Tablette et téléphone : 15px
- Rembourrage supérieur : 2px
Ajouter un module de bouton à la colonne 2
Texte
Passez à la colonne 2 et ajoutez un module de boutons. Ajoutez la copie de votre choix.
- Bouton : haut-parleurs
Relier
Ensuite, ajoutez un lien d'ancrage.
- URL du lien : #Speakers
Alignement
Dans l'onglet Conception, définissez l'alignement.
- Alignement des boutons
- Bureau : à droite
- Tablette et téléphone : Centre
Style personnalisé de bouton
Ajustez également les styles de boutons personnalisés.
- Taille du texte : 24 pixels
- Couleur du texte : Blanc #ffffff
- Arrière-plan : Transparent
- Espacement des lettres : 1px
- Police des boutons : Alata
- Rayon de bordure : 0px
Boîte ombre
Enfin, ajoutez une ombre de boîte.
- Boîte Ombre : 4ème option
- Position horizontale : 0px
- Position verticale : 5 pixels
- Couleur de l'ombre : Fuchsia : #b030b0
Cloner le module de bouton dans la colonne 3
Bouton Cloner
Clonez le bouton dans la colonne 2 et placez le module en double dans la colonne 3.
Ajuster le module de boutons
Texte
Modifiez le texte dans le bouton cloné.
- Bouton : Planifier
Relier
Changez également le lien d'ancrage.
- URL du lien : #Schedule
Alignement
N'oubliez pas de modifier également l'alignement.
- Alignement des boutons
- Bureau gauche
Ajouter une nouvelle ligne
Structure des colonnes
Ajoutez une nouvelle ligne avec deux colonnes égales.
Dimensionnement
Réglez d'abord la largeur de la gouttière.
- Largeur de gouttière personnalisée : 2
Espacement
Ajoutez un espacement ensuite.
- Marge supérieure
- Téléphone : -35px
Visibilité
Ajustez ensuite la visibilité de la ligne.
- Désactiver sur : tablette et ordinateur de bureau
Cloner le module de bouton et placer le doublon dans la colonne 1
Bouton Cloner
Clonez le module de boutons dans la colonne 2 de la ligne précédente et placez le module en double dans la colonne 1 de la nouvelle ligne.
Ajuster le module de boutons
Style personnalisé de bouton
Ajustez le texte dans le nouveau bouton.
- Taille du texte : 20 pixels
Boîte ombre
Modifiez également l'ombre de la boîte.
- Position verticale : 4px
Ajouter un module de bouton cloné à la colonne 2
Bouton Cloner
Dupliquer le module de boutons de la colonne 3 de la ligne précédente. Collez-le dans la colonne 2 de cette ligne.
Ajuster le module de boutons
Texte
Ajustez le contenu du texte dans le bouton cloné.
- Texte : Calendrier
2. Créer une section d'informations
Ajouter une nouvelle section
Fond
Pour créer la section d'informations, ajoutez une nouvelle section et stylisez d'abord l'arrière-plan.
- Dégradé de fond
- Couleur 1 : #202040
- Couleur 2: #202060
Espacement
Ajoutez également un peu de rembourrage.
- Rembourrage supérieur : 170 px
- Rembourrage inférieur : 5px
Visibilité
Enfin, ajustez les paramètres de visibilité dans l'onglet avancé.
- Débordement horizontal et vertical : masqué
Ajouter une nouvelle ligne
Structure des colonnes
Ajoutez une nouvelle ligne avec une colonne. Nous l'appellerons la ligne de titre.
Dimensionnement
Définissez ensuite la taille.
- Largeur: 80%
- Largeur maximale : 1800px
Ajouter un module de texte
Texte
Ajoutez un module de texte.
- Corps : Contenu H2 – Pourquoi participer au Sommet virtuel du marketing numérique ?
Texte d'en-tête
Dans l'onglet Conception, stylisez le texte de l'en-tête.
- Niveau de titre : H2
- Police : Alata
- Couleur du texte : Blanc #ffffff
- Taille
- Ordinateur de bureau : 55 pixels
- Tablette : 45px
- Téléphone : 40 pixels
- Espacement des lettres : 2px
- Hauteur de ligne : 1,1 cm
Ajouter un module diviseur
Ligne
Ajoutez maintenant un module de séparation et stylisez la ligne dans l'onglet de conception.
- Couleur de la ligne : Fuchsia #b030b0
Dimensionnement
Ajustez ensuite la taille.
- Poids du diviseur : 50px
- Hauteur maximale : 50px
Effets de défilement
Dans l'onglet avancé, ajoutez un effet de défilement horizontal.
- Activer le mouvement horizontal
- Bureau
- Décalage de départ : -6
- Milieu de décalage : 50 % / 0
- Décalage de fin : 6
- Tablette et téléphone
- Décalage de déclaration : -4
- Décalage moyen : 50 % /0
- Décalage de fin : 4
Ajouter une nouvelle ligne
Structure des colonnes
Ajoutez maintenant une nouvelle ligne avec trois colonnes. Sélectionnez la structure de colonne 1/2, 1/4, 1/4.
Dimensionnement
Avant d'ajouter des modules, ajustez la taille des lignes.
- Largeur: 80%
- Largeur maximale : 1800px
Paramètres de la colonne 1
Espacement
Ajustez également l'espacement de la première colonne.
- Rembourrage supérieur : 20 px
Ajouter un module d'image à la colonne 1
Image
Ajoutez maintenant un module d'image à la colonne 1. Utilisez l'une de vos images avec l'effet bicolore.
- Image : Photo avec effet bicolore
Frontière
Ajustez également les bordures.
- Coins arrondis : 15px
Ajouter le module Blurb à la colonne 2
Texte
Passez à la colonne 2 et ajoutez un module de présentation. Insérez le contenu.
- Titre : Créer de nouvelles connexions
- Corps : Contenu descriptif
Image
Téléchargez l'image numéro 1 que vous pouvez trouver dans le dossier téléchargeable.
- Image : PNG de #1
Image et icône
Ajustez ensuite le placement de l'image.
- Emplacement : Haut
- Alignement : à gauche
Texte du titre
Style le texte du titre aussi.
- Niveau de titre : H4
- Police : Alata
- Couleur : Blanc #ffffff
- Taille : 23 pixels
Le corps du texte
N'oubliez pas de styliser le corps du texte.
- Police : Open Sans
- Couleur : Blanc #ffffff
- Taille: 14px
- Espacement des lettres : 1px
CSS personnalisé
Enfin, ajoutez un rembourrage supplémentaire avec du CSS personnalisé au titre du texte de présentation dans l'onglet avancé.
- Titre de la présentation : padding-bottom : 15px ;
padding-bottom: 15px;
Cloner le module Blurb et placer le doublon dans la colonne 2
Cloner la présentation
Dupliquer le 1er texte de présentation dans la colonne 2.
Teneur
Mettre à jour le contenu.
- Titre : Nouveau titre
- Corps : Nouveau texte descriptif
Image
Ensuite, changez l'image du numéro. Vous pouvez trouver le nouveau dans le dossier téléchargeable.
- Image : PNG de #2
Supprimer la colonne 3 et cloner la colonne 2
Cloner la colonne
Dans les paramètres de ligne, supprimez la 3ème colonne et dupliquez la 2ème. Assurez-vous de remettre la structure de la colonne à 1/2, 1/4, 1/4.
Ajuster le Blurb 1 dans la colonne 3
Teneur
Mettez à jour le contenu du texte dans le texte de présentation cloné.
- Titre : Nouveau titre
- Corps : Nouveau texte descriptif
Image
Modifiez également l'image du numéro.
- Image : PNG de #3
Ajustez le Blurb 2 dans la colonne 3
Teneur
Modifiez également le contenu de ce texte de présentation. D'abord le texte.
- Titre : Nouveau titre
- Corps : Nouveau texte descriptif
Image
Ensuite, changez l'image du numéro.
- Image : PNG de n° 4
3. Créer une section de conférenciers
Ajouter une nouvelle section
Fond
Passons à la section des haut-parleurs. Ajoutez une nouvelle section et stylisez l'arrière-plan.
- Dégradé de fond
- Couleur 1 : #202060
- Couleur 2: #162447
Visibilité
Ajustez les paramètres de visibilité dans l'onglet Avancé.
- Débordement horizontal et vertical : masqué
Cloner la ligne de titre et placer le doublon dans une nouvelle section
Ligne en double
Dupliquez la ligne de titre de la section ci-dessus et placez le doublon dans la section clonée. Nous l'appellerons, ligne de titre 2.
Ajuster le module de texte
Texte
Ensuite, stylisez les paramètres de texte H3 dans l'onglet Conception. Ajustez également l'ID CSS dans le module de texte cloné. Ensuite, changez la couleur de la ligne du module diviseur. Ajoutez maintenant une nouvelle rangée avec 5 modules de taille égale. Ajustez la taille de la ligne comme suit : Ajoutez également de l'espacement. Ajoutez le module à la première personne à la colonne 1. Téléchargez l'image de l'enceinte avec l'effet de couleur. Nous recommandons une taille d'image de 550 x 770 px. Ajoutez ensuite des coins arrondis à l'image. Ensuite, stylisez le texte du titre. Stylisez également le corps du texte. N'oubliez pas le texte de position. Enfin, ajoutez du CSS personnalisé pour un rembourrage supplémentaire. Dans les paramètres de ligne, supprimez les colonnes 2 à 5. Dupliquer la colonne 1 quatre fois. Mettez à jour le contenu de tous les modules clonés. D'abord le texte. Puis l'image. Nous allons maintenant créer la section calendrier. Ajoutez une nouvelle section et stylisez l'arrière-plan comme suit : Ajustez les paramètres de visibilité dans l'onglet Avancé. Clonez la ligne de titre de la section ci-dessus et collez-la dans cette section. Modifiez le contenu du titre. Modifiez l'ID CSS dans le module de texte cloné. Changez également la couleur du séparateur. Maintenant, ajoutez une nouvelle ligne avec trois colonnes de taille égale. Ajustez la taille de la ligne. Ajoutez également de l'espacement. Ajoutez un module de texte à la première colonne. Insérez le contenu. Passez à l'onglet Conception et stylisez le texte de l'en-tête. Ajoutez ensuite de l'espacement. Ajoutez maintenant un module d'appel à l'action avec du contenu de votre choix. Ajoutez également un arrière-plan d'image. Dans l'onglet Conception, stylisez le texte de l'en-tête. Donnez ensuite un style au corps du texte. Ajoutez également de l'espacement. Ensuite, stylisez la bordure. Enfin, ajoutez du CSS personnalisé pour un style supplémentaire. Passez à la colonne 2 et ajoutez un module de texte. Suivez cette structure de contenu : Dans l'onglet Conception, stylisez le texte. Ensuite, stylisez tous les niveaux de titre. Style la bordure aussi. Dupliquez deux fois le 1er module de texte. Modifiez le contenu des modules de texte clonés. Supprimez la bordure du dernier module de la colonne. Dans les paramètres de ligne, supprimez la colonne 3. Dupliquez la colonne 2. Effacez le 3ème module de texte dans la colonne clonée. Mettez à jour le contenu de chaque nouveau module de texte. Copiez le bouton « enregistrer » dans la section d'en-tête et collez-le sous le dernier module de texte de la colonne 3. Modifiez l'alignement du bouton vers la gauche. Ajustez un peu la taille du texte. Dupliquez la 1ère ligne dans la section calendrier. Modifiez le contenu dans le module de texte cloné. Ajustez le contenu du module d'appel à l'action. Modifiez également l'image d'arrière-plan. Ajustez également le contenu des modules de texte. La dernière section est consacrée à l'inscription. Ajoutez une nouvelle section et stylisez l'arrière-plan comme suit. Vous trouverez le graphique de pied de page dans le dossier de téléchargement ci-dessus. Ajustez également l'espacement de la section. Et modifiez les paramètres de visibilité dans l'onglet avancé. Ajoutez maintenant une nouvelle ligne avec une colonne. Ajoutez un séparateur invisible pour servir de lien d'ancrage pour la section. Insérez l'ID CSS qui renvoie à tous les boutons « enregistrer ». Ajoutez une deuxième ligne avec deux colonnes égales. Ajustez les paramètres de dimensionnement de la ligne. Ajoutez un module de compte à rebours à la première colonne. Ajoutez le contenu et la date de l'événement. Stylisez ensuite l'arrière-plan. Dans l'onglet Conception, stylisez le texte du titre. Style le texte des nombres aussi. Aussi, le texte de l'étiquette. Ensuite, ajustez la taille de la rangée. Ajoutez également un peu de rembourrage. Enfin, stylisez la bordure. Ajoutez un nouveau module de formulaire de contact à la colonne 2. Supprimez le champ de message. Saisissez les paramètres pour chaque champ. Dans l'onglet design, sous layout, cliquez sur « make fullwidth ». Faites de même pour le deuxième champ. Revenez aux paramètres généraux du formulaire de contact et ajoutez du contenu. Ensuite, stylisez les champs comme suit : Stylisez également le texte du titre. Ajustez également les styles personnalisés des boutons. N'oubliez pas d'ajuster le border-radius. Enfin, ajoutez du CSS personnalisé pour un rembourrage supplémentaire. Avaient fini! Examinons à nouveau la conception de la page de destination sur différentes tailles d'écran. Tu l'as fait! À quoi ressemble la page de destination de votre sommet virtuel ? Utilisez cette conception pour votre propre sommet virtuel ou pour un client de conception Web. La navigation est optimisée pour la conversion avec juste la bonne quantité d'informations. Nous avons également ajouté des séparateurs de section de défilement pour un petit plus visuel. Faites-nous savoir ce que vous pensez dans les commentaires. Avez-vous téléchargé la mise en page ou avez-vous suivi les étapes?
Texte d'en-tête
CSS personnalisé
Ajuster le diviseur
Ligne
Ajouter une nouvelle ligne
Structure des colonnes
Dimensionnement
Espacement
Ajouter le module Personne à la colonne 1
Texte
Image
Image
Texte du titre
Le corps du texte
Texte du poste
CSS personnalisé
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
Dupliquer la colonne 1
Cloner la colonne
Ajuster le contenu pour les nouveaux modules de personne
Texte
Image
4. Créer une section de planification
Ajouter une nouvelle section
Fond
Visibilité
Cloner la ligne de titre 2
Ligne en double
Ajuster le module de texte
Texte
CSS personnalisé
Ajuster le diviseur
Ligne
Ajouter une nouvelle ligne
Structure des colonnes
Dimensionnement
Espacement
Ajouter un module de texte à la colonne 1
Texte
Texte d'en-tête
Espacement
Ajouter un appel à l'action à la colonne 1
Texte
Fond
Texte d'en-tête
Le corps du texte
Espacement
Frontière
CSS personnalisé
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
Ajouter un module de texte à la colonne 2
Texte
Texte
Texte d'en-tête
Frontière
Cloner le module de texte 2 fois
Cloner le module de texte
Ajuster les nouveaux modules de texte
Texte
Supprimer la bordure du 3e module de texte
Frontière
Supprimer la colonne 3 et cloner la colonne 2
Cloner des colonnes
Supprimer et ajuster les modules de texte
Supprimer le module de texte
Ajuster le contenu
Cloner le module de bouton et placer le doublon dans la colonne 3
Bouton Cloner
Ajuster le module de boutons
Alignement
Style personnalisé de bouton
Cloner la 1ère ligne de la section du programme
Cloner la ligne
Ajuster le module de texte dans la colonne 1
Texte
Ajuster le module d'appel à l'action
Texte
Fond
Ajuster les modules de texte
Texte
5. Créer une section de registre
Ajouter une nouvelle section
Fond
Espacement
Visibilité
Ajouter une nouvelle ligne
Structure des colonnes
Ajouter un module diviseur
Visibilité
Identifiant CSS
Ajouter une nouvelle ligne
Structure des colonnes
Dimensionnement
Ajouter un module de compte à rebours à la colonne 1
Texte
Fond
Texte du titre
Texte de nombres
Texte de l'étiquette
Dimensionnement
Espacement
Frontière
Ajouter un module de formulaire de contact à la colonne 2
Éléments
Disposition des champs
Texte
Des champs
Texte du titre
Styles personnalisés de boutons
Frontière
CSS personnalisé
padding-bottom: 30px;
Aperçu
Bureau
Tablette
Mobile
C'est un Wrap