Construction de votre page d'atterrissage Instapage

Dans la première partie de cette courte série, nous avons abordé les bases de ce que sont les pages de destination. Dans cette partie, nous allons passer en revue le processus de construction d'une page de destination Instapage..

Comment construire votre page

Les conceptions initialement créées dans Photoshop doivent être converties en une page de renvoi parfaite sur la plate-forme Instapage. Toutes les pages sont structurées en suivant le système de grille 960 et en utilisant des sections de page horizontales expliquées ci-dessous..

Commencer avec une page blanche

Instapage offre à ses utilisateurs une variété de modèles parmi lesquels choisir. Alors que nous nous concentrons sur des modèles spécifiques à l’industrie pour nos utilisateurs généraux, vous commencerez avec un canevas vierge.. 

Vous n'avez pas besoin d'utiliser un autre programme pour compléter votre modèle Instapage. Toutefois, vous pouvez convertir ou importer vos autres thèmes précédemment conçus si vous le souhaitez. CSS et JavaScript personnalisé sont également pris en charge.

Ajout d'éléments de page de destination

Avec Instapage, vous pouvez commencer à ajouter vos éléments de page de destination en cliquant sur le bouton AJOUTER NOUVEAU option de la barre d’outils principale et sélection de l’élément à ajouter à votre page.

En règle générale, l’idéal est d’ajouter un élément à une section de page clairement définie. Cependant, vous avez toute la capacité de structurer votre page à votre guise. Vous pouvez également ajuster la hauteur des sections de la page en fonction des éléments que vous avez ajoutés..

Dans l'application, une info-bulle X / Y apparaît chaque fois que vous déplacez un élément. Cela vous aidera si vous êtes habitué à concevoir via cette méthode ou si vous effectuez une conversion depuis un autre thème. Les coordonnées sont déterminées par le milieu de l'élément déplacé par rapport à sa distance par rapport au haut à gauche de la colonne de la page principale..

La colonne de la page principale a une largeur de page standard définie de 960px.

Vous pouvez ajouter les éléments suivants à votre modèle de page de destination personnalisée: 

  • Sections de page
  • Gros titre
  • Texte (paragraphe)
  • Image
  • Vidéo
  • Bouton CTA
  • Formes
  • Plans
  • Boutons de partage social
  • Liens HTML
  • Formes

Tous ces éléments sont ajoutés en cliquant sur l'élément que vous souhaitez ajouter, puis en plaçant / modifiant votre page. Nous discuterons d'ajouter des éléments plus en détail ci-dessous.

Sections de page et boîtes

Les sections de page permettent de séparer différentes zones de contenu sur votre page de destination. La section couvre toujours toute la largeur de la page et ne peut pas être redimensionnée horizontalement. Les sections de page peuvent être repositionnées verticalement n'importe où sur la page (démontré dans la vidéo)

