Comment créer des modèles de page personnalisés et flexibles avec les conteneurs Flexbox d'Elementor : un tutoriel détaillé

Les modèles personnalisés d'une page vous donnent plus de flexibilité et de contrôle créatif dans la conception de votre site web, en particulier pour les sites riches en contenu tels que les pages de blog, les pages de présentation de produits ou les pages de détails de services. Dans cet article, nous allons voir comment créer un modèle personnalisé d'une page en utilisant la fonction de conteneur Flexbox d'Elementor, avec des exemples spécifiques tout au long de l'article.

Qu'est-ce qu'un modèle d'une page ?

Modèles de page unique est un fichier de mise en page personnalisé utilisé dans WordPress pour un seul élément de contenu tel qu'un article de blog ou une page de produit. Il remplace le fichier single.php peut-être singulier.php Documentation.Vous pouvez concevoir la mise en page en fonction des besoins de votre site web..

Exemple :

Supposons que vous teniez un blog et que vous souhaitiezChaque page d'articleTous contiennent les éléments suivants :

• L'en-tête affiche le titre de l'article et les boutons de partage.
• La section de texte principal affiche le contenu de l'article et les images qui l'accompagnent.
• La barre latérale droite affiche des articles connexes ou des publicités.

Cela peut être facilement réalisé avec des modèles d'une page.

---

Pourquoi choisir les conteneurs Flexbox ?

Le conteneur Flexbox est un outil de mise en page moderne fourni par Elementor qui est plus flexible que les mises en page traditionnelles en sections et en colonnes. Voici ses principaux avantages :

1. dextéritéLes modèles horizontaux et verticaux s'adaptent facilement aux différentes tailles d'écran.
2. Un soutien réactifLes performances sont constantes sur les mobiles et les ordinateurs de bureau, sans qu'il soit nécessaire de procéder à des ajustements supplémentaires.
3. l'optimisation des performancesLa hiérarchie du DOM est réduite pour un chargement plus rapide des pages.

Étapes pour créer un modèle personnalisé d'une page (en anglais)page du blog(à titre d'exemple)

Les étapes suivantes expliquent comment créer un modèle d'une page à partir de zéro, en prenant l'exemple de la conception d'une page d'article de blog.

Étape 1 : Créer un nouveau modèle

1. Connectez-vous à votre tableau de bord WordPress et naviguez vers Modèles > Constructeur de thèmes.

2. frappe (sur le clavier) page uniquepuis sélectionnez + Ajouter un nouveau modèle.

3. Fermez la fenêtre contextuelle de la bibliothèque de modèles et accédez à l'éditeur Blank Canvas d'Elementor.

Étape 2 : Créer la section de l'en-tête

1. ajouter des conteneurs de titres

frappe (sur le clavier) + Icône Créez un nouveau conteneur Flexbox et sélectionnez Single Row Layout.

• ampleur: Réglé sur En boîteLe contenu est centré.

• hauteur minimale: Réglé sur 100pxVeillez à ce que la zone d'en-tête soit suffisamment visible.
• alignement: Définir l'alignement du contenu sur "espacement".Répartissez les boutons de titre et de partage aux deux extrémités du conteneur..

2. ajouter un widget de titre

Dans le panneau Elementor, définissez Widget du titre de l'article Glissez et déposez dans le conteneur. Celui-ci affichera dynamiquement le titre de la page en cours.

• Configurez les paramètres du titre :
  • TitreLe titre de l'article en cours est affiché par défaut de manière dynamique, sans modification supplémentaire.
  • Balise HTML: Réglé sur H1pour vous assurer que le titre est conforme aux meilleures pratiques en matière de référencement.
  • LienSi vous souhaitez que le titre renvoie à l'article en cours, vous pouvez le faire dans la rubrique Lien Sélectionnez "Dynamic -> Post URL".

3. ajouter des boutons de partage

commandant en chef (militaire) Widget bouton de partage Faites un glisser-déposer à droite de l'en-tête pour configurer les plateformes sociales telles que Facebook, Twitter, etc.

et réglez le style du bouton :

• Les coins arrondis des boutons de réglage modernisent le design.

• Redimensionnez les boutons pour qu'ils soient faciles à cliquer sur les ordinateurs de bureau et les téléphones portables.

