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 une page unique (également appelée page de destination), une personne se concentre sur une idée, un produit, ce qui lui permet d'étudier votre offre sans se laisser distraire et est plus disposée à laisser une demande.

"D'accord", dites-vous, "j'ai décidé de faire un atterrissage, 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. Adaptation pour appareils mobiles est 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 (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 comprend un curseur personnalisé, 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 cliquables, 7 présentations de portefeuille différentes et plus encore, ouvrant des possibilités infinies.

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

2. Le7

Un système de modèles avancé et unique qui permet non seulement de créer une page de destination, mais également de l'intégrer dans le 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 très demandés sur pages de destination ah - 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 se font par un bouton. Les sites de démonstration utilisent Revolution Slider. Le modèle propose 5 options de mise en page pour les pages, 20 en-têtes personnalisés, un nombre illimité de styles pour Google Maps, de nombreuses icônes stylées.

L'outil Muffin Builder vous aidera à créer n'importe quel design sans aucune connaissance en développement Web. Si vous le souhaitez, vous pouvez ajouter des règles CSS et des scripts js sans affecter le code du modèle principal.

Ronneby présente des performances élevées et un panneau d'options étendu. Les meilleurs plugins premium pour créer des pages de destination WordPress ont été ajoutés au modèle. Les développeurs de modèles sont attentifs Attention particulière 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 :

5Jupiter

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é. En raison de l'utilisation effets visuels, comme la parallaxe, le thème s'avère vivant et c'est très sympa 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 votre ordinateur, téléphone mobile, tablette. Plugins premium inclus :

WPBackery

Révolution du curseur

Excellente adaptation avec WooCommerce (boutique en ligne)

7. Brooklyn

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

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

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

9.H-code

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

10. Autochtone

Native est un outil puissant pour promouvoir une startup. Les modèles de pages de destination WordPress basés sur le thème utilisent divers effets de parallaxe pour se déplacer entre les blocs sémantiques du site. Une documentation étendue et des didacticiels vidéo aideront les utilisateurs novices du CMS à comprendre rapidement les fonctionnalités du panneau d'administration. Les plugins Visual Composer, Layer Slider et Slider Revolution sont inclus application gratuite au modèle.

11. Saillant

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

12. Le joyau

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

Les éléments de conception d'un site Web sur TheGem sont personnalisés à l'aide du plugin Visual Composer. L'affichage d'une grande quantité de contenu dans les blocs d'atterrissage (portfolio, avis, services) est organisé par chargement - automatique ou « par bouton », ainsi que par un curseur de changement d'onglet. Le modèle propose 6 options d'animation pour charger les composants de section qui apparaissent lors du défilement du contenu de la page de destination. L'arrière-plan des blocs de contenu peut être constitué de vidéos de Vimeo et YouTube ou dérivées de système de fichiers site utilisant html5.

13. Professionnel du marketing

Marketing Pro est un modèle conçu en pensant à la conversion, au marketing et au référencement. Chacun des 9 sites de démonstration qui le composent est créé en tenant compte des caractéristiques d'une niche marketing spécifique. En prime à la conception adaptative de la page de destination, il existe des modèles stylisés pour les blocs de gestion 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 - modèle avec premium conception adaptative, facilitant création d'atterrissage pages et sites d'une page sur WordPress. Le thème permettra de lancer le projet dans un court laps de temps. Grâce à la variété d'outils de personnalisation - 9 options d'en-tête dans différentes mises en page, 40 éléments uniques, à chacun desquels vous pouvez appliquer des styles distincts, des fonctionnalités intégrées pour organiser les republications sur les réseaux sociaux, 6 solutions de style pour concevoir la section portfolio - la personnalisation des skins est plus rapide que jamais.

16. Kalium

