À quoi doit ressembler une page de destination en termes d’efficacité ? Quels blocs doit-il contenir et à quoi doivent ressembler ces blocs ? Après avoir lu l'article, vous obtiendrez des réponses à ces questions et verrez à quoi ressemblent les meilleures pages de destination.

1. Titre avec USP

La page de destination idéale, qu'elle soit sur un seul écran ou longue, a toujours un titre accrocheur qui :

• fait savoir immédiatement au visiteur où il se trouve ;
• lui montre le caractère unique de votre offre.

Le titre est placé en haut de la page de destination, au niveau des yeux de l'utilisateur. Grand, lumineux, intrigant.

Le taux de rebond dépend du titre.

Voici des exemples de titres pour les meilleures pages de destination de notre entreprise.

2. Descripteur

Le descripteur affecte également le taux de rebond, bien que moins que le titre. Il s'agit généralement d'un logo, du nom d'une entreprise, d'un slogan ou de quelques mots sur des services ou des produits. Placé en haut à gauche ou au milieu.

Si la page de destination comporte un titre avec un USP, le descripteur est modeste : un logo et un nom.

Les meilleures pages de destination contiennent toujours un descripteur original.

3. Bloquer avec les informations de contact

Généralement situé dans le coin supérieur droit. Un bloc de contacts complet contient :

• vrai numéro de téléphone;
• e-mail;
• Bouton « Rappeler ».

Un appel doit être utilisé - veuillez appeler.

4. Image attrayante

Par image, nous entendons un arrière-plan - une grande image sur laquelle sont placés un titre, un formulaire de capture et d'autres blocs.

Dans une landing page idéale, l’image correspond au thème du site, est originale et intéressante. La palette de couleurs d’arrière-plan est différente de la couleur de la police du titre pour éviter qu’elles ne se mélangent.

Dans les captures d’écran, vous pouvez voir de belles pages de destination avec des images attrayantes.

5. Capturer les formulaires

Une page de destination à écran unique contient un formulaire de capture, une longue page de destination contient 2 ou 3 formulaires. Le premier formulaire est adjacent au titre - à côté ou en dessous.

Le formulaire de capture contient des champs pour saisir votre nom et votre numéro de téléphone. Un appel à l'action décrit un avantage supplémentaire (cadeau, remise, service supplémentaire) qui encourage le visiteur à soumettre immédiatement des données.

Si une promotion est en cours sur la page de destination, le formulaire de capture contient un compte à rebours.

Ce sont les formulaires de capture dont nous équipons les meilleures pages de destination de nos clients.

6. Bloquer avec des avantages pour le client

Ce bloc contourne idéalement les objections des visiteurs. 3 à 8 points sont placés dans un bloc.

Le bloc a la structure suivante : un texte décrivant l'avantage et une image thématique pour chaque élément. L'emplacement des éléments est horizontal ou vertical. Dans un bloc idéal, tous les paragraphes contiennent la même quantité de texte et les phrases clés sont surlignées en couleur ou en gras.

7. Avis clients

Le bloc de révision est essentiel dans la page de destination.

La page de destination doit contenir de vrais avis d’au moins trois clients. L'option idéale est une fenêtre déroulante, telle qu'un curseur, pouvant accueillir 5 à 10 avis.

Chaque avis :

• contient le nom et la vraie photo du client ;
• contenu avec des détails clés qui auront un impact positif sur la conversion de la page de destination.

Voici des exemples de blocs avec des avis sur les meilleures pages de destination de notre studio.

8. Tarifs ou forfaits de services

Les acheteurs aiment choisir parmi plusieurs alternatives. Par conséquent, la page de destination idéale propose un choix de 2 à 3 tarifs ou forfaits. Peu importe que la page de destination vende des biens ou fournisse des services, le site doit disposer d'un bloc avec des tarifs.

Les tarifs doivent être différents les uns des autres et contenir des informations détaillées sur ce qu'ils contiennent. L'un des tarifs est considéré comme le plus populaire parmi les clients.

9. Exemples de pages de destination

C'est l'un des blocs les plus importants d'une page de destination. C'est après avoir consulté le portfolio ou les cas que le visiteur décide d'entreprendre l'action ciblée.

Un portfolio compétent ne contient que les meilleurs travaux, est magnifiquement conçu et ne prend pas beaucoup de place. Pour le design, il est préférable d'utiliser un slider avec lequel les visiteurs feront défiler les images.

Après avoir consulté des exemples de landing pages, le visiteur doit être convaincu de la qualité du produit ou du service.

10. Coordonnées réelles dans le pied de page

Le déclencheur de confiance final est un bloc avec les informations de contact sur l'entreprise ou l'auteur dans le pied de page.

Dans le cas d’une entreprise, il doit y avoir un plan avec l’emplacement du bureau indiqué. Dans le cas de l’auteur, toutes sortes de contacts.

C'est également là que se trouve le formulaire de capture final.

Une page de destination idéale contient tous les éléments ci-dessus. Cependant, pour qu'une page de destination soit vraiment efficace, tous ses blocs doivent être correctement combinés en une seule composition. Et ajoutez également des significations grâce auxquelles les visiteurs effectuent des actions de conversion sur notre page de destination.

