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.

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 vous permet non seulement de créer une page de destination, mais également de l'intégrer au site Web principal du projet sans paramètres supplémentaires. 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.

Sélection sur le thème :

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 il est très agréable de regarder 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 un ordinateur, un téléphone portable, une 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. Le style moderne des pages, la combinaison d'images et de polices ajoute de l'élégance à tout site où ce thème est installé. 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 en tant qu'application gratuite avec le 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 extraites du système de fichiers du site à l’aide de 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 d'une page pour des applications, des livres électroniques, des cours vidéo et des 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 curseur avec des avis, des ensembles d'icônes thématiques, des formulaires d'abonnement et 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 lors de la création de pages de destination WordPress – des instructions et des didacticiels 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. Des pages de destination simples et efficaces aideront à transmettre aux clients potentiels vos avantages, vos conditions de travail et d'autres détails nécessaires. 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 2019 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.

Cela pourrait vous intéresser :

25.XTRA

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

ébauches de créateurs professionnels - seulement 55 pièces ;

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

personnalisation par glisser-déposer ;

plus de 200 blocs pour le contenu ;

plus de 1000 options.

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 est vraiment mis à jour vers la dernière version et est 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 est effectuée à l'aide du plugin Visual Designer Elementor, qui vous permet de travailler en mode individuel, sans utiliser d'installations tierces et d'utiliser immédiatement la fonctionnalité pleinement 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 le design élégant, car il est proposé d'acheter dans le kit :

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 dans les versions de bureau et mobile ; l'adaptabilité est activé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 une excellente apparence, y compris sur les appareils Retina, impliquent l'utilisation généralisée des thèmes WordPress.

33. Commerce participatif

Conçu pour la dernière version de 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 pour les pages de destination et les pages internes - possibilité illimitée de développer la ressource ;
• installation en un clic ;
• Configuration WYSIWYG ;
• la possibilité d'ajouter de la musique, des vidéos, des effets de curseur.

» 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 discutera des meilleurs modèles WordPress d’atterrissage qui pourraient 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 un grand nombre de fonctions et de modules complémentaires pour une gestion complète de la structure du palier.

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.

50 nouveaux modèles de sites Web d'une page pour 2017. Les landing pages ou sites one-page sont présentés selon le schéma habituel : modèle - exemple - lien. Tous les modèles d'une page peuvent être téléchargés tout à fait gratuitement. Accueillir!

Tous ces sites d'une page utilisent des outils de développement Web modernes : HTML5 et CSS3, mise en page adaptative, animation, etc. Des modèles de pages de destination magnifiques et élégants conviennent à la création de sites commerciaux sur n'importe quel sujet. Si vous cherchez quelque chose à utiliser pour votre page de destination en 2017, choisissez ce que vous préférez parmi les modèles ci-dessous et qui correspond le mieux à vos objectifs. Vous pouvez télécharger gratuitement des modèles d’une page.

UPD du 13/07/2018 : Je vous rappelle que cette collection de modèles a été collectée à partir de diverses sources. Par conséquent, gardez une trace de la pertinence en utilisant les liens fournis. Blog Web Council n'assume aucune responsabilité en cas de modifications, suppressions ou modifications de la politique tarifaire des auteurs de modèles.

Backyard est un magnifique modèle de site Web d'une page gratuit et à conversion élevée, construit avec Bootstrap 3. Le modèle de site Web d'une page comporte 5 styles d'en-tête différents et 6 variations de couleurs. Ce modèle de page de destination est bien organisé et comporte des commentaires de code détaillés, ce qui le rend très facile à personnaliser et à utiliser dans vos projets.

Backyard est un modèle de site Web polyvalent d'une page qui peut être personnalisé pour répondre à tous vos besoins. Vous pouvez l'utiliser pour des sujets tels que : l'éducation, la santé, les startups, les applications web, les applications mobiles, l'immobilier, les services de voyage, etc.

Weather Apps est un modèle de page de destination gratuit et moderne conçu à l'aide de HTML5, CSS3 et Bootstrap 3x pour les prévisions météorologiques, en particulier pour les applications fonctionnant sur les plates-formes d'appareils mobiles Android, iOS et/ou Windows.

Ce modèle de site Web d'une page a été inspiré par une startup de petite entreprise dont le produit principal est une prévision météo conçue sur mesure pour une application mobile.

Caractéristiques du modèle :

GRAPE est un merveilleux modèle réactif d'une page créé avec Bootstrap v3.2.0, HTML5 et CSS3. Code bien organisé et valide. Il s'agit d'un modèle de page de destination premium.

Caractéristiques du modèle de site Web d'une page GRAPE :

• Conception entièrement réactive ;
• Design moderne et élégant ;
• HTML5 et CSS3 ;
• Bootstrap v3.2.0 ;
• Polices Google utilisées ;
• Carte Google intégrée ;
• Arrière-plan avec effet parallaxe ;
• Formulaire de contact sur Ajax ;
• Service de messagerie intégré Mailchimp ;
• Police géniale pour les icônes ;
• Un défilement fluide est utilisé ;
• 4 options - solide, image, curseur d'image, transparent ;
• Bien documenté;
• Installation facile, etc.

Blue App est un parfait exemple de modèle de site Web d’une page aux couleurs bleues avec un effet de parallaxe. Ce modèle d'une page est parfait pour tout site Web d'entreprise.