Kalium est un sujet vers lequel les représentants de divers domaines professionnels se tournent pour obtenir un site Web afin de promouvoir leurs services. Dans la conception de sites Web sur Kalium, un accent particulier est mis sur la typographie - une bibliothèque spécialisée dans la gestion des polices en est responsable. Le modèle peut utiliser 4000 polices - Google, Typekit, Font Squirrel, premium et personnalisées (téléchargées par l'utilisateur).

17. Entrant

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

18. Intact

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

19. Comète

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

20. Moteur principal

Un thème WordPress polyvalent 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- meilleur plugin sujets de boutique en ligne ;
• prise en charge de n’importe quelle langue.

23. PhloxPro

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

24.Porto

Un autre concepteur multi-modèles pour les pages de destination et les cartes de visite. Code propre avec un nombre infini d'options pour sélectionner les en-têtes et les pieds de page sans avoir besoin d'apprendre la programmation. De nombreux designs dont les éléments sont facilement remplaçables grâce au plugin grid. Il est facile de passer d’un site d’une page à une boutique à part entière grâce à la recherche avancée. Le support est toujours prêt à répondre aux questions.

25.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 ;

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

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. Conceptions modernes, qui ne sont pas « ennuyeux » et qui ont l’air frais et beaux.

26. Avenue

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

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

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

27. L'Arche

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

28.Amédée

Beau design dans une palette de couleurs inhabituelle. L'accent n'est pas seulement mis sur 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. Peut être personnalisé type différent sur le bureau et version mobile, l'adaptabilité est donnée par défaut.

30. Makoto

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

32. Aménagement paysager

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

33. Commerce participatif

Conçu pour les dernières nouveautés Version WordPress. Le modèle est constamment mis à jour. Les fonctionnalités d'une boutique en ligne sont fournies via un plugin pratique pour la recherche et la commande avancées. Il existe également des préréglages pour les événements, les dates du calendrier et l'enregistrement. Utilisé Elementor pour créer de nouvelles pages. Prend en charge tous les plugins supplémentaires.

34. Créance

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

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

36.Éducation

L'éducation est une version améliorée vieux sujet Le eLearning avec une UX plus avancée est destiné aux ressources Internet éducatives : cours en ligne et sites Web d'établissements d'enseignement. Le modèle a un design attrayant et offre les fonctionnalités complètes nécessaires au processus éducatif.

37. Un

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

38. Totale

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

39. Stockholm

Stockholm est l’un des 30 modèles WordPress les plus vendus depuis sa création. Lorsque vous travaillez avec le thème, vous pouvez définir une palette de couleurs pour l'ensemble du site ou ses éléments individuels, appliquer l'une des 600 Polices Google, combinez les options et les blocs de différents sites de démonstration. Les utilisateurs qui ont besoin d'une solution prête à l'emploi pour un projet d'entreprise peuvent télécharger des modèles de pages de destination et les installer immédiatement à partir de la section de création de sites Web.

Une autre option de démonstration :

40. Dynamique massive

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

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

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

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

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

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

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

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

2.

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

3. Alhéna Lite

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

4.

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

5. Palmas

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

6. Brasserie

Brasserie est un modèle WordPress simple, parfait pour un restaurant, un café ou un site culinaire. Comprend des effets d'animation, ainsi que un grand nombre de Fonctionnalité.

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 joli thème réalisé dans des couleurs vives. Il est parfait pour les petites et moyennes entreprises, ainsi que pour un site 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.

Il reste très peu de temps avant l'hiver et un grand nombre de webmasters commencent à créer la bonne ambiance sur leurs sites. A cette occasion, nous vous présentons notre sélection d'effets de neige pour votre site internet.

jSnow – script universel de chute de neige dans jQuery

Nous commencerons notre sélection par un très bel effet neige, qui est ajouté au site à l'aide d'un plugin appelé « jSnow ».

Manifestation:

D'accord - magnifique !

Pour installer cet effet sur votre site Web, procédez comme suit.

1. Téléchargez l'archive jsnow.zip à la fin de l'article. Décompressez et téléchargez le contenu sur votre site Web via FTP ou une autre méthode qui vous convient.

Malheureusement, le script ne fonctionne pas avec les nouvelles versions de jQuery, nous nous contentons donc de ce dont nous disposons.

3. Avant Utilisez la balise de fermeture pour inclure des scripts :

$(document).ready(function() ( $("body").jSnow(( vSize : 100, // Taille de la zone des flocons : 30, // Nombre de flocons de neige flakeColor : ["#fff"], // Couleur flakeMinSize : 10, // Taille minimale d'un flocon de neige flakeMaxSize: 20, // Taille maximale d'un flocon de neige tombantSpeedMin: 1, // Vitesse minimale d'un flocon de neige tombantSpeedMax: 2, // Vitesse maximale d'un flocon de neige tombantCode:["." ] // Type de flocon de neige )); ) );

Ce code ajuste la taille des flocons de neige, la hauteur de la zone qu'ils occupent, la couleur et d'autres paramètres commentés.

Le script, comme vous l'avez compris, est universel, et au lieu de neige ronde, vous pouvez ajouter des étoiles, par exemple, comme ceci :

FlakeCode:["*"] // Vue flocon de neige

Ou un tas de neige ronde et d'étoiles :

FlakeCode:[".", "*"] // Vue flocon de neige

Ainsi que tout autre symbole (et même le signe dollar - $).

Le script est idéal pour décorer le haut du site sans chevaucher le contenu principal.

Snowstorm – un script intelligent de chute de neige en JavaScript

Pourquoi intelligent, demandez-vous ? Parce que dans ce script (contrairement à d'autres discutés dans cet article), il y a un effet supplémentaire de repousser les flocons de neige. Autrement dit, lorsque vous déplacez le curseur de la souris sur votre site, les flocons de neige se précipitent dans la direction opposée à celle-ci. Plus le curseur est éloigné du milieu de l'écran, plus le vitesse plus rapide mouvement des flocons de neige.

Manifestation:

Pour installer cet effet sur votre site, aucune bibliothèque supplémentaire n'est requise. Tout ce que vous avez à faire est de :

1. Téléchargez l'archive snowstorm.zip à la fin de l'article. Décompressez et téléchargez du contenu sur votre site d'une manière qui vous convient.

window.onload = function() ( snowStorm.snowColor = "#fff"; // Couleur des flocons de neige snowStorm.flakesMaxActive = 100; // Nombre maximum de flocons de neige visibles snowStorm.followMouse = true; // true - poursuit le curseur, false - no snowStorm.snowCharacter = "."; // Type de flocon de neige );

Si nécessaire, apportez des modifications à l'animation du script.

En plus du fait que les flocons de neige sont éloignés du curseur, certains d'entre eux collent au bas de l'écran, créant une légère impression de flocons de neige formant une congère.

Chutes de neige – effet des chutes de neige avec des congères en utilisant jQuery

J'aime le plus ce script, car il implémente de petits gruaux de neige et collecte également de petites congères sur les éléments spécifiés.

Manifestation:

Cet effet prend un peu plus de temps à installer que les autres.

1. Si votre site ne dispose pas de la bibliothèque jQuery, incluez-la dans la section HEAD :

3. Attribuez la classe " darkBg" à la balise d'ouverture :

4. Avant connectez les scripts avec la balise de fermeture :

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall(( collection: ".collectonme", flakeCount: 200 // Nombre de flocons de neige )); ));

5. Et à la dernière étape, attribuez une classe aux éléments sur lesquels des congères devraient se former :

Class="collectonme"

Si vous ne souhaitez pas la formation de congères sur le chantier, supprimez la ligne du script :

Collection : ".collectonme",

C'est une action obligatoire, sinon la neige ne tombera pas sur votre site.

Excellent script, c'est ce que nous utilisions auparavant sur notre site.

Effet de neige tombante en couches lisses à l'aide de CSS3

Ici, comme vous l'avez compris, nous n'aurons pas recours à toutes sortes de scripts, mais nous nous contenterons de CSS pur.

Manifestation:

Magique, n'est-ce pas ?

Afin d'installer cet effet vous-même, suivez trois étapes simples.

1. Téléchargez l'archive snow_img.zip à la fin de l'article. Décompressez et téléchargez le contenu sur votre site Web via FTP ou gestionnaire de fichiers hébergement.

2. Insérez dans votre fichier de style (de préférence tout en bas) :

SnowContainer ( largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; z-index : -1 ; ) #snow ( largeur : 100 % ; hauteur : 100 % ; image d'arrière-plan : url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation : neige 20s linéaire infini ; -moz-animation : neige 20s linéaire infini; -ms-animation: neige 20s linéaire infini; animation: neige 20s linéaire infini; ) @keyframes neige ( 0% (position d'arrière-plan: 0px 0px, 0px 0px, 0px 0px; ) 100% (position d'arrière-plan : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes neige ( 0% (position d'arrière-plan: 0px 0px, 0px 0px, 0px 0px; ) 100% (position d'arrière-plan: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit-keyframes neige ( 0% (position d'arrière-plan : 0px 0px, 0px 0px, 0px 0px; ) 100% (position d'arrière-plan : 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- images clés neige ( 0 % (position d'arrière-plan : 0px 0px, 0px 0px, 0px 0px ; ) 100 % (position d'arrière-plan : 500px 1000px, 400px 400px, 300px 300px; ) )

Enregistrez ensuite toutes les modifications.

Comme ça bonne sélection des effets de neige qui raviront sans aucun doute les visiteurs de votre site.

La conception de sites Web avec jQuery est très simple ! "Falling Snow" sur le site

À l'approche de la nouvelle année, deux éléments apparaissent sur la plupart des sites Web : des « chutes de neige » et une page de soldes et de réductions. Les deux se font très simplement. Neige - en utilisant les plugins jQuery, et les remises et soldes au moyen d'une image au-dessus de l'étiquette de prix barrée d'une épaisse ligne rouge plus, correspondant prétendument à l'ancien prix.

Cependant, nous souhaitons désormais uniquement placer « chutes de neige » sur la page du site. Il existe plusieurs options simples pour cela. Examinons deux d'entre eux basés sur jQuery.

Nous commençons l'installation de « falling snow » en créant un nouveau dossier, naturellement nommé snow, puis téléchargeons l'archive et la décompressons dans ce dossier. Nous aurons deux scripts jquery-1.8.3.min.js et jquery.snow.js.

Ensuite, vous devez ajouter à l'en-tête de la page à l'intérieur de la balise... les lignes suivantes indiquant les chemins d'accès à ces scripts, et un petit JavaScript pour initialiser la « chute de neige » :

$(document).ready(function()(
$.fn.neige();
});

Pour que la neige apparaisse sur la page du site, ajoutez simplement à l'intérieur de la balise
.

Ce plugin n'a que quatre paramètres. Ils se trouvent au tout début du fichier jquery.snow.js et peuvent être modifiés dans n'importe quel éditeur ou dans le Bloc-notes :
minSize : 10 , // taille minimale du flocon de neige
maxSize : 20 , // taille maximale d'un flocon de neige
newOn : 500 , // fréquence d'apparition des flocons de neige en ms, c'est-à-dire densité de la neige
flakeColor : "#bbbbbb" // couleur des flocons de neige

Notez également la valeur z-index:10 pour la neige, qui est définie dans les premières lignes du fichier jquery.snow.js. Il définit la position des flocons de neige au-dessus des curseurs (diaporamas) et des menus déroulants, si votre page en possède.

Deuxième version de "Chute de neige"
Pour cette option, vous utilisez vos propres images de flocons de neige, comme le montre la figure 1. Grâce à cela, le plugin est plus coloré et, en plus, il peut être utilisé avec succès pour d'autres effets. Par exemple, en remplaçant les images de flocons de neige par des pétales de roses, vous pouvez décorer la page d'un site Web de mariage, et les marguerites qui tombent s'intégreront parfaitement sur un site Web sur les vacances d'été.

Fig. 1. Site Internet « Chutes de neige »

Pour l'installation, nous utilisons à nouveau le dossier snow, mais maintenant nous allons y décompresser une autre archive dans laquelle, en plus des scripts, se trouvent quatre images différentes de flocons de neige. Ensuite, comme dans le premier exemple, à l'intérieur de la balise... insérez des lignes indiquant les chemins vers les nouveaux fichiers « chutes de neige » :

Et enfin, ajoutez la ligne à l'intérieur de la balise (de préférence en début de page)
.

Si vous n’avez pas de neige, assurez-vous de saisir correctement l’adresse complète des images de flocon de neige dans la ligne suivante du fichier snow.js :
var img=" "; .

L'ajustement de la densité de la neige est précisé dans le même fichier par un argument numérique dans la ligne
setTimeout("neige("+id+");",100 ); // fréquence des flocons de neige,
et la vitesse de déplacement des flocons de neige en ligne
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // vitesse de déplacement des flocons de neige

De plus, comme dans la première option, faites attention à la valeur z-index:10 afin que la neige chevauche les curseurs, menus déroulants, etc. situés sur la page.

Bonne journée et bonne année. A la veille de la nouvelle année, je souhaite partager avec vous un plugin de chute de neige très léger, beau et sans prétention. Ce script est vraiment très léger et peut être facilement placé dans un fichier HTML sans rendre son utilisation difficile. Code HTML mon site. C'est vrai, il peut être retiré dans fichier séparé. Mais pour plus de commodité, j'ai tout fait dans un seul fichier.

Il n'y a pas grand chose à dire ici, il vaut mieux assister à une démonstration de cette neige qui tombe. De plus, on y retrouve un très beau fond et l'inscription "Bonne année" écrite belle police"Homard" par Google. Vous pouvez facilement transformer ce fichier en carte de vœux en ligne.

Connecter le script des flocons de neige qui tombent au site Web terminé 1. Connectez la bibliothèque jQuery

On se connecte comme ceci : entre les balises et on insère le code suivant :

2. Connectez les styles

Collez le code CSS dans votre fichier CSS (généralement style.css) :

#canvas ( bordure : 1px noir uni ; position : absolue ; z-index : 10000 ; ) #flake ( couleur : #fff ; position : absolue ; taille de police : 25px ; haut : -50px ; )

3. Créez le fichier snow.js

Créons un fichier snow.js et insérons-y le code javascript suivant :

var t = setInterval(function()( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random( ); var sizeFlake = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; var duréeFall = documentHeight * 10 + Math.random() * 5000;$("#flake") .clone() .appendTo("body") .css(( gauche : startPositionLeft, opacité : startOpacity, "font-size": sizeFlake )) .animate(( haut : endPositionTop, gauche : endPositionLeft, opacité : 0,2 ), duréeFall, "linear", function() ( $(this).remove() )); ), 500); var neige = (); var snowflex = (); snowflex.create = function()( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex. style.top = - 50 + Math.random() * 20 + "px" ; flex.style.left = Math.random() * 1500 + "px" ; flex.style.position = "absolu" ; flex.style .color = "#F3F3F3"; flex. style. opacity = Math. random (); document. getElementsByTagName ("body"). appendChild (flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function()( flex.style.top = parseInt(flex. style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t) ;document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function()( var t = setInterval(function()( snow.snowflex(); ), 500); ); //tempête de neige(); var brouillard = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); fog.start = function()( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function()( x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; fog.draw(ctx, x, y); ), 100); ); //début de brouillard();

Nous incluons le fichier js dans :

4. Insérez le code html

Eh bien, la chose la plus importante reste : insérez le code html des chutes de neige n'importe où dans :

❄

Si vous avez tout fait correctement, la neige commencera à tomber sur votre site.

Connexion image de fond, gros titre et flocons de neige qui tombent

Cette option est différente en ce sens qu'elle a image de fond et un gros titre "Bonne année". Connecter cette version du script Falling Snow à votre site Web est assez simple. Besoin de:

1. Téléchargez l'archive et décompressez-la 2. Connectez la bibliothèque jQuery

Assurez-vous d'inclure la bibliothèque jQuery (pas nécessaire si cette bibliothèque est déjà incluse). On se connecte comme ceci : entre les balises et on insère le code suivant :

3. Connectez la police "Lobster"

Semblable à la connexion de la bibliothèque jQuery, nous connectons la police pour notre inscription « Bonne année » :

Naturellement, si vous n'avez pas besoin de cette inscription et de cette police, vous n'êtes pas obligé de l'inclure, mais alors dans le CSS, supprimez la « font-family : « Lobster », cursive ; » de l'attribut H1, ou remplacez-la. avec votre propre police

4. Styles de connexion

Option A : Collez le code CSS dans votre fichier CSS. Voici le code :

Img.bg ( /* Définir des règles pour remplir l'arrière-plan */ min-height : 100 % ; min-width : 1024px; /* Configurer une mise à l'échelle proportionnelle */ width : 100 %; height : auto; /* Configurer le positionnement */ position : fixe ; haut : 0 ; gauche : 0 ; ) h1 ( famille de polices : "Lobster", cursive ; couleur : #FFF ; taille de police : 90 px ; alignement du texte : centre ; hauteur de ligne : 95 px ; police- poids : normal ; marge supérieure : 300 px ; ombre du texte : 5px 5px 5px #000 ; ) @media screen et (largeur maximale : 1024px) ( /* Spécifique à cette image particulière */ img.bg ( gauche : 50 % ; marge gauche : -512 px ; /* 50 % */ ) ) html, corps ( famille de polices : Helvetica, Arial, sans-serif ; taille de police : 12 px ; hauteur de ligne : 16 px ; remplissage : 0 ; marge : 0; couleur : #333 ; ) .bar ( couleur d'arrière-plan : #111 ; couleur : #f0f0f0 ; ombre de la boîte : 0px 0px 2px #333 ; hauteur de ligne : 25px ; remplissage : 0px 20px ; opacité : 0,7 ; ) . bar:hover ( opacité : 1; ) .bar a ( couleur : #DDD ; ) .bar a:hover ( couleur : #FFFFFF ; ) a ( couleur : #FFFFFF ; décoration de texte : aucun ; ) a:hover ( couleur : #CCC; ) #canvas ( bordure : 1px noir uni ; position : absolue ; indice z : 10 000 ; ) #flake ( couleur : #fff ; position : absolue ; taille de police : 25px ; haut : -50px ; ) #page ( position : relative ; )

Option B. Vous pouvez également créer un fichier séparé, par exemple snow.css et y coller le même code, bien qu'il devra être inclus dans l'en-tête comme suit :

5. Connectez le script de chute de neige

Option A. Pour ce faire, il faut insérer le code javascript suivant tout en bas du site (avant la fermeture) :

var t = setInterval(function()( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random( ); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var duréeFall= documentHeight * 10 + Math.random() * 5000;$("#flake") .clone() .appendTo("body") .css(( gauche : startPositionLeft, opacité : startOpacity, "font-size": sizeFlake )) .animate(( haut : endPositionTop, gauche : endPositionLeft, opacité : 0,2 ), duréeFall, "linéaire", function() ( $(this).remove()); ), 500); var neige = (); var snowflex = (); snowflex.create = function()( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex. style.top = - 50 + Math.random() * 20 + "px" ; flex.style.left = Math.random() * 1500 + "px" ; flex.style.position = "absolu" ; flex.style .color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function()( flex.style.top = parseInt(flex. style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 500); ); //tempête de neige(); var brouillard = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); fog.start = function()( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function()( x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; fog.draw(ctx, x, y); ), 100); ); //début de brouillard();

Option B. Tout comme avec le code CSS, le javascript peut être placé dans un fichier séparé et également appelé snow.js et inclus dans le head :

6. Remplissez l'image d'arrière-plan

Téléchargez l'image bg.jpg depuis l'archive vers la racine de votre site

7. Insérez le code html

Eh bien, le plus important est d'insérer le code html de la neige qui tombe :

Bonne année! ❄

Le script de chute de neige a été connecté avec succès. Assurez-vous de le regarder en action. Tous mes vœux!