Bonjour, chers lecteurs du site blog. Aujourd'hui, nous allons parler d'une chose aussi importante qu'une page de destination, qui est très souvent appelée page de destination de manière bourgeoise (de l'anglais landing page - landing page). De quoi s’agit-il et pourquoi est-ce si important ?

Consacrons l'article actuel à répondre à cette question, et examinons également en détail les points qui sont très importants lors de la création de pages de destination, et considérons tout cela à l'aide d'exemples spécifiques de pages de destination et des techniques utilisées par les meilleurs experts en ergonomie pour augmenter la efficacité des pages de destination .

Qu'est-ce qu'une page de destination et pourquoi est-elle si importante ?

Très souvent, même si vous faites le bon travail pour attirer les bonnes personnes (public cible) sur votre site Web (, etc.), vous, en tant que propriétaire d'entreprise, n'en ressentirez aucun retour. Il semble que le trafic soit fluide et que le public soit ciblé, mais il n'y a pratiquement aucune vente ni abonnement (selon l'action de conversion que vous avez choisie comme tâche principale). Rien ne fonctionne. Qu'est-ce qui ne va pas ?

Très probablement, vous avez oublié de réfléchir et de préparer les pages de destination, souvent appelées pages de destination. Ce que c'est?

Et c'est un point très important qui peut augmenter considérablement la conversion (le nombre d'achats ou d'inscriptions), car les pages de destination sont conçues pour guider l'utilisateur afin qu'il effectue l'action cible le plus efficacement possible. Si vous dirigez les visiteurs de toutes les publicités, par exemple vers la page principale du site, vous pouvez réduire de manière catastrophique la conversion et tomber à l'eau.

Le terme « page de destination » lui-même est dérivé de l'expression anglaise « page de destination », qui en traduction signifie simplement la page cible, la page de destination (landing). Les pages de destination ne sont pas créées n'importe comment, mais en tenant compte de la psychologie des visiteurs. Ils doivent les accrocher et ne pas les lâcher jusqu'au moment même de l'achat (ou de l'inscription), car il sera extrêmement difficile de réattirer le visiteur.

C'est comme un crochet sur le matériel de pêche - il doit ramasser de manière fiable et retenir en toute confiance le poisson capturé jusqu'au moment où vous le fixez avec un appât. Si l'hameçon (pose) ne convient pas ou n'existe pas du tout, alors tous vos efforts d'appâtage, de pose d'appâts et d'autres actions chamaniques seront vains. Vous n’atteindrez pas votre objectif final.

Les pages de destination elles-mêmes sont soit des pages distinctes d'un site existant, soit des sites d'une seule page spécialement créés à cet effet. En effet, une fois qu’un utilisateur s’y est lancé, il est assez difficile d’en sortir et il doit inévitablement s’y glisser jusqu’à devenir votre client. Mais c'est l'idéal, et nous verrons comment réaliser cet idéal en utilisant diverses astuces publicitaires dans la suite de cette publication.

Exemples de pages de destination

Selon les objectifs que vous poursuivez, vous pouvez diviser les pages de destination (landing pages) en plusieurs types :

12 étapes pour créer la page de destination parfaite

Vous devez comprendre que les pages de destination vers lesquelles vous attirerez les utilisateurs des réseaux sociaux (ou de la publicité contextuelle) doivent avoir un certain nombre de caractéristiques et répondre à certaines exigences. Alors, comment créer la page de destination parfaite ?

Chaque page de destination doit être adaptée à une seule action cible (conversion) : un abonnement ou une vente. Il n'est pas nécessaire d'être gourmand, car l'attention de l'utilisateur sera dispersée et la probabilité qu'il parte augmentera considérablement (sans rien choisir parmi les options proposées). Il est préférable de forcer les clients à réfléchir et à choisir le moins possible : le chemin vers la page de destination doit être droit comme une flèche (évident pour lui) et sans aucune branche.

La page de destination doit comporter un appel à l'action (avec des verbes à l'impératif - appeler, acheter, recevoir, venir, etc.). Les phrases doivent être courtes et motivantes. Par exemple, « acheter maintenant », « suivre un cours vidéo » ou « s'abonner et recevoir ».

Les boutons et les flèches lumineux règnent également, mettant l'accent sur eux. Les boutons dans les tons rouge et jaune fonctionnent bien, car ils sont visibles et contiennent un appel à l'action.

Eh bien, en règle générale, les flèches sont conçues pour mettre encore plus l'accent sur le bouton afin que le comportement de l'utilisateur sur la page de destination soit aussi prévisible que possible.

Parfois les boutons animés fonctionnent très bien (mais dans tous les cas, il faudra tester l’efficacité de certains éléments de la landing page) :

S’ils sont utilisés dans les landing pages (on ne peut pas s’en passer sur les landing pages d’abonnement, mais ils sont aussi assez souvent utilisés par les commerciaux), alors assurez-vous qu’ils contiennent le moins de champs possible. Idéalement, le formulaire ne devrait avoir qu'un seul champ (pour saisir une adresse e-mail), mais pour une communication ultérieure (marketing), vous aurez besoin de connaître le nom d'utilisateur, donc deux champs sont l'option la plus courante. Plus de champs peuvent réduire considérablement la conversion. De plus, l’ajout de champs permettant de saisir un numéro de téléphone ou une adresse rend les utilisateurs méfiants et peut conduire à l’abandon de l’action ciblée.