Caractéristiques du modèle de site Web Blue App One Page :

• Conception adaptative ;
• HTML5 et CSS3 ;
• Amorçage 3 ;
• Conception épurée ;
• Défilement fluide ;
• Police géniale pour les icônes ;
• Polices Google ;
• Curseur avec critiques ;
• Table de prix.

Souhaitez-vous utiliser la dernière version du framework Bootstrap 4 pour votre site Web d'une page ? Alors ce modèle de page de destination est exactement pour vous ! Modèle de site Web d'une page simple, réactif et élégant

Fonctionnalités du modèle de page de destination :

• Menu de navigation fixe ;
• Boutons sociaux personnalisés de l'ensemble Font Awesome ;
• Appel à l'action avec image d'arrière-plan complète ;
• Photos d'archives de la mort à la photo d'archives ;
• Maquette de modèle en PSD.

Trévise est un modèle d'une page épuré et moderne. Il s'agit d'un modèle de page de destination simple mais très utile. Les sections les plus importantes telles que accueil, à propos, portfolio, équipe, contactez-nous sont déjà ici. L'utilisateur peut modifier le modèle pour l'adapter à n'importe quel thème sans aucun problème.

Caractéristiques du modèle d'une page de Trévise :

• Design épuré et moderne ;
• Cadre d'amorçage ;
• Modèle 100 % réactif ;
• Disposition valide ;
• Prise en charge de plusieurs navigateurs ;
• 100% référencement ;
• Animation CSS3 ;
• Formulaire de contact fonctionnel ;
• Entièrement personnalisable ;
• Contient la police Awesome Icons.

Les modèles de sites Web d’une page propres et professionnels sont difficiles à trouver. Rage est un modèle de site Web polyvalent d'une page créé en 2017. C'est l'un des meilleurs modèles gratuits, élégants et professionnels de 2017. Son aspect élégant lui confère un style haut de gamme. À première vue, vous serez surpris de savoir que ce modèle HTML5 d'une page de haute qualité est entièrement téléchargeable gratuitement.

Rage est développé en utilisant Bootstrap 3, HTML5, CSS3 et jQuery. Ce modèle de site Web d'une page comporte toutes les sections et fonctions nécessaires.

Caractéristiques du modèle d'une page Rage :

• Design créatif;
• Conception adaptative ;
• Animation CSS3 ;
• Amorçage 3.3.5 ;
• Code propre ;
• Typographie solide ;
• Prise en charge de plusieurs navigateurs.

Made One est un modèle gratuit permettant de créer un site Web efficace d'une page. Made One est un modèle qui apporte créativité et professionnalisme à votre site Web. Particulièrement adapté à un site Web de services aux entreprises. Des designers professionnels ont travaillé sur le modèle Made One. Il est construit avec une grille Bootstrap de 1170px. Les icônes Retina Ready de FontAwesome sont incluses dans le package.

La deuxième version du magnifique modèle de site Web d'une page de la série Made. Made Two est un modèle professionnel élégant et solide pour un site Web d'une page en 2017. Les développeurs ont inclus les dernières technologies dans ce modèle :

• Amorcer
• Modernisation
• Police géniale
• jQuery
• Carrousel-hibou

Principales caractéristiques du modèle d'une page Made Two :

• Design de haute qualité, élégant et dynamique ;
• Entièrement réactif ;
• Propulsé par Bootstrap ;
• Mise en page entièrement valide ;
• Coder avec commentaires pour un développeur web ;
• Prise en charge de plusieurs navigateurs ;
• Orienté SEO;
• Typographie de haute qualité ;
• Documentation complète pour le modèle ;
• Abonnez-vous aux actualités ;
• Prise en charge des réseaux sociaux.

The Knight est un excellent modèle de site Web gratuit d'une page basé sur bootstrap. Le modèle peut être utilisé pour les entreprises, les portefeuilles, les entreprises locales, les sites Web personnels, etc. Il s'agit d'un modèle d'une page polyvalent, puissant et polyvalent, avec un design parfait et des fonctionnalités supérieures.

Il s'agit de loin du modèle le plus avancé disponible aujourd'hui, avec de nombreuses options de personnalisation. L'utilisation de Bootstrap apporte un style époustouflant et attrayant, facile à personnaliser de la manière qui convient le mieux à votre prochain projet.

The Knight sera le dernier modèle d'amorçage polyvalent d'une page gratuit que vous voudrez utiliser, car il est bien meilleur que tout ce que vous avez vu auparavant. Il présentera les meilleurs résultats SEO car l’équipe Bootstrapmade a optimisé sa structure de manière optimale.

Solid State est un modèle de site Web d'une page simple et réactif 2017 basé sur HTML5, CSS3, jQuery et Bootstrap 3. Il contient plus de 100 éléments prédéfinis parmi lesquels vous pouvez choisir. Techniquement, vous pouvez créer presque n'importe quel site Web à l'aide de ce modèle réactif d'une page.

Notes est un modèle de site Web d'une page réactif et magnifiquement conçu utilisant HTML5, CSS3, Bootstrap et jQuery développé par Themefisher.

Le modèle Notes d'une page présente une palette de couleurs très attrayante. Il a un design épuré et minimal. Bonne typographie et excellente stratégie de contenu.

