Comment utiliser le générateur de disposition d'en-tête, de pied de page et de colonne Avada

Notre propre constructeur de pages, Avada Builder, est désormais disponible dans deux interfaces : Avada Builder, qui est notre constructeur de pages filaires back-end, et Avada Live, qui est notre constructeur front-end, qui n'a été introduit que récemment avec Avada 6.0. .

En utilisant notre système simple de conteneurs, de colonnes et d'éléments, les deux versions d'Avada Builder vous permettent de concevoir facilement de belles mises en page pour votre site Web. Avada Builder est un outil fantastique pour les concepteurs de sites Web modernes et les propriétaires de sites, car il leur donne un contrôle total sur tous les aspects du contenu et de la mise en page de la page. Les deux versions d'Avada Builder génèrent également le même code. Ils sont complètement interchangeables, vous permettant d'avoir le meilleur des deux mondes avec Avada Builder, qui est actuellement disponible.

La page Layout Builder est l'endroit où vous trouverez toutes vos mises en page et toutes les mises en page conditionnelles que vous souhaitez créer en plus de la mise en page globale créée par défaut. Vous trouverez également ici la zone dans laquelle vous affectez des sections de mise en page à vos mises en page et spécifiez les conditions pour que vos mises en page conditionnelles prennent effet.

Le Layout Builder est accessible depuis Avada Dashboard en sélectionnant Layouts > Layout Builder dans le menu déroulant. L'une des manières les plus simples de décrire les mises en page est de dire qu'il s'agit de conteneurs qui abritent les quatre sections de mise en page d'une page : la section d'en-tête, la section de barre de titre de page, la section de contenu et la section de pied de page. Vous pouvez en savoir plus sur les différences entre les sections de mise en page et les mises en page en lisant ce document : Présentation des mises en page et des sections de mise en page (PDF). Continuez à lire pour en savoir plus sur les choses que vous pouvez faire sur cette page.

Deux parties sont situées tout en haut de la page Layout Builder. Une technique pour remplir les sections de mise en page dans la mise en page globale ou générer des mises en page conditionnelles est décrite dans la première section (indice : vous pouvez la fermer avec le X), et sur le côté droit de l'écran se trouve une zone à partir de laquelle vous pouvez créer directement de nouvelles mises en page (voir ci-dessous). Tapez un nom pour votre nouvelle mise en page, puis cliquez sur Créer une nouvelle mise en page pour terminer le processus. Une mise en page vierge est créée lorsque cette méthode est utilisée ; aucune section ou condition de mise en page n'est spécifiée.

Lorsque vous créez des mises en page, elles sont automatiquement importées dans la page Layout Builder. Vous pouvez renommer une mise en page en cliquant sur le bouton Renommer en haut de la page. Vous pouvez également cliquer sur l'icône en forme de rouage pour établir les conditions de la mise en page, et vous pouvez supprimer une mise en page en cliquant sur l'icône de la corbeille en haut de la page. Vous pouvez également voir et attribuer des critères en cliquant en bas de toutes les mises en page, à l'exception de la mise en page globale.

Dans chaque mise en page, vous pouvez voir les quatre sections de mise en page affectées à une mise en page particulière, une pour chacune des quatre mises en page. Dans chaque section de mise en page, vous verrez une icône +, qui vous permettra d'attribuer une section de mise en page à cette section de la mise en page lorsque vous passez votre souris dessus. Vous avez la possibilité d'attribuer une section de mise en page existante à cette section ou de créer une toute nouvelle section à partir de zéro.

Utilisation de la disposition des sections

Dans le cadre d'Avada Layouts, vous pouvez désormais créer des pieds de page entièrement personnalisables pour votre site Web, en tirant parti de toute la capacité créative d'Avada Builder pour y parvenir.

Une mise en page de pied de page est une section de mise en page ajoutée à une mise en page. Ex amp le, un pied de page personnalisée nécessite une mise en page section Pied de page, qui peut être ajouté soit à la Global ou la mise en page personnalisée. Nous examinerons la création d'une section de mise en page de pied de page personnalisée dans la section suivante, mais d'abord, examinons la présentation des mises en page Avada.

Dans la barre latérale de WordPress ou le tableau de bord Avada, sélectionnez Avada > Layouts. Les mises en page et les sections de mise en page d'Avada sont créées et gérées ici. Comme indiqué ci-dessous, la mise en page globale est initialement vide, sans sections de mise en page associées.

