Comment créer une page de destination dans WordPress à l'aide d'Elementor

Il existe de nombreuses façons de créer des pages de destination réussies.

« Pourquoi suivre ce tutoriel en particulier et pas les autres ? » , vous pourriez demander.

Ce didacticiel pas à pas présente plusieurs avantages clés :

1. Générateur de pages de destination gratuit – Vous allez créer une page de destination avec notre principal constructeur gratuit de pages de destination WordPress sans plugins WordPress supplémentaires.
2. Pas de codage - Vous n'aurez pas à gérer une seule ligne de code CSS ou PHP, et vous n'aurez pas non plus besoin de traiter de thèmes enfants - ni de savoir-faire technique d'ailleurs.
3. Conversions élevées - Nous nous concentrons dans ce guide sur l'atteinte d'une page de destination qui non seulement est belle, mais qui est conçue pour générer des conversions plus élevées.

Commençons par un bref aperçu de la page de destination que nous allons créer aujourd'hui.

Une page de destination est une page de votre site Web qui a été créée spécifiquement pour une certaine campagne marketing. Les pages de destination sont conçues avec des objectifs clairs d'appel à l'action (CTA) et elles génèrent souvent de meilleurs taux de conversion que les articles de blog ou les pages de site classiques. Ils sont également une bonne source pour générer des prospects et créer une liste de diffusion à des fins de marketing, ainsi que pour imposer une présence sur les réseaux sociaux.

Il existe plusieurs différenciateurs entre les pages de destination et les pages normales - comme la page d'accueil, par exemple, elles ont moins ou pas de liens de menu d'en-tête et de pied de page, elles sont plus visuelles et ont tendance à avoir un message clair. Le moyen le plus courant de catégoriser les pages de destination est de créer des pages de génération de leads et des pages de destination.

Pour suivre avec succès ce guide, vous aurez besoin de :

• Une installation WordPress (obligatoire)
• Installation d'Elementor (obligatoire)
• Installation d'Elementor Pro

Vous pouvez soit avoir votre page de destination en direct et active sous votre nom de domaine et votre hébergement, soit la stocker localement sur votre ordinateur à l'aide d'un logiciel comme Local by Flywheel.

Vous allez créer une page qui comprend :

1. Section supérieure - Cela prend la plupart de notre espace d'écran. Il est composé d'un titre, d'un texte et d'un bouton d'appel à l'action - qui conduira l'utilisateur à notre formulaire.
2. Section Menu de navigation — Cette zone aide le visiteur du site à naviguer rapidement vers n'importe quelle partie de notre page de destination.
3. À propos de la section — Une section importante qui en dit plus à nos visiteurs sur notre entreprise ou notre service.
4. Section Fonctionnalités — Une liste de fonctionnalités, avec une grande image sur la gauche.
5. Section Galerie — Pour cette section, nous avons créé une disposition de galerie unique en utilisant une combinaison de widgets, avec des images, du texte, des icônes sociales et un arrière-plan vidéo.
6. Section formulaire — Ici, nous avons inclus un formulaire de contact qui permettra à nos visiteurs de se connecter facilement avec nous.

Alors c'est tout — commençons !

Avant de commencer la conception de la page de destination, il est important de configurer correctement l'éditeur visuel.

Nous commençons par choisir la mise en page Elementor Canvas. Cela nous donne une page "propre", sans en-tête, pied de page ou barre latérale. C'est une bonne option à utiliser lors de la création d'une page de destination.

Nous définissons ensuite les couleurs par défaut comme suit : le primaire est le blanc, le secondaire et le texte : le noir. Les couleurs par défaut seront automatiquement définies lorsque nous ajouterons un nouveau widget, ce qui facilitera grandement notre travail.

Faisons de même pour les polices. J'ai configuré ma police de titres principale et secondaire sur une police Adobe Typekit, mais vous pouvez définir votre propre police comme vous le souhaitez.

En ce qui concerne le sélecteur de couleurs, nous configurons nos couleurs afin de pouvoir y accéder rapidement lors de la construction de la page.

Notre section supérieure bleu clair comprend les widgets d'en-tête, d'éditeur de texte et de bouton.

Ce qui est spécial ici : Le mode de fusion de l'image d'arrière-plan et les titres qui se chevauchent.

Comment nous l'avons fait : Nous avons défini la couleur d'arrière-plan sur bleu. La superposition d'arrière-plan nous donne la possibilité de définir un autre calque sur le dessus, cette fois, définissez une superposition d'image. Le mode de fusion est une nouvelle option dans Elementor 2.1. Ce qu'il fait, c'est mélanger la superposition avec le fond bleu clair. Nous choisissons Multiplier ou Assombrir et vérifions comment cela affecte l'image.

