Table des matières
Un modèle de pied de page Elementor est la section inférieure d'un site Web enregistré sous forme de design prêt à l'emploi. Il contient le logo, les liens de la page principale, les coordonnées, les liens sociaux et la ligne de droits d'auteur, et un créateur de thème l'affiche sur chaque page.
Vous trouverez ci-dessous les 34 modèles de pied de page Elementor de la bibliothèque Master Addons, regroupés selon le type de site qui leur convient. Chacun a une capture d'écran et une démo en direct qui s'ouvre dans un nouvel onglet. Vous les insérez dans l'onglet Footers du Bibliothèque de modèles Master Addons. Le constructeur de pieds dans le Constructeur de thèmes Master Addons est gratuit et une importation place le pied de page sur chaque page sans Elementor Pro.
Vous cherchez le haut de la page ? notre Modèles d'en-tête d'élémentor post a 43 en-têtes, et beaucoup des pieds de page ici proviennent des mêmes kits.
Sautez à ce que vous êtes venu chercher :
- Modèles de 34 pieds par type de site: SaaS, CTA, entreprise locale, magasin et minimum
- Que mettre dans un pied de page de site Web: une liste de contrôle de sept éléments
- Conseils de conception de pied de page de site Web: ce qui fonctionne, erreurs courantes et pieds de page mobiles
- Comment ajouter un modèle de pied de page Elementor: cinq étapes avec le Theme Builder
- Questions fréquemment posées
34 Modèles de pied de page d'élément par type de site
Les 34 pieds de page se répartissent en cinq groupes Choisissez celui qui est le plus proche de votre site et ouvrez deux ou trois démos côte à côte avant de vous décider.
| Type de pied | Dessins | Ce qu'ils partagent | Où |
|---|---|---|---|
| SaaS et démarrage | 8 | Logo et intro plus trois ou quatre colonnes de liens | Sauter |
| CTA et bulletin d'information | 6 | Un titre, un formulaire d'essai ou une inscription au-dessus des liens | Sauter |
| Affaires et services locaux | 9 | Téléphone, adresse et heures d'ouverture | Sauter |
| Boutique et blog | 4 | Icônes de paiement, publications ou nombreux liens de catégorie | Sauter |
| Classique et minimal | 7 | Quatre colonnes, ou un logo centré avec des liens sociaux | Sauter |
Modèles de pied de page SaaS et startup Elementor
Pieds de pieds du SaaS et des kits technologiques La plupart suivent un motif : le logo et une intro d'une ligne à gauche et trois ou quatre colonnes de liens à droite Finix et Optivue ajoutent une invite d'essai au-dessus des liens.
1. Craftova : Modèle de pied de page SaaS compact Elementor
Un pied de page court : intro de marque à gauche, liens Entreprise, Produit et Ressources à droite Utilisez-le lorsque les pages au-dessus sont déjà longues.
2. Finix : Modèle de pied de page SaaS sombre Elementor
Une bande violet inclinée lisant “try finix pour free” traverse le bord supérieur En dessous, le pied de page noir contient le logo, une courte intro et quatre colonnes de lien Cette bande est le dernier appel à l'action sur la page.
3. Klyro : Modèle de pied de page de newsletter Elementor Tech
Un bouton Demander une démo gratuite, des liens rapides, des liens d'assistance et un champ de newsletter partagent un pied de page. Il s'adapte aux logiciels qui vendent via des appels de démonstration et souhaite également une liste de diffusion.
4. Lead Lift : modèle de pied de page SaaS d'élémenteur
Colonnes Pages, Ressources et Société en haut, puis une barre inférieure qui répète quelques liens rapides à côté de la ligne de droits d'auteur.
5. Nexis : Modèle de pied de page SaaS léger Elementor
Un pied de page blanc avec une courte intro de marque, trois colonnes de liens et des icônes sociales, fermé par une barre de droits d'auteur La mise en page est simple, elle s'adapte donc à la plupart des marques.
6. Optivue : modèle de pied de page d'essai Elementor SaaS
La ligne du haut indique “Let's get started for 14 days” à côté d'un bouton d'essai jaune En dessous se trouvent une intro de produit d'une ligne et des colonnes Société et Social sur noir.
7. Sempla : Modèle de pied de page SaaS à quatre colonnes Elementor
Pages, utilitaires, ressources et aidez à obtenir une colonne chacun, et le logo et les droits d'auteur descendent dans une barre inférieure Il contient le plus de liens du groupe SaaS.
8. Zaplyte : modèle de pied de page SaaS Elementor
Les icônes sociales se trouvent sous le logo et les colonnes Entreprise, Aide et Ressources remplissent le côté droit d'une mise en page blanche épurée.
Modèles de pied de page avec un CTA ou une newsletter
Ces pieds de page s'ouvrent par un appel à l'action : une grande carte de titre, un formulaire d'essai ou une barre de newsletter Ils donnent aux visiteurs qui ont défilé vers le bas quelque chose à faire en plus de partir.
9. Agence CTA Box : Modèle de pied de page de boîte de contact de l'agence Élémentrice
Une boîte Contactez-nous décrite se trouve au-dessus de quatre colonnes sombres : une intro, des services, des études de cas et une inscription à la newsletter.
10. Barre de newsletter : modèle de pied de page de newsletter Elementor
Une barre de newsletter avec un champ de messagerie et un bouton S'abonner s'exécute en haut. En dessous se trouvent les colonnes Produits, Entreprise et Support et une colonne contact.
11. Techbyte : Modèle de pied de page CTA de l'agence d'éléments
Une carte arrondie sombre demande “Avez un projet génial ?” avec un bouton Démarrer à côté. Sous une fine ligne se trouvent le nom Techbyte, une intro à deux lignes et des liens sociaux textuels.
12. Clowdify : Modèle de pied de page de carte Elementor CTA
Le pied de page s'ouvre sur une carte violette arrondie, un gros titre et un bouton Essayez Cloud gratuitement Les liens viennent après.
13. Sabrion : Modèle de pied de page d'inscription à l'essai Elementor
Sur le violet, un champ de messagerie démarre un essai de 14 jours, et les colonnes ci-dessous contiennent les liens de l'entreprise, plus de liens et les coordonnées. Le formulaire fait le travail qu'un bouton effectue dans d'autres pieds de page.
14. Shiftflow : modèle de pied de page du tableau de bord de l'élémenteur
Liens de catégorie d'emploi d'un côté et inscription d'alerte d'emploi avec un bouton M'avertir de l'autre Les visiteurs qui n'ont pas trouvé d'emploi aujourd'hui peuvent demander à entendre parler du suivant.
Modèles de pied de page d'entreprise et de service locaux
Des pieds pour les entreprises de nettoyage, les dentistes, les plombiers, une clinique de thérapie, un restaurant, une agence immobilière et une firme informatique La plupart mettent le numéro de téléphone, l'adresse et les heures d'ouverture là où un client les attend.
15. HomeAxis : Modèle de pied de page immobilier Elementor
Téléphone, e-mail et emplacement du bureau se trouvent à côté des liens de navigation et de ressources Un acheteur sur n'importe quelle page d'inscription peut joindre un agent à partir d'ici.
16. Tecpart : Modèle de pied de page de l'entreprise informatique Elementor
Une liste à deux colonnes de chaque page plus des liens Suivez-nous, encadrés à la même largeur que l'en-tête Tecpart.
17. Balanciq : Modèle de pied de page de clinique de thérapie élémentaire
Une rangée de menus traverse le haut, avec les coordonnées et l'emplacement de la clinique en dessous sur la marine. Il maintient l'espacement calme du kit Balanciq.
18. Nettoyeur : Modèle de pied de page du service de nettoyage des éléments
Un pied de page blanc avec une liste de services, des liens rapides et des lignes de téléphone, de courrier électronique et d'adresse étiquetées.
19. Nettoyage : modèle de pied de page d'entreprise de nettoyage d'éléments
Un pied de page bleu profond avec un slogan d'une ligne et des colonnes Entreprise, Services et Social Il utilise le même bleu que l'en-tête Cleanery.
20. Culinaire : Modèle de pied de page de restaurant Elementor
Les liens de page se trouvent à côté d'une grille Instagram de quatre photos Pour un restaurant, les photos de nourriture dans le pied de page font plus qu'une autre colonne de liens.
21. Dentaire : Modèle de pied de page de clinique dentaire élémentaire
Services, heures d'ouverture, l'adresse de la clinique, téléphone et e-mail sur la marine Les patients peuvent vérifier vos heures depuis n'importe quelle page.
22. Grip : Modèle de pied de page d'agence d'élémenteur
Un très grand logo et un slogan prennent la moitié supérieure sur un fond olive foncé Adresse, téléphone et e-mail, deux liens de page et quatre liens sociaux sont assis en rangée en dessous.
23. Plumbiq : Modèle de pied de page de service de plomberie d'élémenteur
Un pied de page sombre avec des liens vers les pages, les détails des appels et des e-mails, la zone de service et les heures d'ouverture. Ce sont les choses que les gens vérifient avant de téléphoner à un plombier.
Modèles de pied de page de boutique et de blog
Pieds de page pour les magasins et les blogs : icônes de paiement, derniers messages, heures de bureau et nombreuses colonnes de liens pour les catégories.
24. Blog et heures de bureau : modèle de pied de page de blog Elementor
Un pied de page noir avec les derniers articles, un nuage de catégories et une table d'heures de travail Il fonctionne pour un blog qui gère également une boutique ou un studio.
25. Carte des heures de travail : modèle de pied de page des heures de travail de l'élémenteur
Adresse, téléphone et email à gauche et une carte bleue des heures de bureau à droite.
26. Payment Icons Store : modèle de pied de page du magasin Elementor
Liens produits, entreprises et support avec les icônes Visa, Mastercard et PayPal sous les Shoppers voir quelles cartes vous prenez avant le paiement.
27. Sartivo : Modèle de pied de page de magasin de mode Elementor
Cinq colonnes de liens pour les collections, les pages d'aide et d'entreprise, avec des icônes de paiement et un bloc de newsletter Il convient à un magasin avec de nombreuses catégories.
Modèles de pieds de page classiques et minimaux
Des pieds de page à quatre colonnes et des minimes centrés Ils s'adaptent à presque tous les sites, et plusieurs ne sont qu'un logo, un menu et des liens sociaux.
28. Contact sombre centré : modèle de pied de page de contact centré sur l'élémenteur
Le logo, une courte intro, l'adresse, le téléphone, le fax et les icônes sociales, le tout centré sur le noir.
29. Sociale centrée : modèle de pied de page social centré sur l'élémenteur
Un logo centré, une rangée de boutons sociaux colorés et un menu centré C'est l'un des deux plus petits pieds ici, à côté de Minimal Blue Social.
30. Dark Instagram : Modèle de pied de page à quatre colonnes sombre Elementor
Coordonnées, liens utiles, une note d'abonnement et une grille photo Instagram sur quatre colonnes sombres, avec une barre de droits d'auteur en bas.
31. Get Directions : Modèle de pied de page des directions des éléments
Un pied de page sombre avec un bouton Obtenir une direction, des services et des liens d'entreprise et une inscription à la newsletter.
32. Instagram léger : modèle de pied de page à quatre colonnes lumineux Elementor
La même mise en page à quatre colonnes sur blanc, avec un lien View More sous la grille Instagram.
33. Bleu minimal Social : modèle de pied de page minimal Elementor
Un pied de page bleu avec un logo centré et étiqueté Facebook, Twitter, Dribbble, Behance et les liens Instagram.
34. Cours en ligne : modèle de pied de page de cours en ligne Elementor
Un pied de page léger avec une liste de cours, des boutons sociaux colorés et une inscription à la newsletter pour les annonces de cours.
Quel modèle de pied de page correspond à votre site ?
| Votre site | Pied de page qui fonctionne habituellement | Commencer par |
|---|---|---|
| SaaS ou application | Invite d'essai au-dessus des liens, trois ou quatre colonnes de liens | Finix, Optivue, Sempla |
| Agence ou freelance | Grande carte de titre avec un bouton de contact | Techbyte, Clowdify, Grip |
| Entreprise de services locaux | Téléphone, adresse et heures d'ouverture en vue dégagée | Dentaire, Plumbiq, Nettoyant |
| Restaurant ou café | Liens de page et une grille photo | Culinaire, Instagram sombre |
| Boutique en ligne | Colonnes de catégorie, icônes de paiement, newsletter | Sartivo, Magasin d'icônes de paiement |
| Blog ou site de cours | Derniers messages ou liste de cours avec inscription | Blog et Heures d'ouverture, Cours en ligne |
| Portfolio ou site d'une page | Logo centré avec liens sociaux | Social centré, social bleu minimal |
Que mettre dans un pied de page de site Web
Un pied de page de site Web doit contenir les éléments recherchés par les visiteurs lorsqu'ils ne peuvent pas les trouver dans le menu. La plupart des bons pieds de page incluent ces sept éléments :
- Votre logo et une description d'une ligne, donc quelqu'un qui a atterri sur une page profonde sait de quel site il s'agit.
- Liens vers les pages que les gens recherchent le plus : tarifs, services, à propos, contact, carrières, aide ou documents.
- Coordonnées : téléphone, e-mail et adresse, avec le téléphone et l'e-mail comme liens cliquables.
- Horaires d'ouverture, si vous avez un magasin, une clinique ou un bureau que les gens visitent.
- Liens de profil social qui pointent vers vos comptes réels.
- Liens légaux : Politique de confidentialité, Conditions, et un cookie ou une page d'accessibilité si vous en avez besoin.
- Une ligne de copyright avec l'année en cours Une vieille année donne à un site un aspect abandonné.
Deux extras optionnels valent la peine d'être placés sur la plupart des sites : un formulaire de newsletter ou un court appel à l'action Si vous collectez des emails, notre liste des meilleurs plugins de newsletter WordPress peut vous aider à choisir l'outil derrière le formulaire Pour une entreprise locale, le Widget Heures d'affaires conserve les heures d'ouverture dans une table que vous pouvez mettre à jour.
Conception de pied de page de site Web : ce qui fonctionne et ce qu'il faut éviter
Nous avons vérifié les 34 pieds de page sur les largeurs du bureau et du téléphone avant d'écrire ce message, et chaque problème que nous avons trouvé a été résolu dans les démos en direct. Cet audit est une liste pratique de ce qu'il faut rechercher dans votre propre pied de page.
Ce que font les meilleurs pieds de page de site Web
- Donnez un travail à chaque colonne. Sempla divise les pages, les utilitaires, les ressources et l'aide, afin qu'un visiteur analyse les titres et sache où chercher.
- Mettez une action au-dessus des liens Finix, Optivue et Clowdify demandent un essai avant les colonnes de liens, ce qui attrape les visiteurs qui lisent jusqu'au bout.
- Rendre les coordonnées cliquables Les numéros de téléphone doivent utiliser
tel:liens et adresses e-mailmailto:(, donc un clic sur un téléphone démarre l'appel ou ouvre l'application de messagerie. - Faites correspondre l'en-tête Les pieds de page du kit tels que Cleanery, Tecpart et Balanciq réutilisent les couleurs et la largeur de l'en-tête, de sorte que le haut et le bas de chaque page correspondent.
- Gardez le contraste élevé sur les fonds sombres. Les liens gris clair sur bleu marine ou noir sont faciles à lire, contrairement aux étiquettes gris moyen.
Erreurs courantes de conception de pied de page
Ceux-ci sont apparus encore et encore dans les modèles originaux Tous sont corrigés maintenant, et ils valent la peine d'être vérifiés dans n'importe quel pied de page que vous construisez ou achetez :
- Texte de l'espace réservé laissé dans : dix-sept pieds de page avaient encore Lorem Ipsum ou un exemple de copie, et quelques-uns nommaient la mauvaise marque, comme le pied de page Finix qui disait “ termix pour free”.
- Les mêmes liens dans chaque colonne : neuf pieds de page répétaient les mêmes liens sous différents titres de colonnes Construisez un menu WordPress séparé pour chaque colonne.
- Les étiquettes qui ne correspondent pas à la valeur, telles que “Phone :” au-dessus d'une adresse e-mail.
- Boutons et texte à faible contraste : un bouton de démonstration contenait du texte blanc sur vert clair à 2,0 :1. WCAG demande 4,5 :1 pour le texte normal.
- Formulaires d'inscription sans bouton de soumission ou avec un shortcode brut affiché car le plugin de formulaire manquait.
- Icônes sociales sans lien et année de droit d'auteur vieille de plusieurs années.
Conseils de pied de page de site Web mobile
Sur les téléphones, un pied de page à quatre colonnes devient une longue colonne, donc l'ordre compte. Mettez d'abord les coordonnées et les liens les plus utilisés et la newsletter après eux. Créez des liens et des boutons d'au moins 44 px de haut et vérifiez qu'aucun élément ne dépasse le bord de l'écran, ce qui provoque un défilement latéral. Dans Elementor, passez à la vue mobile dans l'éditeur et définissez les largeurs des colonnes à 100 % si un conteneur ne s'empile pas tout seul.
Pour plus d'idées de mise en page, le groupe Nielsen Norman a une utilité guide des modèles de conception de pieds de page avec des exemples de ce qu'il faut inclure pour différents types de sites.
Comment ajouter un modèle de pied de page Elementor à votre site
Un pied de page est un modèle de générateur de thèmes : vous le construisez une fois et il apparaît au bas de chaque page Le constructeur de pieds dans Master Addons est gratuit et fonctionne avec Core Elementor, vous n'avez donc pas besoin d'Elementor Pro.
La vidéo ci-dessous prend l'un de ces pieds de page de la bibliothèque de modèles à un site en direct Les mêmes étapes sont écrites sous celui-ci.
- Dans votre tableau de bord, rendez-vous sur Additions principales → Créateur de thèmes, cliquez Ajouter un nouveau modèle(en), définissez le type sur Pied et cliquez Modifier avec Elementor.
- Dans l'éditeur, cliquez sur le Modèles de modules complémentaires principaux bouton, ouvrez le Pieds onglet, choisissez un design et cliquez Insérer.
- Remplacez le logo et le texte, pointez chacun Widget de menu Nav dans votre propre menu WordPress, et ajoutez vos URL de téléphone, e-mail et profil social réels Si le pied de page a un formulaire, connectez-le au vôtre Formulaire de contact 7 formulaire.
- Ouvrir le Conditions onglet, ensemble Inclure → Site entier et publier.
- Si votre thème imprime toujours son propre pied de page sous le nouveau, désactivez le pied de page du thème dans ses paramètres ou dans Customizer.
Le guide du constructeur de thèmes Footer affiche chaque étape avec une capture d'écran Si vous préférez modifier votre pied de page existant plutôt que de le remplacer, suivez notre didacticiel sur comment modifier le pied de page dans WordPress avec Elementor.
Pied de page, en-tête, section ou kit : de quel modèle avez-vous besoin ?
Un modèle de pied de page couvre une partie du site La même bibliothèque a modèles d'en-tête pour le haut de la page, Modèles de section d'élémentateur pour les bandes simples telles que les prix ou la FAQ, complet modèles de page, et kits de modèles cela regroupe un en-tête, un pied de page et chaque page dans un style correspondant.
Les pieds de page marqués Pro dans la bibliothèque nécessitent un Licence Master Addons Pro(en), qui déverrouille également les kits complets d'où proviennent la plupart de ces pieds de page Le constructeur de pieds qui les place sur votre site reste libre dans tous les cas.
Questions fréquemment posées
Qu'est-ce qu'un modèle de pied de page Elementor ?
Un pied de page prêt à l'emploi enregistré en tant que modèle Elementor Il contient généralement le logo, les liens de la page clé, les coordonnées, les liens sociaux et la ligne de droits d'auteur Vous l'insérez dans un pied de page Theme Builder afin que le même pied de page apparaisse au bas de chaque page.
Comment ajouter un pied de page dans Elementor ?
Accédez à Addons principaux → Générateur de thèmes, ajoutez un nouveau modèle avec le type Footer et ouvrez-le dans Elementor Insérez un design à partir de l'onglet Footers de la bibliothèque de modèles Master Addons, modifiez le texte et les liens, définissez la condition pour inclure → Site entier et publiez.
Existe-t-il un générateur d'en-tête et de pied de page dans Elementor ?
Elementor Pro en a un. Master Addons dispose également d'un générateur de thèmes avec des modèles d'en-tête et de pied de page, et ses constructeurs d'en-tête et de pied de page sont gratuits, vous pouvez donc créer un pied de page à l'échelle du site avec des modules complémentaires principaux Elementor et Master seuls.
Que dois-je inclure dans un pied de page de site Web ?
Votre logo et une description d'une ligne, des liens vers les pages que les gens recherchent le plus, les coordonnées, les liens de profil social, des pages légales telles que Politique de confidentialité, et une ligne de droits d'auteur avec l'année en cours Ajouter un formulaire de newsletter ou un appel à l'action si vous voulez un point de conversion de plus.
Qu'est-ce qui fait un bon design de pied de page ?
Un bon pied de page est facile à numériser et contient du contenu réel. Chaque colonne a son propre objectif, le texte du lien présente un contraste d'au moins 4,5 :1 par rapport à l'arrière-plan, les coordonnées sont cliquables et la mise en page se superpose à une colonne sur les téléphones.
Quelles sont les erreurs courantes de conception du pied de page ?
Texte d'espace réservé laissé dans, les mêmes liens répétés dans chaque colonne, les icônes sociales sans lien, une année de copyright qui est vieux de ans, le texte à faible contraste sur les fonds sombres, et les formulaires d'inscription sans un bouton soumettre Nous avons trouvé et corrigé tous ces tout en préparant les modèles sur cette page.
Où puis-je trouver des modèles de pied de page Elementor ?
Elementor Pro en inclut quelques-uns dans sa bibliothèque Cette page affiche les 34 pieds de page de la bibliothèque de modèles Master Addons, chacun avec une démo en direct, et vous les insérez depuis l'onglet Footers à l'intérieur de l'éditeur Elementor.
Choisissez un pied de page, réglez-le une fois
Choisissez le groupe qui correspond à votre site, insérez le pied de page qui convient et échangez dans vos propres détails Si vous changez d'avis plus tard, ouvrez le même modèle de Theme Builder, supprimez l'ancien design et insérez-en un autre La condition d'affichage reste telle quelle.
Lecture connexe: comment importer un modèle Elementor, Modèles d'en-tête d'élémentor et Guide propre de l'élémenteur pour créer un pied de page.
