Beaux modèles de pages de destination. Modèles de pages de destination

Bonjour. Les sites d’une page sont toujours populaires, et pour cause. Ils présentent de nombreux avantages par rapport aux sites multipages à part entière. Sur un site Web d'une page (également appelé page de destination), une personne se concentre sur une idée, un produit, ce qui lui permet d'étudier votre offre sans distraction et est plus disposée à laisser une demande.

"D'accord", dites-vous, "j'ai décidé de créer moi-même une page de destination, mais je ne comprends rien à la programmation." Et ce n'est pas un problème. Il existe désormais de nombreux outils permettant de créer un site Web professionnel sans fouiller dans le code. L'un d'eux est le populaire CMS WordPress avec le constructeur WPBackery ou ELementor.

Dans cet article, j'ai fourni des modèles de pages de destination WordPress sympas qui conviennent aux entreprises, à la vente de biens, aux agences, aux indépendants et à tout autre sujet. Après tout, ces modèles peuvent et doivent être personnalisés en fonction de vous et de votre offre.

De nombreux modèles utilisent des fonctionnalités à la mode, telles que des effets de parallaxe, un design plat, des photos et des vidéos en plein écran. L'adaptation pour les appareils mobiles est incluse dans chaque modèle.

Assez discuté, regardons la sélection !

P.s. Si vous souhaitez savoir plus en détail ce qu'est une page de destination, j'ai discuté de cette question en détail et donné 27 exemples de pages de destination.

Tous les modèles sont présentés à partir de la boutique en ligne populaire ThemeForest. Vous pouvez voir d'autres collections.

Une sélection de 40 modèles premium pour créer une landing page sur le CMS WordPress1. Pont

Pour moi, c'est un des meilleurs modèles car il contient plus de 376 démos sur différents sujets. Avec ce modèle, vous pouvez transmettre des émotions complètement différentes. Puissant et intuitif.

Ce thème incroyable comporte un curseur personnalisable, des en-têtes entièrement personnalisables, des méga menus, des arrière-plans vidéo, un en-tête fixe ou collant, différents logos d'en-tête, des éléments interactifs, 7 présentations de portefeuille différentes et bien plus encore, permettant des possibilités infinies.

Faites une présentation unique de votre produit ou de votre offre. Il y a des instructions visuelles dans le texte ainsi que des instructions vidéo.

2. Le7

Un système de modèles avancé et unique qui vous permet non seulement de créer une page de destination, mais aussi sans paramètres additionnels intégrez-le dans le site Web principal du projet. Dans le modèle, vous pouvez trouver de nombreux styles prêts à l'emploi pour les blocs demandés sur les pages de destination - présentation d'équipe, galerie, portfolio. De superbes effets de préchargement de page sont également disponibles.

D'ailleurs, The7 est désormais sur mon blog.

3.BeTheme

Betheme est le plus grand modèle en termes de fonctionnalités et de nombre d'options de mise en page prédéfinies. Aujourd'hui, il existe plus de 400 pages de destination de démonstration basées sur ce thème, vous pouvez en choisir une et l'adapter à vos besoins. Les pages de destination prêtes à l'emploi sur Betheme utilisent activement :

• effets de défilement - de la parallaxe aux transformations animées d'éléments de conception
• vidéos d'arrière-plan plein écran
• boutons "sociaux"
• compteurs animés
• formulaires de candidature en ligne
• sections du portefeuille
• rubrique "Nos collaborateurs"

Quelques démos supplémentaires :

Les mises à jour des thèmes sont effectuées automatiquement, les mises à jour des plugins sont effectuées sur simple pression d'un bouton. Les sites de démonstration utilisent Revolution Slider. Le modèle propose 5 options de mise en page, 20 en-têtes personnalisés, un nombre illimité de styles pour Google Maps et 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 du modèle principal.

Ronneby présente 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 de modèles accordent une attention particulière au support utilisateur - toute question reçoit une réponse rapide décrivant comment résoudre le problème. Le thème est déjà localisé pour deux langues, mais des fichiers de traduction y sont également attachés, vous permettant d'organiser le support multilingue des sites.

Un autre exemple de démo :

5. Jupiter

Modèle flexible et en même temps facile à personnaliser. Comprend 72 soi-disant skins, sur tous les sujets possibles. Administrateur pratique. panneau, même un débutant trouvera facile de comprendre 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 incroyable !)

Le modèle Jupiter est également adapté pour le référencement. Les tests Google PageSpeed ​​​​montrent de bons résultats, ce qui signifie que les moteurs de recherche adoreront votre site.

