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 les 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, comme une adresse professionnelle ou des coordonnées, pour ne citer que quelques amp .
Les en-têtes et 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 modifier le code ; C’est à ce moment-là que plugin Page Builder s’avèrent utiles. Vous pouvez les utiliser pour créer et modifier des composants de page Web sans connaître aucun 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 la création de ces composants). Alors téléchargez Elementor Pro et assurez-vous qu'il est activé.
Elementor est le constructeur de pages le plus avancé, permettant aux utilisateurs d'utiliser des éléments premium pour créer de superbes designs et mises en page. C’est très bénéfique pour les novices qui n’ont aucune connaissance préalable en 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 réalisé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 :
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 prédéfinie de la section d’en-tête 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 à droite.
Les possibilités sont infinies et vous pouvez créer la mise en page de votre choix.
J'ai choisi le n° 7 modèles d'en-tête prédéfinis ; 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 d'en-tête copié .
Lorsque vous avez trouvé le modèle d'en-tête souhaité, 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.
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 votre page ou sur tout 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, la police, les couleurs et le langage général de la marque de l'entreprise.
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.
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 publications, à l’instar des en-têtes.
Les pieds de page sont souvent négligés, ce qui constitue 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 les droits d'auteur, les conditions d'utilisation et de confidentialité, un plan du site, les informations de contact, des cartes, la navigation sur le site Web et bien plus encore, en fonction des paramètres que vous choisissez.
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.
Sur le panneau d'administration WordPress, survolez Modèles et cliquez sur Ajouter nouveau pour créer notre en-tête.
Une fenêtre modale apparaîtra une fois que vous aurez été acheminé. 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 plaît :
Il devrait apparaître en haut de la section d'édition d'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 Live 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 désormais être dans l'en-tête si vous actualisez l'interface Elementor :
Après cela, vous pouvez apporter les modifications souhaitées.
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 disposez de 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 le résultat de notre modification :
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 amp de page de notre site en direct :
Le processus de création d’un pied de page est assez similaire à celui de construction d’un en-tête. Pour en créer un, créez un nouveau modèle de pied de page comme celui-ci :
Choisissez ensuite un modèle. Les pieds de page se présentent sous différentes formes et tailles. Certains incluent des informations sur l’entreprise, tandis que d’autres disposent de 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 :
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 si nécessaire ; Voici à quoi ressemble notre révision :
Publiez le pied de page une fois terminé :
Voici à quoi ressemble le résultat final. L'en-tête et le pied de page sont désormais utilisés sur notre site Web :
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 à l’affichage mobile, vous devez savoir comment votre design apparaîtra sur l’écran mobile. Les commutateurs réactifs au bas de la section de la barre latérale d'Elementor peuvent modifier les versions mobiles et à onglets.
Vous pouvez tester la réactivité de votre en-tête et pied de page de différentes manières. Par amp , vous pouvez utiliser des outils tels que Browserstack, CrossBrowser Testing et Google Resizer pour vous assurer que vos pages Web sont aussi réactives que possible. Vous pouvez également le faire manuellement en expérimentant différents appareils.
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 possède 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 grâce à l'utilisation de modules complémentaires gratuits, permettant aux utilisateurs de personnaliser leurs sites Web avec des fonctionnalités plus avancées.
Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…
Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…
Le thème Newspaper est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…
Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il…
Un en-tête est généralement la première chose qu’une personne voit lorsqu’elle visite votre site Web,…
Notre propre constructeur de pages, Avada Builder, est désormais disponible en deux interfaces : Avada…