Quelle est la meilleure façon de créer vous-même une page de destination ? Comment créer vous-même une page de destination : instructions étape par étape

La création d'une page de destination (page de destination) ou d'une page de destination, page de destination, simplifie autant que possible le chemin de l'utilisateur vers l'objectif souhaité. Une telle page est conçue pour influencer les instincts fondamentaux d’une personne, pour l’inciter à effectuer des actions ciblées : cliquer, appeler, commander, acheter « tout de suite ».

Les pages de destination sont les mieux adaptées pour mener des campagnes publicitaires pour un service ou une offre spécifique avec un prix unique (bas), ainsi que pour attirer le public cible à partir des systèmes de publicité contextuelle Google AdWords, Yandex.Direct, des réseaux sociaux et des newsletters par courrier électronique :

Qu’est-ce que la page de destination ?

La page de destination est une page distincte utilisée pour :

• ventes d'un produit ou d'un service spécifique ;
• création d'une base d'abonnement.

Après avoir décidé de créer une landing page, vous devez utiliser les déclencheurs d'influence nécessaires qui poussent l'utilisateur à prendre rapidement une décision (acheter un produit, saisir des informations pour bénéficier d'une remise, suivre un cours, un webinaire, etc.).

Du point de vue de l’utilisateur, une landing page est la page sur laquelle il arrive après avoir cliqué sur un informateur, une bannière, un post publicitaire, etc. Une page de destination est fondamentalement différente d’une boutique en ligne. Pour vendre un produit et mener une campagne publicitaire, vous créez votre propre page et utilisez différents déclencheurs d'influence.

Types de pages de destination :

• Autonome. Il s’agit du type de page de destination le plus courant. La tâche principale est d'encourager l'utilisateur à acheter ou à effectuer une action spécifique recommandée par la page ;
• Microsite. Un petit site Web, souvent distinct, composé de 5 pages maximum contenant des informations sur un produit ou un service ;
• Site principal. Pour une page de destination, utilise une ou plusieurs pages de ressources ;
• Site Internet de Lando. Une ressource entièrement composée de pages de destination indépendantes :

Types de pages de destination

• Publicité. Contenir une grande quantité d'informations textuelles, graphiques et vidéo sur le service ;
• Viral. La publicité est déguisée en article ou en jeu. Cela implique souvent le courrier électronique, les réseaux sociaux, les chats ;
• Pages de prospects ciblées. Conçus pour collecter des informations sur le public cible, ils contiennent en règle générale un minimum d'informations.

Une page de destination bien conçue peut augmenter la conversion des visiteurs en véritables acheteurs.

Pourquoi avez-vous besoin d’une page de destination ?

L’objectif principal d’une page de destination est la vente. La page de destination contient un texte de vente, une présentation d'un produit ou d'un service et un appel à l'action. La page de destination est un excellent outil pour démarrer rapidement un service ou un produit sur Internet. Les landing pages permettent de collecter les abonnés et les demandes de services, etc.

Si vous présentez correctement votre produit/service, faites une bonne présentation en indiquant les points forts, et mettez également en place un flux de trafic (publicité sur les réseaux sociaux, publicité contextuelle, etc.), il ne vous reste plus qu'à collecter les candidatures de vos clients et à les vendre. leur le produit/service annoncé.

Avantages de l'utilisation de la page de destination

L'atterrissage, par rapport aux pages de ressources classiques proposant des services ou des produits, présente un certain nombre d'avantages :

• Cibler un public spécifique. La page de destination ne propose pas beaucoup de décisions qui obligent l'utilisateur à choisir, mais une offre unique à laquelle il est difficile de résister ;
• Conversion élevée. Selon les statistiques, l'utilisation de pages de destination à des fins publicitaires peut augmenter la conversion de 10 à 15 % ;
• Informations complètes sur le produit/service proposé, mais sans transitions ni liens supplémentaires ;
• La possibilité de collecter les contacts des visiteurs et de reconstituer la base de données de clients potentiels, auxquels vous pourrez ensuite envoyer des informations sur les promotions/concours à venir ;
• Faible coût de création d’une page de destination. Même les hommes d'affaires novices peuvent se permettre de créer une page de destination, testant ainsi des niches de produits afin de commencer à vendre sur Internet :

Où et comment les pages de destination sont-elles utilisées ?

Vous pouvez faire d'une page de destination la page interne ou principale d'une ressource d'entreprise, un site Web d'une page ou une page d'un réseau social. Récemment, il est devenu de plus en plus populaire (pages hors ligne) pour des produits clés, à une époque où l'entreprise dispose déjà d'un site Web d'entreprise. C’est ce que font les sociétés juridiques et médicales, les banques, les opérateurs mobiles et bien d’autres.

Où les pages de destination sont-elles utilisées ?

• Dans les campagnes publicitaires utilisant la publicité contextuelle avec paiement au clic (PPC) dans Yandex.Direct, Google AdWords, commencé. Dans ce cas, le trafic est redirigé vers des pages de destination optimisées pour les requêtes clés ;
• Dans les campagnes de bannières publicitaires, à condition que le matériel graphique soit placé sur des ressources thématiques conçues pour le public cible. Par exemple, des bannières publicitaires pour les nouveaux produits dans le domaine de l'électronique sont placées sur des portails d'information dans le segment destiné aux spécialistes dans le domaine des technologies informatiques ;
• Dans les newsletters de lettres d'information et de marketing contenant un lien vers la page de destination. Par exemple, des newsletters pour une boutique en ligne qui prennent en compte les achats antérieurs de l’utilisateur ;
• Mener des campagnes de blog dans lesquelles l'utilisateur est redirigé vers la page de destination de la ressource, avec le propriétaire de laquelle le blogueur conclut au préalable un accord de partenariat pour le placement de bannières publicitaires, d'articles postaux et de relations publiques ;
• Campagnes sur les réseaux sociaux (VKontakte, Facebook, Twitter, etc.) ou sur les sites d'hébergement de médias populaires (par exemple YouTube, Flickr, etc.). Les utilisateurs sont redirigés vers la page de destination de l'annonceur qui a conclu un accord pour placer du matériel publicitaire avec la ressource média sélectionnée :

Méthodes de base pour créer une page de destination

• Modèles et générateurs de pages de destination gratuits. De nos jours, il existe de nombreuses options sur Internet pour des modèles et des concepteurs gratuits qui vous permettent de générer une page de destination. Le service le plus populaire. Il s'agit d'une excellente option pour les entreprises disposant d'un budget limité, mais disposant d'une équipe de spécialistes versés dans le marketing et le design ;
• Contacter des spécialistes. Vous pouvez commander le texte d'une page de destination auprès d'un rédacteur, le développement de la conception auprès d'un concepteur et l'intégration avec le moteur auprès d'un programmeur. Dans le même temps, l'entreprise doit compter parmi son personnel un marketeur qui suivra le projet à toutes ses étapes. Les avantages de cette méthode incluent un coût relativement faible et des résultats assez élevés, les inconvénients sont le risque d'erreur dans le choix des spécialistes ;
• Externalisation d'agence. Cette méthode de création d'une landing page consiste à contacter une agence qui se chargera de l'analyse des concurrents, sélectionnera un concept, élaborera une stratégie de campagne publicitaire, résoudra le problème d'intégration avec le moteur et lancera le projet. Il vous suffit d'un brief pour créer une landing page, et l'agence se chargera du développement d'une landing page clé en main. Les avantages de cette méthode incluent une efficacité élevée et un gain de temps, les inconvénients sont un coût plus élevé que dans les options précédentes ;
• Maintenir une équipe de spécialistes qui s'occuperont de... C'est le moyen le plus coûteux et le plus efficace. Votre propre équipe, composée d'un concepteur, d'un rédacteur, d'un spécialiste du marketing et d'un programmeur de mise en page, vous permettra de promouvoir pleinement votre produit/service sur le marché.

Est-il possible de créer soi-même une Landing Page ?

Vous pouvez créer vous-même une page de destination, mais vous devrez posséder certaines compétences en développement, analyse et conception Web. Si vous n'avez pas une telle expérience, utilisez des services proposant des modèles prêts à l'emploi dans lesquels il vous suffit de remplir le texte et de configurer le domaine et l'hébergement.

Créer vous-même une page de destination vous permettra d'économiser du temps et de l'argent. Sur Internet, vous pouvez trouver des ressources avec des modèles sur divers sujets, accompagnés d'instructions pour une installation rapide et d'un logiciel permettant l'édition. Le coût de tels kits peut être bien inférieur au prix de développement d'une landing page dans une agence spécialisée :

Est-il possible de créer une Landing Page gratuitement ?

Étant donné que l'intérêt pour les pages de destination ne cesse de croître, les développeurs proposent de plus en plus d'outils pour créer des pages de destination basées sur des modèles. Voici une liste des méthodes et services les plus populaires :

• Vous pouvez créer une page de destination gratuite si vous vous inscrivez sur Wix ;
• Vous pouvez créer une page de destination à l'aide d'Adobe Photoshop ;

La troisième option est la plus adaptée aux débutants qui ont un minimum de connaissances et ne veulent pas perdre de temps à apprendre des systèmes de programmation Web complexes.

Optimisation de la page de destination

Créer une page de destination représente la moitié de la bataille, il est important de l'optimiser correctement. Les sites Web d'une page présentent un inconvénient, mais assez important : il est assez difficile pour les moteurs de recherche de les trouver. Les ressources multipages ont des titres uniques, des liens appropriés et une structure complexe indiquant le poids des pages, etc.

L'architecture d'un site one-page ne permet pas de réaliser une optimisation interne de qualité au sens classique, pour « adapter » le site aux exigences des moteurs de recherche. Une solution de Google nous a permis de nous débarrasser de ce problème : une mise en page utilisant JavaScript et la méthode PushState.

Pour optimiser votre page de destination, vous devez procéder comme suit :

• divisez la page de destination en blocs ;
• Chaque bloc doit recevoir son propre indicateur, titre, description et titre, URL.

Autrement dit, chaque bloc doit avoir les mêmes propriétés que n'importe quelle page individuelle du site, tandis que le robot de recherche percevra votre site comme plusieurs pages uniques. Les visiteurs de la page de destination peuvent ne pas remarquer cette décision ; seuls les plus attentifs remarqueront qu'en faisant défiler la page, l'URL et le titre changent. Pour mettre en œuvre un tel projet, vous aurez besoin de certaines connaissances dans le domaine du référencement et de la mise en page avec JavaScript.

Si vous n'avez besoin que d'informations sur les services avec lesquels vous pouvez créer une page de destination, passez directement à l'étape 5 : choisir un outil de mise en page. Si vous souhaitez comprendre l'algorithme de création d'une landing page de A à Z, lisez l'intégralité de l'article.

Comment créer une page de destination - instructions étape par étape en 9 étapesÉtape 1. PréparationObjectif de la page de destination

Tout d'abord, nous déterminons le but de la page de destination, ce que nous souhaitons recevoir des visiteurs de la page. Il s'agit généralement de l'une des trois choses suivantes :

1. Vendre des biens/services (exemple : vendre du miel, vendre des services de création de logo, vendre un cours en ligne);
2. Recevoir un contact (exemple : inscription à la newsletter, demande de mesure);
3. Informations (exemple : invitation à un événement hors ligne gratuit, page promo d'un magasin avec promotions).

Nous déterminons le public cible et ce qui est important pour lui

À cette étape, il est important pour nous de comprendre qui est le public cible de notre offre, quelles douleurs ils ressentent, quels désirs, quelles peurs et ce que ces personnes veulent recevoir. Il est important de comprendre tout cela afin que les éléments du site Web, tels que le texte et la conception, soient conçus en se concentrant sur le public cible (public cible).

Comment déterminer le public cible ?

• Analysez les clients avec lesquels vous avez déjà travaillé ou travaillez actuellement ;
• Demandez aux clients ce qui est important pour eux. Oui, c'est vrai, il suffit d'appeler ou d'écrire, de préparer une liste de questions à l'avance ;
• N'oubliez pas, ou mieux encore, notez les questions qui vous sont le plus souvent posées à propos de votre produit ;
• Lisez les sites/forums thématiques, voyez ce qui inquiète vos clients.

Regarder les concurrents (benchmarking)

Lorsque vous avez noté toutes vos réflexions et idées concernant la future landing page, il est temps de commencer à analyser les concurrents (benchmarking). Si vous connaissez déjà vos concurrents, tant mieux ; sinon, effectuez une recherche dans les moteurs de recherche en utilisant les mots-clés de votre niche.

Le but de l'analyse est de trouver et de voir ce que les concurrents font mal et ne répètent pas leurs erreurs, et ce qu'ils font bien, d'examiner les idées, les blocs manquants, les solutions de conception intéressantes. Cela ne veut pas dire qu’il vous suffit de les copier, bien sûr, vous n’avez pas besoin de le faire, enregistrez-les pour vous-même, puis au stade de la rédaction du texte et de l’élaboration du design, adaptez-les à votre projet.

Comment procéder : je crée un dossier séparé appelé « Idées » et je prends des captures d'écran des blocs intéressants.

Étape 2. Rédaction du texte pour la page de destination

Pour beaucoup (moi y compris), la rédaction d'un texte est l'étape de développement la plus difficile, c'est pourquoi j'essaie personnellement toujours de déléguer cette étape à un rédacteur.

Mettez le chaos dans votre tête sur papier

Simplement, sans penser à la séquence, transférez toutes les pensées et idées pour le futur atterrissage sur papier. Notez tout ce dont vous voulez parler. Lorsque vous rédigez une telle liste de réflexions et que nous examinons les idées des concurrents, l'étape suivante consiste à combiner tout cela et à composer les blocs et la structure de la page de destination.

Fabriquer des blocs d'atterrissage

Une page de destination se compose de certains blocs ; vous ne pouvez pas simplement écrire un texte solide comme un article et simplement le publier. Ce sera terriblement difficile à lire.

Voici la liste principale des blocs que l’on retrouve sur 90% des landing pages :

Premier écran avec USP (proposition de vente unique)

Divulgation du produit (Description du service ou du produit)

Informations sur l'auteur/l'entreprise

Commentaires

Cas (histoires de réussite)

Formulaire/appel à l'action

FAQ (Réponses aux questions fréquemment posées)

Contacts / pied de page du site

Quels autres blocs peut-il y avoir sur le site :

• Des faits en chiffres
• Avantages (avantages)
• Vidéo
• Portefeuille
• Pour qui
• Étapes de coopération (ou Comment passer une commande, Comment laisser une demande)
• Tarifs et prix
• Les partenaires
• Galerie
• Calendrier
• Équipe
• Certificats, diplômes, lettres de gratitude
• Documentation
• Minuteur

Lorsque le cadre de la page de destination est prêt, nous commençons à rédiger le texte. Vous pouvez le faire vous-même ou le confier à un rédacteur.

Nous mettons l'essentiel au début. Il n’est pas nécessaire d’écrire sur vous au début du site ; montrez d’abord votre produit.

Remplacez les mots généraux par des faits. Inutile de convaincre les visiteurs de quoi que ce soit, laissez-leur ce droit. (Exemple : n'écrivez pas que vous êtes des leaders du marché dignes de confiance, montrez les avis des entreprises auxquelles vous avez fourni des services et qui ont été satisfaites, en plus, joignez l'avis original pour ne pas être infondé).

Fonctionne particulièrement bien sur le premier écran et USP. Une fois qu'un visiteur arrive sur votre page de destination, vous disposez de trois secondes pour attirer son attention. Si vous n’avez pas le temps, la personne fermera la page et continuera à surfer. Le premier écran doit être aussi pertinent que possible par rapport à la requête par laquelle le visiteur a accédé au site. (Exemple : si une personne recherche « Comptabilité d'un entrepreneur individuel », il n'est pas nécessaire d'afficher une page de destination avec le titre « Comptabilité d'une SARL »).

USP (Proposition de vente unique). En termes simples, le titre principal et la description, qui devraient expliquer succinctement de quoi parle cette page de destination. Vous pouvez créer un USP en utilisant la technologie 4U.

Plus c'est court, mieux c'est. Essayez d'écrire des blocs de texte aussi courts que possible. Personne ne lit de longs bouts de texte ; aujourd’hui, les gens manquent toujours de temps et il faut en tenir compte. Si vous devez encore fournir beaucoup d’informations, divisez-les en paragraphes et en blocs.

Plus de titres. Les paragraphes de texte ne doivent pas être écrits comme ça, sans titre. La plupart des visiteurs, lorsqu'ils visitent un site Web, parcourent d'abord le site en essayant d'évaluer s'ils y sont arrivés ou non. Et ici, ce sont les rubriques qui jouent un rôle important, car il va parcourir le site et évaluer le site précisément par elles.

Vous ne souhaitez pas rédiger le texte vous-même ? Trouvez un rédacteur qui le fera pour vous.

Où chercher un rédacteur

Échange de rédaction ContentMonster.ru

Échange de rédaction Etxt.biz

Entreprises privées ou spécialistes. Vous pouvez les rechercher via une recherche ou sur les réseaux sociaux (VK, Facebook, Instagram).

Vous pouvez vous tourner vers un rédacteur publicitaire non seulement pour développer un texte à partir de zéro. Par exemple, vous pouvez nous contacter avec une liste de blocs toute faite, avec des croquis initiaux, ou même avec du texte déjà compilé, que le rédacteur « fera revivre », rendra plus intéressant et corrigera les erreurs.

Étape 3. Réaliser un prototype

Avant la phase de conception, il est important de créer un prototype, laissez-moi vous expliquer pourquoi. Il existe plusieurs raisons:

Sans prototype, vous passerez plus de temps, curieusement :) Au début de ma carrière, après avoir écrit le texte, j'ai immédiatement fait le design. Je pensais que de cette façon, je gagnerais du temps, mais en réalité, il s'est avéré que tout prenait encore plus de temps, car il n'est pas pratique de proposer immédiatement des éléments de design sans cadre.

Problèmes avec le client si vous créez une page de destination sur commande. Tout le monde a vécu cette situation. Vous avez approuvé le texte et avez immédiatement commencé à créer le design, vous avez passé beaucoup de temps à l'envoyer au client, et il dit que tout ne va pas et doit être refait, le texte échangé, etc. C'est beaucoup plus difficile à faire quand le design est déjà prêt que lorsque vous disposez uniquement d'un prototype composé de texte et de cercles.

Un prototype peut être comparé au croquis que vous réalisez avant de peindre. Peu de gens peuvent prendre de la peinture et peindre immédiatement un tableau. Donc ici, nous faisons d'abord un croquis, voyons comment cela se passe approximativement, quels blocs peuvent être déplacés, modifiés, ajoutés ou supprimés du texte, etc.

Un exemple tiré de mon cas d'un prototype et d'une conception réalisée à partir de ce prototype.

Exemple de prototype

Exemple de conception de prototype

Sur le prototype nous indiquons :

• Placement du texte, surligner les titres ;
• Où seront situés les graphiques (images, icônes) ?
• Où seront les boutons ?
• Sur quel bloc le fond sera clair et sur quel bloc il sera sombre.

Prestations de prototypage :

• Photoshop. Je le fais dans Photoshop. Après avoir approuvé le prototype avec le client, il est pratique de réaliser ici une conception basée sur le prototype.
• Service Moqups. Un service spécial avec des éléments prêts à l'emploi, il suffit de glisser-déposer et d'ajouter votre texte.
• Sur papier. Vous pouvez esquisser un prototype à la main si la page de destination n’est pas compliquée et que vous ne voulez pas trop vous embêter.

Je commence toujours un prototype sur papier, c'est plus pratique pour moi. Ensuite, je le transfère sur Photoshop.

Utiliser la grille Bootstrap

Je vous conseille également de réaliser le design sur une grille afin qu'il puisse ensuite être facilement adapté à différents appareils. Si vous choisissez un outil de conception pour la mise en page, où la conception elle-même s'adapte à différents écrans (plus d'informations sur les outils de mise en page plus tard) et n'utilise pas de version mobile distincte du site, alors la conception doit être développée sur une grille.

Le modèle de grille Photoshop que j'utilise dans mon travail, vous le pouvez.

Étape 4. Réaliser le design

Tous les éléments de conception de la page de destination peuvent être divisés en trois parties, voici la sélection :

Police de caractère

Couleurs

Graphiques (photos, icônes, images)

Chaque élément crée une certaine ambiance ; il est important pour nous de choisir une telle combinaison de tous les éléments afin que le visiteur développe une attitude juste et confiante envers notre entreprise et nos produits.

A titre d'exemple : sur un site proposant des services funéraires, des couleurs vives et une fille au sourire radieux avec l'inscription en grosses lettres PROMOTION ! ne seront probablement pas appropriées. Ou un site sur l'organisation de vacances aux couleurs grises et délavées, avec des boutons noirs et une police slab serif, après avoir consulté lequel vous voulez tomber dans la dépression, et ne pas commander de vacances pour votre enfant. Les exemples sont bien sûr exagérés ; il est peu probable que vous les voyiez dans la vie (même si c’est possible), mais je pense que vous comprenez l’essentiel.

Discutons de chaque élément plus en détail.

Police de caractère

Le texte est la base de tout site Web, la police n’est donc pas moins importante que la couleur ou les graphiques. Une police peut également créer une ambiance ; elle peut être légère ou brutale, évoquer un sentiment de cherté ou de simplicité, etc.

En fonction de votre sujet et de l'émotion que vous souhaitez susciter chez les visiteurs.

Si vous ne voulez pas vous embêter à trouver des combinaisons, prenez les options neutres toutes faites que j'ai préparées pour vous. Ils conviendront à n’importe quel thème. Ce:

• Robot
• Ouvrir sans
• Pt sans

Choisissez-en un ou deux et mélangez.

Par exemple:

Titre - Roboto (gras)
Texte - Roboto (Lumière)

Titre - Ouvert sans (gras)
Texte - Roboto (Lumière)

Titre - Pt sans (régulier)
Texte - Ouvrir sans (Lumière)

Où puis-je me procurer des polices ?

Il existe des polices gratuites et payantes. Dans un premier temps, je vous conseille d'utiliser les polices gratuites de Google Fonts. Il existe de bonnes options là-bas, et celles que j'ai décrites ci-dessus le sont également.

Pourquoi est-ce que je recommande les polices Google ?

Parce que leur licence vous permet d'utiliser les polices à la fois pour vous-même et à des fins commerciales. Si vous décidez d'acheter la police que vous aimez auprès de développeurs ou dans des magasins en ligne spéciaux, alors ok, il n'y a aucun problème, mais si vous envisagez de télécharger des polices gratuitement à partir de sites tiers, il est important de vérifier la licence, car vous pouvez violer le droit d'auteur si vous utilisez une police payante, mais que vous ne l'avez pas achetée.

Si vous créez un site Web pour vous-même, remplacez-vous ; si vous le créez pour un client, remplacez le client.

CouleurComment choisir la bonne palette de couleurs pour un site Web ?

Les couleurs blanc, gris et noir sont déjà incluses dans l'ensemble, elles sont toujours utilisées, par exemple, la police est blanche, grise ou noire, le fond du site est blanc, gris ou noir. Quoi que vous disiez, ces couleurs seront déjà utilisées sur la page de destination. Ils sont appelés achromatiques (ne contiennent pas de nuances de couleurs). Il ne reste plus qu'à sélectionner les couleurs chromatiques (nuances de couleurs).

Généralement, un site Web utilise une, deux ou trois couleurs chromatiques. Je vous conseille d’en choisir un ou au maximum deux, sinon vous risquez de ne pas pouvoir les combiner harmonieusement et le site aura l’air laid et inharmonieux.

Regardez une vidéo intéressante sur ce sujet

Vous devez également les sélectionner en fonction de votre sujet.

Exemples de l'ambiance évoquée par chaque couleur :

Le matériel sur les couleurs vient d’ici.

Graphiques (photos, icônes, images)

La tendance récente est qu’il est préférable d’utiliser autant de photos que possible plutôt que d’utiliser des images provenant de photos d’archives ou gratuites provenant d’Internet. Cela s'est produit parce que les photos d'archives sont déjà devenues ennuyeuses : des femmes souriantes identiques provenant d'un centre d'appels ou des déménageurs heureux et plaisants en combinaison bleue évoquent, au minimum, un sentiment de méfiance.

Pour être honnête, j'ai aussi péché avec cela auparavant, mais maintenant je demande (je vous en supplie) aux clients d'envoyer autant de leurs photos « en direct » des produits, du personnel, des locaux, etc.

Certes, il vaut mieux prendre une photo avec son téléphone, même si elle est de moindre qualité, mais le client comprendra que vous ne vous cachez pas derrière le masque d'une photo d'Internet, vous montrez votre visage, un autre point pour faites confiance à votre personne.

Bien sûr, il y a des sujets pour lesquels il n'y a rien de spécial à montrer, alors vous pouvez déjà recourir à des photos d'archives. Je conseille quand même d'y acheter des photos plutôt que d'en rechercher des gratuites dans la recherche, car elles sont plus souvent utilisées sur d'autres sites.

Quelqu’un dira : « Ilya, les photos d’archives ressemblent à un avion ! » - une telle chose existe :) Il existe un moyen pour vous de télécharger des images pour un dollar, à propos du service. Eh bien, si vous réalisez un projet pour une grande entreprise commerciale, il est préférable de prévoir ce montant et d'acheter des photos dans une banque de photos officielle, encore une fois pour vous protéger.

• Service ShopDiz.pro - téléchargement d'images à partir du stock pour 0,5 à 1 dollar.
• Le service ShutterStock est le stock le plus populaire avec un grand nombre de photos, de vecteurs et de vidéos.

Lorsque vous choisissez des images, concentrez-vous également sur votre sujet et sur les émotions que vous souhaitez susciter chez les clients. Confiance, joie, fiabilité, bonheur, etc.

Comment trouver des idées de conception de blocs ? Il n’y a pas ici de règle universelle. L'essentiel est de supprimer tout ce qui vous semble inutile, de raccourcir le texte, d'utiliser les graphiques avec modération et de ne pas surcharger. Regardez des exemples de bonnes pages de destination, prenez des notes pour vous-même, prenez des captures d'écran des blocs que vous aimez, afin de pouvoir ensuite faire quelque chose de similaire dans vos projets.

Étape 5. Sélectionnez un outil de mise en page

Il existe aujourd'hui de nombreux outils de mise en page, je ne parlerai que de ceux que j'ai moi-même utilisés et qui sont les plus pratiques pour moi et pour les clients.

1. CMS WordPress + WPBakery ou Elementor builder

Vous installez le CMS WordPress, installez le template, le builder WPBackery est payant, mais il est livré gratuitement avec 99% des templates que je . Il existe un deuxième concepteur pratique, c'est Elementor, il est gratuit, mais pour étendre ses fonctionnalités, achetez la version Pro d'Elementor. Pour moi, les deux designers sont pratiques, je ne peux pas en recommander un, chacun a ses propres avantages. Regardez les descriptions et les options des sites avec les deux constructeurs et choisissez celui qui convient.

J'utilise cette option principalement si, en plus de la page de destination, nous avons besoin de pages supplémentaires, c'est-à-dire que nous créons un site multipage. Ou, afin de n'être lié à aucune plateforme, le site doit être situé sur votre hébergement personnel.

Par exemple, sur ce blog, j'utilise le modèle The7, fourni avec le plugin WPBakery.

Vous pouvez sélectionner un domaine sur le service :

• Reg.ru - enregistrement de domaine
• Timeweb.com - si vous achetez un domaine immédiatement avec hébergement, il est alors plus rentable d'acheter ici

L'enregistrement de domaine est le même pour tous les services :

Créez un compte sur le service ;

Sélectionnez une option de domaine, le nom doit être libre ;

Sélectionnez une zone (ru, com, рф, etc.) ;

Saisissez les détails de votre passeport, si vous vous inscrivez en tant que personne morale, puis les détails de l'entreprise ;

Payer un domaine pendant un an (ou plusieurs années d'un coup) ;

Prêt!

Pour associer un domaine au concepteur ou à l'hébergement sélectionné, vous devez enregistrer les serveurs NS dans les paramètres du domaine. Le support vous aidera à faire face à cette tâche si vous ne parvenez pas à la résoudre par vous-même.

Étape 7. Mise en page de la page de destination

Lorsque la conception est prête et que vous avez décidé de la méthode de mise en page. La prochaine étape consiste à terminer tout cela.

Il serait impossible de parler de tous les outils de mise en page dans un seul article, vous devrez les étudier vous-même. Options pour procéder ainsi :

- c'est mon cours, que j'ai enregistré à l'aide du template The7 et du constructeur WPBakery ;

Tilda.Education - cours et webinaires sur le concepteur Tilda ;

Chaîne WPlovers- le gars enregistre des cours sur Elementor ;

Base de connaissances LPGenerator - réponses aux questions fréquemment posées sur la plateforme LPGenerator.

Étape 8. Joindre des outils supplémentairesChat en ligne

Le chat en ligne augmente la conversion, c'est prouvé ! S'il y a quelque chose qu'une personne ne comprend pas et a besoin de conseils. Tout le monde n'appellera pas ou n'enverra pas un e-mail à l'assistance ; il est plus pratique de demander et de recevoir immédiatement une réponse dans un chat en ligne. Vous pouvez connecter par exemple Jivosite, je l'utilise moi-même, cela « m'apporte » de nouveaux clients. Vous pouvez m'écrire dans le chat « Bonjour ! »

RappelMetrica

Il est important de suivre les indicateurs du site Web ; sans chiffres, vous serez comme un chaton aveugle. Il est important de comprendre combien de personnes ont visité le site, combien ont laissé une demande, de quels indicateurs généraux dispose le site, vous pouvez même examiner le comportement des visiteurs, comment ils consultent le site. Vous pouvez installer Yandex Metrics et/ou Google Analytics.

Reciblage

Si vous envisagez de diffuser de la publicité sur les réseaux sociaux, installez le code du réseau social souhaité sur votre site Internet. Ce code collectera une liste des visiteurs qui ont visité votre landing page (c'est-à-dire intéressés par l'offre) et qui ont un profil sur les réseaux sociaux. Vous pourrez ensuite leur montrer votre publicité sur le réseau social sélectionné.

GRC

Le CRM se charge de veiller à ce qu'aucune candidature du site ne disparaisse, afin que pour chaque candidature vous compreniez quelles actions doivent être entreprises (rappeler, envoyer une demande, se rencontrer, se rappeler dans 14 jours, etc.). C'est vrai si vous avez un flux de clients, mais si vous en avez 2 à 3 par mois, alors je pense que vous n'avez pas besoin de CRM.

Les CRM les plus populaires sont :

• AmoCRM (prix 499 - 1499 roubles/mois)
• Bitrix24 (prix, du forfait gratuit à 11 990 roubles/mois)
• Feuille de calcul Google, Excel ou stylo et papier (si vous en avez besoin avec un budget limité)

Calculatrice

Pour certaines niches, il est important d’utiliser une calculatrice pour calculer un service ou un produit. Ce n'est pas seulement pratique, mais cela augmente également la conversion des applications. Parce qu’il est toujours intéressant d’appuyer sur des boutons, de déplacer des leviers et de voir quel sera le prix final. Et cela augmente également les indicateurs comportementaux des moteurs de recherche.

La calculatrice peut soit être commandée auprès des développeurs, ce qui coûte cher, soit utiliser un service prêt à l'emploi. Il existe un service uCalc, qui peut être adapté aux CMS populaires, aux concepteurs ou à un site Web personnalisé. Construisez votre calculatrice à l'aide d'un constructeur pratique et ajoutez-la au site.

Collecte d'une base d'abonnés

Si vous décidez de collecter des contacts clients dans une base de données d'abonnés afin d'envoyer ultérieurement des e-mails ou des SMS, vous devez utiliser un service spécial. Vous voudrez peut-être envisager SendPulse, j'ai récemment examiné ce service, ce que vous pouvez. SendPulse propose un forfait gratuit avec lequel vous pouvez tester le service. Si ce n'est pas la sienne, alors il existe d'autres offres sur le marché, par exemple MailerLite, UniSender, JustClick, GetResponse, etc.

Étape 9. Vérification

Donc! Tout est configuré, connecté, le site est déjà sur Internet, hourra, bravo. Il est maintenant temps de le vérifier. Que dois-je vérifier exactement ?

Vérification du texte

Assurez-vous de relire le texte ou de contacter un relecteur/rédacteur pour le faire. Nous vérifions le texte pour les erreurs, les blocs copiés accidentellement lors de la mise en page, etc. Rien ne gâche plus l'impression d'une entreprise sérieuse que des erreurs dans le texte.

Contrôle d'adaptabilité

Assurez-vous de vérifier la mise en page de la page de destination sur votre tablette et votre téléphone. Est-ce que tout s'adapte bien ? Oui, il arrive parfois qu’il ne soit pas possible de tout organiser parfaitement, mais il faut au moins que ce soit lisible et plus ou moins soigné. Si un bloc ne peut pas être adapté correctement, vous devez alors créer deux blocs identiques, en masquer un sur la version ordinateur et masquer le second sur les appareils mobiles. Et chaque bloc est pratique à configurer pour la résolution sélectionnée.

Tester les boutons

Vérifiez que tous les boutons ont la valeur requise attachée : ancrez-vous à l'emplacement souhaité, ouvrez une fenêtre modale, accédez à une autre page, etc.

Vérification des formulaires de candidature

Envoyez une demande de test et vérifiez la délivrabilité de l'e-mail. Si vous avez intégré CRM, vérifiez que l'application est incluse dans CRM.

Exemples de pages de destination

Vous pouvez voir des exemples de pages de destination que j'ai développées

Si vous avez besoin de créer une page de destination pour commander, écrivez dans les commentaires ou laissez une demande

RÉSULTAT

Si vous avez terminé toutes les étapes, alors félicitations, votre page de destination est prête à être utilisée ! Maintenant, vous avez besoin que votre page de destination vous apporte des clients, pour cela vous devez mettre en place de la publicité, mais c'est une histoire pour un autre article. J'espère que cet article vous a été utile et que vous avez pu comprendre l'ensemble du processus de développement d'une landing page clé en main de haute qualité. Pour toute question, vous pouvez écrire dans les commentaires sous cet article. Vous pouvez également noter vos méthodes et astuces lors de la création d'un site internet, il sera intéressant de lire et d'apprendre vos réalisations :)

Polices Google

Écrivez vos réflexions dans les commentaires. Rendez-vous dans d’autres articles !

Atterrissage, atterrissage, atterrissage, page de destination, site d'une page, page de Langage, une page, site de vente, page de destination.

Autant de noms, même complètement pervertis, de la même chose. Le fait est que presque peu importe ce que vous faites, vous avez besoin d’un tel site.

Eh bien, puisque c'est nécessaire, résolvons le problème de sa création. Créer vous-même une landing page ? Après cet article – pas de question !

De plus, il est correct, significatif et atteint la cible. Comme on dit, vous pouvez créer vous-même votre page de destination de vente préférée.

Au cas où ou étape 0

On dit généralement que les sites d’une page sont créés pour vendre ou mettre en ligne les contacts d’une personne, mais en fait, il existe ici un éventail de tâches beaucoup plus large :

Recevoir de nouvelles demandes de biens/services ;

Augmenter la notoriété de la marque ;

Informer sur la fourniture de biens/services ;

Fournir des conseils sur les services ;

Recevoir les curriculum vitae des candidats ;

Attirer des partenaires, des concessionnaires, des représentants ;

Donner accès au service ;

Et ainsi de suite.

Avant de commencer à créer, vous devez vous rappeler que vous ne pouvez pas essayer de vendre un produit et d'attirer des revendeurs sur un seul site. Et tout cela parce que ce sont des tâches différentes, et cela signifie des pages de destination différentes.

Important. Avant de créer, vous devez définir clairement le but de votre page de destination. Et rappelez-vous : il ne devrait y avoir qu’un seul objectif.

Laissez cela réduire la portée des personnes potentielles, mais augmentez l'efficacité de la page, ce qui justifiera le tout financièrement.

ÉTAPE 1 – Faites un don ou fabriquez-le vous-même

À cette étape, vous devez déterminer laquelle des deux options de solution vous choisirez.

Que faire, que faire

Et ils seront sélectionnés en fonction de vos ressources financières et temporelles. Examinons chacun d'eux avec leurs avantages et leurs inconvénients.

Constructeur

Un jour, un client nous a écrit une plainte après avoir reçu le site. L’essentiel était que nous n’avions pas pris beaucoup d’argent à juste titre.

Tout cela semblait très étrange, car il s'était déjà familiarisé avec tout et avait signé l'accord. Mais nous ne sommes pas une entreprise pauvre, il nous est donc plus facile de laisser partir le client en paix (pas toujours) que d'essayer de prouver quelque chose. C'est ce que nous avons fait.

Et tout cela s'est produit parce qu'il a trouvé un concepteur de pages de destination sur Internet et a appris qu'il pouvait tout faire lui-même, en y consacrant littéralement 5 à 6 heures et en ne payant pas plus de 1 000 roubles par mois.

Mais vous et moi comprenons que vous pouvez assembler une « voiture » vous-même, mais jusqu'où ira-t-elle, à quel point sera-t-elle individuelle, dans quelle mesure aura-t-elle l'équipement technique approprié...

Nous avons décrit en détail toutes les étapes de création d'une landing page avec des délais dans l'article.

Avantages :

• Bon marché. Tout à fait. 500 à 1 000 roubles par mois et vous êtes l'heureux propriétaire d'un site Web d'une page ;
• Juste. Vous n'avez pas besoin de penser à la mise en page, à l'adaptation aux appareils mobiles ou à la connexion de notifications SMS concernant les nouvelles applications sur votre téléphone. Tout cela est déjà là et fait pour votre commodité ;
• Rapide. Vous pouvez tout faire et tout configurer très rapidement. De plus, apporter des changements ne sera pas non plus difficile ;
• Soutien technique. As-tu une question? Ils vous répondront le plus rapidement et le plus précisément possible. Un énorme plus ;
• Période d'essai gratuite. Désormais, presque tous les concepteurs de pages de destination bénéficient d'une période d'essai gratuite de 14 jours. Inscrivez-vous et...

Un peu de vérité sur la vie. « 14 jours de cadeaux ! Pendant ce temps, je gagnerai de l’argent en utilisant une page de destination sur le créateur de site Web et je commanderai un beau site Web à une agence », pensaient-ils.

Après 14 jours, ayant à peine réussi à vaincre le concepteur, ayant tout fait de travers et n'ayant reçu aucune commande via le site, ils se sont rendu compte que les one-pagers ne fonctionnaient pas.

Inconvénients :

• Connaissance. Vous devez savoir quels blocs utiliser, leur séquence, etc.

  Vous avez décidé de jeter un œil à vos concurrents ? Super! Mais comment savoir que vos concurrents disposent d’une landing page efficace et affichent de bonnes performances ?

• Conception. Si vous travaillez avec un designer pour la première fois, vous ne pourrez pas regarder la conception de la page de destination à la fin du travail sans larmes.

  Même si ce n’est pas la première option. Ne vous attendez pas à un design cool qui fera « Wow ! »

• Limitation. Le nombre de blocs prêts à l'emploi est limité, tout comme leur fonctionnalité. Les solutions de conception ne sont pas non plus présentées dans la gamme la plus large.

  Par conséquent, si vous voulez qu'un oiseau s'envole ici lorsqu'une personne quitte une candidature (comme si sa candidature s'envolait vers vous avec des pigeons voyageurs), vous pouvez oublier une telle idée.

Personnellement, nous pouvons recommander ce constructeur de pages de destination. Nous leur référons généralement des clients qui débutent ou testent un créneau.

Indépendants

Allons droit au but et par expérience. Trouver un pigiste qui créera à lui seul une page de destination de vente à partir de zéro et clé en main est IMPOSSIBLE. Eh bien, c'est vrai.

Il est possible de trouver des spécialistes individuels : un designer qui créera le design d'un futur site Web, ou un programmeur qui le réalisera, mais il n'y a pas de monstre capable de créer de QUALITÉ un site Web à l'intérieur comme à l'extérieur.

Par tout le travail, j'entends également des personnes telles que : spécialiste du marketing Internet, rédacteur, chef de projet. Il est tout simplement impossible d’être bon dans tout, du moins physiquement.

Par conséquent, la manière idéale de travailler avec un pigiste est de tout analyser, collecter et préparer vous-même.

Et le designer et le maquettiste trouvés sur la bourse indépendante le mettent en œuvre simplement, et sans aucune initiative.

Avantages :

• Temps. A la fois un plus et un moins. L’avantage est que vous vous épargnez la plupart des tracas liés à la mise en œuvre de l’apparence et du composant technique.
• Qualité. Le principal avantage. Ils feront cent pour cent mieux que vous en partant de zéro.

  Au minimum, parce qu’ils ont l’expérience et les connaissances que vous avez dans leur domaine, soyons honnêtes, presque aucune.