Le modèle est propre, soigné et utilise une typographie de haute qualité. Grâce à l'utilisation d'effets visuels, comme la parallaxe, le thème s'avère vivant et très agréable à regarder sur un tel site.

6.WoodMart

L'une des plus grandes collections WordPress. Les modèles sont rédigés par des programmeurs Web professionnels et les conceptions sont dessinées par des spécialistes qualifiés en solutions visuelles et UX. Grâce à cela, vous pouvez installer n'importe quel modèle en toute sécurité, chacun est prêt à être utilisé sur votre ordinateur, téléphone mobile, tablette. Plugins premium inclus :

WPBackery

Révolution du curseur

Excellente adaptation avec WooCommerce (boutique en ligne)

7.Brooklyn

Brooklyn propose 16 skins de démonstration sur différents thèmes. Style moderne pages, la combinaison d’images et de polices ajoute de l’élégance à tout site utilisant ce thème. Le bloc portfolio est magnifiquement conçu. Le modèle est parfait pour les agences et les entreprises. Les modèles sont réalisés dans des couleurs sombres, ce qui donne confiance et inspire confiance. Le modèle est réactif et s'affiche parfaitement sur tous les appareils.

Un modèle fluide et simple qui ne laissera personne indifférent. Une typographie et des éléments d'interface de haute qualité rendent ce modèle magnifique. Nominé et gagnant de divers concours et classements bien connus, tels que awwwards. A plus de 30+ skins de thèmes différents parmi lesquels choisir

Non seulement le site Web, mais aussi les images sont adaptées aux appareils mobiles afin de paraître plus pratiques pour les visiteurs.

9. Code H

Le modèle est nouveau, mais a déjà fait ses preuves. Il comporte 8 thèmes (multi-pages, landing, corporate, portfolio, blog, e-commerce, stubs) avec 3 à 12 skins chacun. En plus de sa beauté et de sa netteté, ce modèle dispose simplement d'un arsenal de différents widgets et éléments. Vous pouvez rendre votre page de destination belle et fonctionnelle. Besoin d'un curseur ? S'il te plaît. Afficher le portfolio, les avis, les avantages ? Et c'est.

10. Autochtone

Native est un outil puissant pour promouvoir une startup. Les modèles de pages de destination WordPress basés sur le thème 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 du CMS à comprendre rapidement les fonctionnalités du panneau d'administration. Les plugins Visual Composer, Layer Slider et Slider Revolution sont inclus application gratuite au modèle.

11. Saillant

Salient est un thème polyvalent avec un design réactif qui est souvent choisi par . La typographie premium et les effets de parallaxe qui apparaissent lorsque vous faites défiler la page contribuent à améliorer l'impression de la page de destination. L'optimisation de la fréquence d'images garantit des transitions animées fluides entre les blocs de contenu. Le modèle utilise des tailles d'image adaptatives, ce qui permet aux pages de se charger rapidement et d'économiser du trafic.

12. Le joyau

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 « responsive ». La légèreté des pages, la rapidité de leur chargement et une UX réfléchie garantissent des performances élevées du modèle. Si vous avez besoin de promouvoir votre entreprise à l'aide d'une page de destination, cela vaut la peine d'acheter ce modèle, ne serait-ce qu'en raison de son code optimisé pour le référencement, qui garantira des positions élevées dans les résultats de Google. Les 11 versions démo disponibles des pages de destination prennent en compte les besoins de divers projets.

Les éléments de conception d'un site Web sur TheGem sont personnalisés à l'aide du plugin Visual Composer. L'affichage d'une grande quantité de contenu dans les blocs d'atterrissage (portfolio, avis, services) est organisé par chargement - automatique ou « par bouton », ainsi que par un curseur de changement d'onglet. Le modèle propose 6 options d'animation pour charger les 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 constitué de vidéos de Vimeo et YouTube ou dérivées de système de fichiers site utilisant html5.

13. Professionnel du marketing

Marketing Pro est un modèle conçu en pensant à la conversion, au marketing et au référencement. Chacun des 9 sites de démonstration qui le composent est créé en tenant compte des caractéristiques d'une niche marketing spécifique. En prime à la conception adaptative de la page de destination, il existe des modèles stylisés pour les blocs d'organisation d'événements.

Oshine fait partie des thèmes créatifs les plus vendus. Avec un beau 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 de l'apparence du site, chacun soigneusement conçu, permettent d'obtenir des résultats idéaux. L'option « annuler/rétablir » et la possibilité d'attribuer des « raccourcis clavier » à certaines actions simplifient le processus de configuration.