Effets d'instance :

Lorsqu'un utilisateur ouvre un article de blog particulier, le titre de l'article et les boutons de partage s'affichent en haut, ce qui permet aux utilisateurs de partager rapidement le contenu.

Étape 3 : Créer les dispositions du corps et des barres latérales

1. créer une présentation en deux colonnes

frappe (sur le clavier) + Icône Créez un nouveau conteneur Flexbox et choisissez une disposition en deux colonnes.

• Le conteneur de gauche est utilisé pour afficher le corps du texte.
• Le conteneur de droite est utilisé pour afficher le contenu de la barre latérale.

2. largeur de configuration

• Conteneurs de gauche: Réglez la largeur sur 75%L'objectif est d'afficher le corps du texte.
• Conteneur de droite: Réglez la largeur sur 25%Il s'agit d'une zone d'affichage pour les informations complémentaires.

Étape 4 : Ajouter le corps du texte

1. ajouter le contenu de l'article dans le conteneur de gauche

commandant en chef (militaire) Widget de contenu de l'article Glissez et déposez dans le conteneur de gauche. Le contenu de la page actuelle, tel que le texte et les images de l'article, sera ainsi dynamiquement alimenté.

2. ajouter des fonctions d'appui

• Exemple 1 : Liens vers des articles connexes
  Ajouter sous le texte Widgets intégrésVoici quelques exemples de la manière de procéder : - Afficher dynamiquement les titres des 3 articles en question, par exemple :

• Exemple 2 : Zone de commentaires
  Utilisez le widget de commentaires par défaut de WordPress ou un plugin tiers pour intégrer la fonctionnalité de commentaires dans le corps du texte.

Étape 5 : Ajouter le contenu de la barre latérale

1. ajouter le widget catalogue

commandant en chef (militaire) Widget catalogue Faites un glisser-déposer dans le conteneur de droite et définissez les niveaux des titres (par exemple, H2 et H3).

2. ajouter d'autres widgets

• bouton d'appel à l'actionAjouter un bouton d'abonnement au bas du catalogue.

• espace publicitaireWidget d'image : Utilisez le widget d'image pour placer des images publicitaires, des cours ou des outils recommandés.

Étape 6 : Optimiser le responsive design

1. Passez à la vue mobile dans l'éditeur Elementor et ajustez la mise en page :
   • Réglez la largeur de la barre latérale à 100% de manière à ce qu'elle s'empile sous le corps du texte.

2. Ajustez la taille des polices des titres et du corps du texte pour les rendre plus clairs et plus faciles à lire sur les appareils à petit écran.

Exemple :

Sur mobile, le widget du catalogue s'affichera sous le corps du texte tout en conservant tous les liens cliquables.

Étape 7 : Définir les conditions d'affichage et sauvegarder

1. Cliquez sur le coin supérieur droit de l'écran poste pour définir les conditions d'affichage :
   • Appliquez le modèle à toutes les pages de l'article de blog.
   • Il peut également être appliqué uniquement à des catégories spécifiques d'articles si vous le souhaitez.

2. Enregistrez le modèle et prévisualisez l'effet.

Exemple de résultats : modèle de page d'article de blog

Les étapes ci-dessus vous permettront d'obtenir un modèle de page d'article de blog complet avec les éléments suivants :

• Titre de l'article et boutons de partage en haut de la page.
• La zone principale affiche le corps du texte avec des recommandations d'articles connexes et des commentaires.
• La barre latérale droite contient un catalogue et des espaces publicitaires pour faciliter la navigation et l'interaction.

Résumé :

En utilisant le conteneur Flexbox d'Elementor, il est facile de créer des modèles personnalisés d'une page pour des articles de blog, des pages de produits ou des pages de détails de services. Suivez les étapes de configuration détaillées, y compris les dispositions de la zone d'en-tête, du corps et de la barre latérale, ainsi que de la table des matières et de la barre d'outils.appel à l'actionLes puissantes fonctionnalités de Flexbox permettent une mise en page réactive, optimisant l'expérience de l'utilisateur et simplifiant la hiérarchie du DOM afin d'améliorer la vitesse de chargement des pages.

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 : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.