Personnaliser une mise en page

Cette section peut être ajoutée à la mise en page globale ou à une mise en page conditionnelle, ne s'affichant que sur certains types de publication personnalisés ou sur des pages uniques. La disposition globale est déjà présente, mais nous devons d'abord développer une disposition conditionnelle.

Sur la page Dispositions, ajoutez un nom et cliquez sur Créer une nouvelle disposition, comme indiqué ci-dessous.

Créez une section de mise en page de pied de page si vous souhaitez l'ajouter à une mise en page existante ou à la mise en page globale.

Sur l'écran Section Mise en page Builder, sélectionnez le type de mise en page Section, entrez un nom (dans cet ancien amp le, Pied de page, peut - être global Pied de page) et cliquez sur Créer la mise en page section, comme indiqué ci - dessous.

L'image suivante montre comment générer une section de mise en page directement à partir de la mise en page. Les sections de mise en page de votre site doivent être ajoutées à une mise en page. Initialement, il y a simplement une disposition globale. Donc, pour créer un pied de page personnalisé global, ajoutez-le à cette mise en page. Section de disposition de pied de page personnalisée, puis ajoutez des conditions à la section de disposition de pied de page personnalisée pour que la disposition apparaisse en fonction des critères.

Rien de mal à cela, mais il est essentiel de considérer la situation. Si la mise en page est actuellement active (c'est-à-dire qu'elle a des conditions ou est la mise en page globale), toutes les nouvelles sections de mise en page seront immédiatement actives et vides. Il est plus logique d'ajouter d'abord un pied de page personnalisé à une mise en page globale via la page Générateur de section de mise en page, puis de l'ajouter à la mise en page globale.

Alternativement, nous pouvons ajouter une section de mise en page de pied de page, d'en-tête ou de colonne à une mise en page conditionnelle, puis la créer. Les conditions ne sont pas utilisées tant que des conditions ne sont pas ajoutées. Comme illustré ci-dessous, nous pouvons modifier la section de mise en page du pied de page en la survolant et en cliquant sur l'icône d'édition.

Ajout d'une section de disposition de pied de page à une disposition conditionnelle

Modification de la mise en page personnalisée

L'éditeur WordPress par défaut apparaît lors de l'édition d'une nouvelle section de mise en page ; vous pouvez utiliser Avada Builder ou Avada Live à partir d'ici. Des sections de mise en page personnalisées sont créées ici. Pour plus d'informations, voir Création de contenu de section de mise en page, mais en bref, vous pouvez tout créer ici.

Votre pied de page personnalisé peut contenir tout ce que vous pouvez construire dans Avada Builder. Vous pouvez avoir de nombreuses colonnes, photos, etc.; Cela permet une grande flexibilité. La section Mise en page est l'endroit où le matériel de pied de page apparaîtra. La matière vient du Constructeur, et votre créativité est la seule contrainte.

Voir le pied de page original conçu pour la démonstration de taxi ci-dessous ; Cela a été fait en modifiant les options de thème et les widgets de pied de page.

Taxi Demo> Basic Pied de page » src = » https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBxO4AMKlY2tuxFbek-S0Z1PY3oQTE2UmjI4QzZydYbWqscpkwNbIpjTQ=s0 "> Regardez le pied de page global personnalisé d'Avada Layouts.

La version de bureau de cet en-tête personnalisé est illustrée ici, mais pour saisir correctement la portée de cet en-tête personnalisé, vous devez visiter le site en direct, auquel vous pouvez accéder ici.

Conception de mise en page conditionnelle

Aucune condition dans une disposition globale. L'ajout de sections de mise en page sera utilisé sur chaque page car il est global. Si vous n'aviez besoin d'un pied de page personnalisé que sur certaines pages de votre site, comme des articles de blog uniques, vous devrez utiliser une mise en page conditionnelle.

Une mise en page conditionnelle ne peut contenir que des sections de mise en page existantes. Ensuite, sous l'onglet Sélectionner le pied de page de la mise en page, faites défiler jusqu'à Existant, où vous pouvez ajouter la section Mise en page, comme indiqué ci-dessous.

Attribution d'une section de mise en page personnalisée