15. Jevelin

Jevelin est un modèle avec un design réactif haut de gamme qui facilite la création de pages de destination et de sites d'une page sur Wordpress. Le thème permettra de lancer le projet dans un court laps de temps. Grâce à une variété d'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 republications sur les réseaux sociaux, 6 solutions de style pour concevoir la section portfolio - la personnalisation des skins est plus vite que jamais.

16. Kalium

Kalium est un sujet vers lequel les représentants de divers domaines professionnels se tournent pour obtenir un site Web afin de promouvoir leurs services. Dans la conception de sites Web sur Kalium, un accent particulier est mis sur la typographie - une bibliothèque spécialisée dans 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).

17. Entrant

Inbound est un modèle qui peut faciliter la création de sites Web d'une page pour les applications, livres électroniques, cours vidéo et produits similaires. La personnalisation de la conception se fait à l'aide du générateur visuel de pages de destination Landing Page Builder. Le modèle vous permet également d'attribuer une mini-section au format page de destination à chaque produit promu au sein d'un site et peut être utilisé pour les sections de catégories de produits dans WooCommerce.

18. Intact

Intact est un thème multi-options conçu pour vous aider à résoudre vos problèmes commerciaux en ligne. Il comprend des composants aussi importants d'une page de destination moderne que : des blocs " Plans tarifaires" et "Employés de l'entreprise", un slider avec des avis, des ensembles d'icônes thématiques, des formulaires d'abonnement, un consultant en ligne.

19. Comète

Comet est un modèle au pixel près entièrement réactif pour Visual Composer et . Les utilisateurs se voient proposer 5 skins pour les pages de destination, qui implémentent les effets suivants : curseur de texte, parallaxe, vidéo d'arrière-plan - importée de YouTube ou intégrée à HTML5, curseur de zoom animé. Les nouveaux utilisateurs comprendront facilement les paramètres du thème lorsque création wordpress pages de destination - des instructions et des leçons vidéo sont disponibles en ligne.

20. Moteur principal

Un thème WordPress universel qui possède tout ce dont vous avez besoin pour créer une landing page :

• 200 blocs à « assembler » dans un modèle dans n'importe quel ordre ;
• adaptabilité à tout moment ;
• 35 pages entièrement conçues - vous pouvez simplement modifier le texte et les photos ;
• vitesse de téléchargement élevée - 94 % plus rapide que la moyenne.

Les conceptions de développement peuvent être évaluées 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. Simple et atterrissage efficace Cette page vous aidera à transmettre vos avantages sociaux, vos conditions de travail et d'autres détails nécessaires aux clients potentiels. Le design est réactif et s'adapte à 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.

22. Incubateur

« Un thème idéal pour une startup », disent les auteurs à propos de leur développement. Le design léger et minimaliste de 2020 convient aux boutiques en ligne, aux agences événementielles et à de nombreux autres types d'entreprises pour les cartes de visite ou le développement ultérieur d'un projet à plus grande échelle. Inclus:

• concepteur visuel - les détails changent en ligne ;
• adaptabilité mobile;
• WooCommerce est le meilleur plugin de boutique en ligne ;
• prise en charge de n’importe quelle langue.

23. PhloxPro

Un modèle multi-modèles avec trente démos dans lesquelles vous ne pouvez substituer que le texte souhaité. Ils proposent également plus de 90 modèles de curseurs et d'effets, et plus de 130 options pour des pages individuelles. Sont inclus 9 plugins principaux qui seront utiles pour promouvoir un site Web de cartes de visite ou une ressource plus importante. Tout cela est à prix réduit, actuellement disponible pour 30 $. L'un des modèles de pages de destination les plus populaires.

24.Porto

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 sélectionner 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. Il est facile de passer d’un site d’une page à une boutique à part entière grâce à la recherche avancée. Le support est toujours prêt à répondre aux questions.

25. Ekko

Multi-modèles d'atterrissage peu coûteux et populaires, qui diffèrent :

des ébauches de conception professionnelle ;

réponse rapide grâce à l'optimisation ;

méthode de réglage glisser déposer baisse;

plus de 200 blocs pour le contenu.

Sites Web 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.

26. Avenue

« Un multi-modèle nouvelle génération » est une affirmation audacieuse, mais c'est exactement ce que disent les auteurs à propos de leur produit. Pour seulement 35 $, vous pouvez obtenir :