Principales caractéristiques du modèle Notes d'une page :

• Design unique et élégant ;
• Code optimisé ;
• Disposition valide ;
• Animation CSS3 anti-aliasée ;
• Optimisé pour le référencement ;
• Entièrement personnalisable ;
• Navigation élégante ;
• Polices Google ;
• Construit en utilisant HTML5, CSS3 et Bootstrap 3 ;
• Concentrez-vous sur la convivialité et l'UX ;
• Mise en page réactive ;
• FontAwesomeIcon;
• Interface élégante ;
• Codage bien commenté ;
• Facile à utiliser.

Boxer est un autre excellent modèle de TemplateMO qui serait parfait pour un site Web lié aux logiciels. Ce modèle gratuit est conçu avec HTML5, CSS3 et Bootstrap 3 et joliment décoré d'animations et d'effets jQuery et CSS3.

Principales caractéristiques du modèle de site Web d'une page Boxer :

• Design unique;
• Image d’arrière-plan en plein écran ;
• Compatible avec tous les navigateurs ;
• Animations CSS3 fluides et superbes effets jQuery ;
• 100 % entièrement personnalisable ;
• Polices Google ;
• Construit avec HTML5 et CSS3 ;
• Disposition adaptative ;
• Cadre CSS - Bootstrap 3 ;
• Interface élégante ;
• Facile à utiliser.

Oleose est un modèle de site Web d'une page incroyablement attrayant et entièrement réactif, construit sur Bootstrap 3. Idéal pour toute page de destination liée à une application. Le modèle est livré avec un code convivial pour les développeurs et facilement personnalisable. Il fonctionne sur tous les principaux navigateurs Web, tablettes et téléphones « IE8+ ».

Caractéristiques du modèle d'une page Oleose :

• Animation des rubriques ;
• Captation de l'attention ;
• Derniers plugins JQuery ;
• Trois couleurs prédéfinies ;
• Trois logos gratuits au format PSD ;
• Mises en page mobiles ;
• Construit avec MOINS ;
• Documentation complète ;
• Assistance SEO ;
• Disposition valide.

SevenApp est un magnifique modèle d'une page gratuit pour un site Web d'application mobile. Le modèle est livré avec un code de haute qualité et un support SEO. SevenApp est également bien documenté. Vous trouverez tout ce dont vous avez besoin dans le dossier de documentation après le téléchargement.

Fonctionnalités du modèle SevenApp :

• Construit sur Bootstrap 3 (dernière version stable) ;
• Animation des rubriques ;
• Derniers plugins JQuery ;
• Curseur de carrousel sympa ;
• Capte l'œil;
• Prise en charge du SAS ;
• Bien documenté;
• Assistance SEO ;
• Mise en page HTML5 valide.

Engage est un autre magnifique modèle de site Web premium réactif d'une page basé sur le framework ultra-moderne Bootstrap 4 et HTML5.

Le modèle Engage d'une page est bien organisé, très facile à personnaliser et parfait pour une entreprise, un portefeuille, une agence en ligne ou tout autre site Web. Engage est livré avec plus de 40 pages prêtes à l'emploi et des tonnes de codes courts pour créer n'importe quel site Web en quelques minutes. Il est évolutif, professionnel, facile à utiliser, le meilleur et le tout premier modèle basé sur Bootstrap 4 avec toutes les dernières fonctionnalités.

Voici les principales caractéristiques du modèle de site Web d’une page Engage :

• Design frais et épuré ;
• Mise en page entièrement réactive ;
• Bootstrap 4 intégré ;
• Plus de 40 pages professionnelles prêtes à l'emploi ;
• Modèle polyvalent ;
• Facile à utiliser et à configurer ;
• HTML5 et CSS3 ;
• Couleurs illimitées ;
• Des tonnes de codes courts ;
• Formulaire de contact Ajax ;
• Optimisé pour le référencement ;
• Prend en charge tous les navigateurs ;
• Code bien commenté ;
• Assistance 24h/24 et 7j/7 ;
• Documentation riche ;
• Plusieurs packs d'icônes ;
• Animations CSS3.

UI Hero est un modèle commercial d'une page réactif, propre et gratuit, construit sur le framework Twitter Bootstrap 3.2.x. Tous les outils nécessaires pour créer une page de destination réussie sont intégrés. Le modèle UI Hero est livré avec des animations CSS3 attrayantes et est facilement personnalisable pour répondre aux besoins du propriétaire du site Web.

Corporal est un modèle de site Web d'une page réactif, propre, élégant et gratuit. parfait pour les affaires. Construit avec Twitter Bootstrap 3.2.x, FontAwesome 4.x avec tous les composants fonctionnels tels que : formulaire de contact basé sur Ajax, galerie de portfolio et plus encore.

Corporal est un très bon choix pour les entreprises, les portfolios et les sites Web personnels.

Le modèle de site Web d'une page Notebook Flat est une création unique de l'équipe W3layouts. Vous pouvez utiliser ce modèle pour tout type de sites de recherche d'applications mobiles, de sites Web de lancement de produits, etc.

Ce modèle d'une page au design plat est construit dans un style fantaisie mais peut être utilisé selon les besoins de l'utilisateur.

Talon est un modèle commercial d'une page riche en fonctionnalités, construit à l'aide des dernières technologies. Il convient aussi bien aux indépendants qu'aux entreprises et offre un niveau optimal d'options de personnalisation.
Talon propose une mise en page d'une page qui ressemble davantage à ce que vous payez habituellement. Le titre commence par une liste de fonctionnalités car il propose à la fois des formats d'image de curseur et d'image statique. Le personnalisateur Live se marie bien avec le plugin Page Builder pour une interface glisser-déposer, et les mises en page du blog ajoutent de la variété pour ceux qui souhaitent créer un blog époustouflant.

Outre le pied de page widgetisé, vous avez accès à plusieurs polices Google. Vous pouvez gérer toutes vos polices et couleurs dans le panneau d'administration et vous serez impressionné par le grand nombre d'icônes.

Le thème Talon fournit des fichiers de traduction pour atteindre des personnes du monde entier. Sans oublier que vous pouvez mettre en évidence vos dernières actualités et articles de blog avec des images miniatures sur votre page d'accueil.

En tant que modèle de site Web d'une page, cette solution comprend plusieurs lignes que vous pouvez personnaliser. Par exemple, l’un est idéal pour afficher les logos de vos clients, tandis que l’autre convient pour constituer un portefeuille filtrable. Un curseur de caractéristiques est inclus et le module Meet the Team présente des images de vos employés, leurs noms et des boutons de réseaux sociaux.

Zerif Lite est un thème WordPress polyvalent et convivial d'une page avec une image plein écran en arrière-plan et une simple barre de menu blanche en haut. Il présente un design élégant et moderne qui s’intégrera parfaitement à n’importe quelle entreprise.

Le modèle d'une page Zerif Lite possède une interface interactive et colorée qui combine effet de parallaxe et animation animée. Vous pouvez également l'utiliser pour votre boutique en ligne.

Zerif Lite offre une conception réactive, un code propre et testé, un défilement de parallaxe fluide, une intégration WooCommerce, une mise en page de blog, un panneau de paramètres d'options de thème, des flux personnalisés, un effet de chargement fluide, une traduction complète, un formulaire de contact convivial, des blocs de contenu personnalisés et bien d'autres options de personnalisation. .

Owner est un thème WordPress gratuit puissant, facile à utiliser, personnalisable et bien conçu, un thème professionnel polyvalent. Le thème affiche votre site Web sous son meilleur jour sur les smartphones, tablettes et ordinateurs portables, ainsi que sur les grands écrans de bureau. Le thème comprend de nombreuses fonctionnalités les plus nécessaires pour un thème polyvalent.

Naturelle est un modèle de site Web WordPress d'une page incroyablement beau et gratuit. Le modèle est idéal pour les sites Web sur la nature ! Si vous êtes amoureux de la nature et souhaitez publier tout ce qui touche à la nature, Naturelle est le thème qu'il vous faut.

Le modèle Naturelle One Page est adapté aux appareils mobiles et dispose de fonctionnalités de défilement parallaxe, de mise en page sur une page, ainsi que d'un panneau d'administration puissant mais facile à utiliser et d'options de personnalisation infinies. Il ne nécessite pas de compétences en codage, mais offre également de nombreuses fonctionnalités aux développeurs expérimentés.

Photo Magic est un modèle de site Web WordPress d'une page puissant et prêt pour la rétine, spécialement destiné, sans s'y limiter, aux photographes, illustrateurs et professionnels de la création.

Le personnalisateur de modèles de Photo Magic est très convivial, il n'y a donc rien à craindre. Ce thème se concentre sur les grandes photos et propose de nombreuses options de galerie, de curseur et de portfolio, et constitue la meilleure solution pour ceux qui ont un reportage photo.

Outre le curseur de publication, d'autres options sont disponibles dans le modèle Photo Magic One Page, telles que différentes mises en page de blog, l'API de personnalisation, la traduction dans d'autres langues (compatible avec le plugin populaire) et bien d'autres. Sa mise en page flottante et visuellement réactive convient parfaitement à tous les appareils et tailles d'écran.

Le thème WordPress Adney est un thème WordPress gratuit propre, moderne, plat, minimal et entièrement réactif avec un style léger et minimal, idéal pour les agences Web, les entreprises, les portefeuilles personnels et professionnels.

Ce modèle de site Web WordPress d'une page est idéal pour promouvoir vos services, votre entreprise ou gérer un blog d'entreprise. Il s'agit d'un thème entièrement réactif qui convient parfaitement à n'importe quel appareil.

EightPhoto est un modèle de site Web WordPress d'une page magnifique, propre et élégant, gratuit et réactif. Le modèle est spécialement conçu pour les photographes et les artistes afin de les aider à mettre en valeur leurs incroyables compétences.

Le modèle de site Web d'une page EightPhoto comporte un curseur magnifiquement conçu, des sections : à propos de nous, services, « appel à l'action », galerie, section blog et section « Contact rapide ». Ce modèle sympa est entièrement construit sur un personnalisateur qui vous donne la possibilité de personnaliser votre site avec un aperçu en temps réel.

Mercantile est un modèle de site Web WordPress d'une page réactif, puissant et riche en fonctionnalités. Il est conçu pour vous fournir toutes les fonctionnalités importantes dont vous avez besoin pour promouvoir et gérer votre entreprise, votre entreprise, votre personnel ou tout autre site Web dans le monde Internet.

