Tutoriel complet sur la création d'un pied de page professionnel à l'aide de blocs HTML dans le thème Woodmart

Woodmart intégré Bloc HTML Les fonctionnalités d'édition s'adaptent à divers scénarios de conception, les pieds de page personnalisés étant l'une des applications les plus courantes. L'utilisation de Page Builder permet de combiner de manière flexible des logos, des icônes sociales, des listes de menus, des formulaires d'abonnement et des détails de paiement, garantissant ainsi une plus grande cohérence structurelle entre les pages. Ce tutoriel décrit le processus complet, de la création de blocs HTML à l'activation des pieds de page dans votre thème.

Créer un bloc HTML dédié au pied de page

Accédez au backend pour créer un nouveau bloc.

Accédez au tableau de bord, sélectionnez Blocs HTML, cliquez sur Ajouter nouveau et définissez un titre pour le bloc. Ensuite, ouvrez l'interface d'édition Page Builder pour commencer à structurer la mise en page.

Créer un pied de page supérieur : logo et icônes sociales

Ajoutez un conteneur et insérez le logo.

Ajoutez un conteneur à la page, qui servira depieds de pageLa structure de la première ligne.
Sélectionnez le composant image dans la liste des éléments et insérez le fichier logo.
Définissez la largeur dans les paramètres « Avancés », avec l'unité réglée sur px, afin de faciliter le contrôle des proportions visuelles.

Ajouter un module d'icônes sociales

Insérez les boutons sociaux dans le même conteneur :

• Entrer le texte de l'étiquette
• Sélectionnez le type approprié
• Changer le style de l'icône en couleur
• Définissez la taille de l'icône sur Petite.
• Définissez la balise sur Inline dans Style pour afficher l'icône à côté du texte sur la même ligne.

Ajustez la mise en page et l'espacement

Pour que logo Les icônes sont disposées de manière ordonnée et peuvent être modifiées :

• Justifier le contenu : espace entre
• Aligner les éléments : Centre

De plus, intégrez des marges supérieures et un remplissage inférieur dans les paramètres avancés pour obtenir une plus grande harmonie générale.

Construction de la zone principale du pied de page : menu et section d'abonnement

Établir la structure du conteneur principal

Ajoutez un nouveau conteneur comme deuxième section du pied de page, en le divisant en colonnes gauche et droite.
Le côté gauche est réservé à l'affichage de plusieurs ensembles de menus, tandis que le côté droit est destiné à présenter les titres, les formulaires d'abonnement et les informations relatives aux modes de paiement.

À gauche : structure de menu repliable (basculer + liste de menus supplémentaires)

Ajoutez un élément Toggle et configurez le menu.

Ajoutez un petit conteneur dans la colonne de gauche et insérez un élément Toggle.
Après avoir défini le titre, intégrez la liste de menus supplémentaires en interne.
Supprimez le titre par défaut ; les éléments du menu peuvent être modifiés sous forme de liens, de texte ou d'icônes.

Configurer le bureau pour qu'il soit toujours visible

Définissez le statut sur « Toujours développé » dans Toggle afin que les éléments du menu soient directement visibles dans l'environnement de bureau.

Dupliquer pour générer trois ensembles de menus

Dupliquez deux fois l'ensemble du conteneur du menu, en modifiant le contenu de l'en-tête pour chaque groupe afin de clarifier la catégorisation du menu en trois colonnes.

Ajuster la disposition

Modifiez le conteneur principal et définissez l'orientation sur l'alignement horizontal :

• Direction : horizontale
• Aligner : Centre

Le menu s'affichera sur la même ligne.

Côté droit : en-tête, formulaire Mailchimp et détails de paiement

Ajouter une zone de titre de texte

Insérez le titre de la section, en activant uniquement les champs titre et texte.
Définissez l'alignement à gauche dans Style et configurez la palette de couleurs.

Définir le style du conteneur d'arrière-plan

Ajouter cette zone :

• couleur de fond
• Remplissage d'environ 20 pixels
• coin arrondi

Rendez l'ensemble plus cohérent.

Rejoignez Mailchimp formulaire (document)

Ajoutez le formulaire Mailchimp dans le conteneur d'arrière-plan, en modifiant son orientation pour un alignement horizontal afin que les champs de saisie et les boutons du formulaire soient disposés sur une seule ligne :

• Direction : Rame
• Justifier le contenu : espace entre
• Aligner les éléments : Centre

Ajouter des icônes de mode de paiement et des encadrés d'information

Ajoutez une icône de mode de paiement sous le formulaire, puis insérez une boîte d'information et activez les champs titre et contenu.
Les dimensions des icônes peuvent être personnalisées pour mieux s'adapter à la mise en page.

Compatible avec les tablettes et les appareils mobiles

Ajuster la largeur du conteneur et le comportement d'empilement

En mode tablette et mobile, définissez la largeur du conteneur sur 100 % pour activer les sauts de ligne automatiques pour les colonnes.
L'orientation principale du conteneur a été modifiée pour devenir verticale, ce qui a entraîné un agencement des colonnes les unes au-dessus des autres.

Intégrez des espaces blancs appropriés.

Ajoutez un remplissage inférieur au conteneur du menu pour améliorer la lisibilité.

Activer le pied de page personnalisé dans le thème Woodmart

Sélectionnez le bloc HTML comme contenu à afficher dans le pied de page.

Accédez aux paramètres du thème et localisez Woodmart (utilisé comme expression nominale) Pied de page Sur la page, sélectionnez le bloc HTML que vous venez de créer dans la zone de contenu du pied de page.
Après avoir enregistré et actualisé l'interface utilisateur, le pied de page apparaîtra tel que configuré.

Inspection complète à la fin des travaux

Enfin, vérifiez l'apparence de la page sur les ordinateurs de bureau, les tablettes et les appareils mobiles, en vous assurant que les transitions entre les menus, le positionnement des icônes, l'affichage des formulaires et l'espacement correspondent à vos attentes.
En suivant les étapes ci-dessus, vous avez désormais créé un pied de page entièrement fonctionnel, clairement structuré et visuellement cohérent.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.