Bonjour, chers lecteurs du site blog ! Dans cet article j'ai fait une sélection de 10 HTML Modèles d'atterrissage Page (site d'une page dans le langage courant), qui, à mon avis, ont plus de succès 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 designers, 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, forme simple et thématique retour, Commentaires;

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.

» Atterrissage gratuit modèles de pages WordPress - TOP 30

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

Plus précisément, cet article examinera meilleur atterrissage Modèles WordPress qui peuvent 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 création facile site.

5. Palmas

Palmas est 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 et transitions visuellement époustouflantes et 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 controle total structure d'atterrissage.

10.

est un sujet polyvalent, avec gros montant Fonctionnalité. 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

L'Ouest est thème simple, qui convient à 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.

Un site Web d’une page est pratique pour les hommes d’affaires car il peut être créé littéralement en une journée. Si vous téléchargez un modèle de site Web d'une page prêt à l'emploi, vous pouvez créer un site Web pour votre entreprise pour un montant minime, puisque vous ne devez payer que l'hébergement. Pour le client, un site Web d'une page est pratique car toutes les informations qu'il contient sont présentées de la manière la plus concise et structurée possible, il n'y a rien de superflu. En raison de la commodité pour les clients, les sites Web d'une page affichent souvent plus conversion élevée que les autres types de sites.

Comment choisir un modèle d'une page ?

Apparence. Il est conseillé de réaliser le design dans le style général de l'entreprise. L'interface ne doit pas avoir de couleurs trop incompatibles. Cependant, les utilisateurs en ont depuis longtemps assez des couleurs pastel, la luminosité et la créativité sont donc les bienvenues.

"Poids". Un design animé, des bannières scintillantes, des éléments « lourds », des curseurs peuvent rendre le site tellement surchargé qu'il mettra plus de temps à s'ouvrir que ses concurrents.

Nombre de blocs et possibilité de les personnaliser. Avant de choisir un modèle, décidez exactement quels blocs sont nécessaires au minimum pour ne pas surcharger la page. Lorsque vous essayez le modèle, vérifiez si les blocs peuvent être supprimés et échangés.

La fonctionnalité multi-navigateurs et la conception adaptative élargiront considérablement l’audience des clients potentiels. Par conséquent, veillez à choisir uniquement modèles réactifs des pages d'une page.

Nous proposons gratuitement des modèles d'une page

Si vous décidez de faire pour votre entreprise Page de destination, vous pouvez télécharger le modèle sur notre site Web. Nous vérifions soigneusement tous les modèles pour détecter les virus, vous n'avez donc pas à vous soucier du téléchargement d'un fichier infecté. Tous les modèles de pages de destination de notre catalogue ont Design moderne, fabriqué dans le plus différents styles. Possibilité d'ajuster le nombre de blocs, de changer Schéma de couleur et d'autres fonctionnalités vous aideront à créer un site Web unique et original basé sur un modèle simple.

Nous vous invitons à télécharger des modèles de sites Web d'une page

Le principal problème de ceux qui ont décidé de télécharger gratuitement un modèle de page de destination est le grand nombre de virus et d'erreurs dans modèles gratuits. Il est donc très important de trouver un site sûr et fiable. Nous vous invitons à nous rendre visite, car nous surveillons attentivement la sécurité. De plus, nous vous ravirons avec une large gamme de Modèles HTML des one-pagers, que vous pouvez télécharger dès maintenant !

Lisez le texte plus loin...

Salutations, mes chers lecteurs. Aujourd'hui, nous allons parler de points techniques, avec l'aide duquel 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.

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. Changer les valeurs et ajouter des propriétés régule 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 des « tarifs » de classe et trois tarifs.

Plans tarifaires

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

Tarif n° 1
$10

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande
Tarif n° 2
$20

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande
Tarif n° 3
$30

par mois/par personne

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum douleur


• dixLorem ipsum

Commande

Ressemble à ça.

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

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

L'utilisation de signaux ciblés indique aux visiteurs que la marque est digne de confiance. Les signaux peuvent être reçus différentes sortes, mais les classiques sont les avis 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 courants : avec une phrase, une forme et avec un compteur 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" //