• 200 pages de destination avec un beau design « européen » ;
• WooCommerce et formulaires de commande avancés ;
• installation en une minute ;
• paramètres pour le portefeuille, les curseurs.

Le plugin de l'éditeur visuel Elementor a en effet été mis à jour pour dernière version et très simple à utiliser.

27. L'Arche

« Le meilleur parmi 9 500 », notent les développeurs. Le modèle se concentre sur les personnes qui n’ont jamais fait de codage. La personnalisation du design s'effectue à l'aide du plugin Visual Designer Elementor, qui permet de travailler en mode individuel, sans utiliser installations de tiers et utilisez immédiatement la fonctionnalité entièrement fonctionnelle de l'un des 300 modèles. Pratique et rapide à mettre en place.

28.Amédée

Beau design dans une palette de couleurs inhabituelle. L'accent n'est pas seulement mis sur Design élégant, car il est proposé à l'achat en set :

Plugin WooCommerce pour boutique en ligne ;

plugin de formulaires de contact avancés ;

une sélection d'effets de défilement dans différents styles ;

une sélection d'animations.

Modèle WordPress propre et clair pour les cartes de visite et les achats en ligne. En mode magasin, il existe des paramètres pour les caractéristiques du produit et les recherche.

29. Bolgé

Une sélection de jolies pages de destination dans un style plat moderne et élégant. Dessiner manuellement des éléments vous permettra de vous démarquer et d’être retenu par les clients potentiels. Le prix comprend les plugins et widgets de base - d'un éditeur visuel à un effet de parallaxe pour placer un arrière-plan ou un portfolio. Vous pouvez personnaliser différentes vues sur le bureau et version mobile, l'adaptabilité est donnée par défaut.

30. Makoto

Plusieurs solutions pour les designers, photographes, artistes. Des préréglages utiles pour publier un portfolio vous permettront de le protéger contre la copie et de le charger au fur et à mesure que l'utilisateur le visualise, ce qui permet de gagner du temps de chargement. Téléchargement vidéo facile. Il existe une option pour bloguer. Des éléments pour placer des infographies ont été préparés. Le concepteur visuel vous aidera à configurer facilement tous les détails.

32. Aménagement paysager

Les promoteurs ont réalisé une conception « verte » intéressante pour les services d'aménagement paysager, l'assistance au jardinage et les éco-thèmes. Cependant, la pièce peut être utilisée à d’autres fins. De belles icônes, des polices Google épurées, une excellente réactivité et apparence, y compris sur les appareils Retina, impliquent l’utilisation généralisée des thèmes WordPress.

33. Commerce participatif

Fabriqué sous dernière version WordPress. Le modèle est constamment mis à jour. Les fonctionnalités d'une boutique en ligne sont fournies via un plugin 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é Elementor pour créer de nouvelles pages. Prend en charge tous les plugins supplémentaires.

34. Créance

Un thème « musical » créatif restera dans les mémoires des visiteurs pour son design lumineux, et le propriétaire du site s'intéressera à :

• développements de pages de destination et pages internes- des possibilités illimitées de développement des ressources ;
• installation en un clic ;
• Configuration WYSIWYG ;
• la possibilité d'ajouter de la musique, des vidéos, des effets de curseur.

36.Éducation

Education est une version améliorée de l’ancien thème eLearning avec une UX plus avancée et est destinée aux ressources éducatives en ligne : cours en ligne et les sites Web des établissements d'enseignement. Le modèle a un design attrayant et offre les fonctionnalités complètes nécessaires au processus éducatif.

37. Un

L’un est un thème créatif pour créer des pages de destination mettant l’accent sur la promotion des produits. L'interface du modèle est réalisée en HTML5 et bootstrap 3, MailChimp et Contact Form 7 peuvent y être intégrés. Les développeurs de thèmes UX ont étudié de nombreux projets similaires, à la suite desquels les utilisateurs ont reçu. modèles prêts à l'emploi Pages de destination WordPress, qui contiennent tous les outils importants pour les projets d'entreprise.

38. Totale

Total est un modèle adapté à de nombreux projets. Lors de la création de pages, il utilise : la méthode glisser-déposer, des jeux de couleurs illimités, une personnalisation en temps réel, des curseurs premium faciles à utiliser. Parmi les sites de démonstration du thème, il existe des modèles de pages de destination pour 11 projets divers.

39. Stockholm

