{"id":350726,"date":"2022-03-30T14:46:38","date_gmt":"2022-03-30T14:46:38","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=350726"},"modified":"2022-03-30T14:46:42","modified_gmt":"2022-03-30T14:46:42","slug":"comment-creer-une-page-daccueil-pour-un-sommet-virtuel-avec-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-creer-une-page-daccueil-pour-un-sommet-virtuel-avec-divi\/","title":{"rendered":"Comment cr\u00e9er une page d’accueil pour un sommet virtuel avec Divi"},"content":{"rendered":"\n
\u00a0<\/p>\n
La promotion d’un \u00e9v\u00e9nement virtuel implique un certain nombre de strat\u00e9gies promotionnelles. La cr\u00e9ation d’une page de renvoi invitante est l’une d’entre elles. La cr\u00e9ation d’une page de renvoi pour votre sommet virtuel est le moyen id\u00e9al de susciter la curiosit\u00e9 de votre public. Avec la bonne combinaison de sections, vous pouvez inviter, informer et collecter les participants inscrits. Aujourd’hui, nous allons vous montrer comment cr\u00e9er une page de renvoi pour un sommet virtuel comportant cinq sections. La conception comprend des images bicolores et des s\u00e9parateurs de section d\u00e9filants. Nous avons \u00e9galement inclus un fichier JSON t\u00e9l\u00e9chargeable si vous souhaitez sauter le tutoriel \u00e9tape par \u00e9tape. Dans le dossier, vous trouverez \u00e9galement les graphiques d’en-t\u00eate et de pied de page en PNG et AI.<\/p>\n
C’est parti !<\/p>\n
Jetons un coup d’\u0153il \u00e0 la conception de la page de destination sur diff\u00e9rentes tailles d’\u00e9cran.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Pour mettre la main sur la mise en page gratuite de la page d’accueil du sommet virtuel, vous devez d’abord la t\u00e9l\u00e9charger \u00e0 l’aide du bouton ci-dessous. Pour avoir acc\u00e8s au t\u00e9l\u00e9chargement, vous devez vous inscrire \u00e0 notre liste de diffusion Divi Daily \u00e0 l’aide du formulaire ci-dessous. En tant que nouvel abonn\u00e9, vous recevrez encore plus d’avantages de Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous \u00eates d\u00e9j\u00e0 sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur t\u00e9l\u00e9charger. Vous ne serez pas \u00ab\u00a0r\u00e9inscrit\u00a0\u00bb et ne recevrez pas d’e-mails suppl\u00e9mentaires.<\/p>\n
Pour que votre page d’accueil fasse son travail, elle a besoin d’un ensemble sp\u00e9cifique de sections. En plus d’attirer l’attention de l’internaute, les pages d’atterrissage doivent \u00e9galement convertir. Une page d’atterrissage pour un sommet virtuel, par exemple, doit inclure des informations pertinentes et un appel \u00e0 l’action. Toutes les sections doivent passer de l’une \u00e0 l’autre de mani\u00e8re transparente pour que le visiteur soit incit\u00e9 \u00e0 agir et \u00e0 s’inscrire.<\/p>\n
Nous avons inclus les sections suivantes dans la page d’atterrissage du sommet virtuel :<\/p>\n
La section d’en-t\u00eate comprend des informations importantes telles que le titre du sommet et la date de l’\u00e9v\u00e9nement. Il s’agit de l’information la plus importante, c’est pourquoi elle se trouve tout en haut. Aucun en-t\u00eate n’est complet sans un appel \u00e0 l’action et une navigation facile vers le reste de la page.<\/p>\n
Dans notre conception, nous avons inclus deux boutons avec des liens d’ancrage qui permettent de naviguer vers les sections orateurs et programme. Mais surtout, nous avons inclus un bouton avec un lien vers la section d’inscription. Dans toute la page, tous les boutons d’inscription ont le m\u00eame aspect, afin d’assurer l’unit\u00e9 visuelle de la conception.<\/p>\n
<\/p>\n
La deuxi\u00e8me section est une section informative qui incite le spectateur \u00e0 envisager de participer au sommet virtuel. Dans le design, nous avons ajout\u00e9 quatre textes et une image qui peut facilement \u00eatre transform\u00e9e en vid\u00e9o. Les blurbs \u00e9num\u00e8rent quatre raisons de participer au sommet et l’image (ou la vid\u00e9o) est le visuel qui soutient la d\u00e9cision.<\/p>\n
<\/p>\n
Dans la section suivante, vous trouverez un ensemble de modules de six personnes. C’est ici que vous pr\u00e9sentez les orateurs qui participeront au sommet. Chaque module comprend les \u00e9l\u00e9ments suivants :<\/p>\n
Veillez \u00e0 saisir toutes les informations pertinentes pour chaque intervenant. Essayez \u00e9galement d’utiliser le m\u00eame nombre de lignes dans le corps du texte pour que le design reste net. Comme vous pouvez le voir, nous avons utilis\u00e9 un effet de couleur bicolore sur toutes les photos des intervenants pour donner au design un aspect et une sensation int\u00e9ressants. Vous trouverez ci-dessous un tutoriel \u00e9tape par \u00e9tape sur la mani\u00e8re d’obtenir cet effet dans Photoshop.<\/p>\n
Si vous avez plus de six orateurs, il suffit de dupliquer la rang\u00e9e ou de cloner les modules en rang\u00e9es avec plus ou moins de colonnes.<\/p>\n
<\/p>\n
La section du programme est la suivante. Dans cette zone, nous avons partag\u00e9 avec \u00e9l\u00e9gance le programme du sommet et veill\u00e9 \u00e0 ce qu’il soit structur\u00e9. Pour conserver le style de la conception du texte, veillez \u00e0 modifier le contenu, mais pas les niveaux d’en-t\u00eate. Essayez de garder le contenu \u00e0 peu pr\u00e8s de la m\u00eame longueur pour que le design reste soign\u00e9.<\/p>\n
Les rang\u00e9es sont organis\u00e9es par jours, avec une image de titre et un groupe de blurbs. Au bas de la derni\u00e8re colonne, vous trouverez un bouton d’appel \u00e0 l’action permettant au public de s’inscrire.<\/p>\n
<\/p>\n
La derni\u00e8re section, mais non la moindre, est celle de l’inscription. Nous avons inclus un compte \u00e0 rebours pour ajouter un sentiment d’urgence. Le formulaire de contact doit \u00eatre directement li\u00e9 \u00e0 votre liste RSVP afin que chaque invit\u00e9 soit inscrit automatiquement.<\/p>\n
Tout au long de la conception de la page de destination du sommet virtuel, vous trouverez trois boutons qui renvoient \u00e0 cette section pour optimiser la g\u00e9n\u00e9ration de prospects.<\/p>\n
<\/p>\n
Si vous souhaitez imiter les images en duotone de notre conception, suivez les \u00e9tapes ci-dessous. Tout d’abord, ouvrez une image dans Photoshop.<\/p>\n
<\/p>\n
Ouvrez la barre d’outils des r\u00e9glages et cliquez sur la carte des d\u00e9grad\u00e9s. Dans l’onglet des propri\u00e9t\u00e9s, double-cliquez sur la barre de gradient pour ouvrir la fen\u00eatre contextuelle des param\u00e8tres.<\/p>\n
<\/p>\n
Dans les param\u00e8tres du d\u00e9grad\u00e9, double-cliquez sur chaque couleur pour personnaliser les param\u00e8tres.<\/p>\n
Pour obtenir l’effet de notre conception, ajustez le d\u00e9grad\u00e9 comme suit :<\/p>\n
<\/p>\n
<\/p>\n
Donnez un nom \u00e0 votre d\u00e9grad\u00e9 et cliquez sur Nouveau pour l’enregistrer. Il sera alors stock\u00e9 dans votre biblioth\u00e8que de d\u00e9grad\u00e9s. Enregistrez l’image pour le web \u00e0 700px de hauteur. R\u00e9p\u00e9tez le processus avec autant d’images que vous le souhaitez. Apr\u00e8s avoir appliqu\u00e9 la carte de d\u00e9grad\u00e9, s\u00e9lectionnez votre d\u00e9grad\u00e9 enregistr\u00e9.<\/p>\n
<\/p>\n
Commen\u00e7ons \u00e0 recr\u00e9er la page de destination du sommet virtuel. Cr\u00e9ez une nouvelle page et ouvrez-la avec Divi Builder. Avant d’ajouter des lignes, ajoutez une image d’arri\u00e8re-plan et un d\u00e9grad\u00e9 \u00e0 une nouvelle section. Vous trouverez l’image d’arri\u00e8re-plan dans le dossier t\u00e9l\u00e9chargeable ci-dessus.<\/p>\n
<\/p>\n
<\/p>\n
Ajustez la hauteur minimale ensuite.<\/p>\n
<\/p>\n
L’espacement \u00e9galement.<\/p>\n
<\/p>\n
Enfin, ajustez les param\u00e8tres de visibilit\u00e9 dans l’onglet avanc\u00e9.<\/p>\n
<\/p>\n
Ajoutez une ligne avec trois colonnes. S\u00e9lectionnez la structure de colonne 1\/2, 1\/4, 1\/4.<\/p>\n
<\/p>\n
R\u00e9glez la taille de la ligne comme suit :<\/p>\n
<\/p>\n
Ajoutez aussi une marge sup\u00e9rieure.<\/p>\n
<\/p>\n
Ajustez les param\u00e8tres des colonnes 2 et 3. D’abord l’espacement<\/p>\n
<\/p>\n
Ensuite, masquez les colonnes sur le t\u00e9l\u00e9phone.<\/p>\n
<\/p>\n
Ajoutez un premier module de texte dans la colonne 1. Ins\u00e9rez le titre comme contenu H1.<\/p>\n
<\/p>\n
Dans l’onglet Conception, donnez un style au texte de l’en-t\u00eate suivant.<\/p>\n
<\/p>\n
Ajoutez un deuxi\u00e8me module de texte. Ins\u00e9rez la date comme contenu H2.<\/p>\n
<\/p>\n
Donnez un style au texte de l’en-t\u00eate suivant.<\/p>\n
<\/p>\n
Ajoutez aussi un peu d’espacement.<\/p>\n
<\/p>\n
Ajoutez un module de bouton pour l’appel \u00e0 l’action.<\/p>\n
<\/p>\n
Ajoutez le lien d’ancrage.<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet Conception et d\u00e9finissez l’alignement.<\/p>\n
<\/p>\n
Donnez un style au bouton.<\/p>\n
<\/p>\n
Enfin, ajustez l’espacement.<\/p>\n
<\/p>\n
Passez \u00e0 la colonne 2 et ajoutez un module de bouton. Ajoutez la copie de votre choix.<\/p>\n
<\/p>\n
Ensuite, ajoutez un lien d’ancrage.<\/p>\n
<\/p>\n
Dans l’onglet design, d\u00e9finissez l’alignement.<\/p>\n
<\/p>\n
Ajustez \u00e9galement les styles personnalis\u00e9s des boutons.<\/p>\n
<\/p>\n
Enfin, ajoutez une ombre port\u00e9e.<\/p>\n
<\/p>\n
Clonez le bouton de la colonne 2 et placez le module dupliqu\u00e9 dans la colonne 3.<\/p>\n
<\/p>\n
<\/p>\n
Modifiez le texte du bouton clon\u00e9.<\/p>\n
<\/p>\n
Modifiez \u00e9galement le lien d’ancrage.<\/p>\n
<\/p>\n
N’oubliez pas de modifier \u00e9galement l’alignement.<\/p>\n
<\/p>\n
Ajoutez une nouvelle ligne avec deux colonnes \u00e9gales.<\/p>\n
<\/p>\n
Ajustez d’abord la largeur de la goutti\u00e8re.<\/p>\n
<\/p>\n
Ajoutez ensuite l’espacement.<\/p>\n
<\/p>\n
Ajustez ensuite la visibilit\u00e9 de la ligne.<\/p>\n
<\/p>\n
Clonez le module de bouton dans la colonne 2 de la rang\u00e9e pr\u00e9c\u00e9dente et placez le module dupliqu\u00e9 dans la colonne 1 de la nouvelle rang\u00e9e.<\/p>\n
<\/p>\n
<\/p>\n
Ajustez le texte du nouveau bouton.<\/p>\n
<\/p>\n
Modifiez \u00e9galement l’ombre de la bo\u00eete.<\/p>\n
<\/p>\n
Dupliquez le module de bouton de la colonne 3 de la ligne pr\u00e9c\u00e9dente. Collez-le dans la colonne 2 de cette rang\u00e9e.<\/p>\n
<\/p>\n
<\/p>\n
Ajustez le contenu du texte dans le bouton clon\u00e9.<\/p>\n
<\/p>\n
Pour cr\u00e9er la section d’information, ajoutez une nouvelle section et commencez par donner un style \u00e0 l’arri\u00e8re-plan.<\/p>\n
<\/p>\n
Ajoutez \u00e9galement un peu d’espacement.<\/p>\n
<\/p>\n
Enfin, ajustez les param\u00e8tres de visibilit\u00e9 dans l’onglet avanc\u00e9.<\/p>\n
<\/p>\n
Ajoutez une nouvelle ligne avec une seule colonne. Nous l’appellerons la ligne de titre.<\/p>\n
<\/p>\n
D\u00e9finissez la taille suivante.<\/p>\n
<\/p>\n
Ajoutez un module de texte.<\/p>\n
<\/p>\n
Dans l’onglet Conception, donnez un style au texte de l’en-t\u00eate.<\/p>\n
<\/p>\n
Ajoutez maintenant un module de s\u00e9paration et donnez un style \u00e0 la ligne dans l’onglet Design.<\/p>\n
<\/p>\n
Ajustez la taille ensuite.<\/p>\n
<\/p>\n
Dans l’onglet avanc\u00e9, ajoutez un effet de d\u00e9filement horizontal.<\/p>\n
<\/p>\n
Ajoutez maintenant une nouvelle ligne avec trois colonnes. S\u00e9lectionnez la structure de colonne 1\/2, 1\/4, 1\/4.<\/p>\n
<\/p>\n
Avant d’ajouter des modules, ajustez la taille de la rang\u00e9e.<\/p>\n
<\/p>\n
Ajustez \u00e9galement l’espacement de la premi\u00e8re colonne.<\/p>\n
<\/p>\n
Ajoutez maintenant un module image \u00e0 la colonne 1. Utilisez une de vos images avec l’effet duotone.<\/p>\n
<\/p>\n
Ajustez \u00e9galement les bordures.<\/p>\n
<\/p>\n
Passez \u00e0 la colonne 2 et ajoutez un module de texte. Ins\u00e9rez le contenu.<\/p>\n
<\/p>\n
T\u00e9l\u00e9chargez l’image num\u00e9ro 1 que vous trouverez dans le dossier t\u00e9l\u00e9chargeable.<\/p>\n
<\/p>\n
R\u00e9glez le placement de l’image suivante.<\/p>\n
<\/p>\n
Donnez \u00e9galement un style au texte du titre.<\/p>\n
<\/p>\n
N’oubliez pas de styliser le corps du texte.<\/p>\n
<\/p>\n
Enfin, ajoutez un rembourrage suppl\u00e9mentaire au titre de la brochure dans l’onglet avanc\u00e9, \u00e0 l’aide d’un CSS personnalis\u00e9.<\/p>\n
padding-bottom : 15px ;<\/pre>\n
<\/p>\n
Cloner le module Blurb et placer le duplicata dans la colonne 2<\/h3>\n
Cloner le module Blurb<\/h4>\n
Dupliquez le 1er blurb dans la colonne 2.<\/p>\n
<\/p>\n
Contenu<\/h4>\n
Mettez \u00e0 jour le contenu.<\/p>\n
<\/p>\n
Ensuite, changez l’image du num\u00e9ro. Vous pouvez trouver la nouvelle image dans le dossier t\u00e9l\u00e9chargeable.<\/p>\n
<\/p>\n
Dans les param\u00e8tres de ligne, supprimez la 3e colonne et dupliquez la 2e. Assurez-vous de ramener la structure de la colonne \u00e0 1\/2, 1\/4, 1\/4.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Mettez \u00e0 jour le contenu du texte dans le blurb clon\u00e9.<\/p>\n
<\/p>\n
Modifiez \u00e9galement l’image du num\u00e9ro.<\/p>\n
<\/p>\n
Modifiez \u00e9galement le contenu de ce texte d’accompagnement. D’abord le texte.<\/p>\n
<\/p>\n
Ensuite, changez l’image du num\u00e9ro.<\/p>\n
<\/p>\n
Passons \u00e0 la section pour les orateurs. Ajoutez une nouvelle section et d\u00e9finissez le style de l’arri\u00e8re-plan.<\/p>\n
<\/p>\n
Ajustez les param\u00e8tres de visibilit\u00e9 dans l’onglet avanc\u00e9.<\/p>\n
<\/p>\n
Dupliquez la ligne de titre de la section ci-dessus et placez le duplicata dans la section clon\u00e9e. Nous l’appellerons la rang\u00e9e de titre 2.<\/p>\n
<\/p>\n
<\/p>\n
\u00a0<\/p>\n
<\/p>\n
Ensuite, d\u00e9finissez les param\u00e8tres du texte H3 dans l’onglet Conception.<\/p>\n
<\/p>\n
Ajustez \u00e9galement l’ID CSS dans le module de texte clon\u00e9.<\/p>\n
<\/p>\n
Modifiez ensuite la couleur de la ligne du module de s\u00e9paration.<\/p>\n
<\/p>\n
Ajoutez maintenant une nouvelle rang\u00e9e avec 5 modules de taille \u00e9gale.<\/p>\n
<\/p>\n
Ajustez la taille de la rang\u00e9e comme suit :<\/p>\n
<\/p>\n
Ajoutez aussi un peu d’espacement.<\/p>\n
<\/p>\n
Ajouter le module de la premi\u00e8re personne \u00e0 la colonne 1.<\/p>\n
<\/p>\n
T\u00e9l\u00e9chargez l’image de l’intervenant avec l’effet de couleur. Nous recommandons une image de 550 x 770 px.<\/p>\n
<\/p>\n
Ajoutez ensuite des coins arrondis \u00e0 l’image.<\/p>\n
<\/p>\n
Ensuite, donnez un style au texte du titre.<\/p>\n
<\/p>\n
Donnez un style au corps du texte \u00e9galement.<\/p>\n
<\/p>\n
N’oubliez pas le texte de position.<\/p>\n
<\/p>\n
Enfin, ajoutez quelques feuilles de style CSS personnalis\u00e9es pour un rembourrage suppl\u00e9mentaire.<\/p>\n
padding-bottom : 10px ;<\/pre>\n
padding-bottom : 20px ;<\/pre>\n
padding-bottom : 20px ;<\/pre>\n
<\/p>\n
Dupliquer la colonne 1<\/h3>\n
Cloner la colonne<\/h4>\n
Dans les param\u00e8tres de la ligne, supprimez les colonnes 2 \u00e0 5. Dupliquez la colonne 1 quatre fois.<\/p>\n
<\/p>\n
<\/p>\n
Ajustez le contenu pour les modules \u00ab\u00a0Nouvelle personne<\/h3>\n
Texte<\/h4>\n
Mettez \u00e0 jour le contenu de tous les modules clon\u00e9s. D’abord le texte.<\/p>\n
<\/p>\n
Puis l’image.<\/p>\n
<\/p>\n
Nous allons maintenant cr\u00e9er la section Calendrier. Ajoutez une nouvelle section et d\u00e9finissez le style de l’arri\u00e8re-plan comme suit :<\/p>\n
<\/p>\n
Ajustez les param\u00e8tres de visibilit\u00e9 dans l’onglet avanc\u00e9.<\/p>\n
<\/p>\n
Clonez la ligne de titre de la section ci-dessus et collez-la dans cette section.<\/p>\n
<\/p>\n
<\/p>\n
Modifiez le contenu du titre.<\/p>\n
<\/p>\n
Modifiez l’ID CSS dans le module de texte clon\u00e9.<\/p>\n
<\/p>\n
Modifiez \u00e9galement la couleur du s\u00e9parateur.<\/p>\n
<\/p>\n
Maintenant, ajoutez une nouvelle ligne avec trois colonnes de taille \u00e9gale.<\/p>\n
<\/p>\n
Ajustez la taille de la ligne.<\/p>\n
<\/p>\n
Ajoutez aussi un peu d’espacement.<\/p>\n
<\/p>\n
Ajoutez un module de texte \u00e0 la premi\u00e8re colonne. Ins\u00e9rez le contenu.<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet Conception et donnez un style au texte de l’en-t\u00eate.<\/p>\n
<\/p>\n
Ajoutez ensuite un peu d’espacement.<\/p>\n
<\/p>\n
Ajoutez maintenant un module d’appel \u00e0 l’action avec le contenu de votre choix.<\/p>\n
<\/p>\n
Ajoutez \u00e9galement une image d’arri\u00e8re-plan.<\/p>\n
<\/p>\n
Dans l’onglet \u00ab\u00a0Design\u00a0\u00bb, donnez un style au texte de l’en-t\u00eate.<\/p>\n
<\/p>\n
Donnez un style au corps du texte suivant.<\/p>\n
<\/p>\n
Ajoutez aussi un peu d’espacement.<\/p>\n
<\/p>\n
Ensuite, donnez un style \u00e0 la bordure.<\/p>\n
<\/p>\n
Enfin, ajoutez un CSS personnalis\u00e9 pour un style suppl\u00e9mentaire.<\/p>\n
border-radius : 15px ;\nbackground-color : #162447 \nmargin-top : 500px \npadding-bottom : 40px \npadding-bottom : 40px ;<\/pre>\n
background-color : #q62447 ;\nmargin-top : 500px ;\npadding-bottom : 40px ;\npadding-bottom : 40px ;<\/pre>\n
<\/p>\n
Ajouter un module de texte \u00e0 la colonne 2<\/h3>\n
Texte<\/h4>\n
Passez \u00e0 la colonne 2 et ajoutez un module de texte. Suivez cette structure de contenu :<\/p>\n
<\/p>\n
Dans l’onglet Design, donnez un style au texte.<\/p>\n
<\/p>\n
Donnez ensuite un style \u00e0 tous les niveaux de l’en-t\u00eate.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Donnez un style \u00e0 la bordure \u00e9galement.<\/p>\n
<\/p>\n
Dupliquez deux fois le 1er module de texte.<\/p>\n
<\/p>\n
Modifiez le contenu des modules de texte clon\u00e9s.<\/p>\n
<\/p>\n
Supprimez la bordure du dernier module de la colonne.<\/p>\n
<\/p>\n
Dans les param\u00e8tres de la ligne, supprimez la colonne 3. Dupliquez la colonne 2.<\/p>\n
<\/p>\n
<\/p>\n
Effacez le 3e \u00e9l\u00e9ment de texte de la colonne clon\u00e9e.<\/p>\n
<\/p>\n
Mettez \u00e0 jour le contenu de chaque nouvel \u00e9l\u00e9ment de texte.<\/p>\n
<\/p>\n
Copiez le bouton \u00ab\u00a0s’inscrire\u00a0\u00bb de la section d’en-t\u00eate et collez-le sous le dernier module de texte de la colonne 3.<\/p>\n
<\/p>\n
<\/p>\n
Modifiez l’alignement du bouton vers la gauche.<\/p>\n
<\/p>\n
Ajustez un peu la taille du texte.<\/p>\n
<\/p>\n
Dupliquez la 1\u00e8re ligne de la section Calendrier.<\/p>\n
<\/p>\n
Modifiez le contenu de l’\u00e9l\u00e9ment de texte clon\u00e9.<\/p>\n
<\/p>\n
Ajustez le contenu du module d’appel \u00e0 l’action.<\/p>\n
<\/p>\n
Modifiez \u00e9galement l’image d’arri\u00e8re-plan.<\/p>\n
<\/p>\n
Ajustez \u00e9galement le contenu des modules de texte.<\/p>\n
<\/p>\n
La derni\u00e8re section est consacr\u00e9e \u00e0 l’enregistrement. Ajoutez une nouvelle section et cr\u00e9ez un arri\u00e8re-plan comme suit. Vous trouverez le graphique du pied de page dans le dossier de t\u00e9l\u00e9chargement ci-dessus.<\/p>\n
<\/p>\n
<\/p>\n
Ajustez \u00e9galement l’espacement de la section.<\/p>\n
<\/p>\n
Et modifiez les param\u00e8tres de visibilit\u00e9 dans l’onglet avanc\u00e9.<\/p>\n
<\/p>\n
Ajoutez maintenant une nouvelle rang\u00e9e avec une colonne.<\/p>\n
<\/p>\n
Ajoutez un s\u00e9parateur invisible qui servira de lien d’ancrage pour la section.<\/p>\n
<\/p>\n
Ins\u00e9rez l’ID CSS qui renvoie \u00e0 tous les boutons \u00ab\u00a0s’inscrire\u00a0\u00bb.<\/p>\n
<\/p>\n
Ajoutez une deuxi\u00e8me ligne avec deux colonnes \u00e9gales.<\/p>\n
<\/p>\n
Ajustez les param\u00e8tres de dimensionnement de la rang\u00e9e.<\/p>\n
<\/p>\n
Ajoutez un module de compte \u00e0 rebours \u00e0 la premi\u00e8re colonne. Ajoutez le contenu et la date de l’\u00e9v\u00e9nement.<\/p>\n
<\/p>\n
Donnez un style \u00e0 l’arri\u00e8re-plan suivant.<\/p>\n
<\/p>\n
Dans l’onglet Conception, donnez un style au texte du titre.<\/p>\n
<\/p>\n
Donnez un style au texte des chiffres \u00e9galement.<\/p>\n
<\/p>\n
Aussi, le texte de l’\u00e9tiquette.<\/p>\n
<\/p>\n
Ajustez ensuite la taille de la ligne.<\/p>\n
<\/p>\n
Ajoutez \u00e9galement un peu d’espacement.<\/p>\n
<\/p>\n
Enfin, donnez un style \u00e0 la bordure.<\/p>\n
<\/p>\n
Ajoutez un nouveau module de formulaire de contact \u00e0 la colonne 2. Supprimez le champ de message.<\/p>\n
<\/p>\n
Entrez les param\u00e8tres de chaque champ. Dans l’onglet \u00ab\u00a0Design\u00a0\u00bb, sous \u00ab\u00a0Layout\u00a0\u00bb, cliquez sur \u00ab\u00a0Make fullwidth\u00a0\u00bb. Faites de m\u00eame pour le deuxi\u00e8me champ.<\/p>\n
<\/p>\n
Revenez aux param\u00e8tres g\u00e9n\u00e9raux du formulaire de contact et ajoutez du contenu.<\/p>\n
<\/p>\n
Ensuite, donnez un style aux champs comme suit :<\/p>\n
<\/p>\n
<\/p>\n
Donnez un style au texte du titre \u00e9galement.<\/p>\n
<\/p>\n
Ajustez \u00e9galement les styles personnalis\u00e9s des boutons.<\/p>\n
<\/p>\n
<\/p>\n
N’oubliez pas d’ajuster le rayon de la bordure.<\/p>\n
<\/p>\n
Enfin, ajoutez un CSS personnalis\u00e9 pour un remplissage suppl\u00e9mentaire.<\/p>\n
padding-bottom : 30px ;<\/pre>\n
<\/p>\n
Pr\u00e9visualisation<\/h2>\n
Nous avons termin\u00e9 ! Jetons \u00e0 nouveau un coup d’\u0153il \u00e0 la conception de la page de destination sur diff\u00e9rentes tailles d’\u00e9cran.<\/p>\n
Ordinateur de bureau<\/h3>\n
<\/p>\n
Tablette<\/h3>\n
<\/p>\n
Mobile<\/h3>\n
<\/p>\n
C’est fini<\/h2>\n
Vous avez r\u00e9ussi ! \u00c0 quoi ressemble la page d’accueil de votre sommet virtuel ? Utilisez cette conception pour votre propre sommet virtuel ou pour un client de conception web. La navigation est optimis\u00e9e pour la conversion avec juste ce qu’il faut d’informations. Nous avons ajout\u00e9 des s\u00e9parateurs de section d\u00e9filants pour un petit plus visuel.<\/p>\n
Faites-nous part de votre avis dans les commentaires. Avez-vous t\u00e9l\u00e9charg\u00e9 la mise en page ou avez-vous suivi les \u00e9tapes ?<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
\u00a0 La promotion d’un \u00e9v\u00e9nement virtuel implique un certain nombre de strat\u00e9gies promotionnelles. La cr\u00e9ation d’une page de renvoi invitante est l’une d’entre elles. La cr\u00e9ation d’une page de renvoi pour votre sommet virtuel est le moyen id\u00e9al de susciter la curiosit\u00e9 de votre public. Avec la bonne combinaison de sections, vous pouvez inviter, informer […]<\/p>\n","protected":false},"author":1,"featured_media":350727,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-350726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=350726"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/350727"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=350726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=350726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=350726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}