Dans l'article sur, j'ai mentionné que les internautes ne lisent pas les textes, ils les consultent. Et le plus important à cet égard est le titre. S'il n'est pas là (ou s'il n'est pas mis en évidence en conséquence), cela réduira considérablement le taux de conversion. Sur les pages de destination, les titres doivent être accrocheurs pour que l'utilisateur soit enclin à poursuivre la lecture ou à effectuer immédiatement une action de conversion (abonnement, commande, appel).

Votre page de destination doit contenir non seulement des appels à l'action et des titres accrocheurs, mais également des arguments démontrant la nécessité de s'abonner, d'acheter, de commander ou d'appeler. Dans le cas d'une page d'abonnement, il peut s'agir par exemple d'une courte vidéo avec une description et le contenu du « billet de faveur », ou la même chose peut être présentée sous la forme d'une courte liste (liste). Dans le cas d'un commercial, il peut également s'agir d'une vidéo avec une revue de produit, une liste des services que vous proposez (y compris vos avantages concurrentiels).

Les avis des clients, acheteurs ou abonnés existants fonctionnent très bien sur les pages de destination (il est préférable que certains contacts de ceux qui ont laissé ces avis soient indiqués pour que tout paraisse crédible).

Les comparaisons avant et après fonctionnent également bien sur les pages de destination. Ceci n'est pas applicable à tous les sujets, mais dans le domaine de la perte de poids, de la cosmétologie, du fitness et bien d'autres niches, il peut être utilisé avec une grande efficacité. C’est par exemple ce que fait une entreprise fournissant des services de restauration.