Vous pouvez grouper le contenu avec des sections et des zones de deux manières. Si vous avez déjà du contenu sur votre page, vous pouvez ajouter une boîte (en le choisissant dans l'élément formes), puis faire glisser votre contenu dans cette boîte. Ou, vous pouvez d'abord créer la boîte, puis faire glisser et déposer les objets directement dans la boîte qui va les imbriquer.

Une fois les objets imbriqués, vous pouvez maintenant les déplacer sur votre page en tant qu’objet unique. Sélectionnez la case et continuez à partir de là..

La forme de la boîte est généralement utilisée pour créer un carré ou un rectangle standard que vous pouvez utiliser pour mettre en évidence des formulaires, des images, du texte, etc. Il ne doit pas couvrir toute la largeur de la page.

Lors de la modification de sections de page ou de formes de boîte, les attributs suivants vous seront fournis:

  • Couleur de fond: En cliquant dessus, vous choisissez une couleur primaire pour l’arrière-plan de la forme..
  • Couleur de la bordure: En cliquant dessus, vous choisissez une couleur pour la bordure entourant la boîte..
  • Largeur de la bordure: Entrez un nombre ici pour déterminer l'épaisseur de la bordure.
  • Style de bordure: Solide, pointillé, pointillé, double.
  • Image de fond: Vous définissez une image comme un motif comme arrière-plan de votre forme.
  • Coins arrondis: Cliquez sur les petites flèches haut / bas de n’importe quel coin pour ajuster le tour que vous souhaitez..
  • Transparence: Vous pouvez l'utiliser pour améliorer l'apparence de vos pages en révélant par exemple l'arrière-plan de la page.

Ajout de texte à votre page de destination

Vous pouvez ajouter un titre et un texte de paragraphe en cliquant sur les options respectives dans la barre d’outils. Lorsque vous cliquez sur le bouton de paragraphe ou de titre, un paragraphe prédéfini apparaît sur votre page. Vous pouvez ensuite modifier ce paragraphe en conséquence..

L'éditeur de texte vous permet de modifier la couleur, la taille de la police, l'alignement et vous pouvez également ajouter des listes numérotées ou créer un lien..

Ajout d'images et de vidéos

Après avoir cliqué pour ajouter un nouvel élément d'image, vous aurez la possibilité de choisir un élément existant dans un dossier ou d'en télécharger un nouveau. Toutes les images que vous téléchargez seront sauvegardées sur nos serveurs et vous pourrez les utiliser plus tard sans re-télécharger.

Vous pouvez remplacer des images à tout moment en sélectionnant l'image> en cliquant sur Modifier> en choisissant de remplacer.

Utilisez Images pour augmenter votre produit ou service (les images valent mille mots), mais encore une fois, ne vous laissez pas emporter. Trop de visuel détournera les utilisateurs de l'objectif de conversion.

Pour en savoir plus sur la façon dont l'utilisation d'images sur une page de destination peut améliorer la conversion, consultez Utiliser des images sur votre page de destination pour booster les conversions..

Vous pouvez télécharger une vidéo sur votre page de destination en sélectionnant l'option vidéo et en la reliant à la vidéo YouTube ou Vimeo de votre choix. Vous pouvez redimensionner et positionner la vidéo en fonction de vos besoins. Choisissez ensuite si vous souhaitez que la vidéo soit lue automatiquement ou si vous souhaitez masquer la barre de progression..

Ajout de formulaires

Sélectionner AJOUTER NOUVEAU dans la barre d’outils principale puis cliquez sur FORMES. Cela va remplir un formulaire sur votre page de destination. Vous pouvez faire glisser et déposer et redimensionner votre formulaire pour l'adapter à vos besoins spécifiques en matière de conception. Vous pouvez également personnaliser le style des boutons, le style du formulaire, la couleur et la police en cliquant sur le bouton MODIFIER bouton après avoir cliqué sur le formulaire.

Vous pouvez également définir des champs prédéfinis ou créer vos propres listes déroulantes personnalisées. Les formulaires peuvent être liés à nos services de messagerie intégrés tels que Mailchimp ou Aweber ou peuvent fonctionner seuls. Nous proposons également une option de redirection (les intégrations et les redirections de formulaire ne doivent pas être utilisées sur votre page).

Ajout de boutons

Pour ajouter un bouton à votre page, cliquez sur AJOUTER NOUVEAU depuis la barre d’outils principale. Cela va remplir un bouton sur votre page de destination. Si vous cliquez sur le bouton, vous pourrez le redimensionner, changer la couleur ou la police de caractères, et faire glisser la fonction où vous le souhaitez.

Après avoir cliqué sur le bouton, une icône de lien apparaît ci-dessus. C'est un événement de lien fonctionnalité. Cela ouvrira un gestionnaire de liens qui vous permettra d'ajouter un lien sortant à votre bouton, une fenêtre contextuelle (Lightbox) à votre bouton, un téléchargement de fichier ou un lien vers une autre page d'arrivée Instapage..

Ajout d'un pop-up

De nombreuses pages de destination utilisent un processus d’inscription en deux étapes dans lequel un visiteur clique sur un bouton qui ouvre une fenêtre contextuelle. Dans la fenêtre contextuelle se trouve le formulaire de génération de leads. Pour cette raison, et parce que les pop-ups peuvent être utiles pour révéler plus d'informations, nous avons rendu très facile l'ajout de pop-ups à des boutons, des images et des liens de texte..

Cliquez simplement sur l’un de ces trois types d’éléments> cliquez sur le bouton Lien> puis sélectionnez l’option de menu contextuel..

Vous pouvez redimensionner la fenêtre contextuelle comme tout autre élément. N'importe quel type de contenu peut être ajouté dans la fenêtre contextuelle.

Implémentation de la version mobile (obligatoire)

Comme Instapage offre une personnalisation complète par glisser-déposer, nous ne prenons pas en charge la conception réactive automatique. Pour cette raison, vous devez reconstruire votre page de bureau dans la vue mobile en fonction de la taille réduite de l'écran et de ce qui a du sens dans un contexte mobile..

Vous pouvez déplacer des éléments entre votre version de bureau et votre version mobile en copiant / collant.

Utilisateurs Mac:

  • OmmandCommand-C = Copier
  • OmmandCommande-V = Coller

Utilisateurs de PC:

  • Ctrl-C = Copier
  • Ctrl-P = Coller

Prévisualiser votre page

Pour voir la mise en page finale de votre propre modèle Instapage, cliquez sur le bouton Aperçu option et revoir votre modèle avant de cliquer Publier.

Votre liste de contrôle

  • Revoir les images et la mise en page
  • Vérifier la copie et les polices
  • Liens de test
  • Formulaire et bouton de test
  • Publier la page
  • Lors de la création de votre document d’aide pour le modèle, veuillez inclure ce lien vers les instructions d’utilisation. Si vous avez inclus du code Javascript / CSS personnalisé dans votre modèle, vous devez inclure des instructions détaillées sur l'utilisation ou la mise à jour des scripts et des fonctionnalités..

Remarque: La publication de votre page vous permet de fournir un lien de prévisualisation en direct sur les marchés de modèles.

Exigences d'approbation de ThemeForest

Tous les modèles de page de destination doivent être personnalisables. Les utilisateurs d’Instapage doivent pouvoir échanger facilement tout élément de leur choix..

Pour que les modèles ne perdent pas leur qualité lorsque l'utilisateur final apporte des modifications, il est important que votre page soit approuvée par ThemeForest. Veuillez garder à l’esprit les consignes suivantes:

  • Les images doivent être faciles à échanger
  • Les sections de page doivent être utilisées pour segmenter correctement votre page
  • Le code Javascript doit commencer par un commentaire comprenant les informations de contact de l'auteur et des instructions de support.
  • Il ne devrait y avoir aucun élément cassé
  • Les boutons de formulaire doivent être attachés fermement à leurs formulaires respectifs
  • Votre page devrait avoir une version mobile activée

Télécharger votre modèle

Pour utiliser, partager ou vendre votre modèle fini, vous devez le télécharger. Pour télécharger, cliquez sur le bouton plus d'options bouton présent sur le tableau de bord et sélectionnez Page de téléchargement.

Le fichier aura une extension «.instapage». Une fois que vous avez téléchargé votre fichier, n'hésitez pas à le renommer si nécessaire, mais laissez l'extension «.instapage» intacte..

Emballage de plusieurs mises en page ensemble

Vous souhaitez conditionner plusieurs mises en page du même modèle? Évitez d'utiliser des variantes de page pour empaqueter plusieurs modèles.

Au lieu de cela, créez chaque mise en page en tant que page distincte et téléchargez chaque mise en page séparément. Cela garantira que vous aurez un lien de prévisualisation fonctionnel pour chaque mise en page et réduira les risques de confusion pour le téléchargeur, car les variantes sont utilisées spécifiquement pour les tests A / B..

Conclusion

Espérons que cela vous a donné une introduction approfondie à Instapage et à la création de modèles Instapage destinés à la vente sur des marchés tels que ThemeForest. Il y a encore beaucoup à apprendre, alors si vous avez des questions, n'hésitez pas à les demander dans les commentaires..

Découvrez également le concours Instapage le plus recherché d'Envato qui se déroule actuellement.!