Stockholm est l’un des 30 modèles WordPress les plus vendus depuis sa création. Lorsque vous travaillez avec le thème, vous pouvez définir une palette de couleurs pour l'ensemble du site ou ses éléments individuels, utiliser l'une des 600 polices Google et 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 pages de destination et les installer immédiatement à partir de la section de création de sites Web.

Une autre option de démonstration :

40. Dynamique massive

Plus de 70+ widgets avec lesquels vos pages de destination seront uniques et modernes. Polices Google, infographies, adaptation au référencement, code propre, création de portefeuilles pratiques - ce ne sont là qu'une partie des avantages de ce modèle. Les paliers, au sens littéral, peuvent être assemblés littéralement comme une mosaïque, simplement par glisser-déposer. Sur la page de description, vous pouvez voir des exemples visuels.

Lorsque vous consultez des sites de démonstration, vous souhaitez tous les utiliser.

» Modèles WordPress de pages de destination gratuits – TOP 30

Modèles WordPress de pages de destination gratuits – TOP 30

Plus précisément, cet article examinera meilleur atterrissage Modèles WordPress, qui peut vous convenir. Ils comprendront tous une capture d'écran et une version de démonstration du design afin que vous puissiez évaluer le thème et le télécharger immédiatement si vous l'aimez.

Très souvent, les modèles de pages de destination pour WordPress sont distribués moyennant des frais, mais pour vous j'ai collecté meilleur et gratuit dans cet article pour faciliter votre recherche.

Vous pourriez également être intéressé par Pour ceux qui recherchent un hébergement 1.

est un thème d'une page qui vous aidera à créer un site Web sans trop d'effort. D’autre part, il a un design dessiné par des professionnels, un défilement parallaxe, ce qui nous permet de qualifier ce thème de « beau ». Ce modèle convient aux startups et aux petites entreprises.

2.

est un thème WordPress multifonctionnel. Il comprend une interface dynamique, un effet de parallaxe classique et d'autres animations qui rendent la visualisation du thème encore plus agréable. Zerif Lite est un thème multi-navigateur qui est également bien écrit en termes de code.

3. Alhéna Lite

Alhena Lite est un thème WordPress d'entreprise gratuit entièrement intégré au plugin WooCommerce pour vous permettre de configurer facilement votre boutique en ligne.

4.

est un thème professionnel propre et simple, entièrement réactif et comprenant de nombreuses fonctionnalités populaires pour faciliter la création de sites Web.

5. Palmas

Palmas est un thème moderne réalisé dans des couleurs claires, adapté à la gestion d'un blog personnel ou de mode. Ce modèle prend également en charge des plugins tels que Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache et bien d'autres.

6. Brasserie

Brasserie est un modèle WordPress simple, parfait pour un restaurant, un café ou un site culinaire. Comprend des effets d'animation, ainsi qu'une grande quantité de fonctionnalités.

7. XT Entreprise légère

XT Corporate Lite est un thème simple et minimaliste qui convient à un petit produit ou service.

8.

est un thème agréable réalisé dans des couleurs claires. Comprend diverses animations, des transitions visuellement époustouflantes et un effet de parallaxe. De plus, Freesia Empire prend en charge des plugins tels que Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress et WooCommerce.

9.

est un sujet qui convient à la présentation des petites ou moyennes entreprises. Il comprend grande quantité fonctions et modules complémentaires pour une gestion complète de la structure d'atterrissage.

10.

est un thème polyvalent avec de nombreuses fonctionnalités. C'est adaptatif, tous les éléments sont animés avec un effet de parallaxe. Une page est facile à personnaliser et vous permet de visualiser les modifications en temps réel. Le thème d’atterrissage actuel prend également en charge un grand nombre de plugins WordPress de base.

11. Photographie

FotoGraphy est une page de destination adaptée aux photographes ou aux designers. La simplicité et la présence d'un grand nombre de fonctions le rendent encore plus évolutif et personnalisable.

12. Thème intégral

Integral Theme est un thème de parallaxe d'une page adapté aux créatifs, aux propriétaires d'entreprise ou aux agents. Cela ne vous prendra que quelques minutes pour le configurer.

13. Carré

Square est un thème minimaliste qui peut être utilisé pour tout type de site Web. Il convient mieux aux petites et moyennes entreprises. Square est configuré pour de nombreux plugins WordPress populaires et est également optimisé pour le référencement.

14.Animer

Enliven est un thème de haute qualité. Je l’appellerais premium, car il allie qualité et beauté dans une seule bouteille. Il prend également en charge de nombreux plugins populaires et est facile à personnaliser.