Inconvénients :

• Responsabilité. Si le site ne fonctionne pas, personne d’autre n’est à blâmer à part vous. Puisque c’est vous qui les contrôlez et qui parlez selon les besoins.

  Recherche. Vous avez besoin de connaissances particulières pour savoir où les chercher, comment leur attribuer des tâches et... vous devez également remplir un brief, montrer des spécifications techniques, etc.

• Le temps et les nerfs. Il est temps de trouver un freelance, il est temps de créer des tâches, il est temps de créer un prototype de page de destination, il est temps de contrôler. Vous perdrez beaucoup de temps et de nerfs.

  La majorité des pigistes sont des ploucs (je m'excuse, mais c'est comme ça), donc des retards dans les délais et des pertes périodiques des radars de communication se produiront.

  Et c’est le minimum auquel vous pouvez vous attendre lorsque vous souhaitez créer une landing page à moindre coût.

• Argent. Vous devrez débourser de l'argent, car un bon spécialiste sans « connexions » coûte assez cher.

  Une conception de qualité moyenne coûtera environ 8 à 10 000 $, la mise en page coûtera également environ ce montant. Encore une fois, tout dépend de la complexité du projet et des interprètes eux-mêmes.

• Escrocs. Les travaux sont structurés comme suit : 50/50. Paiement d'avance puis paiement restant après l'achèvement du projet.

  Je ne veux offenser personne, mais parmi les indépendants, il y a beaucoup de gens qui... ne se lancent pas dans le projet après avoir reçu un acompte. Autrement dit, ils se perdent.

Maintenant, un peu sur le paiement : si vous décidez de travailler avec un freelance, je vous recommande le schéma de paiement suivant : effectuez un acompte de 50 % comme transaction sûre (presque toutes les bourses l'ont).

Et transférez le reste du montant directement au freelance. Dans ce cas, vous paierez 15 % en trop, mais vous vous protégerez.

Astuce de vie. Si un pigiste souhaite vous arnaquer, il vous dissuadera d'effectuer une transaction sécurisée. Ce sera votre signal.

Étape 2 – à qui et quoi ?

Le bloc le plus ennuyeux (mais le plus nécessaire) de cet article. Peu importe la direction que vous prenez. Vous réaliserez vous-même une landing page efficace ou l’enverrez à une agence spécialisée. Dans tous les cas, il faut savoir 3 choses :

Votre public cible ;

L'échelle de chasse ;

Les entrailles de votre entreprise.

La seule différence est que si vous créez une page de destination seul, vous devrez tout écrire et réfléchir vous-même.

L'agence vous demandera de remplir un brief détaillé, grâce auquel elle planifiera elle-même le public cible, etc. Nous empruntons cependant un chemin différent et remplissons nous-mêmes le dossier, en communiquant avec vous via Skype.

Nous croyons sincèrement que c'est le seul moyen d'obtenir toutes les informations, puisqu'il est possible de poser les questions suivantes au cours de la conversation. Et de telles questions apparaissent toujours.

Le public ciblé

Nous avons déjà écrit sur la définition du public cible, ou encore sur la définition plus approfondie du client.

Cette étude vous permettra de comprendre qui est votre client potentiel, quelles craintes, objections et désirs il a liés à votre produit/service.

Sur quoi devriez-vous mettre la pression dans une future page de destination, quels mots utiliser, quelles images il est préférable d'insérer. Un schéma récapitulatif simplifié ressemble à ceci :

Échelle de chasse au public cible

Mais que donnera la connaissance de l'échelle de Hunt ? Tout comme l’avatar du client, il constituera la structure même de la future landing page.

Je vais vous le dire brièvement, mais en application sur un site Web d'une page, car très souvent les propriétaires d'entreprise ne comprennent pas à quel stade de sensibilisation se trouve leur client potentiel (si vous êtes trop paresseux pour lire, regardez la vidéo).

En bref, avant de prendre une décision d’achat, une personne passe par 5 étapes/niveaux de sensibilisation :

Scène « Indifférence ». Il n'y a pas de problème.

Étape « Conscience ». Il y a un problème, mais il n’y a pas de solution.

Étape « Comparaison ». Les options pour résoudre le problème sont comparées les unes aux autres.

Étape « Sélection ». L'option de solution a été sélectionnée. À la recherche de produits.

Étape « Achat ». Choix entre les fournisseurs de produits.

Comment cette complexité peut-elle vous aider lors de la création d’une landing page ? Examinons chaque étape et comment procéder :

Scène « Indifférence ». Vous devez d’abord créer le problème dans la tête de la personne. Montrez que s’il ne l’achète pas, alors tout ira mal.

Étape « Conscience ». Vous devez montrer dans les premiers écrans qu'il existe différentes options pour résoudre son problème.

Étape « Comparaison ». Vous devez faire comprendre que votre solution est meilleure que les autres, et pour cela vous pouvez faire un tableau comparatif, proposer une évaluation du produit, des résultats de recherche, une consultation personnelle sur la sélection, etc.

Étape « Sélection ». Vous devez montrer quelle offre lui convient, ou plutôt sous quelle forme/package. Pour ce faire, nous révélons davantage d’avantages de nos produits.

Étape « Achat ». Vous devez d'abord montrer les avantages de travailler avec votre entreprise, puis seulement parler du produit et du fait qu'il est le meilleur.

Il semble que vous n'en ayez pas besoin, mais... Par exemple, si une personne choisit entre acheter un appartement et construire sa propre maison, alors la page de destination de la maison devrait avoir un bloc expliquant pourquoi une maison est meilleure qu'une appartement.

Emballer

Vous pouvez imaginer à peu près à quoi ressemblera votre site Web dans votre tête. Et c’est bien si vous avez une identité visuelle ou un brand book (idéal, je dirais même).

Qu’en est-il des avantages de votre produit ou de votre entreprise dans son ensemble ? Et plusieurs dizaines d'autres questions auxquelles vous devez répondre avant de passer à la création d'un prototype et d'un site Web.

Parce que les bonnes questions forment les bonnes réponses, que vous prenez et intégrez à votre site Web. Cette étape vous aidera à prendre toutes les choses les plus précieuses de votre entreprise et à les montrer.

Pour que vous compreniez l’essentiel, voici un exemple de 10 questions qui vous aideront à mieux comprendre votre entreprise et votre produit, et à le servir « avec une merveilleuse sauce » :

Formulez 3 à 5 « raisons pour lesquelles il est objectivement plus rentable d'acheter chez vous plutôt que chez des concurrents ».

De quelles caractéristiques de production votre entreprise dispose-t-elle ?

Offrez-vous une formation interne au personnel ?

Comparez le produit avec des produits similaires. Énoncez les avantages et les inconvénients.

Qui est la ou les personnes de la société ?

Quels bonus êtes-vous prêt à offrir aux clients lors de l'achat de grosses sommes ? ;

Décrire en détail les étapes de travail avec le client depuis le premier contact jusqu'à la fin des travaux.

Parlez-nous des conditions financières des travaux (paiement anticipé, échéances, report des premiers versements, prêts de produits, remises, produit à vendre, rachat d'actifs illiquides, etc.).

Quelles publications existent sur l’entreprise ou émanant de l’entreprise ? (commentaires d'experts, interviews, juges d'émissions TV, chroniques, articles).

Vos clients sont des stars.

ÉTAPE 3 – Prototype

Finalement, nous sommes arrivés à la partie la plus intéressante. Nous allons maintenant créer votre futur site internet.

Ou plutôt, pour l'instant, comment réaliser soi-même un prototype, mais au moins c'est plus intéressant que de simplement décrire le public cible.

Étape 1. Structure du prototype

Un prototype est la structure et la séquence de blocs d'une future page de destination, que vous pouvez facilement construire à partir des critères de sélection et des objections de votre public cible.

La meilleure façon de procéder est la suivante : prenez une feuille de papier et notez une séquence de blocs/significations. Cela ressemble à ceci :

Un bouchon;

Avantages sociaux ;

Catalogue;

Production propre ;

Action;

Équipe;

etc.

C'est vous et moi qui prescrivons les blocs, mais il ne faut pas non plus oublier les deux structures classiques sur lesquelles est construit tout matériel publicitaire, et la landing page ne fait pas exception :

(Produits);

PmPHSA(). Signifie Douleur, plus de Douleur, Espoir, Solution, Action (douleur, douleur accrue, espoir, solution, appel à l'action).

Pour ne pas vous creuser la tête sur la façon de transmettre l'une des significations sélectionnées et de vous faciliter la vie lors de la création vous-même d'un prototype, cet article vous aidera.

Désolé pour ma franchise, mais ça me fait sacrément plaisir de voir des gens qui travaillent aussi la nuit (faites-le sans compromettre votre santé). J'ai commencé à penser que les bourreaux de travail avaient disparu. Quant aux résultats de la coopération, je mentionnerai simplement ce fait : les jours de pointe, nous recevions 140 candidatures par jour et nous devions embaucher tout un service commercial pour le canal de marketing Internet. Merci!

critique ouverte Dmitry Novozhilov, D-color

Savez-vous ce qu'est le marketing par e-mail ? Par exemple, je ne le savais pas avant de rencontrer les gars de Convert Monster. Je croyais naïvement que ce n’était qu’un beau mot. Je pensais et en même temps j'ai entendu dire que cela aide à travailler plus efficacement avec la clientèle. Il y a six mois, nous avons acquis une clientèle. Il a été compilé à partir d’applications quotidiennes pour les franchises de jardins d’enfants. Les candidatures ont été nombreuses, mais le taux de conversion est resté à un niveau très faible. J'ai eu du mal avec ce phénomène - j'ai essayé d'envoyer moi-même des lettres à la base de données. Il n'y avait toujours pas assez de temps - pour bien rédiger la prochaine newsletter, il fallait une demi-journée de travail. Avec chaque minute passée, le besoin de créer une chaîne compétente se faisait de plus en plus sentir. Mais jusqu’à présent, les lettres étaient envoyées une fois par semaine ou une fois tous les deux mois. Il n'y avait aucune cohérence dans le travail. Il manquait quelque chose. Pendant longtemps, nous n'avons pas pu comprendre quoi exactement. Les gars de Convert Monster se sont rapidement mis au travail. Les premiers résultats ne se sont pas fait attendre. Après avoir activé la chaîne de courrier électronique initiale, nous avons effectué plusieurs transactions en utilisant l'ancienne base de données. Ils ont pris en charge les coûts de lancement du marketing par e-mail. Après quelques mois, nous constatons une multiplication par trois du taux de conversion. Et ce n'est que le début. Nous travaillons actuellement à augmenter encore le taux de conversion actuel. Par exemple, trois fois de plus. Calculez vous-même : - combien d'argent une augmentation du taux de conversion de 2 fois rapportera-t-elle ? C'est minimum ! - combien obtiendrez-vous si vous fermez le pourcentage minimum de clients de votre base existante ? Vous ne savez toujours pas si vous devez contacter Convert Monster ?

critique ouverte Sergueï Degtyarev

Nous utilisons le trafic Internet depuis longtemps pour attirer des clients. Environ un an et demi. Pendant ce temps, nous avons changé 2 fournisseurs jusqu'à ce que Convert Monster nous soit recommandé. Les conditions de coopération pour la plupart des entreprises proposant des services similaires sont similaires : budget mensuel, élaboration d'une campagne publicitaire et c'est parti. Puis la campagne devient obsolète, le déclin commence et, par conséquent, le manque de clients. Ensuite, vous demandez aux managers de changer de tactique, de stratégie, de titres, de noyau sémantique - vous faites appel à tous les saints. Et eux (les managers, pas les saints) ne font rien. Ou peut-être qu’ils le font, mais il n’y a aucun résultat. Un jour, ça fait grincer des dents, on quitte ce bureau pour un autre, puis on se met à chercher le suivant. Important! Avant de commencer à chercher le tout premier, essayez-le vous-même. Bien entendu, vos résultats à ce moment sont les meilleurs possibles, ils sont tout simplement ZÉRO ! Nous sommes venus chez Convert Monster en désespoir de cause. C'est à ce moment-là que Yandex a mis en place une configuration - ils ont supprimé la garantie sur laquelle nous étions si bien assis et l'ont exploitée autant que possible et IMPOSSIBLE. Nous avons compris que le bonheur ne viendrait pas instantanément, mais nous l'avons attendu. Et en effet! Il a commencé à frapper lentement à nos portes – les candidatures et les ventes ont commencé à affluer. Puis échec - été, hors saison, travail en moins. Mais les gars n’ont pas abandonné et nous n’avons pas réduit les budgets, car nous savons CE que cela menace. Ne baissez jamais votre budget et ne quittez jamais le site qui vous rapporte des revenus ! Résultat final : plus de 6 millions de revenus via Yandex.Direct. Nous sommes plus que satisfaits de notre coopération ! Si vous avez des doutes sur l'opportunité de travailler avec Convert Monster ou non, contactez-nous ! Nous vous dirons par où commencer. Ensuite, votre chemin vers eux sera plus long, et la sortie finale vers Convert Monster sera votre « expiration » et la lumière au bout du tunnel. Tous les chemins y mèneront encore. Si vous les recherchez, bien sûr. C'est une question de temps. Positionnez-vous simplement comme une entreprise prête à se développer et à évoluer. Sinon, ils ne s’intéresseront tout simplement pas à vous.

avis ouvert Isabella Ritz, Ritz Group LLC

Avant de vous contacter, j'ai commandé une page de destination auprès d'une entreprise et une configuration Yandex Direct auprès d'une autre. Les deux sociétés sont bien connues sur le marché, mais chacune de nos combinaisons site + campagne publicitaire n'a pas cherché à aider, mais a seulement critiqué l'autre interprète : programmeurs - directologues, directologues - programmeurs. En conséquence, sur la base de votre recommandation, nous vous avons contacté et en seulement 4 mois, nous avons multiplié par 4 le nombre de candidatures (jusqu'à 120 par mois) et notre chiffre d'affaires en ligne à plusieurs millions de roubles.

revue ouverte Vladislav Shupenya, société Kimberlit

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 composition : 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" //