Les principales fonctionnalités du modèle Mercantile d'une page sont l'intégration avec Page Builder de SiteOrigin, la compatibilité WooCommerce, les widgets personnalisés avancés, WordPress Live Customizer et la mise en page sur une ou plusieurs pages.

Le modèle de site Web Mercantile est doté d'options de personnalisation illimitées, de fonctionnalités puissantes, d'un design élégant et d'un support incroyable.

Juno est un modèle de site Web professionnel et polyvalent d'une page avec des tonnes de fonctionnalités personnalisables, des widgets et un design épuré, épuré et moderne. En mettant l'accent sur un design simple mais élégant, Juno garantit un site Web de qualité.

Le modèle Juno One Page vous permet de personnaliser facilement les couleurs, les polices, les tailles et les produits, messages ou pages fonctionnels. Juno est idéal pour une utilisation dans les entreprises, les agences de création, les particuliers, les équipes et les start-ups.

Azera Shop Luxury est un modèle de site Web WordPress WooCommerce élégant et gratuit d'une page. Le modèle d'une page parfait pour créer une boutique en ligne.

Le modèle de site Web de luxe Azera Shop est compatible avec le commerce électronique (Woo Commerce), WPML, RTL, grille de photos, formulaire de contact 7, méta-curseur, constructeur de pages SiteOrigin, convivial pour le référencement, effet de parallaxe et image plein écran.

Le modèle d'une page Azera Shop Luxury est l'un des meilleurs thèmes de commerce électronique et une bonne alternative pour une vitrine. Conception plate et simple basée sur un modèle bootstrap, parfaite pour toute entreprise/startup, blog, bijouterie ou site Web de photographie.

Parallax One est un modèle de site Web d'une page simple et élégant qui peut être utilisé à n'importe quelle fin. Il a une apparence propre et belle et un effet de parallaxe étonnant dans l’en-tête.

La conception professionnelle et riche en fonctionnalités du modèle d'une page Parallax One convient à toute entreprise. Le modèle a un effet de parallaxe sympa, comme son nom l'indique. Dans l’ensemble, Parallax One a une apparence moderne et simple. De plus, il peut fonctionner comme un thème multipage ou monopage.

Le modèle de site Web Parallax One d'une page est réactif, prêt pour les widgets, intégration WooCommerce, logos personnalisés, menus et icônes, plusieurs jeux de couleurs, de nombreuses icônes sociales, carte Google, parallaxe, défilement fluide, formulaire de contact simple, tableaux de prix. Localisation complète et apparence simple et élégante.

ShopIsle est un modèle d'une page étonnant et moderne, spécialement conçu pour les boutiques en ligne et doté d'un design magnifique et élégant.

Le modèle de site Web d'une page ShopIsle comporte un curseur plein écran sur la page d'accueil et permet un défilement fluide et doux, rendant votre navigation plus agréable. Votre magasin aura une apparence propre et belle, affichant vos produits de manière élégante.

Le modèle ShopIsle propose des animations agréables et subtiles qui rehaussent son élégance. ShopIsle a un design réactif, des liens sociaux et une traduction prête. Il fournit également un formulaire de contact simple qui vous aide à rester en contact avec votre public, ainsi qu'une section À propos de nous où vous pouvez dire à vos visiteurs qui vous êtes et quels sont vos principaux projets. Les produits du magasin peuvent être facilement consultés par les utilisateurs.

Hestia est un modèle de site Web complet d'une page dans un style de conception matérielle. Idelano convient aux petites entreprises et aux start-ups. Le modèle est livré avec une interface belle et moderne construite sur une mise en page d'une seule page. Le thème est idéal à la fois pour les entreprises et pour la création car il offre un look épuré et flexible, un portfolio élégant et une boutique en ligne mémorable.

Le modèle Hestia One Page a un design entièrement réactif, toujours adapté aux appareils mobiles et fonctionnant parfaitement sur tous les appareils. Si vous souhaitez créer rapidement un contenu étonnant, vous avez besoin du générateur de contenu par glisser-déposer le plus avancé. Il se trouve qu’Hestia est entièrement compatible avec SiteOrigin Page Builder – la meilleure solution gratuite pour créer des sites Web.

Flash est un modèle de site Web WordPress d'une page flexible, gratuit et polyvalent, esthétiquement beau dans sa conception, facile à utiliser et puissant dans ses fonctionnalités. L'intégration avec le constructeur de pages SiteOrigin et le plugin Flash Toolkit rend le modèle de site vraiment incroyable.

Le modèle de site Web Flash est un modèle WP entièrement réactif et moderne, idéal pour être affiché sur n'importe quel appareil. Le modèle offre de nombreuses options de personnalisation afin que vous puissiez avoir un contrôle total sur la conception de votre site et créer des sites Web pour n'importe quelle niche.

Flash One Page Website Template est un excellent thème WordPress polyvalent gratuit adapté aux entreprises, aux blogs, aux portfolios, aux pages de destination, aux sites Web professionnels d'une page, aux agences de création, à la construction, à l'alimentation et aux restaurants ou à tout autre site Web.