15. Latté

Latte est un modèle pour les photographes. Il a tout pour que vous puissiez montrer adéquatement votre portefeuille et parler de vous. La configuration s'effectue en quelques clics.

16. Le lundi

Le lundi est un thème élégant adapté à une entreprise ou à un indépendant. Il est livré avec un grand nombre de fonctionnalités, d’extras et de modules complémentaires.

17. Monde des affaires

Business World est un modèle lié aux sujets commerciaux. Il allie style et qualité. Le monde des affaires peut également être personnalisé pour un site Web personnel, d'entreprise ou de photographe. Ses capacités vous permettent d’en faire presque tout ce que vous voulez.

18.

- C'est un thème agréable, réalisé dans des couleurs claires. Il est parfait pour les petites et moyennes entreprises, ainsi que pour un site Web personnel. Vous pouvez y personnaliser tout ce que vous voulez. De nombreuses fonctionnalités et ajouts rendent ce modèle encore meilleur et plus attrayant.

19.Onetone

Onetone est un modèle d'une page pour WordPress qui convient pour présenter le « je » sur Internet (montrer votre portfolio et/ou parler de vous).

20. Lève-toi

Arise est un modèle WordPress minimaliste d'une page adapté à un petit produit ou à une petite entreprise. Il n’y a rien de superflu, seulement tout ce qui est le plus important.

21. Woot

Woot est un modèle minimaliste réalisé dans des couleurs sombres pour gérer une boutique en ligne. Il fonctionne avec WooCommerce et de nombreux autres plugins populaires.

22. Ouest

West est un thème simple adapté à un site Web d’agence, de petite entreprise ou de portefeuille. Il comprend un grand nombre de fonctions, de réglages et de disposition des éléments.

23. Anaglyphe Lite

Anaglyph Lite est un modèle simple et élégant qui convient aux blogs et aux boutiques en ligne. Il est déjà configuré avec WooCommerce et d'autres plugins populaires.

24.

est un joli thème réalisé dans des couleurs sombres combinées avec des éléments colorés, adapté à la présentation de votre entreprise, de votre portefeuille ou de votre produit. Après avoir suivi le lien, cliquez sur « Télécharger maintenant » dans le bloc BeOnePage Lite et vous téléchargerez version gratuite ce sujet.

25.

est un modèle d'une page inclus dans la catégorie : fitness, yoga, pilates, club de santé et bien d'autres. etc. Le style est réalisé dans des couleurs sombres, multi-navigateurs, adaptatif et fonctionne sur tous les appareils.

26. Aglée Lite

Aglee Lite est un modèle d'entreprise simple conçu dans des tons gris clair et bleu. Ce thème est parfait pour une startup ou une petite entreprise.

27.

est un thème commercial puissant et fonctionnel. Il dispose d'un éditeur pratique qui vous permet de visualiser les modifications en temps réel. Wimpie Lite est compatible avec tous les navigateurs, réactif et facile à charger.

28.

est un thème WordPress polyvalent, réalisé dans des couleurs claires et adapté à un site Web professionnel, un portfolio personnel ou un blog.

Des modèles de pages 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 à une newsletter. Pour une page de destination, la commodité et la facilité d’utilisation avec une mise en page appropriée sont extrêmement importantes. Les modèles de pages de destination de vente modernes sont développés en vue de créer un site Web réactif avec des taux de conversion élevés.

Démo | Crossway – Modèle de page de destination de démarrage

Thème HTML5 ultra-moderne basé sur Bootstrap 3.1.1. Livré avec 4 mises en page : simple/multipage, options de barre de navigation. Un léger effet de défilement parallaxe est intégré au thème de la landing page, adapté au trafic mobile et organique (SEO).

Démo | PointCarré

Modèle de page de destination HTML pour le Web et Applications mobiles, visant à générer facilement des leads. Possède chargement rapide et du HTML valide, code CSS. En haut de la page d'une page se trouve un formulaire de contact en double avec .

Démo | Modèle de page de destination réactive Primo

Modèle de destination HTML5 d'une page avec effets CSS3. Il dispose d'un cadre à trois colonnes, créé sur Bootstrap 3. Convient à la vente d'applications iOS/Android. Le modèle comprend 2 mises en page (avec et sans Parallax), Formulaires Ajax contacts, boîte à lumière PrettyPhoto et 5 jeux de couleurs. Facile à configurer : changez les codes hexadécimaux et éléments liés sera peint d’une nouvelle couleur. PSD inclus.