Pour obtenir le chevauchement des titres, nous allons dans les paramètres avancés du premier titre et ajoutons une marge négative juste en bas.

La zone de navigation comporte 3 colonnes et comprend un widget d'image, un widget de menu de navigation et un bouton.

Ce qui est spécial ici : des liens de navigation qui aident le visiteur à faire défiler jusqu'au point pertinent de la page.

Comment nous l'avons fait : Nous réaliserons cette fonctionnalité plus tard en utilisant le widget Anchor. Le menu comporte 3 liens : à propos, fonctionnalités et galerie. Chaque lien est connecté à la section concernée à l'aide d'un hashtag.

La zone À propos sera une section à une colonne. Il comprendra l'icône, l'en-tête et le widget de l'éditeur de texte. Cette section est assez simple. Le titre a le même style que le titre du haut, nous n'avons modifié que légèrement l'ombre.

La particularité ici : Icône apparaissant recouverte par l'en-tête

Comment nous l'avons fait : Nous avons réduit la taille de l'icône et défini une marge négative inférieure.

Cette section de fonctionnalités comprend une grande image Vespa sur la gauche et une liste de 3 services sur la droite.

Quelle est la particularité ici : Pour cette section de fonctionnalités, nous répétons l'effet d'icône d'arrière-plan que nous avons utilisé dans la section précédente.

Comment nous l'avons fait : Pour obtenir cet effet, nous avons défini le paramètre de marge pour le widget d'icône sur 40px pour la marge inférieure et -20 pour la gauche. On peut dupliquer ce premier service 3 fois.

La prochaine zone que nous ajouterons est la galerie. Ici, nous avons un gros titre et une grille composée d'appels à l'action et d'autres widgets.

Ce qui est spécial ici : une grille de galerie composée de divers widgets

Comment nous l'avons fait :

• Pour créer cette grille de type galerie, nous utiliserons le widget colonnes pour créer une section interne.
• Nous combinerons plusieurs widgets et une vidéo d'arrière-plan pour créer une galerie au style unique.
• Nous utilisons le widget spacer, afin que nous puissions définir une couleur d'arrière-plan pour la colonne de gauche. Nous faisons de même pour la colonne centrale.
• Nous ajoutons également une autre section Columns Widget, et cette fois, sous style, nous définirons un type d'arrière-plan de vidéo. Dans le nouvel Elementor 2.1, vous pouvez définir une heure de début et de fin pour la vidéo. C'est idéal pour créer une boucle d'arrière-plan.

Voici notre zone de contact, qui est une partie vitale de chaque page qui permet aux visiteurs de communiquer avec les propriétaires du site. À l'aide du générateur de formulaires visuels d'Elementor, nous pouvons facilement configurer un formulaire de contact et personnaliser son style pour qu'il s'adapte à toute la page. Nous pouvons également le connecter de manière transparente à un service de marketing par e-mail comme MailChimp en utilisant les intégrations de formulaires intégrées d'Elementor.

Quelle est la particularité ici : Effet de mode de fusion d'arrière-plan

Comment nous l'avons fait : Nous ajoutons une superposition d'image et la définissons avec le paramètre Multiplier du mode de fusion.

Nous voulons que notre menu soit collant et qu'il reste au premier plan lorsque nous faisons défiler vers le bas.

La particularité ici : Menu collant avec liens de navigation

Comment nous l'avons fait : Nous allons définir cela en choisissant la section d'édition, avancé, effet de défilement, haut collant. Nous pouvons définir sur quels appareils nous aurons le collant, ainsi que l'espacement à partir du haut. Nous ajoutons également des ancres pour que les visiteurs puissent naviguer facilement dans la page. Nous faisons cela en faisant glisser un widget d'ancrage dans chaque section.

Maintenant une petite astuce concernant la navigation; Comme vous pouvez le voir, la zone de navigation est visible sur tout le site, mais si on veut la cacher un peu ?

Ce qui est spécial ici : Masquer la navigation lorsque l'utilisateur fait défiler un certain point sur la page.

Comment nous l'avons fait : Nous allons choisir la section de navigation, avancé, et sous z-index, lui donner un 1. Sous les paramètres de la section de la galerie, style, lui donner un fond blanc. Et sous l'onglet avancé, z-index le définit sur 2. Cela signifie qu'il doit couvrir la section du menu. Voyons si cela fonctionne. Nous allons faire défiler vers le bas et vérifier - la navigation est terminée.

Regardons ce que nous avons créé. Ça a l'air cool, non?