Vous devez définir les conditions pour toute disposition conditionnelle. La mise en page est active dès que les conditions sont spécifiées ; par conséquent, si vous effectuez cette opération avant d'établir la section de mise en page, les pages qui correspondent aux conditions seront vides.

Pour ajouter une condition, sélectionnez Ajouter une condition dans le menu inférieur de la mise en page. Une boîte de dialogue apparaît, comme illustré ci-dessous. Pour plus d' informations sur Layouts conditionnelles, voir Layouts accord conditionnel, mais pour cet ancien amp le, nous choisirions tous les messages dans l'onglet Messages Conditions, comme on le voit ci - dessous.

Ajout de colonnes à partir du générateur de mise en page Avada

L'élément de colonne, comme l'élément de conteneur, est un composant structurel essentiel lors de la conception d'un site Avada.

L'ajout de colonnes est relativement facile avec Avada Layout builder.

  • Cliquez sur le bouton ' + Conteneur ' pour ajouter un Conteneur à la page. Lors de l'insertion d'un conteneur, il vous sera demandé de sélectionner une disposition de colonne ou de colonne. Vous pouvez créer un conteneur vide, mais normalement vous ajoutez des colonnes à cette étape.
  • Pour ajouter de nouvelles colonnes à un conteneur existant, survolez le conteneur et cliquez sur le bouton ' + Colonne '. Pour ajouter une nouvelle colonne, cliquez ici.
  • Dans le coin supérieur gauche d'une colonne, cliquez sur l'icône "Redimensionner la colonne". Ce sera la même taille que votre colonne maintenant. Par exemple amp 1/4 apparaîtra sous « 1/4 » sous l'option Redimensionner la colonne.
  • Faites glisser et déposez les colonnes pour les réorganiser. Vous pouvez également faire glisser et déposer des colonnes dans des conteneurs.

Une colonne ne peut être placée qu'à l'intérieur d'un élément conteneur de même largeur ; Il s'agit généralement de la largeur du site que vous définissez pour le site. Ainsi, si vous définissez la largeur du site sur 1200px, une 1/2 colonne fera 600px de large. Les tailles de colonnes prédéfinies sont indiquées ci-dessous lorsqu'elles sont ajoutées à une page.

Dans Avada, vous pouvez définir la largeur des colonnes (et plus) séparément sur les mises en page grandes, moyennes et minuscules. Comment définir l'ordre d'affichage et la taille des colonnes dans les mises en page réactives explique comment utiliser cette excellente nouvelle fonctionnalité avec des colonnes.

Les largeurs personnalisées se trouvent sous Colonnes > Conception > Largeur . Comme indiqué ci-dessous, l'utilisation d'un pourcentage vous permet de spécifier une largeur personnalisée. Ainsi, le positionnement est illimité

Auto est une nouvelle option de largeur. Au lieu d'une largeur fixe, la colonne occupera l'espace de l'élément le plus important à l'intérieur. Cela ne fonctionne donc que dans certains cas. Vous pouvez changer la colonne parent en Auto, et la colonne sera redimensionnée à la largeur de l'élément.

Avada ajoute également des ensembles d'options réactifs pour les conteneurs et les colonnes. Dans le back-end du Builder, vous pouvez voir les icônes réactives sur toutes les colonnes, comme le montre l'image ci-dessous. Le Front-End Builder affiche les icônes réactives sur les options.

Seuls les nouveaux conteneurs Flex affichent des ensembles d'options réactifs. Les colonnes des conteneurs hérités ne sont pas disponibles.

Conclusion

Grâce à Avada Layouts, la possibilité de créer un pied de page personnalisé, un en-tête et d'ajouter des colonnes est désormais une réalité et une option presque illimitée. Non seulement vous pouvez utiliser la puissance d'Avada Builder pour créer pratiquement n'importe quel pied de page ou en-tête que vous pouvez imaginer, mais vous pouvez également tirer parti de la puissance des mises en page conditionnelles pour les afficher ou les masquer sur n'importe quelle page, catégorie, type de publication personnalisé ou toute combinaison de critères auxquels vous pouvez penser en utilisant Avada Builder.

En ce qui concerne les mises en page WordPress, Avada Layouts change la donne au sens le plus littéral du terme. Le fait qu'il permette une telle liberté de conception et une telle flexibilité de déploiement signifie que le processus de création des pieds de page ne sera plus jamais le même.

Laisser un commentaire

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués *