Des modèles de page de destination prêts à l'emploi sont nécessaires pour lancer rapidement un nouveau produit, le promouvoir à l'aide d'une page LP ou d'une application mobile, ou motiver les utilisateurs à s'inscrire / s'abonner à la newsletter. Pour une « page de destination », la facilité d'utilisation avec une bonne mise en page est essentielle. Les modèles de page de destination de vente modernes sont développés en tenant compte de la possibilité de créer un site Web réactif avec des conversions élevées.
Un thème HTML5 ultra-moderne basé sur Bootstrap 3.1.1. Livré avec 4 mises en page : page unique/multipage, options de barre de navigation. Un léger effet de défilement de parallaxe est intégré dans un thème de page de destination mobile responsive pour le trafic organique (SEO).
Modèle de page de destination HTML pour applications Web et mobiles, destiné à faciliter la génération de prospects. A un chargement rapide et un code html, css valide. Dans la partie supérieure de la page unique, le formulaire de contacts est dupliqué avec.
Modèle de page de destination HTML5 d'une page avec effets CSS3. Possède un framework à trois colonnes, construit sur Bootstrap 3. Convient à la vente d'applications iOS / Android. Le modèle comprend 2 mises en page (avec et sans Parallax), des formulaires de contact Ajax, une lightbox PrettyPhoto et 5 schémas de couleurs. Facile à personnaliser : modifiez les codes hexadécimaux et les éléments associés seront peints dans une nouvelle couleur. PSD inclus.
Le modèle mobile moderne et prêt pour Retina propose 8 options de couleur, image /.
Le modèle de page de destination de style plat polyvalent est livré avec 3 options d'index, 6 schémas de couleurs. Modèle construit avec twitter bootstrap3, script PHP inclus pour le formulaire de contact et de téléchargement.
Slander est idéal pour les startups et les entreprises, adapté aux professionnels ou à un projet individuel. La conception réactive avec Bootstrap et HTML5 / CSS3 comprend un curseur réactif, un curseur d'onglet, un formulaire de newsletter, etc.
Modèle de page de destination HTML5 / CSS3 élégant, propre et minimaliste avec une grande fonctionnalité. Le modèle est conçu pour la page Coming Soon (lancement bientôt), idéal pour créer une page d'application et un site vitrine.
Modèle d'atterrissage réactif pour les offres spéciales Activités. A des sections pour, vidéo commerciale, calendrier des événements, liste d'invités.
Un site Web d'une page est pratique pour les hommes d'affaires car cela peut être fait littéralement en une journée. Si télécharger un modèle de site Web d'une page prêt à l'emploi, vous pouvez créer un site Web pour votre entreprise pour un montant minimum, car vous n'avez qu'à payer pour l'hébergement. Pour le client, une page d'une page est pratique car toutes les informations y sont présentées de manière aussi concise et structurée que possible, il n'y a rien de superflu. En raison de leur convivialité, les pages d'une page affichent souvent des conversions plus élevées que les autres types de sites.
Si vous décidez de faire pour votre entreprise Page de destination, télécharger le modèle sur notre site Internet. Nous vérifions soigneusement tous les modèles pour les virus, vous ne pouvez donc pas avoir peur de télécharger un fichier infecté. Tout modèles de page de destination dans notre catalogue ont un design moderne, fabriqué dans une variété de styles. La possibilité d'ajuster le nombre de blocs, de modifier le schéma de couleurs et d'autres fonctions vous aidera à créer un site Web original unique basé sur un modèle simple.
Le principal problème de ceux qui ont décidé de télécharger modèle de page de destination gratuit, est un grand nombre de virus et de bogues dans les modèles gratuits. Par conséquent, il est très important de trouver un site Web sûr et fiable. Nous vous invitons à nous rendre visite, car nous surveillons attentivement la sécurité. De plus, nous vous régalerons avec le plus large assortiment Modèles HTML d'une page, télécharger que vous pouvez maintenant!
Lire le texte plus...Salut. Les sites d'une seule page sont toujours populaires aujourd'hui, et pour une bonne raison. Ils présentent un certain nombre d'avantages par rapport aux sites multipages à part entière. Sur une page d'une page (aka landing page), une personne se concentre sur une idée, un produit, ce qui lui permet d'étudier votre proposition sans distraction et est plus disposée à laisser une candidature.
"D'ACCORD"- vous dites - "J'ai décidé de me faire une landing page, mais je ne comprends rien à la programmation"... Et ce n'est pas un problème. Il existe maintenant de nombreux outils pour créer un site Web professionnel sans fouiller dans le code. L'un d'eux est le populaire CMS WordPress avec WPBackery ou le constructeur ELementor.
Dans cet article, j'ai fourni des modèles wordpress de page de destination sympas qui conviennent aux entreprises, à la vente de produits, aux agences, aux indépendants et à tout autre sujet. Après tout, ces modèles peuvent et doivent être personnalisés pour vous et votre offre.
De nombreux modèles utilisent des cloches et des sifflets à la mode tels que des effets de parallaxe, des conceptions plates, des photos et des vidéos en plein écran. L'adaptation pour les appareils mobiles est incluse dans chaque modèle.
Assez de discussions, regardons la sélection !
P.s. Si vous voulez savoir plus en détail ce qu'est une page de destination, alors j'ai analysé cette question en détail et donné 27 exemples de pages de destination.
Pour moi, c'est un modèle de premier ordre, car il contient plus de 376 démos sur divers sujets. En utilisant ce modèle, vous pouvez transmettre des émotions complètement différentes. Puissant et intuitif.
Ce thème incroyable a un curseur personnalisable, des en-têtes entièrement personnalisables, des méga menus, des visiophones, un en-tête fixe ou collant, divers logos pour les en-têtes, des éléments interactifs, 7 mises en page de portefeuille différentes et plus encore, ce qui ouvre des possibilités infinies.
Faites une présentation unique de votre produit ou offre. Il y a des instructions visuelles dans le texte et aussi des instructions vidéo.
Un système de modèles avancé et unique qui vous permet non seulement de créer une page de destination, mais également de l'intégrer au site principal du projet sans paramètres supplémentaires. Le modèle contient de nombreux styles de blocs prêts à l'emploi qui sont demandés sur les pages de destination - présentation d'équipe, galerie, portfolio. De beaux effets de préchargement des pages sont également disponibles.
Au fait, The7 est maintenant sur mon blog.
Betheme est le plus grand modèle en termes de fonctionnalités et de nombre d'options de mise en page prédéfinies. À ce jour, il existe plus de 400 pages de destination de démonstration basées sur ce thème, que vous pouvez choisir et adapter en fonction de vos besoins. Les pages de destination prêtes à l'emploi sur Betheme sont activement utilisées :
Quelques autres démos :
Les mises à jour du thème se font automatiquement, les mises à jour des plugins se font en cliquant sur le bouton. Les sites de démonstration utilisent Revolution Slider. Le modèle propose 5 mises en page pour les pages, 20 en-têtes personnalisés, des styles illimités pour Google maps, de nombreuses icônes élégantes.
L'outil Muffin Builder vous aidera à créer n'importe quel design sans aucune connaissance en développement Web. Si vous le souhaitez, vous pouvez ajouter des règles css et des scripts js sans affecter le code principal du modèle.
Ronneby offre des performances élevées et un panneau d'options étendu. Les meilleurs plugins premium pour créer des pages de destination WordPress ont été ajoutés au modèle. Les développeurs du modèle accordent une attention particulière au support utilisateur - toute question doit recevoir une réponse rapide, décrivant comment résoudre le problème. Le thème a déjà été localisé pour deux langues, mais des fichiers à traduire y sont également joints, vous permettant d'organiser la prise en charge multilingue des sites.
Autre exemple de démo :
Modèle flexible et en même temps facile à personnaliser. Comprend 72 soi-disant skins pour tous les thèmes possibles. Administrateur pratique. panneau, même un débutant comprendra facilement le générateur de page et les paramètres.
Il existe des didacticiels pratiques de 240 pages et 20 didacticiels vidéo sur la façon de rendre votre site Web génial !)
Le modèle Jupiter est également optimisé pour le référencement. Les contrôles Google PageSpeed affichent de bonnes performances, ce qui signifie que les moteurs de recherche vont adorer votre site.
Le modèle est propre, soigné et une typographie de bonne qualité est utilisée. Grâce à l'utilisation d'effets visuels, comme la parallaxe, le thème s'avère vivant et il est très agréable de regarder un tel site.
L'une des plus grandes collections WordPress. Les modèles ont été écrits par des programmeurs Web professionnels et les conceptions ont été dessinées par des experts visuels et UX qualifiés. Grâce à cela, vous pouvez mettre en toute sécurité n'importe quel modèle, chacun est prêt à être utilisé sur un ordinateur, un téléphone portable, une tablette. Plugins premium inclus :
Brooklyn a 16 skins de démonstration sur différents sujets. Le style moderne des pages, la combinaison d'images et de polices confèrent de l'élégance à tout site ayant ce thème. Le bloc portefeuille est magnifiquement exécuté. Le modèle est parfait pour les agences, les entreprises. Les modèles sont fabriqués dans des couleurs sombres, ce qui donne confiance et confiance. Le modèle est réactif et a fière allure sur tous les appareils.
Un modèle lisse et léger qui ne laissera personne indifférent. Une typographie et des éléments d'interface de haute qualité rendent ce gameplay chic. Nominé et lauréat de divers concours et évaluations bien connus, tels que awwwards. A plus de 30+ skins de différents thèmes parmi lesquels choisir
Non seulement le site Web s'adapte aux appareils mobiles, mais également aux images pour qu'elles soient les plus pratiques pour les visiteurs.
Le modèle est nouveau, mais a déjà fait ses preuves. A 8 thèmes (multi-page, atterrissage, entreprise, portefeuille, blog, e-commerce, stubs), 3-12 skins chacun. En plus de la beauté et de la propreté, ce modèle ne contient qu'un arsenal de différents widgets et éléments. Vous pouvez rendre votre atterrissage beau et fonctionnel. Besoin d'un curseur ? S'il te plaît. Afficher le portfolio, les avis, les avantages ? Et c'est.
Native est un outil puissant pour promouvoir une startup. Les modèles de pages de destination WordPress basés sur des thèmes utilisent divers effets de parallaxe pour se déplacer entre les blocs sémantiques du site. Une documentation étendue et des didacticiels vidéo aideront les utilisateurs novices de CMS à comprendre rapidement les fonctionnalités du panneau d'administration. Les plugins Visual Composer, Layer Slider et Slider Revolution sont une application gratuite du modèle.
Salient est un thème polyvalent avec un design réactif et est un choix populaire. La typographie premium et les effets de parallaxe sur le défilement aident à améliorer l'expérience de la page de destination. L'optimisation de la fréquence d'images garantit des transitions d'animation fluides entre les blocs de contenu. Le modèle utilise des tailles d'image adaptatives, ce qui contribue à un chargement rapide des pages et à une économie de trafic.
TheGem est un thème moderne pour les projets créatifs, optimisé pour le référencement et complété par une mise en page réactive. Le faible poids des pages, la rapidité de leur chargement et l'UX bien pensé garantissent des performances élevées du modèle. Si vous avez besoin de promouvoir votre entreprise à l'aide d'une page de destination, vous devriez acheter ce modèle au moins en raison de son code convivial pour le référencement, qui fournira des positions élevées dans les résultats de recherche Google. Les 11 versions de démonstration disponibles des pages de destination prennent en compte les besoins de divers projets.
Les éléments de conception du site sur TheGem sont configurés à l'aide du plugin Visual Composer. L'affichage d'une grande quantité de contenu dans les blocs de la page de destination (portefeuille, avis, services) est organisé par le chargement - automatique ou "par bouton", ainsi que par le curseur de changement d'onglet. Le modèle fournit 6 options d'animation pour le chargement des composants de section qui apparaissent lors du défilement du contenu de la page de destination. L'arrière-plan des blocs de contenu peut être des vidéos de vimeo et youtube ou extrait du système de fichiers du site en utilisant html5.
Marketing Pro est un modèle conçu pour la conversion, le marketing et le référencement. Chacun des 9 sites de démonstration qu'il contient est créé en gardant à l'esprit les spécificités d'un créneau marketing spécifique. Un bonus à la conception de page de destination réactive est des modèles stylisés pour les blocs d'organisation d'événements.
Oshine est l'un des thèmes créatifs les plus vendus. Avec un excellent design et des fonctionnalités puissantes, ce modèle peut être utilisé pour créer des pages de destination pour des projets créatifs et des entreprises. Cinquante modules de personnalisation, chacun soigneusement conçu pour vous aider à obtenir des résultats parfaits. L'option « annuler/rétablir » et la possibilité de définir des actions spécifiques sur des « raccourcis clavier » simplifient le processus de configuration.
Jevelin est un modèle de conception responsive premium qui facilite la création de pages de destination et de sites wordpress d'une page. Le sujet aidera à lancer le projet dans un court laps de temps. Grâce à la variété des outils de personnalisation - 9 options d'en-tête dans différentes mises en page, 40 éléments uniques, chacun pouvant être stylisé individuellement, fonctionnalité intégrée pour organiser les re-posts sur les réseaux sociaux, 6 solutions de style pour la section portfolio - personnalisation des skins est plus rapide que jamais...
Kalium est un sujet vers lequel se tournent les représentants de divers domaines professionnels afin d'obtenir un site Web pour promouvoir leurs services. Un accent particulier dans la conception de sites Web sur Kalium est mis sur la typographie - une bibliothèque spécialisée pour la gestion des polices en est responsable. Le modèle peut utiliser 4000 polices - Google, Typekit, Font Squirrel, premium et personnalisées (téléchargées par l'utilisateur).
Inbound est un modèle qui peut faciliter la création de sites d'une page pour des applications, des livres électroniques, des cours vidéo et des produits similaires. La personnalisation de la conception est effectuée à l'aide du générateur visuel de pages de destination Landing Page Builder. Le modèle permet également à chaque produit promu de se voir attribuer une mini-section au format de page de destination au sein d'un site et peut être utilisé pour les sections de catégorie de produit dans WooCommerce.
Intact est un thème multi-options conçu pour vous aider à résoudre vos besoins commerciaux Internet. Il comprend des éléments aussi importants d'une page de destination moderne que : des blocs « Plans tarifaires » et « Employés de l'entreprise », un curseur avec des avis, des ensembles d'icônes thématiques, des formulaires d'abonnement, un consultant en ligne.
Comet est un modèle pixel-parfait entièrement réactif pour Visual Composer et. Les utilisateurs se voient proposer 5 skins pour les pages de destination, qui ont les effets suivants : curseur pour le texte, parallaxe, vidéo d'arrière-plan - importé de youtube ou intégré dans html5, curseur de zoom animé. Les nouveaux utilisateurs peuvent facilement comprendre les paramètres du thème lors de la création de pages de destination wordpress - des instructions et des didacticiels vidéo sont disponibles en ligne.
Un thème WordPress polyvalent qui a tout ce dont vous avez besoin pour créer une page de destination :
La conception du développement peut être évaluée avant l'achat. Les schémas de couleurs et les paramètres sont modifiés dans l'éditeur visuel. Les auteurs promettent un soutien à tout moment.
Le développeur propose un modèle de site Web sur différents sujets, de la construction aux services vétérinaires. Des pages de destination simples et efficaces aideront à transmettre vos avantages, vos conditions de travail et d'autres détails nécessaires aux clients potentiels. Le design est réactif et convient à tous les appareils, des moniteurs Retina aux gadgets mobiles. Il existe des plugins pour le portfolio, les heures d'ouverture, le calendrier, ainsi que des icônes personnalisées.
« Un thème idéal pour une startup », disent les auteurs à propos de leur développement. Le design minimaliste léger de 2019 convient aux magasins en ligne, aux agences événementielles et à de nombreux autres types d'entreprises pour une carte de visite ou un développement ultérieur dans un projet plus vaste. Inclus:
Modèle multi-modèles avec trente démos, dans lequel vous ne pouvez substituer que le texte souhaité. Ils offrent également plus de 90 modèles de curseurs et d'effets, plus de 130 options pour des pages individuelles. 9 plugins de base sont inclus qui seront utiles pour promouvoir un site de cartes de visite ou une ressource plus importante. Tout cela est à prix réduit, maintenant disponible pour 30 $. L'un des modèles de page de destination les plus populaires.
Un autre concepteur multi-modèles pour les pages de destination et les cartes de visite. Code propre avec un nombre infini d'options pour choisir les en-têtes et les pieds de page sans avoir besoin d'apprendre la programmation. De nombreux designs dont les éléments sont facilement remplaçables grâce au plugin "grid". Transformez facilement un site d'une page en un magasin à part entière grâce à la recherche avancée. Le support est toujours prêt à répondre aux questions.
Multimodèle peu coûteux et populaire pour l'atterrissage, qui diffère par:
Des sites professionnels sur n'importe quel sujet que vous pouvez simplement installer en un clic et utiliser. Des designs modernes qui ne sont pas "ennuyeux" et qui ont l'air frais et beaux.
« multi-modèles de nouvelle génération » est une déclaration audacieuse, mais c'est ce que les auteurs disent de leur produit. Pour seulement 35$ vous pouvez obtenir :
Le plugin d'éditeur visuel Elementor est vraiment mis à jour vers la dernière version et très facile à utiliser.
"Le meilleur parmi 9500" - notent les développeurs. Le modèle se concentre sur les personnes qui n'ont jamais fait de codage. La personnalisation de la conception est effectuée à l'aide du constructeur de plug-in visuel Elementor, qui vous permet de travailler en mode un à un, de ne pas utiliser de paramètres tiers et d'utiliser immédiatement la fonctionnalité pleinement fonctionnelle de l'un des 300 modèles. Pratique et rapide à mettre en place.
Beau design dans une palette de couleurs inhabituelle. L'accent est mis non seulement sur un design élégant, car il est proposé d'acheter dans un ensemble:
Modèle WordPress propre et compréhensible pour les cartes de visite et les achats en ligne. En mode magasin, il existe des paramètres pour les caractéristiques du produit, effectuez une recherche par eux.
Une sélection de pages de destination mignonnes dans un style plat moderne et élégant. Les éléments dessinés à la main aideront les clients potentiels à se démarquer et à se souvenir. Le prix comprend les principaux plugins et widgets - d'un éditeur visuel à un effet de parallaxe pour placer un arrière-plan ou un portfolio. Vous pouvez personnaliser une vue différente dans les versions desktop et mobile, l'adaptabilité est donnée par défaut.
Plusieurs solutions pour designers, photographes, artistes. Des préréglages utiles pour le placement de portefeuille vous permettront de vous protéger contre la copie, de charger au fur et à mesure que l'utilisateur navigue, ce qui économise le temps de chargement. Téléchargement de vidéo facile. Il existe une option pour les blogs. Des éléments pour placer des infographies sont préparés. Le concepteur visuel vous aidera à personnaliser facilement tous les détails.
Un pack d'atterrissage polyvalent pour seulement 29 $ pour obtenir :
Aucun codage requis, il existe des plugins de formulaire de contact de base et des installations de curseurs. Prêt à intégrer pour WooCommerce.
Les promoteurs ont réalisé une conception « verte » intéressante pour les services d'aménagement paysager, l'aide au jardinage et l'éco-thème. Cependant, le blanc peut être utilisé à d'autres fins. De belles icônes, des polices Google propres, une excellente réactivité et une excellente apparence, y compris sur les appareils Retina, impliquent une utilisation généralisée du thème WordPress.
Conçu pour la dernière version de WordPress. Le modèle est constamment mis à jour. La fonctionnalité de la boutique en ligne est fournie grâce au plug-in pratique pour la recherche et la commande avancées. Il existe également des préréglages pour les événements, les dates du calendrier et l'enregistrement. Utilisé par Elementor pour créer de nouvelles pages. Prend en charge tous les plugins supplémentaires.
Le thème créatif « musical » restera dans les mémoires des visiteurs pour son design lumineux, et le propriétaire du site sera intéressé par :
L'éducation est une version améliorée de l'ancien thème eLearning avec une UX plus avancée et est destinée aux ressources Internet éducatives : cours en ligne et sites Web d'établissements d'enseignement. Le modèle a un design attrayant et fournit des fonctionnalités complètes nécessaires au processus éducatif.
L'un est un thème créatif pour créer des pages de destination en mettant l'accent sur la promotion des produits. Le front-end du modèle est réalisé sur html5 et peut y être intégré bootstrap 3, MailChimp et Contact Form 7. Les développeurs du thème UX ont étudié de nombreux projets similaires, à la suite desquels les utilisateurs ont reçu une page de destination WordPress prête à l'emploi modèles, qui ont tous les outils importants pour les projets d'entreprise.
Total est un modèle adapté à de nombreux projets. Lors de la création de pages, il utilise : méthode glisser-déposer, schémas de couleurs illimités, personnalisation en temps réel, curseurs premium faciles à utiliser. Parmi les sites de démonstration du thème, il existe des modèles de page de destination pour 11 projets divers.
Stockholm est l'un des 30 thèmes WordPress les plus vendus au cours de sa vie. Lorsque vous travaillez avec un thème, il est permis de définir un schéma de couleurs pour l'ensemble du site ou ses éléments individuels, d'appliquer l'une des 600 polices Google, de combiner des options et des blocs de différents sites de démonstration. Les utilisateurs qui ont besoin d'une solution prête à l'emploi pour un projet d'entreprise peuvent télécharger des modèles de page de destination en les installant immédiatement à partir de la section de création de site Web.
Autre option de démonstration :
Plus de 70+ widgets avec lesquels vos pages de destination seront uniques et modernes. Les polices Google, les infographies, l'adaptation au référencement, le code propre, la création de portefeuilles pratiques ne sont que quelques-uns des avantages de ce modèle. Les terres, au sens littéral, peuvent être assemblées littéralement comme une mosaïque, par simple glisser-déposer. Sur la page de description, vous pouvez voir des exemples illustratifs.
Lorsque vous visualisez des sites de démonstration, vous souhaitez tous les utiliser.
Thème Page de destination frotté aux trous. Bien que le boom des pages de destination se soit un peu calmé, les pages de destination sont toujours en demande. Ils sont lancés par tout le monde, même s'il s'agit clairement d'un mouvement perdant pour leurs niches commerciales. Quelqu'un le fait juste pour jouer, et quelqu'un le fait pour gagner de l'argent. Mais les objectifs que vous poursuivez ne sont pas si importants, ce qui est important, c'est que tout le monde devra développer une page. Quelqu'un passera commande auprès de professionnels, et quelqu'un, pour une raison ou une autre, commencera à créer sa propre page de destination. Cette collection est dédiée à ce dernier.
Les gens qui ont décidé créer un site Web vous-même, ils peuvent commencer le développement à partir de zéro, ou ils peuvent utiliser des logiciels prêts à l'emploi, car ils ne nécessitent pas de connaissances particulières en développement. Une connaissance de base de HTML et CSS est suffisante, comme cela est enseigné à l'école. Ici encore la question se pose. Dois-je utiliser payant ou gratuit ? Bien sûr, celui payant sera de bien meilleure qualité et affichera probablement des conversions plus élevées. Le gratuit sera moins beau, moins élaboré en termes de marketing, de mise en page et de design.
Cette collection se compose de seulement gratuit en pur HTML pour créer une Landing Page... Initialement, la sélection se composait de 40 positions, mais en me réveillant le matin et en regardant ces modèles avec un œil neuf, j'ai décidé d'en supprimer la plupart, car c'était franchement de la foutaise, et il y a tellement de foutaise sur Internet . Il ne reste que les modèles les plus dignes, sur lesquels vous pouvez au moins construire quelque chose. La sélection comprend modèles de page de destination d'une grande variété de sujets, mais, pour une raison quelconque, le LP pour les applications mobiles prévaut. Ils se sont avérés être de la plus haute qualité.
Nous avons déjà fait une sélection de modèles de page de destination gratuits. Ils ont été adaptés à un sujet précis. Cette fois j'ai décidé de faire un sujet préfabriqué qui n'appartient à aucune direction.
Autres collections de modèles de page de destination HTML gratuits :
D'ailleurs. Si, pour une raison quelconque, vous souhaitez extraire ces modèles sur le moteur Wordpress, alors à ce sujet, j'ai déjà fait une sélection de plugins pour créer une page de destination sur Wordpress. Vous pouvez essayer de les utiliser. Cela vous fera peut-être gagner beaucoup de temps. Bien que, personnellement, je ne vois pas grand-chose à faire cela, puisque du HTML pur est suffisant pour un simple LP.
Donc. Voici 20 modèles de page de destination HTML gratuits.
Salutations, mes chers lecteurs. Aujourd'hui, nous allons parler des points techniques à l'aide desquels nous pouvons augmenter conversion des ventes leurs biens ou services. L'un des points importants est une page de destination bien pensée avec des produits. La soi-disant page de destination, dont nous parlerons plus loin 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 gens atterrissent généralement après avoir cliqué sur une annonce. Créé pour une offre : un produit, un service ou un abonnement. Une page de destination efficace est la pierre angulaire d'un marketing Internet 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 donnent pas 100% du résultat. Elle dit aux visiteurs ce qui est proposé et pourquoi ils devraient le vouloir. Un 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 page de destination ? Il est faux de croire que la réponse réside dans la capacité de composer. Une bonne page de destination est le résultat d'un travail bien 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 divers constructeurs Landing page.
Donc, avant de créer une page de destination, demandez-vous :
Vous devez offrir toutes les informations dont vous avez besoin, mais pas assez pour submerger et faire fuir un client potentiel.
Avant de passer aux choses sérieuses, examinons rapidement HTML et CSS. Comprendre leur fonctionnement vous aidera à créer une page de destination.
HTML- langage de balisage du navigateur pour la visualisation du site Web. Écrit à l'aide de balises entre crochets angulaires qui définissent le contenu.
La balise s'ouvre (<>) et se referme () autour de la garniture :
<тег>teneurтег>
Pour un ajustement précis, les attributs suivants sont ajoutés après le nom :
<тег атрибут="значение">teneurтег>
CSS - Détermine comment organiser les éléments HTML. Se compose de sélecteurs, de propriétés et de valeurs :
# sélecteur (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 contrôlent son apparence. Vous pouvez créer différentes pages en appliquant différents styles CSS au même code HTML.
Pour une mise en page rapide, nous utiliserons un modèle avec un design minimal basé sur bootstrap. C'est un système avec ses propres sélecteurs, qui est utilisé partout dans le monde pour accélérer la mise en page.
Semble modeste.
Un site pour tous les goûts est créé à partir de ce poisson en plusieurs étapes.
Structure du répertoire dans le dossier :
Étape 1 : Utilisation de l'en-tête
Le titre et les sous-titres sont des points clés pour aider à communiquer clairement la valeur de la proposition.
Changeons le titre et le nom du site. Ici, la capacité de composer n'est pas requise - votre texte est écrit aux endroits surlignés en jaune sur l'écran.
Étape 2. La brièveté est la sœur de la conversion. Ajout d'avantages et de tarifs
Cela prendra 4 sections:
Concevons la section « principale » du contenu principal, dans laquelle nous insérons les sections nécessaires :
…..
…..
…..
…..
Remplissez avec du remplissage au lieu de points.
La section des avantages nécessitera ce code :
Avantages
Sed diam nonummy
Elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Contenu pour plus de clarté :
Certes, cela a l'air bâclé, mais il n'y a aucune raison de paniquer, nous continuons.
Nous prescrivons les prix. Le contenu change de la même manière que dans la première étape. Descriptif général avec classe « tarifs » et trois tarifs.
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.
Plans tarifaires
par mois / par personne
par mois / par personne
par mois / par personne
Ressemble à ça.
Bien que nous ne soyons pas intéressés par l'apparence de la future page de destination, nous examinerons ci-dessous des exemples de changement 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 les classiques sont les avis 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 :
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 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.
Mettons en place un appel à l'action.
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 :
Bénéficiez en commandant aujourd'hui
Les avis aideront les clients potentiels à prendre la décision d'acheter un produit. Pour plus de clarté, nous avons besoin d'avatars, nous les écrirons donc immédiatement - sous chaque citation.
Nom du client.
Étape 4 : Intégration au réseau et convivialité pour les appareils mobiles
Pour injecter la grille, nous avons besoin de conteneurs Bootstrap. Il est important de se rappeler le nombre total de segments de colonne autorisés - 12. La classe détermine la largeur de l'affichage du contenu. L'avantage de cette grille toute faite est que les conteneurs sont conçus dans un souci de réactivité et sont immédiatement applicables aux appareils mobiles. Description détaillée sur le site officiel. La grille ressemble à ceci.
Nous allons emballer le contenu de "main" dans un conteneur. Pour ce faire, dans sa partie supérieure il est écrit :
Si vous voulez que le bloc s'adapte à toute la largeur de l'écran, alors le conteneur est inséré à l'intérieur. Ici, ce sera un jambotron et un appel à l'action.
Nous enveloppons tous les éléments qui nécessitent un positionnement les uns au-dessus des autres avec des séparateurs de ligne.
Nous pouvons maintenant ajuster les colonnes en largeur, en nous concentrant sur la grille de bootstrap. Après l'emballage, le remplissage a cessé de coller aux bords de l'écran, des retraits nets sont apparus.
Nous fixons les prix d'affilée à l'aide de la classe de colonnes col-lg-4. À l'intérieur des rangées de lignes, il n'est plus nécessaire d'écrire des divas séparées pour l'emballage, vous pouvez les combiner avec celles existantes séparées par un espace.
Par analogie, nous avons mis en place des colonnes pour la section avis et avantages. Si vous souhaitez déplacer un élément sur le côté, utilisez la classe de colonne offset col-lg-offset-2. Le nombre à la fin détermine combien de colonnes de base le décalage prendra.
Étape 5. Polices et icônes
Nous allons implémenter des polices pour les en-têtes Google Font. Lorsque vous sélectionnez, ouvrez l'onglet d'importation et copiez les données de celui-ci dans le fichier main.css. Nous ajoutons également des sélecteurs d'en-tête au fichier, pour lequel la nouvelle police est appliquée.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" / * importation de polices pour les titres * /
.navbar-marque,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family : "Roboto Condensed", sans-serif; / * Sortie Googlephone * /
}
Pour plus de clarté, une classe avec un nom explicite text-center et des icônes FontAwesome de l'ensemble d'amorçage sont enregistrées.
Ceci termine la préparation.
Nous utilisons les trois types les plus courants : avec une proposition, un formulaire et avec un compte à rebours. Au fur et à mesure que vous tapez, le modèle sera complété par des effets.
Définissez l'arrière-plan du corps principal et le rembourrage pour couvrir le premier écran.
Jumbotron (
arrière-plan : # f5f5f5 url (../ img / fon.jpg) en haut au centre sans répétition ;
largeur maximale : 100 % ;
rembourrage-dessus : 250px ;
rembourrage en bas : 200px ;
text-align : centre ;
}
Redimensionner la tête du jambotron de h2 à h1. Ensuite, nous écrivons les styles pour les éléments qui doivent être modifiés.
Commençons par les icônes.
Avantages i (
couleur : # cac4c4 ;
}
Une couleur est spécifiée après le signe dièse. Vous pouvez choisir votre option en utilisant des tables de couleurs html ou un éditeur d'images.
Indentation pour les en-têtes de section
partie h2 (
rembourrage haut : 30px ;
marge inférieure : 25px ;
}
Nous mettons de l'ordre dans l'apparition des tarifs. Pour plus de commodité, nous créons nos propres classes pour les éléments que nous voulons mettre en évidence par points.
par mois / par personne
Et beaucoup de CSS. Les endroits dont les sites sont responsables sont précisé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 ;
afficher : -webkit-flex ;
affichage : flexible ;
flex-direction : colonne ;
align-items : étirement ;
text-align : centre ;
-webkit-flex : 0 1 330px ;
flex : 0 1 330px ;
rembourrage : 2em 3em ;
marge : 1em ;
couleur : # 262b38 ;
curseur : par défaut ;
débordement caché;
}
/ * change l'arrière-plan lorsque vous appuyez sur * /
.pricing_item : survolez (
couleur : # 444 ;
arrière-plan : #daebef ;
}
/ * sous-couche individuelle de l'étiquette de prix dans chaque tarif * /
.pricing_item : premier enfant .price (
arrière-plan : # 9ba9b5 ;
}
.pricing_item : nième enfant (2) .price (
arrière-plan : # 1f6098 ;
}
/ * sur écrans larges, remplissage et mise en évidence de la colonne du milieu du tarif * /
@media screen et (min-width: 66.250em) (
.pricing_item (
marge : 1.5em 0 ;
}
.En vedette (
indice z : 10 ;
marge : 0 ;
taille de la police : 1,15 em ;
}
}
/ * entête * /
.pricing_item h3 (
taille de la police : 2 em ;
marge : 0.5em 0 0 ;
couleur : # 1d211f ;
}
/ * sous-couche d'étiquette * /
.le prix (
taille de la police : 2 em ;
font-weight : gras ;
couleur : #fff ;
position : relative ;
indice z : 100 ;
hauteur de ligne : 95 px ;
largeur : 100 pixels ;
hauteur : 100px ;
marge : 1,15 em auto 1 em ;
rayon de bordure : 50 % ;
fond : # 77a5cc ;
-webkit-transition : 0,3 s de couleur, 0,3 s d'arrière-plan ;
transition : couleur 0,3 s, fond 0,3 s ;
}
/* devise */
.devise (
taille de la police : 0,5 em ;
alignement vertical : super ;
}
/ * clarification des clauses * /
.phrase (
font-weight : 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 ;
text-align : gauche ;
}
/ * éléments de la liste * /
.pricing_item li (
remplissage : 0,15em 0 ;
}
/ * bouton de commande de taux * /
bouton .pricing_item (
font-weight : gras ;
marge supérieure : automatique ;
rembourrage : 1em 2em ;
couleur : #fff ;
rayon de bordure : 5px ;
arrière-plan : # 428bca ;
-webkit-transition : couleur de fond 0.3s ;
transition : couleur d'arrière-plan 0,3 s ;
}
/ * changement de couleur lorsque le bouton est enfoncé * /
Bouton .pricing_item : survolez,
Bouton .pricing_item : focus (
couleur d'arrière-plan : # 285e8e ;
}
/ * fond tarifaire * /
.bg-2 (
arrière-plan : #dddddd ;
}
Résultat
Avis des clients. Donnons-leur un look soigné, désignons l'emplacement.
/ * ========= Styles de témoignages ======== * /
témoignages (
remplissage : 4em 0 ;
text-align : centre ;
}
.témoignages .avatar img (
rayon de bordure : 50 % ;
flotteur : gauche ;
affichage : en ligne ;
marge-droite : 1em ;
largeur : 65px ;
hauteur : 65px ;
marge inférieure : 30 px ;
}
.témoignages .avatar p (
text-align : gauche ;
rembourrage-dessus : 1em ;
couleur : # 5d5d5d ;
poids de police : 900 ;
}
Le dernier appel à l'action et le pied de page sont laissés à décorer.
/ * Action * /
.action (
arrière-plan : # 476177 ;
hauteur minimale : 180 px ;
largeur : 100 % ;
remplissage : 4em 0 ;
text-align : centre ;
}
.action h2 (
couleur : #fff ;
font-weight : 300 ;
}
.action p (
couleur : #fff ;
text-shadow : 0 1px 2px rgba (0, 0, 0, .2) ;
taille de la police : 1,2 em ;
}
.action .conteneur (
marge supérieure : 3em ;
}
/ * Bas de page * /
bas de page (
arrière-plan : # 333333 ;
remplissage : 1em 0 ;
alignement du texte : à droite ;
}
pied de page p (
couleur : #fff ;
hauteur de ligne : 1 ;
transformation de texte : majuscule ;
taille de la police : 0.7em ;
marge supérieure : 0,5 em ;
}
Le bouton de pied de page a été affecté à la classe d'amorçage intégrée btn-default.
Relancer le 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 que les transitions fonctionnent, nous remplacerons certaines des classes de section par id - pour les avantages et les tarifs. Et nous allons attribuer des liens vers id aux boutons. Écran - ce qui est attaché à ce qui est mis en évidence avec un marqueur jaune.
Définir le rembourrage des boutons - jbutton. Le défilement lorsque vous appuyez dessus fonctionne, mais très brusquement.
Les transitions en douceur sont créées à l'aide de javascript ou jquery. Ce dernier est connecté par défaut aux modèles Bootstrap.
Le défilement est maintenant 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 open source prêt à l'emploi, il peut être utilisé sur n'importe quel site. Placez le fichier du github dans le dossier css et écrivez 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, lors du chargement ou de l'actualisation de la page, le texte sera animé. Prêt.
Plus un visiteur se voit proposer de champs de formulaire, moins il est susceptible de les remplir. Ne demandez que le minimum d'informations dont vous avez besoin.
Recueilli par analogie. Nous allons changer les arrière-plans et les couleurs. Et, bien sûr, ajoutons la forme.
Commençons avec parallaxe .
Changez l'arrière-plan du jumbotron en transparent :
fond : transparent ;
À l'intérieur de la tête, nous insérerons le script :
La première ligne du corps est le conteneur de la parallaxe :
Et en CSS, son comportement est :
Bgparallaxe (
arrière-plan : url (/../img/fon.jpg) répéter ;
position : fixe ;
largeur : 100 % ;
hauteur : 300 % ;
haut : 0 ;
à gauche : 0 ;
indice z : -1 ;
}
La parallaxe est prête. Mais apporter des modifications au code et au nouvel arrière-plan nécessite de réaffecter le schéma de couleurs.
Rendre le menu sombre :
Navbar-default (
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: survol, .navbar-default .navbar-nav> .active> a: focus (
couleur : gris foncé ;
couleur de fond : rgba (0, 0, 0, 0,5);
}
Nous remplaçons la phrase dans jumbotron par une nouvelle - avec le code de forme :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Et nous prescrivons l'apparence
/ * former * /
.headform-list (
list-style-type : aucun ;
hauteur de ligne : 26 px ;
poids de police : 400 ;
remplissage : 0px ;
marge inférieure : 40 px ;
}
.headform (
débordement caché;
position : relative ;
couleur d'arrière-plan : rgba (0,0,0, .4) ;
rembourrage : 35px 40px ;
rayon de bordure : 8px ;
}
entrée, bouton, sélection, zone de texte (
largeur : 100 % ;
marge inférieure : 10 px ;
}
.headform-list li .fa (
position : absolue ;
haut : 0px ;
à gauche : 0px ;
largeur : 42px ;
taille de la police : 24 px ;
text-align : centre ;
}
.headform-list li (
position : relative ;
hauteur minimale : 38 px ;
remplissage-gauche : 62px ;
marge inférieure : 20 px ;
}
.jumbotron p (
couleur : #fff ;
taille de la police : 16px ;
style de police : italique ;
}
Le texte du Jambotron est également arrivé ici, car il exigeait des changements.
Nous recolorons 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 : 4px ; / * ligne modifiée * /
position : relative ;
afficher : -webkit-flex ;
affichage : flexible ;
-webkit-flex-direction : colonne ;
flex-direction : colonne ;
-webkit-align-items : étirer ;
align-items : étirement ;
text-align : centre ;
-webkit-flex : 0 1 330px ;
flex : 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 vous appuyez sur * /
.pricing_item : survolez (
couleur : # 444 ;
arrière-plan : #ddd ; / * ligne modifiée * /
}
Maintenant, ils ressemblent à ceci - fond transparent et coins arrondis.
Le modèle est prêt.
Modifiez à nouveau le remplissage du jambotron et recolorez le modèle pour qu'il corresponde au nouveau fond par analogie avec le modèle précédent. Nous connectons le script compteur :
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Dans le fichier de style, supprimez le rayon inférieur de la forme, affinez le bouton.
De plus, le menu a été repeint pour un nouveau fond et le style des textes du jambotron a été modifié - par analogie avec l'exemple précédent. Résultat.
Partie inférieure
Ceci termine les exemples de page de destination, mais le code nécessite un travail supplémentaire.
La page de destination doit être rapide et efficace comme une Ferrari - les temps de chargement des pages ont un impact énorme sur les taux de rebond. Optimisez les images, réduisez la taille des scripts et des styles finis pour une efficacité maximale.
La leçon fournit des exemples de création de bonnes pages de destination qui vous aideront à vous apporter de vrais clients, et vous apprendrez quelque chose de nouveau. On aime et on republie. À bientôt.
Pour télécharger toutes les sources présentées dans la leçon sous forme de pages toutes faites, cliquez sur l'un des boutons château social pour l'ouvrir et obtenir un lien.
Respectueusement vôtre, Galiulin Ruslan.
Articles Liés: | |
Les meilleures pages de destination pour le sport
La page de destination Fitness est une excellente solution si vous avez besoin d'attirer de nouveaux ... Où télécharger les icônes des dossiers et comment les installer
De nombreux utilisateurs accordent une attention particulière à la personnalisation de leur ... Règles VKontakte Règles d'utilisation du réseau social VKontakte
Toute ressource ou forum sur Internet a ses propres règles. Ils sont nécessaires... |