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.

Les applications météo sont modernes modèle gratuit tapez "page de destination" ou "site d'une page", développé en utilisant HTML5, CSS3 et Bootstrap 3x, et conçu pour les prévisions météorologiques, spécifiquement pour les applications fonctionnant avec Plateformes Android, iOS et/ou Windows Mobile dispositifs.

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 Page de destination 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 ;
• Coutume boutons sociaux 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 - pure et modèle moderne un pager. 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, entreprise locale, 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.

Caporal - en effet un bon choix pour entreprise, portfolio et site Web personnel.

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 pour Applications mobiles, sites 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 propose niveau optimal 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é gros montant 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 - une page conviviale thème polyvalent WordPress 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. .

Propriétaire - puissant thème gratuit Thème professionnel polyvalent WordPress facile à utiliser, personnalisable et bien conçu. Le thème affiche votre site Web sous son meilleur jour sur les smartphones, tablettes et ordinateurs portables, ainsi que grands écrans 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 sujet se concentre sur grandes photos et fournit 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 entreprises d'agence Web. affaire d'entreprise, portefeuille personnel et professionnel.

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, des services, un « appel à l'action », une galerie, une section blog et une « section » Contact rapide" Ce modèle sympa 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 tout vous donner fonctions importantes, nécessaire à la promotion et à la gestion de votre entreprise, de votre entreprise, de votre personnel ou de tout autre site 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 Azera Shop Luxury est compatible e-commerce (Woo Commerce), WPML, RTL, Grille de photos, Formulaire de contact 7, Meta Slider, SiteOrigin Page Builder, SEO Friendly, avec effet de parallaxe et image plein écran.

Le modèle d'une page Azera Shop Luxury est l'un des meilleurs thèmes pour le commerce électronique et une bonne alternative pour la 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 d'une page Parallax One est réactif, prêt pour les widgets, intègre WooCommerce, des logos personnalisés, des menus et des icônes, plusieurs jeux de couleurs, de nombreuses icônes sociales, Google Map, parallaxe, défilement fluide, formulaire de contact pratique, tableaux de tarifs. 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 facile formulaire de contact, qui vous aide à rester connecté avec votre public, et une section À propos de nous où vous pouvez dire à vos visiteurs qui vous êtes et quels sont vos meilleurs 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 un beau et interface moderne, construit 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 - le meilleur solution gratuite pour créer des sites Internet.

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, système intelligent annonces, le site d'actualités sera lancé dès que possible !

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. C'est pur et gracieux thème moderne pour WordPress avec une grande flexibilité et 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 page d'accueil, celui qui convient le mieux à votre entreprise.

Chacun des blocs de page d'accueil du modèle Moesia peut avoir image de fond parallaxe et votre 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 écrans tactiles, prise en charge de plus de 600 polices Google, illimité schémas de couleurs et 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.

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 en détail de la création et obtiendrons codes prêts pages.

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.

Nous devons tout offrir information nécessaire, mais pas au point de supprimer et de chasser un 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 positionner É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 : ceci fichier principal, que nous éditerons.
• /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). C'est prêt Open source, 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" //