La page de destination peut être assez longue, mais lors de la visualisation du premier écran (c'est la zone de la page qui est visible sans défilement), l'utilisateur doit être absolument clair sur ce que vous vouliez lui dire exactement.

Pour stimuler les abonnés ou les acheteurs de certains produits (par exemple), vous pouvez utiliser l'option de bonus supplémentaires que l'abonné ou l'acheteur recevra lors de sa commande. Lorsque l'utilisateur est sur le point de prendre une décision, ce sont précisément ces « petits pains » qui peuvent faire pencher la balance en votre faveur.

Et, bien sûr, il convient de souligner que « seulement ici et seulement pendant un certain temps » l'utilisateur aura accès à toute cette splendeur (abonnement, prix spécial pour un produit, un ensemble de services supplémentaires). Quelle est la meilleure façon de procéder ? C'est vrai, réglez un compte à rebours jusqu'à l'heure X, lorsque l'opportunité donnée sera manquée. Rien n’incite un utilisateur hésitant à prendre une décision plus que des secondes qui s’enfuient littéralement sous nos yeux.

Ce serait une bonne idée de placer un abonnement, un formulaire de commande ou un numéro de téléphone de contact à côté du minuteur. Cela ne fonctionnera pas toujours, vous devrez donc faire des tests (je pense écrire une série d'articles sur la réalisation de tests A/B - si vous ne voulez pas le manquer, abonnez-vous à la newsletter), et il est possible que une méthode aussi simple et évidente vous permettra d'augmenter la conversion de cette page de destination et de plus que récupérer l'argent dépensé en promotion sur les réseaux sociaux ou en publicité contextuelle.

Les utilisateurs veulent également savoir qui leur propose exactement ce produit, ce service, ce cours vidéo, etc., il est donc nécessaire d'indiquer des informations sur l'auteur, le magasin ou l'entreprise dans la page de destination.

Naturellement, il serait bon de mentionner les mérites, les réalisations et les avantages concurrentiels, mais ne vous félicitez pas trop, afin de ne pas franchir la ligne au-delà de laquelle la confiance dans les informations publiées commence à décliner.

Exemples d'erreurs qui rendent l'atterrissage impossible

En plus de ces éléments qui aident une page de destination à fonctionner plus efficacement, il convient de répertorier les erreurs courantes lors de la création de pages de destination, qui peuvent neutraliser tous les « trucs d'oreille » répertoriés ci-dessus, et vous n'obtiendrez pas le résultat souhaité de la publicité ou de la promotion sur réseaux sociaux (ou contexte).

Permettez-moi de vous rappeler encore une fois que presque personne ne lit sur Internet (du moins la page nouvellement ouverte), mais consulte plutôt des informations. Si cela s'avère vraiment utile et nécessite une étude plus détaillée, alors il s'agira de lire (en général, comme pour les journaux). Par conséquent, ne laissez pas la page de destination être surchargée d'informations - cela peut désorienter l'utilisateur et provoquer une réaction de rejet avant même le moment où il comprend ce qui y est dit.

Le texte doit être petit, aussi concis que possible et rempli d'informations, pas d'eau. Quelques paragraphes « sur rien » donneront fortement envie à l'utilisateur de fermer une telle page de destination. Les petites polices ne fonctionnent pas non plus bien sur une page de destination. En général, son utilisation n’est pas nécessaire, car il n’est pas nécessaire de recourir à de nombreux mots pour en transmettre l’essence.

Ne décevez pas les attentes de l'utilisateur. Si dans une publicité ou dans une publication sur un réseau social, vous parlez d'une chose, mais que lorsque l'utilisateur arrive sur la page de destination, il voit autre chose, alors il y a une perte de confiance et le taux de conversion chute fortement. Il est très important de contrôler ce respect.

La conception de la page de destination est en fait très importante. S'il est inachevé, réalisé de manière non professionnelle ou s'il a une apparence répugnante pour la plupart des utilisateurs, même suivre toutes les règles décrites ci-dessus pour créer une bonne page de destination ne vous sauvera pas. Si vous n'avez pas vous-même les compétences et les goûts nécessaires, ou si vous n'avez pas de concepteur parmi votre personnel, vous pouvez utiliser de nombreux concepteurs ou des modèles de pages de destination prêts à l'emploi, qu'il vous suffit de modifier légèrement en fonction de vos besoins.

Encore une fois, les tests et l'analyse des statistiques, par exemple, vous aideront à déterminer la meilleure option (souvent, tout n'est pas aussi évident qu'il y paraît). De cette façon, vous pouvez suivre l'achèvement de l'action cible et comprendre quels éléments d'atterrissage contribuent à augmenter la conversion, et lesquels sont distrayants et doivent être modifiés.

Avez-vous encore du temps ? Vous souhaitez le dépenser utilement ? Ensuite, prenez du pop-corn, asseyez-vous et regardez la master class de deux heures « Algorithme étape par étape pour créer une page de destination » :

Je travaille depuis un certain temps déjà sur la conception de pages de destination et j'ai accumulé une base théorique et pratique. En général, cet article ne prétend pas être pédagogique, mais il peut révéler quelques points.

Encore une fois, cet article s’adresse principalement aux clients.

Récemment, des clients ont commencé à me contacter pour un audit des pages de destination. J'évalue honnêtement tout, et non pas dans le but d'attirer les clients, mais dans le but de comprendre le problème.

QU'EST-CE QU'UN ATTERRISSAGE ET POURQUOI EST-IL NÉCESSAIRE ?

Les pages de destination nous viennent traditionnellement de l’Occident. Initialement, ils ont été conçus comme un nouvel outil marketing – une sorte de bannière plein écran. Une page de destination classique a deux tâches : soit informer les clients potentiels sur un nouveau produit ou service, soit les forcer à entreprendre une action ciblée.

Grâce à des essais, des erreurs et des tests A/B, nous avons découvert le schéma d'atterrissage le plus optimal :

1. Logo et principales activités de l'entreprise.

2. Titre. Au fait, à quoi ça sert tout ça ?

3. Brève description et photo.

4. Bloc d'avantages.

5. Pour une page de destination ciblée, un formulaire est requis.

6. Il est souhaitable d’avoir une limitation de temps ou de quantité.

Ainsi, le but d’une page de destination est de faire une déclaration rentable de manière brève et claire.

ET PAGES SIMPLES

C’est aussi un sujet relativement nouveau. Un site Web d'une page est un site Web, mais sans pages individuelles. Toutes les informations tombent simplement sur une seule « feuille ». Le menu ne fonctionne que sur cette seule page.

Les informations sur l'entreprise, l'équipe, les services, le portefeuille, les contacts, etc. sont affichées dans des blocs séparés, et souvent sous forme de lignes sur toute la largeur de l'écran.

ALORS QUEL EST LE PROBLÈME?

Pour moi, en tant que concepteur Web et analyste Web, le problème s'est avéré être que la plupart des pages de destination de RuNet sont des pages d'une seule page. Les clients, estimant qu'ils ne paient pas d'argent en vain, font activement pression sur les développeurs et ne comprennent pas que la page de destination idéale doit tenir sur un seul écran.

Les développeurs, essayant de justifier la grande confiance qui leur est accordée, paniquent en créant des pages de destination incroyablement longues, mélangeant tout en une seule pile, intercalant généreusement des blocs inintéressants avec des éléments d'action.

Ainsi, lors de l’audit des pages de destination, je tombe constamment sur des one-pagers. Je ne suis pas contre eux, je suis contre les stupides lancers de blocs et de plus en plus.

UNE HISTOIRE FACILE Exemple concret.

Ils m'ont envoyé une page de destination pour inspection. Tout semble bien, mais juste sous le logo il y a une bande avec un menu. Je pense que la navigation est bonne. mais il s'est avéré que le menu vous amène au site principal dans la même fenêtre.

En plus de la conception, de la mise en page et de la programmation, la société de développement a également fait la promotion de cette page de destination pendant un certain temps. Résultat : en deux mois, 1 appel et c'est tout.

En même temps, d'ailleurs, ils ont installé un chasseur de rappel (rien de personnel, mais c'est incroyablement ennuyeux sur les pages de destination), mais ils ont oublié la métrique. Pas de statistiques, pas de visionneuse Web.

Deuxième cas.

Certains clients ont commandé une page de destination à un concepteur de masques. Cela semble aller et venir aussi. Mais le développeur est allé trop loin avec l'animation des blocs. C'est drôle, je ne discute pas. Mais au final on s'enroule autour d'une page blanche sur laquelle l'œil n'a que le temps de remarquer les bords des blocs qui apparaissent. Même les blocs d’action n’ont pas été épargnés.

En fait, le résultat est similaire : il n'y a pas d'appels, de l'argent a été investi dans la promotion. Au moins il y avait une métrique - on pouvait pointer du doigt)

Le sens de cette scène

1. Maintenir un équilibre entre quantité et intelligence.

2. Mettez des statistiques, surtout avant la promotion.

3. Faites d’abord du marketing.

Voilà, merci à tous. Que tous ceux qui souhaitent apporter leur pierre à l’édifice puissent apporter leur contribution.

Gratuit pour reposter sur FB ou VK, car je collectionne toujours des cas intéressants.

Salutations, mes chers lecteurs. Aujourd’hui, nous parlerons des aspects techniques avec lesquels nous pouvons augmenter la conversion des ventes de nos biens ou services. L'un des points importants est une page de destination bien conçue avec des produits. La soi-disant page de destination, dont nous parlerons plus tard de la création et obtiendrons des codes de page prêts à l'emploi.

Qu'est-ce qu'une page de destination ? Il s’agit de la page sur laquelle les internautes atterrissent généralement après avoir cliqué sur une annonce. Créé pour une offre : produit, service ou abonnement. Une page de destination efficace est la pierre angulaire d’un marketing en ligne réussi. Le produit est peut-être le meilleur du marché, les publicités sont perfectionnées, mais sans une bonne page de destination, les efforts ne produisent pas de résultats à 100 %. Il indique aux visiteurs ce qui est proposé et pourquoi ils devraient le vouloir. Le sentiment d'urgence contribue à une prise de décision rapide et à la transition de l'utilisateur vers la catégorie de client.

Comment créer une Landing Page ? Il est faux de croire que la réponse réside dans la capacité à composer. Une bonne page de destination est le résultat d’un travail coordonné sur les objectifs, le texte, la conception et le code. Les pages de destination, dont des exemples seront présentés ci-dessous, aideront les débutants à apprendre les bases du travail avec la mise en page, mais ne remplaceront pas les textes de conversion et la compréhension du public cible. Vous pouvez également les créer à l’aide de différents concepteurs de pages de destination.

Alors avant de créer une landing page, demandez-vous :

• Que fera une personne après avoir atterri sur la page de destination ? Achètera-t-il quelque chose ? Allez-vous remplir le formulaire ? Abonnez-vous à la newsletter? Avant de suivre votre taux de conversion, fixez-vous des objectifs clairs.
• Qui sont mes concurrents ? En réalité, ces trois questions se posent : qui, dans quelle mesure réussissent-ils et comment leurs réalisations peuvent-elles être appliquées ? L'imitation est la plus sincère des flatteries. Si vos concurrents font quelque chose qui fonctionne, reproduisez-le sur votre site.
• Qui est mon public ? Mieux vous comprenez votre niche et votre public cible, plus grandes sont vos chances que vos efforts portent leurs fruits.

Vous devez offrir toutes les informations nécessaires, mais pas au point de submerger et de faire fuir votre client potentiel.

Exemples de création d'une landing page + codage pour les nuls

Avant de commencer, jetons un coup d'œil rapide au HTML et au CSS. Comprendre leur fonctionnement vous aidera à créer un atterrissage.

HTML est un langage de balisage de navigateur pour la visualisation de sites Web. Écrit à l’aide de balises placées entre crochets qui définissent le contenu.

La balise ouvre() et ferme() autour du remplissage :

contenu

Pour affiner le réglage, des attributs sont ajoutés après le nom :

contenu

CSS - définit comment organiser les éléments HTML. Se compose de sélecteurs, de propriétés et de valeurs :

#selector (propriété : valeur ;)

Le sélecteur correspond au nom d'une balise spécifique en HTML. La modification des valeurs et l'ajout de propriétés ajustent son apparence. Vous pouvez créer des pages différentes les unes des autres en appliquant différents styles CSS au même code HTML.

5 premières étapes

Pour une mise en page rapide, nous utiliserons un modèle avec un design minimal basé sur bootstrap. Il s'agit d'un système doté de ses propres sélecteurs, utilisé partout dans le monde pour accélérer la mise en page.

Cela semble modeste.

A partir de ce poisson, un site Internet pour tous les goûts est créé en plusieurs étapes.

Structure des répertoires dans le dossier :

• index.html : C'est le fichier principal que nous allons éditer.
• /assets : les fichiers auxiliaires se trouvent ici :
• /css : le répertoire contient les styles d'amorçage et d'icône. Le fichier que nous allons éditer est main.css.
• /img : dossier pour les images du site.
• /fonts : polices d’icônes.
• /js : amorce des fichiers javascript.

Étape 1 : Utiliser un en-tête

Le titre et les sous-titres sont des endroits clés qui aident à transmettre clairement la valeur de l'offre.

Changeons le titre et le nom du site. Ici, vous n'avez pas besoin de compétences en dactylographie - vous écrivez votre propre texte aux endroits surlignés en jaune sur l'écran.

Étape 2. La brièveté est la sœur de la conversion. Ajouter des avantages et des tarifs

Vous aurez besoin de 4 sections :

• avantages ;
• les taux;
• Commentaires;
• appel à l'action.

Créons une section du contenu principal « main », dans laquelle nous insérerons les sections nécessaires :

…..
…..
…..
…..

Remplissez de garniture au lieu de points.

Pour la section avantages, vous aurez besoin de ce code :

Avantages
Rapide

Fiable

Sed diam nonummy

Rentable

Elit, sed diam nonummy

Techniquement

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Fiable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Techniquement

Lorem ipsum dolor sit amet, consectetuer adipiscing

Fiable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Contenu pour plus de clarté :

Cela semble toujours bâclé, mais il n’y a aucune raison de paniquer, continuons.

Nous notons les prix. Le contenu change de la même manière que lors de la première étape. Description générale avec la classe « tarifs » et trois tarifs.

Plans tarifaires

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tarif n° 1
$10

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande
Tarif n° 2
$20

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande
Tarif n° 3
$30

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande

Ressemble à ça.

Pour l'instant, nous ne sommes pas intéressés par l'apparence de la future page de destination - nous examinerons ci-dessous des exemples de changements de style.

Étape 3 : signaux de confiance et appel à l'action

L'utilisation de signaux ciblés indique aux visiteurs que la marque est digne de confiance. Les signaux peuvent prendre plusieurs formes, mais la forme classique est le retour des clients.

Avis des clients

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea commodo :

« Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
« Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Lançons un appel à l'action.

Bénéficiez en commandant aujourd'hui

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat :

Commandez maintenant!

Les avis aideront les clients potentiels à décider d’acheter le produit. Pour plus de clarté, nous avons besoin d'avatars, nous les mettrons donc immédiatement en place - sous chaque citation.

Nom du client.

Étape 4 : Intégration adaptée au réseau et aux mobiles

Pour implémenter la grille, nous avons besoin de conteneurs Bootstrap. Il est important de se rappeler le nombre total de segments de colonne valides - 12. La classe détermine la largeur d'affichage du contenu. L’avantage de cette grille prédéfinie est que les conteneurs sont conçus dans un souci de réactivité et sont immédiatement utilisables sur les appareils mobiles. Description détaillée sur le site officiel. La grille ressemble à ceci.

Le contenu de « main » sera emballé dans un conteneur. Pour ce faire, ce qui suit est écrit en haut :

… .

Si vous avez besoin que le bloc s'adapte à toute la largeur de l'écran, un conteneur est inséré à l'intérieur. Ici, ce sera un jumbotron et un appel à l'action.

Nous envelopperons tous les éléments qui doivent être placés les uns sur les autres avec des séparateurs de ligne.

Nous pouvons maintenant ajuster la largeur des colonnes, en nous concentrant sur la grille bootstrap. Après l'emballage, le remplissage a cessé de coller aux bords de l'écran et des empreintes nettes sont apparues.

Nous fixons les prix d'affilée en utilisant la classe de colonnes col-lg-4. À l'intérieur des lignes de ligne, il n'est plus nécessaire d'écrire des div séparés pour l'habillage ; ils peuvent être combinés avec ceux existants séparés par un espace.

Par analogie, nous avons créé des colonnes pour la section avis et avantages. Si vous devez déplacer un élément sur le côté, utilisez la classe de colonne de décalage col-lg-offset-2. Le nombre à la fin détermine le nombre de colonnes de base sur lesquelles le décalage se produira.

Étape 5. Polices et icônes

Nous implémentons les polices de titre Google Font. Une fois sélectionné, ouvrez l'onglet d'importation et copiez les données de celui-ci dans le fichier main.css. Nous ajoutons également des sélecteurs de titre au fichier pour lequel la nouvelle police est utilisée.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importer la police pour les titres */
marque .navbar,
h1,
h2,
h3,
h4,
h5,
h6 (
famille de polices : "Roboto Condensed", sans empattement ; /* Sortie Googlefont */
}

Pour plus de clarté, les avantages sont décrits par une classe avec le nom explicite text-center et les icônes FontAwesome du jeu d'amorçage.

À ce stade, la préparation est complètement terminée.

Landing page : exemples de codes avec offre, parallaxe et compteur

Nous utilisons les trois types les plus populaires : avec une phrase, un formulaire et avec un compte à rebours. Au fur et à mesure de la mise en page, le modèle sera complété par des effets.

Exemple 1 : avec une phrase

Définissons l'arrière-plan de la partie principale et le remplissage pour que le premier écran soit couvert.

Jumbotron (
arrière-plan : #f5f5f5 url(../img/fon.jpg) en haut au centre sans répétition ;
largeur maximale : 100 % ;
rembourrage supérieur : 250 px ;
rembourrage inférieur : 200 px ;
alignement du texte : centre ;
}

Changeons la taille de l'en-tête Jumbotron de h2 à h1. Ensuite, nous écrivons des styles pour les éléments qui doivent être modifiés.

Commençons par les icônes.

Avantages je(
couleur : #cac4c4 ;
}

Après le signe dièse, une couleur est spécifiée. Vous pouvez choisir votre propre option en utilisant des tables de couleurs HTML ou un éditeur d'images.

Indentation pour les titres de section

tranche h2 (
rembourrage supérieur : 30 px ;
marge inférieure : 25 px ;
}

Nous mettons de l'ordre dans l'apparence des tarifs. Pour plus de commodité, nous créons nos propres classes pour les éléments que nous souhaitons mettre en évidence spécifiquement.

Tarif n° 1
$10

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande

Et beaucoup de CSS. Les endroits dont les sections sont responsables sont indiqués dans les commentaires - /* entre des barres obliques avec un astérisque */

/* =========Styles tarifaires======== */
/* vue générale du tarif */
.pricing_item(
arrière-plan : #f2f2f2 ;
position : relative ;
affichage : -webkit-flex ;
affichage : flexible ;

direction flexible : colonne ;

aligner les éléments : étirer ;
alignement du texte : centre ;
-webkit-flex : 0 1 330px ;
flexion : 0 1 330px ;
rembourrage : 2em 3em ;
marge : 1em ;
couleur : #262b38 ;
curseur : par défaut ;
débordement caché;

}
/* change l'arrière-plan lorsque l'on clique dessus */
.pricing_item: survol (
couleur : #444 ;
arrière-plan : #daebef ;
}
/* Fond d'étiquette de prix individuel dans chaque tarif */
.pricing_item:premier enfant .price (
arrière-plan : #9ba9b5 ;
}
.pricing_item:nth-child(2).price (
arrière-plan : #1f6098 ;
}
/* sur les écrans larges, la colonne tarifaire du milieu est en retrait et en surbrillance */
Écran @media et (largeur min : 66,250em) (
.pricing_item(
marge : 1,5em 0 ;
}
.en vedette(
indice z : 10 ;
marge : 0 ;
taille de police : 1,15em ;
}
}
/* titre */
.pricing_item h3 (
taille de police : 2em ;
marge : 0,5em 0 0 ;
couleur : #1d211f ;
}
/* arrière-plan de l'étiquette de prix */
.prix(
taille de police : 2em ;
poids de la police : gras ;
couleur : #fff ;
position : relative ;
indice z : 100 ;
hauteur de ligne : 95 px ;
largeur : 100 px ;
hauteur : 100px ;
marge : 1,15em auto 1em ;
rayon de bordure : 50 % ;
arrière-plan : #77a5cc ;
-webkit-transition : couleur 0,3s, arrière-plan 0,3s ;
transition : couleur 0,3 s, arrière-plan 0,3 s ;
}
/* devise */
.devise(
taille de police : 0,5em ;
alignement vertical : super ;
}
/* clarification de la proposition */
.phrase (
poids de la police : gras ;
marge : 0 0 1em 0 ;
remplissage : 0 0 0,5em ;
couleur : #2a6496 ;
}
/* liste */
.pricing_item ul (
taille de police : 0,95em ;
marge : 0 ;
rembourrage : 1,5em 0,5em 2,5em ;
aligner le texte : gauche ;
}
/* éléments de la liste */
.pricing_item li (
remplissage : 0,15em 0 ;
}
/* bouton d'ordre de taux */
Bouton .pricing_item(
poids de la police : gras ;
marge supérieure : auto ;
rembourrage : 1em 2em ;
couleur : #fff ;
rayon de bordure : 5 px ;
arrière-plan : #428bca ;
-webkit-transition : couleur d'arrière-plan 0,3 s ;
transition : couleur d'arrière-plan 0,3 s ;
}
/* change de couleur lorsque le bouton est enfoncé */
Bouton .pricing_item : survoler,
Bouton .pricing_item : focus (
couleur d'arrière-plan : #285e8e ;
}
/* contexte tarifaire*/
.bg-2 (
arrière-plan : #dddddd ;
}

Résultat

Avis des clients. Donnons-leur un aperçu soigné et indiquons leur emplacement.

/* =========Styles de témoignages======== */
témoignages (
remplissage : 4em 0 ;
alignement du texte : centre ;
}
.témoignages .avatar img (
rayon de bordure : 50 % ;
flotteur : gauche ;
affichage : en ligne ;
marge droite : 1em ;
largeur : 65 px ;
hauteur : 65px ;
marge inférieure : 30 px ;
}
.témoignages .avatar p (
aligner le texte : gauche ;
rembourrage supérieur : 1em ;
couleur : #5d5d5d ;
poids de la police : 900 ;
}

Il ne reste plus qu'à décorer le dernier appel à l'action et le pied de page.

/* Action */
.action(
arrière-plan : #476177 ;
hauteur minimale : 180 px ;
largeur : 100 % ;
remplissage : 4em 0 ;
alignement du texte : centre ;
}
.action h2 (
couleur : #fff ;
poids de la police : 300 ;

}
.action p(
couleur : #fff ;
texte-ombre : 0 1px 2px rgba(0, 0, 0, .2);
taille de police : 1,2 em ;
}
.action .conteneur (
marge supérieure : 3em ;
}
/* Bas de page */
bas de page(
arrière-plan : #333333 ;
remplissage : 1em 0 ;
aligner le texte : à droite ;
}
pied de page p(
couleur : #fff ;
hauteur de ligne : 1 ;
transformation de texte : majuscule ;
taille de police : 0,7 em ;
marge supérieure : 0,5em ;
}

Le bouton de pied de page se voit attribuer la classe d'amorçage intégrée btn-default.

Donner vie au modèle. Nous introduirons un défilement fluide et des boutons pour les sections, ainsi qu'une animation de texte sur le premier écran.

Pour les transitions vers le travail, nous remplacerons certaines classes de section par id - pour les avantages et les tarifs. Et nous ajouterons des liens vers l'identifiant des boutons. Capture d'écran - ce qui est attaché à quoi, mis en évidence avec un marqueur jaune.

Nous définissons des retraits pour les boutons - jbutton. Le défilement lorsque vous appuyez dessus fonctionne, mais très brusquement.

Des transitions fluides sont créées à l'aide de javascript ou jquery. Ce dernier est connecté aux modèles Bootstrap par défaut.

Le défilement est désormais fluide.

Ajout d'une animation au texte à l'aide d'Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Il s'agit d'un code open source prêt à l'emploi, il peut être utilisé sur n'importe quel site Web. Placez le fichier de Github dans le dossier css et spécifiez le chemin.

Nous sélectionnons les effets ici : https://daneden.github.io/animate.css/. Nous avons sélectionné fadeInDown. C'est écrit dans le code comme ceci :

Désormais, lorsque la page est chargée ou actualisée, le texte sera animé. Prêt.

Exemple 2 : avec forme et effet parallaxe

Plus un visiteur se voit présenter de champs de formulaire, moins il est susceptible de les remplir. Ne demandez que le minimum d’informations nécessaires.

Il est assemblé par analogie. Nous changerons les arrière-plans et les couleurs. Et bien sûr, nous ajouterons une forme.

Commençons par la parallaxe.

Changeons l'arrière-plan du jumbotron en transparent :

fond : transparent ;

Dans head, nous insérerons le script :

$(window).scroll(function(e)(
parallaxe();
});
fonction parallaxe())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

