Share
Dernière mise à jour: Nous avons d'autres bonnes nouvelles! Unbounce a ajouté plusieurs nouvelles fonctionnalités de conception, permettant aux utilisateurs de Unbounce d'accéder à des outils de conception très puissants. Les nouvelles fonctionnalités sont:
Ces mises à jour permettront aux clients de Unbounce d'ajouter ces fonctionnalités sans recourir à des solutions de contournement de code tiers. Toutes les opérations ajoutées dans cette mise à jour peuvent être effectuées rapidement et facilement - les concepteurs Web de tous les horizons pourront tirer parti des nouvelles fonctionnalités d'Unbounce..
Nous avons de nouveau mis à jour le message pour refléter ces changements récents. Nous vous montrerons où trouver les fonctionnalités et comment les utiliser. Vous pouvez en apprendre plus sur les dernières mises à jour à la fin de la partie 2 ci-dessous!
Mettre à jour: Grande nouvelle! Les pages de destination Unbounce sont désormais compatibles avec le mobile, ce qui signifie que les concepteurs peuvent créer et vendre des modèles qui s'ajustent automatiquement à tout appareil. Il s'agit de la plus importante mise à jour de produit d'Unbounce à ce jour et des milliers de spécialistes du marketing chercheront à mettre à niveau leurs pages de destination afin qu'elles soient compatibles avec les appareils mobiles. En d'autres termes, ils auront besoin de nouveaux modèles dès que possible.
Nous avons mis à jour cet article pour vous expliquer ce qu'est Mobile responsive et comment vous pouvez concevoir un modèle adaptable pour mobile dans Unbounce. Vous pouvez passer à la partie 4 ci-dessous si vous avez déjà maîtrisé Unbounce et êtes prêt à commencer à concevoir pour mobile!
Dans ce didacticiel, je vais vous présenter Unbounce, un outil permettant de créer des pages de destination spécifiques à une campagne. Nous allons parcourir l'anatomie de divers types de pages de destination, passer en revue les fonctionnalités de l'outil, puis couvrir les ressources nécessaires pour vendre vos propres modèles Unbounce sur Themeforest..
Unbounce a été construit pour résoudre un problème très spécifique; permettre aux spécialistes du marketing professionnels de créer eux-mêmes des pages de destination performantes, propres à une campagne, belles et performantes. C’est-à-dire sans l’aide des développeurs ou - c’est là que les modèles entrent en scène - les concepteurs.
Étant donné que le principal groupe d'utilisateurs d'Unbounce sont les spécialistes du marketing qui ne sont peut-être pas familiarisés avec les outils de conception robustes, le générateur de pages de destination est conçu pour être facile à utiliser, avec une interface WYSIWYG, glisser-déposer. Cela dit, les concepteurs qualifiés peuvent également se sentir à l'aise. il est possible d'ajouter des widgets JavaScript, CSS et HTML personnalisés et d'ajuster les éléments de page au pixel.
Les pages de renvoi sont des pages Web autonomes qui servent un objectif spécifique prédéfini pour les spécialistes du marketing. Si les spécialistes du marketing essaient de vendre un produit ou un service, ils peuvent utiliser une page de renvoi pour informer l'utilisateur avant de le diriger vers la page de tarification. S'ils font la promotion d'un nouveau livre électronique, ils auront besoin d'une page de renvoi pour rassembler les informations de contact de leurs visiteurs avant de remettre le fichier. Pour ces deux campagnes (et presque toutes les campagnes!), Envoyer simplement les visiteurs sur leur page d'accueil (au lieu d'une page de destination dédiée) signifierait un échec marketing..
En bref, les pages de destination sont conçues pour pousser les utilisateurs vers un objectif spécifique, centré sur la conversion..
Surtout des professionnels du marketing expérimentés. Ils lancent en permanence des campagnes marketing et ne peuvent / ne veulent pas compter sur leurs développeurs internes pour créer une page de destination unique pour chaque campagne. Environ un tiers de nos clients font partie de l'équipe marketing d'une entreprise, un autre tiers travaille dans une agence de marketing et le tiers restant sont des entrepreneurs..
Si les clients de Unbounce ne disposent pas des compétences nécessaires pour créer une page à partir de rien, ils commenceront par un modèle ou leur concepteur leur créera un modèle. Une fois qu'ils ont personnalisé un modèle en fonction des besoins de leur campagne, les clients utilisent souvent le même modèle pour chaque campagne similaire qu'ils exécutent..
Le test A / B est une fonctionnalité essentielle de Unbounce. Les utilisateurs peuvent dupliquer leur page finie, modifier une fois la conception ou la copie de la nouvelle page, diviser le trafic entre les deux pages et utiliser les rapports d'Unbounce pour déterminer la version qui convertit le mieux. Les tests A / B permettent aux clients d’améliorer constamment leurs pages de destination et leurs campagnes marketing..
Ce guide vous aidera à concevoir et à construire une page de renvoi à conversion élevée pour la plate-forme Unbounce..
Nous encourageons les auteurs de modèles à s'inscrire pour le compte gratuit d'Unbounce et à envoyer un e-mail à [email protected] pour leur faire savoir que vous concevez des modèles pour la revente. En envoyant un courriel à notre équipe, vous vous assurerez que votre compte reste libre si vous dépassez les 200 visiteurs uniques normalement autorisés dans le forfait gratuit..
Passons rapidement en revue ce que nous allons couvrir dans ce tutoriel.
Comparons la page d'accueil Webtrends (à gauche) avec l'une de leurs pages de destination (à droite). La page d'accueil est magnifiquement conçue et permet à un visiteur d'accomplir un certain nombre de tâches. Il y a cinq concepts présentés dans la zone de promotion principale (via une bannière rotative), quatre messages supplémentaires en dessous, et un total de vingt-huit points d'interaction..
Cependant, les campagnes marketing doivent être centrées sur le laser, conduisant les utilisateurs à une seule action. Lors de la conception d’une page de destination à utiliser dans les campagnes marketing, le concept de Taux d'attention doit être considéré. Le rapport d'attention est défini comme le rapport des éléments interactifs (liens / fuites) de la page au nombre d'objectifs de conversion de campagne (qui est un). Sur cette page d'accueil, le ratio d'attention est de 28: 1, ce qui signifie qu'il y a vingt-sept actions gênantes et une action souhaitée..
Comparez la page d'accueil avec l'une des pages de destination de la génération de leads (à droite). Sur la page de destination, il n'y a qu'une seule action à effectuer. les utilisateurs sont invités à remplir le formulaire et à cliquer sur le bouton CTA pour terminer la conversion. Cela produit une expérience beaucoup plus ciblée pour les visiteurs, en maintenant le taux d’attention à 1: 1..
Chaque page de destination contient cinq éléments essentiels indispensables, qui peuvent être décomposés en une liste plus détaillée de blocs de construction:
Le diagramme ci-dessous représente un exemple de disposition. L'ordre et l'emplacement des 5 éléments seront déterminés par l'histoire que vous voulez raconter à vos visiteurs et peuvent varier de cet exemple. Mais il est utile de regarder ceci à titre de référence à mesure que nous parcourons chaque élément..
Il existe deux principaux types de pages de destination: la génération de leads (lead gen) et les clics instantanés..
Les pages Lead Gen sont utilisées pour capturer des données utilisateur, telles qu'un nom et une adresse électronique. Le seul but de la page est de collecter des informations qui permettront une communication ultérieure avec le prospect à un autre moment. Une page principale contenant un formulaire avec une description de ce que le visiteur obtiendra en retour de la soumission de ses données personnelles.
Flux de plomb Les pages de destination avec clic ont pour but de persuader le visiteur de cliquer sur une autre page..
Généralement utilisés dans les entonnoirs de commerce électronique, ils peuvent fournir des détails sur un produit ou un service afin de "réchauffer" un visiteur et de le rapprocher de sa décision d'achat. Lorsque le client potentiel accède à la page suivante, il aura accès à toutes les informations dont il a besoin et sera beaucoup plus susceptible d'acheter..
Chez Unbounce, nous utilisons un système de grille standard utilisant 12 colonnes, ce qui en fait un conteneur de 940 pixels. L'exemple ci-dessous décompose les combinaisons de colonnes disponibles. Nous vous recommandons d'utiliser la grille sans rebond pour obtenir les meilleurs résultats de conception de page de destination..
Unbounce propose un jeu de caractères standard au sein de son générateur de pages de destination, ainsi qu'un jeu de polices Web de Google. Nous vous recommandons d’utiliser les polices suivantes lors de la conception pour Unbounce.
Vous trouverez ci-dessous une liste des polices Web de Google disponibles dans Unbounce. Veuillez utiliser / télécharger uniquement les polices suivantes à partir de la bibliothèque de polices Web de Google..
Vous trouverez ci-dessous une liste des polices standard disponibles dans Unbounce..
Chaque page de destination a un objectif en tête; déplacer les visiteurs pour qu'ils exécutent un appel à l'action, par exemple en remplissant un formulaire ou en cliquant sur une autre page. Vous trouverez ci-dessous une sélection des types les plus courants de pages de destination..
Les dessins simples et minimalistes ainsi que des exemples entièrement stylés sont présentés.
Exploiter les tendances populaires en matière de conception Web peut vous aider à distinguer votre page de destination des autres, mais sa mise en œuvre peut être difficile à coder. Pour permettre aux utilisateurs d'Unbounce de tirer parti de certaines tendances de conception récentes et efficaces, nous avons intégré de nouveaux outils dans le générateur Unbounce. Vous pouvez désormais intégrer des fonctionnalités telles que le défilement de la parallaxe dans votre page de destination en un seul clic sans avoir à recourir à du code tiers..
Vous avez parcouru Internet pour trouver l'image parfaite pour votre page. Vous l'ajoutez à votre section et il est plus grand que le conteneur. Il y a une solution facile pour cela dans Unbounce.
Une fois que vous avez ajouté l'image à votre section de page, sélectionnez simplement Étirer pour s'adapter à la section de page. Si vous souhaitez qu'il remplisse toute la page, vous pouvez sélectionner Étirer pour s'adapter à la page.
Pour créer une image fixe qui reste en place pendant que les visiteurs font défiler la page (parallaxe), cochez simplement la case «Arrière-plan fixe lorsque vous faites défiler». Élément de conception pouvant avoir un impact considérable sur les pages de destination, le défilement parallaxe nécessite généralement un code personnalisé. Unbounce vous permet d'ajouter cette fonctionnalité en cliquant sur un bouton.
Remarque: Cette fonctionnalité ne sera pas affichée lorsque les visiteurs sont en vue mobile.
En utilisant la fonctionnalité de superposition de couleurs, vous pourrez ajouter des teintes à vos images d’arrière-plan, ce qui amènera une couleur spécifique de votre choix au premier plan..
Vous pouvez régler la transparence de vos images en sélectionnant la fonction Opacité. Une superposition de couleurs de 100 imprégnera complètement votre fond de la couleur choisie.
Pour vous assurer que votre page a toujours l'air et fonctionne comme prévu après son partage, évitez d'utiliser les éléments suivants:
La traduction d'un dessin dans une page de destination sur la plate-forme Unbounce doit être exécutée de manière parfaite en pixels. Dans l'exemple ci-dessous, la page d'arrivée est structurée par sections et par colonnes à l'aide de la grille standard Unbounce. Exportez tous vos fichiers image au format .png ou .jpg avant de commencer..
Lorsque vous créez une page d'arrivée à partir d'un fichier photoshop, nous vous recommandons de commencer à partir d'une «page vierge» sur la plate-forme Unbounce..
En utilisant votre fichier Photoshop original comme guide, définissez la largeur de la page dans le volet des propriétés de la page. Attribuez la couleur d'arrière-plan à la page de destination. Téléchargez une image de fond si nécessaire. Définissez la couleur de texte par défaut comme étant la couleur de texte la plus couramment utilisée dans votre conception. Attribuer la couleur du lien pour compléter les propriétés de votre page.
Il est maintenant temps de structurer la page de destination. Faites glisser et déposez des sections de page sur votre page. En règle générale, vous ajoutez une section de page pour chaque partie verticale clairement définie de votre conception. Par exemple, vous pouvez ajouter des sections de page pour: l'en-tête, la zone de contenu 1, la zone de contenu 2, etc., le pied de page. Ensuite, vous pouvez définir la hauteur de chaque section en fonction des mesures dans votre fichier Photoshop. Une fois que toutes les sections de page ont été configurées, ouvrez le menu arborescent de gauche et attribuez un nom à chaque section. Cela facilitera la modification et l’organisation de la page de destination..
Chaque nouvel élément créé dans la page de destination apparaîtra dans l'arborescence. Assurez-vous donc de nommer chaque nouvel élément au fur et à mesure de son ajout, pour référence ultérieure et modification facile..
Vous pouvez affecter une couleur d'arrière-plan ou un dégradé à une section de page ou télécharger une image à utiliser pour votre arrière-plan. Les images peuvent également être carrelées. Dans l'exemple ci-dessous, une texture d'arrière-plan a été téléchargée pour la zone principale et une autre pour les bandes plus sombres situées au-dessus et au-dessous..
Les images que vous avez découpées et exportées à partir de Photoshop peuvent désormais être téléchargées et ajoutées à la page de destination. Glissez-déposez les images à l'aide de l'outil Image dans la barre d'outils de gauche et positionnez-les sur la page de destination en fonction de la conception de votre photoshop.
Une fois positionnés, n'oubliez pas de les nommer dans l'arborescence. Pour placer une vidéo sur votre page de destination, utilisez l'outil vidéo de la barre d'outils de gauche et collez votre code d'intégration YouTube / Vimeo dans la fenêtre qui s'affiche. Redimensionnez et positionnez-le en fonction de la taille et du format d'image souhaités.
Faites glisser l'outil de texte et déposez-le sur la page. Positionnez chaque bloc de texte en fonction de votre fichier Photoshop et insérez votre copie à l'aide de l'éditeur de texte ci-dessous. Vous pouvez ajuster votre copie, police, taille, hauteur de ligne et couleur pour correspondre à votre fichier Photoshop.
Vous pouvez utiliser des boîtes comme conteneurs pour des éléments tels que des formulaires, des images ou du texte. Modifiez le contour, la couleur et le rayon des angles pour obtenir le résultat visuel souhaité, et transformez même les cases en cercles si nécessaire..
Faites glisser et déposez votre élément de formulaire sur la page de destination. Vous serez invité à la fenêtre de superposition du générateur de formulaire. Choisissez des champs prédéfinis ou créez les vôtres. Lorsque vous utilisez le champ email pré-créé, activez l'option “Valider comme adresse email”. Une fois terminé, cliquez pour sélectionner le formulaire et styliser en ajustant l'espacement, les polices, les couleurs, la largeur et la hauteur dans le volet de propriétés de droite.
Stylisez les boutons par couleur, dégradé ou en ajoutant une image personnalisée. Les états de roulement peuvent également être définis. Modifiez le texte du bouton et modifiez les paramètres de police pour qu'ils correspondent à votre conception..
Si vous avez un formulaire sur votre page, une page de confirmation sera déclenchée lorsque le formulaire sera rempli. Vous pouvez accéder à l'onglet de la page de confirmation dans le coin supérieur gauche de votre page..
Modifiez la conception de la page de confirmation afin qu'elle corresponde à celle de votre page de destination. Cela rassurera les utilisateurs en leur indiquant qu'ils ont suivi le bon chemin et fournira une expérience transparente de l'atterrissage à la post-conversion.
Chaque page de destination nécessite un objectif de conversion. Vous pouvez définir cela en cliquant sur l'onglet «Objectif de conversion» dans le volet des propriétés. Si vous avez un formulaire, vous devez le définir comme “Soumission de formulaire”..
Une fois que tous vos éléments de page de destination sont sur la page, faites simplement glisser pour les repositionner afin qu'ils correspondent à votre fichier Photoshop et créer la mise en page finale. Utilisez le mode Aperçu pour effectuer une dernière révision de votre page de destination..
Mobile Responsive dans Unbounce vous permet de fournir automatiquement aux visiteurs une version mobile ou une version de bureau de votre page, en fonction de la taille de leur navigateur, sans utiliser de redirection. Lorsque Mobile Responsive est configuré et activé sur une page, tout visiteur utilisant un appareil mobile verra la vue mobile de votre page, tandis que toute personne utilisant un appareil de bureau recevra la vue de bureau..
Unbounce définit le "point d'arrêt" de vos pages Responsive pour mobile à 600px. Cela signifie que toute vue du navigateur avec une fenêtre d'affichage de 600 px ou moins recevra la vue mobile de la page. Tout navigateur avec une fenêtre d'affichage supérieure à 600 pixels affichera la version de bureau de la page..
Remarque: les écrans Retina, comme l'iPhone, ont techniquement une résolution supérieure à 600 px en raison de leur haute résolution, mais la fenêtre d'affichage se comporte comme une fenêtre de navigateur plus petite, de sorte que les téléphones Retina affichent la version mobile de la page.
Vous aurez besoin de quelques éléments pour personnaliser votre page responsive mobile et commencer à la servir à vos visiteurs mobiles:
Cliquez sur les boutons en bas à droite de la fenêtre Générateur de page pour basculer entre les vues Bureau et Mobile..
Vous pouvez redimensionner le texte de votre version de bureau pour l’adapter à votre version mobile. Sélectionnez la zone de texte et utilisez la barre d’échelle située dans le coin supérieur droit de la page de propriétés. La zone de texte elle-même peut également être redimensionnée séparément sur le bureau et sur le mobile.
Remarque: Tout ajustement de la police, de la taille de la police, du format ou de la hauteur de ligne effectué à partir de l'éditeur de texte (au lieu de la barre d'échelle) affectera les deux vues.
Les formulaires et les boutons seront les mêmes dans les affichages mobile et de bureau. Vous pouvez masquer un bouton dans une vue et en afficher un autre dans l’autre. Votre formulaire doit être cohérent dans les deux versions, bien que.
Si vous souhaitez masquer des objets en mode mobile ou sur le bureau, cliquez dessus, puis sur l'icône de visibilité dans le panneau des propriétés..
Vous pouvez également contrôler la visibilité en cliquant sur Contenu de la page en bas à gauche du générateur de page..
Lorsque vous sélectionnez des objets dans le générateur de page, vous les voyez mis en surbrillance dans votre panneau Contenu de la page. Vous verrez un œil lorsque l'élément est visible ou un cercle plein si ce n'est pas le cas. Cliquez pour basculer entre les deux.
Remarque: Si vous choisissez de masquer une zone ou une section de page contenant des objets imbriqués, tous les éléments imbriqués seront masqués..
Par défaut, si un élément est déplacé entre les sections de page, il sera déplacé dans les deux vues. Pour déplacer des éléments hors d'une section de page sans modifier réellement les sections de page, maintenez la touche Commande (mac) ou Ctrl (Windows) enfoncée pendant que vous faites glisser un élément. Vous verrez un rappel lorsque vous déplacez un élément d'une section de page à une autre sans maintenir Command ou Control enfoncé..
Si plusieurs éléments sont imbriqués dans une boîte, le déplacement de ces éléments dans une vue déplacera également tous les éléments de l'autre vue. Vous pouvez également utiliser les touches Commande / Contrôle + clic pour annuler la présence d'un élément dans une vue et le déplacer indépendamment de l'autre..
Pointe: rappelez-vous que vous pouvez aussi déplacer + cliquer pour déplacer plusieurs éléments à la fois
Avertissements en dehors des limites: un avertissement s'affiche si l'un de vos objets se trouve en dehors des limites de votre page de destination. Il suffit de déplacer l'objet dans les limites de votre page ou de le masquer pour supprimer l'avertissement. Vous pouvez également désactiver les avertissements hors limites à l'aide de la case à cocher située dans le coin supérieur droit du générateur de page..
Une fois que vous avez terminé de configurer votre page Mobile, accédez au volet Propriétés de droite et cochez Afficher la version mobile aux visiteurs pour activer la vue mobile. Puis enregistrez et publiez (ou republiez) votre page.
Remarque: La publication de votre page vous permet de fournir un lien de prévisualisation en direct sur les marchés de modèles..
Un modèle de page de destination doit être personnalisable. L'utilisateur final doit pouvoir échanger facilement les images prises par le héros ou les arrière-plans photographiques. Pour vous assurer que la qualité de votre page de destination reste intacte et que votre page est approuvée par ThemeForest, veuillez suivre les instructions suivantes:
Accentsconagua