IonMag est un magnifique modèle WordPress d'une page réactif et prêt pour la rétine, spécialement conçu pour les sites d'actualités, les magazines, les journaux, les publications, les blogs personnels et professionnels, les sites Web de style éditorial et de critiques. Le modèle est livré avec le puissant générateur de pages par glisser-déposer de TD Composer, qui vous permet de créer presque toutes les pages de votre choix, de personnaliser les catégories, les en-têtes et les menus directement sur votre site.

Le modèle gratuit d'une page d'ionMag comprend 21 blocs personnalisés et cinq blocs de construction conçus pour vous donner toute la liberté dont vous avez besoin pour faire preuve de créativité. Avec des fonctionnalités uniques telles que Big Grids et News Ticker, des catégories et des couleurs illimitées, un système de petites annonces intelligent, votre site d'actualités sera opérationnel en un rien de temps !

Le modèle IonMag vous offrira un design moderne, vous n'aurez donc pas à créer votre site à partir de zéro. IonMag est compatible avec les plugins WordPress les plus populaires et utilise les meilleures pratiques de référencement.

GivingPress Lite est le modèle de site Web d'une page gratuit et réactif idéal pour WordPress, spécialement créé pour les propriétaires d'entreprises conscientes et à but non lucratif. Le thème est idéal pour les œuvres caritatives, les églises, les bourses d'études, la recherche scientifique et les sites humanitaires.

Le modèle de site Web d'une page GivingPress Lite comprend plusieurs modèles de pages pour afficher le contenu dans diverses mises en page. Le code est bien documenté avec des commentaires pour tous les fichiers. Le modèle de site Web est livré avec une mise en page réactive qui semble superbe sur n'importe quel appareil et en toutes circonstances.

Gaga Corp est un thème enfant Gaga Lite avec de nouvelles fonctionnalités externes et des fonctionnalités supplémentaires.

Le modèle Gaga Corp One Page présente une conception de section de service élégante avec des looks modernes et tendance, une section Bulletin, une barre de progression affichant vos statistiques, un tableau de prix conçu différemment, de superbes animations et bien plus encore.

Clarina est un magnifique modèle de site Web WordPress d'une page gratuit avec un design plat et épuré basé sur le bootstrap et un effet de parallaxe élégant. Il offre un look simple, minimal et moderne qui peut être utilisé pour tout type d’entreprise personnelle ou de lancement d’application mobile.

En gardant à l’esprit la simplicité, Clarina Website Template Customizer est idéalement conçu de telle manière qu’il soit facile pour tout utilisateur d’utiliser et de modifier le contenu du site Web. Vous pouvez l'utiliser pour votre entreprise/startup, agence, site Web d'entreprise ou portfolio de photographies.

Saferen est un thème au design ultra plat et réactif, riche en fonctionnalités pour un modèle de site Web d'une page. Vous serez surpris par la personnalisation en temps réel et les nombreuses options intelligentes qui vous aideront à créer facilement votre site Web.

Le modèle d'une page Safren est construit à l'aide des technologies Web modernes : HTML5, CSS3 et jQuery. Il est entièrement réactif et est donc superbe sur tous les types d'écran : ordinateur de bureau, ordinateur portable, tablette et smartphone.

Bloger est un modèle de blog d'une page simple, propre et minimal, adapté aux blogs personnels et professionnels, aux sites Web, aux blogs d'entreprise, d'organisation, d'actualité et de magazine.

Le modèle Bloger est entièrement personnalisable et contient toutes les fonctionnalités dont vous avez besoin pour gérer un blog à part entière. Il est entièrement réactif, compatible bbPress, prêt pour la traduction, compatible avec tous les navigateurs, convivial pour le référencement et prêt pour la rétine. Aucun codage n’est requis pour créer un site Web à part entière et gérer un blog.

Le modèle Blogger offre une excellente assistance aux utilisateurs via un forum d'assistance, un chat en direct et un courrier électronique.

Enlighten est un modèle de site Web WordPress réactif et gratuit d'une page, idéal pour créer un collège, une école, une université et d'autres sites Web scolaires/éducatifs.

Le modèle d'une page d'Enlighten est entièrement personnalisable par l'utilisateur, vous permettant d'utiliser instantanément la plupart des paramètres du thème avec un aperçu en temps réel. Il s’agit d’un thème WordPress moderne, épuré et élégant, doté d’une grande flexibilité et de fonctionnalités.

Vous pouvez également utiliser ce modèle d'une page pour différents types de sites Web professionnels. Le modèle est entièrement adapté aux appareils mobiles, de sorte que le contenu de votre site Web sera sûr d'avoir fière allure sur n'importe quel appareil. Il comporte des curseurs sur la page d'accueil, plusieurs options de menu, un carrousel de portefeuille, une section de service, une section vidéo et une section client.

Onetone est un modèle de site Web de thème professionnel d'une page basé sur le framework Bootstrap et codé avec HTML5/CSS3. Toutes les informations nécessaires sont affichées sur une page dans un ordre clair selon les préférences de l'utilisateur. Les principales sections destinées à des fins commerciales sont déjà créées pour vous, comme les services, à propos du site, de la galerie, des clients, etc.

Le modèle d'une page Onetone dispose également d'un panneau d'administration complet où vous pouvez facilement ajouter un nombre illimité de sections. Plusieurs options sont disponibles si vous préférez effectuer une personnalisation vous-même, comme changer l'arrière-plan, l'arrière-plan de défilement de parallaxe, l'arrière-plan de la vidéo, la police Awesome Icons, le téléchargement du logo et de l'icône, l'ajout de CSS personnalisé, etc.