La première ligne du corps est un conteneur pour la parallaxe :

Et en CSS son comportement est :

Bgparallaxe (
arrière-plan : url(/../img/fon.jpg) répéter ;
poste : fixe ;
largeur : 100 % ;
hauteur : 300 % ;
haut : 0 ;
gauche : 0 ;
indice z : -1 ;
}

La parallaxe est prête. Mais apporter des modifications au code et à un nouvel arrière-plan nécessite de réaffecter la palette de couleurs.

Rendre le menu sombre :

Barre de navigation par défaut (
couleur d'arrière-plan : #333 ;
couleur de la bordure : #444 ;
couleur : gris foncé ;
rayon de bordure : 0 ;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
couleur : gris foncé ;
couleur d'arrière-plan : rgba(0, 0, 0, 0,5) ;
}

Nous remplaçons la phrase dans Jumbotron par une nouvelle - avec le code du formulaire :

La page de destination transforme les visiteurs en clients
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

Et nous prescrivons l'apparence

/* formulaire */
.headform-list (
type de style de liste : aucun ;
hauteur de ligne : 26 px ;
poids de la police : 400 ;
remplissage : 0px ;
marge inférieure : 40 px ;
}
.forme de tête(
débordement caché;
position : relative ;
couleur d'arrière-plan : rgba(0,0,0,.4) ;
remplissage : 35px 40px ;
rayon de bordure : 8 px ;
}
saisie, bouton, sélection, zone de texte (
largeur : 100 % ;
marge inférieure : 10 px ;
}
.headform-list li .fa (
position : absolue ;
haut : 0px ;
gauche : 0px ;
largeur : 42 px ;
taille de police : 24 px ;
alignement du texte : centre ;
}
.headform-list li(
position : relative ;
hauteur minimale : 38 px ;
remplissage à gauche : 62 px ;
marge inférieure : 20 px ;
}
.jumbotron p(
couleur : #fff ;
taille de police : 16 px ;
style de police : italique ;
}

