Les en-têtes et pieds de page d'un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit des liens de navigation qui simplifient la navigation vers différentes parties d'un site Web. D'autre part, le pied de page contient des informations vitales dont les visiteurs du site Web peuvent avoir besoin, telles qu'une adresse professionnelle ou des coordonnées, pour ne citer que quelques amp .
Les en-têtes et les pieds de page sont fournis par le thème actuel d'un utilisateur sur WordPress. Ceux-ci sont généralement bien conçus et adaptés à la majorité de leurs utilisations. Cependant, si vous souhaitez personnaliser vos thèmes, vous devrez changer le code ; C'est à ce moment-là que les plugin Page Builder sont utiles. Vous pouvez les utiliser pour créer et modifier des composants de page Web sans connaître le code.
Ce tutoriel nous apprendra comment créer un en-tête et un pied de page de site Web. Elementor Pro sera utilisé (puisque la version de base d'Elementor n'inclut pas les fonctionnalités les plus importantes pour créer ces composants). Alors téléchargez Elementor Pro et assurez-vous qu'il est activé.
- Pourquoi devriez-vous choisir Elementor comme créateur de page ?
- Elementor vous permet de choisir la mise en page principale de votre en-tête et pied de page personnalisés.
- Qu'est-ce qu'un en-tête et à quoi sert-il ?
- Qu'est-ce qu'un pied de page, exactement ?
- Comment faire un en-tête
- Développer un modèle d'en-tête
- Apporter des modifications au menu d'en-tête
- Publication d'en-tête
- Comment faire un pied de page
- Développer un modèle de pied de page
- Modifications du pied de page
- Produit fini
- Examinez vos sections d'en-tête et de pied de page pour la réactivité.
- Mettre fin aux choses
Pourquoi devriez-vous choisir Elementor comme créateur de page ?
Elementor est le constructeur de pages le plus avancé, permettant aux utilisateurs d'utiliser des éléments premium pour créer des designs et des mises en page magnifiques. Il est très bénéfique pour les novices qui n'ont aucune connaissance préalable du codage. L'éditeur glisser-déposer d'Elementor permet aux utilisateurs de déplacer des widgets et des éléments.
Elementor est un constructeur de pages visuel qui permet aux utilisateurs de voir comment leurs pages apparaissent sans changer de mode.
Un autre argument convaincant en faveur de l'utilisation d'Elementor est que la plupart des travaux peuvent être effectués sans frais. Leur édition gratuite est plus que capable de fournir des capacités d'édition de site adéquates. Cependant, nous passerons en revue les versions gratuites et payantes afin que vous puissiez choisir celle qui correspond le mieux à vos besoins.
Voici quelques-uns des aspects importants d'Elementor qui en valent la peine :
- La fonctionnalité glisser-déposer est prise en charge.
- Il a un grand nombre de modèles.
- Il y a plus de 90 widgets en tout.
- Aucun codage n'est requis pour un support réactif.
- Des options de rétablissement et d'annulation sont disponibles.
- La sauvegarde automatique est disponible.
Elementor vous permet de choisir la mise en page principale de votre en-tête et pied de page personnalisés.
Il serait utile que vous décidiez de la disposition générale des sections d'en-tête et de pied de page souhaitées avant de développer un en-tête unique. L'examen de la disposition de la section d'en-tête prédéfinie peut vous offrir de nombreux choix.
Vous pouvez choisir parmi différentes sections d'en-tête ; l'en-tête le plus courant et le plus moderne comporte un logo de site dans le coin le plus à gauche, une barre de navigation au milieu et une section de barre de recherche sur la droite.
Les possibilités sont infinies et vous pouvez créer n'importe quelle disposition.
J'ai choisi le modèle d'en-tête préfabriqué n ° 7; Il s'agit de l'approche la plus courante et la plus simple pour utiliser un en-tête sur un site Web WordPress. Copiez et collez le nom du modèle d'en-tête dans Modèles > En-tête > modèle de recherche > collez le nom de l'en-tête copié .
Lorsque vous avez trouvé le modèle d'en-tête que vous souhaitez, sélectionnez "Modifier avec Elementor" et vous serez redirigé vers la section du générateur d'en-tête Elementor Pro.
Que la fête commence.
Qu'est-ce qu'un en-tête et à quoi sert-il ?
La partie supérieure de votre page Web est appelée « en-tête de site Web ». L'en-tête est généralement le même sur l'ensemble de votre site Web. Cependant, certains sites Web utilisent des en-têtes différents pour différentes parties du site.
La conception de votre en-tête donnera à vos utilisateurs leur première impression de votre site Web, qu'ils soient arrivés sur votre page d'accueil, sur la page ou sur un autre contenu individuel. Et, s'il est bien conçu, il attirera l'attention de l'utilisateur et l'incitera à continuer à faire défiler et à lire.
L'en-tête peut également contribuer à la promotion de l'identité de marque de votre entreprise.
J'utilise des fonctionnalités telles que le logo de l'entreprise, la police, les couleurs et le langage général de la marque.
La navigation sur le site, la recherche sur le site, un panier (pour les sites de vente), des boutons d'appel à l'action (CTA) et d'autres fonctionnalités qui améliorent l'expérience utilisateur et augmentent les taux de conversion se trouvent tous dans les en-têtes.
Qu'est-ce qu'un pied de page, exactement ?
Un pied de page est une section d'une page Web qui apparaît au bas de la page. Ils sont généralement affichés en permanence sur tout le site Web, sur toutes les pages et tous les articles, à la manière des en-têtes.
Les pieds de page sont souvent négligés, ce qui est un gaspillage de potentiel, étant donné qu'ils apparaissent sur chaque page du site. Ils sont également cruciaux pour les en-têtes.
La conception de votre pied de page peut afficher des informations utiles et vitales telles que l'inscription à la newsletter, les informations sur le droit d'auteur, les conditions d'utilisation et la confidentialité, un plan du site, des informations de contact, des cartes, la navigation sur le site Web et bien plus encore, en fonction des paramètres que vous choisissez.
Comment faire un en-tête
Nous allons créer un en-tête personnalisé dans cette section. Ne vous inquiétez pas si cela semble intimidant ; nous ne partirons pas de zéro. Au lieu de cela, nous utiliserons les modèles d'Elementór Pro, conçus par l'équipe de conception d'Elementor.
Développer un modèle d'en-tête
Sur le panneau d'administration WordPress, survolez Modèles et cliquez sur Ajouter un nouveau pour créer notre en-tête.
Une fenêtre modale apparaîtra une fois que vous aurez été routé. Sélectionnez En-tête dans le menu déroulant, nommez l'en-tête et cliquez sur " Créer un modèle ":
Cela lancera l'éditeur Elementor. Après cela, une liste de modèles parmi lesquels choisir vous sera présentée. Alors choisissez-en un qui vous plait :
Il devrait apparaître en haut de la section d'édition Elementor une fois que vous avez choisi un modèle :
Création d'un logo : La première étape consiste à créer un logo. Définissez le logo dans l'éditeur en direct du site pour le placer dans l'en-tête. Choisissez un logo en cliquant sur Identité du site..
Une fois que vous avez choisi un logo, cliquez sur Publier .
Le logo de votre site devrait maintenant être dans l'en-tête si vous actualisez l'interface Elementor :
Après cela, vous pouvez apporter les modifications que vous souhaitez.
Apporter des modifications au menu d'en-tête
La prochaine chose que nous devrions faire est de changer le menu. Si vous avez généré un menu, le modèle l'intégrera automatiquement :
Voici notre structure de menu, que vous pouvez voir reflétée dans le modèle d'en-tête :
Si vous avez plusieurs menus, vous pouvez mettre à jour le contenu si nécessaire.
Vous pouvez modifier ses propriétés comme n'importe quel autre widget.
Si nous devons ajouter plus d'éléments, nous pouvons ajouter plus de sections à notre en-tête :
Commençons par ajouter un en-tête et quelques icônes de réseaux sociaux :
Après cela, vous pouvez apporter les modifications que vous souhaitez. Voici comment s'est déroulé notre montage :
Publication d'en-tête
Vous pouvez maintenant publier l'en-tête une fois que vous avez fini de le modifier. Nous utiliserons l'en-tête sur l'ensemble de notre site dans l'exemple amp -dessous, nous sélectionnerons donc ce choix après avoir sélectionné Ajouter une condition :
Et voici un ex amp le d'une page de notre site en direct:
Comment faire un pied de page
Développer un modèle de pied de page
Le processus de création d'un pied de page est assez similaire à celui de la création d'un en-tête. Pour en créer un, créez un nouveau modèle de pied de page comme celui-ci :
Ensuite, choisissez un modèle. Les pieds de page sont disponibles dans une variété de formes et de tailles. Certains incluent des informations sur l'entreprise, tandis que d'autres ont des formulaires de contact. Sélectionnez un modèle adapté à vos besoins.
Le modèle que nous avons choisi pour notre site Web est le suivant :
Modifications du pied de page
Vous verrez l'en-tête dès que vous commencerez à éditer (si vous définissez la condition qu'il apparaisse sur toutes les pages).
Modifiez le pied de page au besoin ; Voici à quoi ressemble notre révision :
Publiez le pied de page une fois qu'il est terminé :
Produit fini
Voici à quoi ressemble le résultat final. L'en-tête et le pied de page sont maintenant utilisés sur notre site Web :
Examinez vos sections d'en-tête et de pied de page pour la réactivité.
Il s'agit de la phase la plus importante et vous devez vous assurer que vos sections d'en-tête et de pied de page sont réactives. Étant donné qu'un menu pleine largeur ne convient généralement pas à la vue mobile, vous devez savoir comment votre conception apparaîtra sur l'écran mobile. Les commutateurs réactifs au bas de la section de la barre latérale Elementor peuvent modifier les versions mobile et tab.
Vous pouvez tester la réactivité de votre en-tête et de votre pied de page de différentes manières. Ex amp le, vous pouvez utiliser des outils comme Browserstack, Crossbrowser Test et Google Resizer pour faire en sorte que vos pages Web sont aussi sensibles que possible. Vous pouvez également le faire manuellement en expérimentant avec différents appareils.
Mettre fin aux choses
J'espère que ce guide vous a aidé à développer rapidement vos sections d'en-tête et de pied de page uniques à l'aide d'Elementor Pro. WordPress a de nombreuses fonctionnalités, mais il ne permet que quelques modifications dans les sections d'en-tête et de pied de page, finalement corrigées avec le constructeur de pages Elementor Pro. Avec un bien meilleur contrôle sur les éléments de votre site, vous pouvez désormais mieux démontrer la vision de votre site. De plus, les fonctionnalités d'Elementor ont été améliorées en utilisant des modules complémentaires gratuits, permettant aux utilisateurs de personnaliser leurs sites Web avec des capacités plus avancées.