Le modèle de site Web Onetone One Page est réactif, propre et optimisé pour le référencement.

West est un modèle de site Web d'entreprise d'une page qui vise à fournir tout ce dont vous avez besoin pour vous aider à créer un site Web incroyable pour votre entreprise.

Voici quelques-unes des fonctionnalités que vous trouverez dans le modèle d'une page de West : intégration de Live Composer, gestion des polices et des couleurs, options de blog, option d'en-tête personnalisé, et plus encore.

Moesia est un modèle de site Web d'une page dynamique et réactif sur le thème des entreprises que vous pouvez utiliser pour créer une présence en ligne efficace. Choisissez parmi 11 blocs prédéfinis et créez une page d'accueil qui convient le mieux à votre entreprise.

Chacun des blocs de page d'accueil du modèle Moesia peut avoir une image d'arrière-plan de parallaxe et son propre jeu de couleurs. Moesia propose également un ensemble de polices Google, deux types de mises en page de blog, des animations et des effets sympas, de la parallaxe et bien plus encore.

Lorsque vous recherchez un modèle de site Web WordPress gratuit d'une page, il est logique d'essayer la solution Llorix One Lite en raison de sa simplicité et de sa beauté. La conception conviviale offre une localisation pour connecter des personnes du monde entier, et la mise en page flexible garantit que tout le monde peut voir votre contenu, que ce soit sur un ordinateur, un téléphone ou une tablette.

Avec le modèle de site Web Llorix One Lite, vous obtenez un flux personnalisable qui vous permet d'envoyer des messages personnels aux personnes ou de modifier l'arrière-plan pour mieux refléter votre marque. Le défilement parallaxe fluide ne se trouve généralement que dans les modèles premium, mais le thème Llorix One Lite fait bien les choses, en utilisant du texte superposé et des appels à l'action pour envoyer les gens vers d'autres pages sans ralentir le site avec des animations complexes.

One Page est un modèle WordPress d'une page professionnel et exceptionnel. Il s’agit d’un modèle WordPress d’entreprise à croissance rapide. Le modèle de site Web d’une page a été conçu en gardant à l’esprit la simplicité de la conception.

L'ensemble de l'interface du thème One Page est épuré et offre de l'espace pour votre contenu professionnel le plus important.

Si vous souhaitez faciliter la vie de vos visiteurs, alors le thème One Page d'InkThemes.com est un excellent choix ! Il est idéal pour les entreprises qui souhaitent un design épuré, assez familier aux sites multipages traditionnels, tout en offrant la commodité d'un design d'une seule page.

OneEngine d'EngineThemes se présente comme un « modèle polyvalent d'une page » et il est à la hauteur de cette réputation. Le modèle est livré avec un générateur glisser-déposer intégré pour le glisser-déposer, et vous pouvez créer exactement le site de votre choix avec les fonctionnalités dont vous avez besoin.

Ce thème propose des arrière-plans de parallaxe, plus de 60 effets d'animation, un carrousel intelligent qui fonctionne avec les écrans tactiles, la prise en charge de plus de 600 polices Google, des jeux de couleurs illimités et un formulaire de contact Ajax.
Le modèle d'une page OneEngine offre également un backend facile à utiliser, sa personnalisation est donc très simple.

OneEngine est entièrement réactif afin que votre site soit beau, quel que soit l'appareil sur lequel il est affiché.

Intro est un modèle de site Web d'entreprise moderne d'une page adapté aux entreprises ou aux particuliers qui souhaitent créer une forte présence en ligne. Les fonctionnalités d'introduction incluent un effet de parallaxe dans l'en-tête, une sélection de polices Google, des couleurs personnalisées, des widgets prêts à l'emploi pour la création de page d'accueil, et bien plus encore.

Considérez le modèle de site Web d'une page Awe WordPress si vous souhaitez créer un site Web avec un énorme en-tête et un magnifique modèle de blog. Awe est un one-page élégant et dispose d'une zone d'en-tête puissante pour intégrer des vidéos YouTube et Vimeo. De solides options de thème facilitent les changements de couleur et le chargement des logos, tandis qu'une conception entièrement réactive aide ceux qui consultent votre site sur des appareils mobiles tels que des téléphones et des tablettes.

Chaque section du modèle de site Web d'une page d'Awe est triée sur la page d'accueil, vous pouvez donc laisser un message de bienvenue ou parler des membres de votre équipe tout en haut de votre site. De plus, certains autres modules incluent des informations sur vous, les meilleures compétences (avec compteurs), les fonctionnalités de base et les éléments du portefeuille.

Jouez avec les options illimitées du curseur de ce modèle et voyez combien de personnes sont prêtes à acheter vos services ou produits en affichant le tableau des prix. Le plugin Contact Form 7 correspond bien au thème et Google Map aide les gens à trouver facilement votre magasin.

Switch WordPress One Page Template offre une mise en page organisée et tendance avec une réactivité pour garder les gens heureux lorsqu'ils se déplacent avec leurs appareils mobiles. Le plugin Revolution Slider est inclus, vous permettant de partager des animations et autres effets lorsque les utilisateurs visitent votre page. La barre de navigation collante reste visible pour aider les gens à naviguer sur votre site, et la zone de fonctionnalités du produit est une belle mise en page basée sur une grille pour mettre en évidence ce que vous proposez à vos clients.