Démo | Hype – Page de destination de l’application

Le modèle d'application mobile moderne et prêt pour Retina offre 8 options de couleurs, options d'image/.

Démo | Page de destination polyvalente de Gotte

Le modèle de page de destination polyvalent de style plat est livré avec 3 options d'index et 6 jeux de couleurs. Modèle créé sur Twitter bootstrap3, inclus Script PHP formulaires de contact et téléchargements.

Démo | Calomnie – Page de destination HTML5 Bootstrap réactive

Slander est une option idéale pour les startups et les entreprises, adaptée aux professionnels ou à un projet individuel. La conception réactive avec Bootstrap et HTML5/CSS3 inclut curseur adaptatif, curseur d'onglets, formulaire d'abonnement aux actualités, etc.

Démo | Appster – Modèle de page de destination de l’application Ultimate Clean

Cloud – Une page de destination d'application facile à utiliser

Modèle de page de destination HTML5/CSS3 élégant, épuré et minimaliste avec une excellente fonctionnalité. Le modèle est conçu pour la page Coming Soon (lancement prochain), idéal pour créer une page de candidature et un site vitrine.

Démo | OnEvent – ​​​​Page de destination des événements spéciaux

Modèle d'atterrissage adaptatif pour les offres spéciales. événements. Comporte des sections pour les vidéos commerciales, le calendrier des événements et la liste des invités.

Le thème de la page de destination est complètement épuisé. Bien que le boom des pages de destination se soit un peu atténué, les pages de destination sont toujours très demandées. Ils sont lancés par tout le monde, même si pour leurs niches commerciales, c'est clairement une démarche perdante. Certaines personnes le font juste pour jouer, d’autres pour gagner de l’argent. Mais les objectifs que vous poursuivez ne sont pas si importants, l'important est que tout le monde ait besoin du développement de pages. Certains commanderont auprès de professionnels, tandis que d’autres, pour une raison ou une autre, commenceront à créer eux-mêmes leur propre Landing Page. C’est précisément à ces derniers que cette collection est dédiée.

Les personnes qui décident de créer elles-mêmes un site Web peuvent commencer le développement à partir de zéro ou utiliser des sites prêts à l'emploi, car ils ne nécessitent pas de connaissances particulières en développement. Assez notions de base HTML et CSS, ceux qu'ils enseignent à l'école. Là encore la question se pose. Dois-je utiliser un service payant ou gratuit ? Bien sûr, le site 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 sélection est composée de fichiers gratuits en HTML pur pour Création d'atterrissage Page. Initialement, la sélection comprenait 40 positions, mais quand je me suis réveillé le matin et que j'ai regardé ces modèles avec un œil neuf, j'ai décidé de supprimer la plupart d'entre eux, car c'était franchement de la poubelle, et il y en a déjà beaucoup déchets sur Internet. Il ne reste que les modèles les plus intéressants sur lesquels vous pouvez au moins construire quelque chose. La sélection comprend des modèles de pages de destination pour une variété de sujets, mais, pour une raison quelconque, les LP pour applications mobiles prédominent. Ils se sont avérés de la plus haute qualité.

Auparavant, nous avons déjà effectué des sélections à partir de modèles de pages de destination gratuits. Ils étaient adaptés à un thème précis. Cette fois, j'ai décidé de faire un sujet de collection qui n'appartient à aucune direction.

Autres collections de modèles de pages de destination HTML gratuits :

D'ailleurs. Si, pour une raison quelconque, vous souhaitez intégrer ces modèles sur le moteur Wordpress, j'ai déjà fait sur ce sujet une sélection de plugins pour créer une page de destination sur Wordpress. Vous pouvez essayer de les utiliser. Cela pourrait faire gagner beaucoup de temps. Bien que, personnellement, je ne vois pas beaucoup d'intérêt à faire cela, puisque du HTML pur suffit pour un simple LP.

Donc. Nous attirons votre attention sur 20 modèles de pages de destination HTML gratuits.

Appi - Modèle avec vidéo d'arrière-planUn autre modèle de page de destination pour une application mobile avec une vidéo d'arrière-plan en plein écran. Contrairement au modèle avec fond vidéo, qui sera donné ci-dessous, celui-ci est de bien meilleure qualité, bien qu'il soit adapté à un thème spécifique.

Modèle HTML BukkuFree pour créer une page de destination pour vendre des livres. Fabriqué dans un style plat dans des tons verts. Il y a une animation divertissante.
Le développeur propose également des sources au format PSD en téléchargement gratuit.

Page de destination pour la vente de café Modèle de page de destination HTML pour la vente de café. La conception et la mise en œuvre de l’aménagement sont très intéressantes. Il y a une animation des éléments lors du défilement de la page. Tout est réalisé dans des couleurs douces. Parfait pour les organisations qui livrent du café. Cependant, ce modèle peut facilement être refait pour l'adapter à votre thème en remplaçant les images.

Landing Zero - Atterrissage avec vidéo d'arrière-plan Modèle HTML gratuit avec une vidéo d'arrière-plan d'un thème universel. Convient pour créer un portfolio pour un pigiste de toute spécialisation, qu'il s'agisse d'un photographe ou d'un designer.
En général, il est difficile de trouver des modèles gratuits avec une vidéo d’arrière-plan. Alors téléchargeons.
La vidéo du premier écran peut être remplacée par la vôtre, et s'il n'y en a pas, vous pouvez la télécharger à partir d'un stock vidéo gratuit. J'ai fourni plus tôt une liste de stocks de vidéos contenant des vidéos légales.

EngageUne autre page réactive universelle sur Bootstrap. La page convient à une présentation simple du produit. La structure rappelle une page de présentation des produits Apple.

Page de destination pour un café ou un restaurant Un modèle de page de destination gratuit familier à l'utilisateur moyen de RuNet avec un formulaire de capture sur le premier écran. Conçu pour créer une page de destination pour un bar, un restaurant, un café ou tout autre thème culinaire. À l'aide du formulaire de candidature, vous pouvez réserver une table pour une durée déterminée.

OleoseTrès haute qualité, adaptatif, gratuit, mais encore une fois pour une application mobile. La page de destination est implémentée sur le framework Bootstrap. Il existe trois options de couleurs : bleu clair, vert clair et violet. Cependant, il n’est pas strictement adapté à son thème, il peut donc être facilement refait pour répondre à vos besoins.

Prendre- une page gratuite encore une autre page gratuite modèle HTML pour une application mobile. Cependant, son design est très intéressant et inhabituel. Je dirais même unique. La plupart des visiteurs du poste de garde ne sont pas des développeurs d’applications mobiles, vous devrez donc tout refaire en fonction de votre thème.

Foodee Modèle HTML5 gratuit d'une page pour créer une page de destination pour un café, un restaurant ou une sorte de restaurant. Modèle avec image d'arrière-plan plein écran et effets de parallaxe.
Il existe des blocs tels que : le menu, les événements à venir, les avis des clients et un ensemble standard de blocs dans lesquels vous pouvez placer des avantages, etc.

BLANC Je considérerais ce modèle comme une sorte de framework HTML pour créer un site Web d'une page. Il n’est adapté à aucun sujet, donc tout est entre vos mains. La vidéo d'arrière-plan en plein écran est prise en charge. De plus, il dispose d’un ensemble standard de blocs, typiques d’un site Web d’une page.

Cyprass Template convient à la création d'une page de destination pour toute entreprise numérique : studio web, équipe de pigistes ou similaire. Il dispose de toutes les ressources nécessaires pour cela : un portfolio avec un filtre par œuvre, divers camemberts, onglets, sliders... De plus, il prend en charge la vidéo de fond dans le premier écran.

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. Un des les points importants est bien pensé page de destination avec des marchandises. 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.

Ainsi, avant de créer page de destination, demande toi:

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

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

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

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

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

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

contenu

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

contenu

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

#selector (propriété : valeur ;)

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

5 premières étapes

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

Cela semble modeste.

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

Structure des répertoires dans le dossier :

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

Étape 1 : Utiliser un en-tête

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

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

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

Vous aurez besoin de 4 sections :

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

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

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

Remplissez de garniture au lieu de points.

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

Avantages
Rapide

Fiable

Sed diam nonummy

Rentable

Elit, sed diam nonummy

Techniquement

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

Fiable

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

Rentable

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

Techniquement

Lorem ipsum dolor sit amet, consectetuer adipiscing

Fiable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Contenu pour plus de clarté :

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

Nous notons les prix. Le contenu change de la même manière que lors de la première étape. description générale avec des « tarifs » de classe 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 avec Grid et Mobile Friendly

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ête à l'emploi est que les conteneurs sont conçus dans un souci d'adaptabilité et sont immédiatement utilisables pour 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======== */
/* Forme générale 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,3 s, arrière-plan 0,3 s ;
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,95 em ;
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 douces sont créées lorsque aide 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" //