[tuto] Création d’une page de capture avec un visuel dans le bloc vidéo-formulaire

Dans ce tuto vous allez découvrir comment créer une page de capture en partant d’une page blanche.

Pour réaliser cette page, nous allons utiliser le plugin Optimizepress.

Voici le résultat que vous allez obtenir :

Page capture avec optimizepress

Pour créer cette page il y a plusieurs étapes. Voici les 4 blocs à mettre en place.

4 étapes page capture optimizepress

Nous allons commencer par le bloc 1

couleur_fond-logo

Pour cela vous allez dans la colonne de gauche dans votre tableau d’administration WordPress et vous sélectionnez « Création New Page » puis « Blanck page »

op1

Vous arriverez sur cette page et pour l’exemple vous cliquez sur le premier visuel à gauche.

op2

Avant d’arriver dans le « Live Editor » d’Optimizepress vous devez donner un nom à votre page et une fois que vous aurez cliquez sur « Create page » vous arriverez dans le « Live Editor » avec une page blanche à l’écran.

op3

op4

Première phase : Mise en place du logo et de la couleur de fond

Ce que vous allez faire avant même de travailler sur la page directement, vous allez vous rendre sur « Layout Settings » dans la colonne de gauche de votre « Live Editor ».

Vous verrez apparaître « Header & Navigation » avec le bouton grisé car il est « OFF ». Activez-le en cliquant dessus et il deviendra vert.

op5

Ensuite sur la même page vous descendez jusqu’à « Banner / Header » et vous téléchargez votre logo en cliquant sur « Select file ». Vous arriverez sur la page de téléchargement des images de votre WordPress. Il vous reste plus qu’à télécharger si vous ne l’avez pas déjà fait, sinon recherchez-le dans les images que vous avez dans le dossier « media » de WordPress.

op6

Une fois celui-ci téléchargé, vous le verrez apparaître sur cette page. Descendrez jusqu’à « Choose a header background colour ». Indiquez la couleur que vous voulez voir dans le bandeau de la partie haute de votre page.

op8

Une fois la couleur indiquée, descendez en bas de page pour valider votre travail. Vous arriverez sur l’ancienne page blanche et vous verrez le résultat dans le « Live Editor ».

A ce niveau, je vous invite à enregistrer votre travail et de contrôler si cela correspond à ce que vous souhaitez. Pour cela cliquez une première fois sur  » Save & continue » puis sur « View Public Link »


op9

.

op10

Phase 2 : Installation du titre et du sous-titre

headline

Retournez sur votre « Live Editor » et cliquez sur « Add New Row »

title1

Dans l’étape qui suit, on vous demande de choisir le nombre de colonne, choisissez 1 colonne. Vous verrez à l’écran un nouveau bouton apparaître sur votre page « Add Element ». Avant de cliquer dessus, regardez à gauche de « Add New Row » vous y verrez un crayon. Cliquez dessus et vous arrivez sur une nouvelle page ou vous cocherez « Is it a full width row » puis descendrez en bas de page pour valider.

title2

Vous pouvez maintenant cliquer sur « Add Element »

Dans la case recherche, vous indiquez « head », cela vous permettra de cliquer sur le lien bleu « headline » et vous voyez « Chosse the headline Style ». Prenez la première case.

Dans Step 3, vous rentrez votre texte. Vous pouvez choisir la police et d’autres critères. A vous de tester. Pour finir vous cliquez sur « Insert ».

title3

 

Dans l’étape suivante, cliquez de nouveau sur « Add Element ». Cette fois-ci, vous indiquez « text » dans la barre de recherche. Vous sélectionnez « Text Block ».
Continuez en cliquant sur la case qui apparaît, puis indiquez votre texte. Si vous souhaitez modifier l’apparence de votre texte, regardez ce que vous pouvez modifier en cliquant sur « Advanced Options ».

title4

Vous venez de terminer l’installation de votre titre et votre sous-titre.

Phase 3 : Installation de l’image fond dans le block vidéo et formulaire.

De nouveau vous cliquez sur « Add New Row », vous choisissez cette fois-ci « Layout Complex » et sélectionnez 2/3 – 1/3 et pour finir vous cliquez sur « Insert Into Page ».

Une fois que vous avez fait cette action vous cliquez de nous sur le crayon à gauche de « Add New Row ».

img-fond3

Dans « Row Options », sélectionnez « Is it full width row » puis descendez au niveau « Row Background Image » pour cliquer sur « Select File »

img-fond4

Ensuite téléchargez une image dont la hauteur fait au minimum la 10 à 15 pixels de plus que la hauteur de la vidéo que vous allez installer…

img-fond5

Une fois que l’mage apparaît, vous descendez en-dessous pour sélectionner « Cover/Stretch… » et vous cliquez sur « Update ».

img-fond6

Vous allez être surpris par le résultat quand vous enregistrerez votre travail et que vous voudrez le voir dans votre navigateur. Vous ne verrez pas l’image entièrement et c’est tout à fait normal, alors pas de panique.

img-fond7

Vous allez pouvoir maintenant installer votre vidéo dans la colonne de gauche et votre formulaire dans la colonne de droite.

Ce tuto n’est pas terminé, mais cela demanderait beaucoup d’écrit et d’images pour continuer et arriver au résultat souhaité.

Il faut savoir qu’à partir de cette page vous pouvez créer rapidement la page de remerciement, de contenu et même la page de présentation.

Pour cela, j’ai créé une formation sur la création de la page de capture que vous avez commencé à créer ainsi que la page de remerciement.

.

Apprenez en neufs vidéos à construire ce type de page tendance,
Pour cela cliquez sur ce lien pour y accéder.

Commentaires

  • Gauthier
    Répondre

    Hello, est ce qu’une page de capture est suffisante ou doit on la mettre sur un site ou blog ?

    • Christian

      Bonjour Gauthier. Pour créer ce type de page il faut un WP en place et aussi Optimizepress.
      Ensuite on peut créer autant de pages que l’on souhaite.

  • Veronique
    Répondre

    Bonjour Christian,
    Merci pour ce tuto écrit. Quel courage de mettre tout ça par écrit 😉
    Pour répondre à ta question, je le trouve très bien expliqué mais je trouve les tutos vidéos 10x plus vivants et fluides.
    A vrai dire, je ne vois plus l’intérêt de faire des tutos écrits. Cela me donne la sensation de devoir faire trop d’allers-retours entre la lecture et le logiciel.
    Je lis énormément, mais je constate que tout ce qui relève du pratique, de la technique passe vraiment très bien en vidéo.
    Ce n’est que mon avis, évidemment…
    A très bientôt.

  • Sylvie Laflamme
    Répondre

    Bonjour Christian,

    Merci pour ce Tuto écrit. Malgré que la vidéo devienne de plus en plus populaire, je n’arrive pas à apprendre par ce moyen. Je suis de la vieille école et j’ai besoin de pouvoir me référer rapidement à du texte et à des images qui sont fixes. Par la vidéo tout bouge trop vite, je dois constamment mettre sur pause et alors je perds l’explication audio. Par le texte j’ai les deux en même temps. Merci beaucoup pour toutes les personnes qui, comme moi, ne parviennent pas à s’adapter à la vidéo pour apprendre.