Bonjour, chers lecteurs du site blog ! Dans cet article, j'ai fait une sélection de 10 modèles de Landing Page HTML (une seule page dans le langage courant), qui, à mon avis, sont plus performants et ont un taux de conversion élevé. Il était une fois, lorsque j’ai commencé à créer des landing pages (il y a 4 ans), je n’étais pas vraiment un artiste et c’est pour cela que je cherchais des modèles. Naturellement, il n’y avait que des biens de consommation, des kits de construction et des modèles payants. Maintenant, bien sûr, cette question est plus simple, il existe de nombreux modèles judicieux sur divers sujets, mais vous devez quand même regarder.

J'attire votre attention sur 10 modèles HTML d'une page. Je ne peux pas dire pour quelle raison le navigateur G Chrome pense que les fichiers contiennent des virus ou des logiciels indésirables (je n'ai jamais eu et je n'ai pas de tels fichiers), il n'y a aucune marque dans la base de données Google indiquant que le site est sous sanctions, les fichiers ont été vérifiés par le service virustotal, fiable et répandu.com/ru/ . Je dois encore comprendre cela. Si je ne vous ai pas convaincu, vérifiez les fichiers vous-même. Je vais joindre une capture d'écran du premier fichier, vérifiez le reste vous-même.

J'édite cet article le 29 juillet 2016. Je n'ai pas supprimé ce qui précède, même si G Chrome ne considère plus mon site et mes fichiers comme une menace pour la sécurité. J'écrirai comment j'ai fait cela et quel service j'ai utilisé dans l'un des articles suivants.

2. Une autre page d'accueil « Vidéosurveillance ». Beau design, animation de formulaires pop-up, excellente galerie avec une description pop-up, des critiques ;

3. Modèle « Installation des portes ». Conception simple et thématique, formulaire de commentaires, avis ;

4. Modèle « Transport international de marchandises ». Beau design, formulaires de commentaires, compte à rebours avec curseur, description de l'activité dans les fenêtres contextuelles ;

5. Modèle « Transport de marchandises ». Excellente conception thématique, formulaires de commentaires et de commande, animations ;

6. Modèle « Cuisines personnalisées ». Conception thématique, formulaires de commentaires, compte à rebours avec curseur, descriptions dans les fenêtres pop-up ;

7. Un autre modèle « Cuisines personnalisées ». Le design a du minimalisme, des formulaires de commentaires, une galerie ;

8. Modèle «Réparation et décoration d'appartements et de bureaux». Conception agréable et simple, formulaires de commentaires, avis ;

9. Modèle « Cils ». Bon design, formulaires de commentaires, liste de prix, galerie ;

10. Modèle « Restauration d'une concession automobile ». Beau design, navigation sous forme de slider, galerie, formulaire de commentaires ;

J'espère que vous avez trouvé quelque chose d'intéressant pour vous-même et que vous avez utilisé les modèles.

Si vous avez des questions ou avez besoin d'aide, écrivez dans les commentaires de l'article, je répondrai à tout le monde, j'aiderai tout le monde.

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

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

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

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

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

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

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

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

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

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

contenu

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

contenu

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

#selector (propriété : valeur ;)

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

5 premières étapes

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

Cela semble modeste.

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

Structure des répertoires dans le dossier :

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

Étape 1 : Utiliser un en-tête

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

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

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

Vous aurez besoin de 4 sections :

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

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

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

Remplissez de garniture au lieu de points.

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

Avantages
Rapide

Fiable

Sed diam nonummy

Rentable

Elit, sed diam nonummy

Techniquement

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

Fiable

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

Rentable

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

Techniquement

Lorem ipsum dolor sit amet, consectetuer adipiscing

Fiable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Contenu pour plus de clarté :

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

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

Plans tarifaires

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

Tarif n° 1
$10

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande
Tarif n° 2
$20

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande
Tarif n° 3
$30

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande

Ressemble à ça.

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

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

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

Avis des clients

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

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

Lançons un appel à l'action.

Bénéficiez en commandant aujourd'hui

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

Commandez maintenant!

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

Nom du client.

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

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

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

… .

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

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

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

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

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

Étape 5. Polices et icônes

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

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

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

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

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

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

Exemple 1 : avec une phrase

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

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

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

Commençons par les icônes.

Avantages je(
couleur : #cac4c4 ;
}

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

Indentation pour les titres de section

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

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

Tarif n° 1
$10

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande

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

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

direction flexible : colonne ;

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

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

Résultat

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

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

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

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

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

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

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

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

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

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

Le défilement est désormais fluide.

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

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

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

Exemple 2 : avec forme et effet parallaxe

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

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

Commençons par la parallaxe.

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

fond : transparent ;

Dans head, nous insérerons le script :

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

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

Et en CSS son comportement est :

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

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

Rendre le menu sombre :

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

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

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

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

• 
  
  
  


• 
  

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

  
  

Et nous prescrivons l'apparence

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

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

Nous modifions les tarifs.

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

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

Le modèle est prêt.

Exemple 3 : avec compte à rebours

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

HTML





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

• 
  

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

  
  


• 
  

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

  
  

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