Le texte du Jumbotron s'est également retrouvé ici, car il exigeait des modifications.

Nous modifions les tarifs.

/* vue générale du tarif */
.pricing_item(
couleur d'arrière-plan : rgba(0,0,0,.4) ; /* ligne modifiée */
rayon de bordure : 4 px ; /* ligne modifiée */
position : relative ;
affichage : -webkit-flex ;
affichage : flexible ;
-webkit-flex-direction : colonne ;
direction flexible : colonne ;
-webkit-align-items : étirement ;
aligner les éléments : étirer ;
alignement du texte : centre ;
-webkit-flex : 0 1 330px ;
flexion : 0 1 330px ;
rembourrage : 2em 3em ;
marge : 1em ;
couleur : #f2f2f2 ; /* ligne modifiée */
curseur : par défaut ;
débordement caché;
box-shadow : 0 0 15px rgba(0, 0, 0, 0.05);
}
/* change l'arrière-plan lorsque l'on clique dessus */
.pricing_item: survol (
couleur : #444 ;
arrière-plan : #ddd ; /* ligne modifiée */
}

Maintenant, ils ressemblent à ceci : un fond transparent et des coins arrondis.

Le modèle est prêt.

Exemple 3 : avec compte à rebours

Nous modifions à nouveau le remplissage du jumbotron et recolorons le modèle pour qu'il corresponde au nouveau fond, similaire au modèle précédent. Connectez le script du compteur :

HTML





Le temps n'attend pas
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conséquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var monCountdown1 = nouveau compte à rebours ((
temps : 86400 * 3, // 86400 secondes = 1 jour
largeur : 300
, hauteur : 60
, rangeHi : "jour"
, style : "retourner" //