Want to make creations as awesome as this one?

Bibliothèque Chapitre 3

Transcript

LA BIBLIOTHÈQUE

CHAP 3 - DIVI GLOBAL, MODULES ET SECTIONS

MODULE 3

DIVI GLOBAL, MODULES ET SECTIONS

Thème Enfant Divi Toiture - http://roofing.aspengrovestudios.space/

Roofing est un thème Divi enfant haut de gamme développé spécialement pour les entreprises indépendantes de couverture ou de tuiles opérant dans le secteur de l'entretien ménager.

Doté d'une palette de couleurs vives, le thème enfant Roofing Divi utilise des accents jaunes audacieux pour attirer l'attention des visiteurs du site.


Associé à une utilisation intelligente de l'espace blanc, d'élégantes combinaisons de polices de caractères et de subtiles animations aérodynamiques à travers la structure, cela crée une esthétique web élégante avec un attrait à haute énergie, le tout dans un design attrayant.

Créez un élément de bibliothèque qui se synchronise entre toutes les pages sur lesquelles vous l'utilisez.

Qu'est-ce qu'un élément de bibliothèque mondial ?

Un élément de bibliothèque globale est un module, une ligne ou une section qui apparaît exactement de la même façon sur toutes les pages auxquelles il est ajouté.

Vous pouvez ajouter un seul module global à plusieurs pages.

Si vous modifiez le module global sur une page, il est mis à jour instantanément sur toutes les autres pages auxquelles il a été ajouté

Un simple cas d'utilisation pour cela serait un module d'appel à l'action qui apparaît au bas de plusieurs ou de toutes les pages de votre site Web. Si un seul module est répété sur plusieurs pages, il est très utile de rendre ce module Global.


Les éléments globaux ouvrent tellement de possibilités, surtout si vous considérez que vous pouvez synchroniser sélectivement les paramètres individuels de chaque module. Par exemple, vous pouvez créer un module d'en-tête global qui apparaît en haut de toutes vos pages et choisir de synchroniser certaines options dans les onglets Conception et Avancée.


Cela vous permettra d'appliquer un style personnalisé à toute la série de pages en utilisant ce module d'en- tête global, mais vous permettra tout de même d'ajouter du texte de titre unique à chaque module dans l'onglet "Contenu" des modules (qui n' a pas été synchronisé). Si vous souhaitez modifier l'apparence et la convivialité de ces modules d'en-tête globaux, vous n'avez qu'à modifier les options que vous avez choisies pour être synchronisées une

seule fois.


Des sections entières peuvent également être transformées en sections globales. C'est une façon parfaite de créer un pied de page personnalisé pour votre site entier, et d'avoir cette section de pied de page en miroir sur toutes vos pages. Si vous souhaitez modifier votre section de pied de page global, vous n'avez qu'à l'éditer une seule fois et les modifications sont appliquées partout où la section a été utilisée.




Création d'un nouvel élément de bibliothèque global

Rendre un élément de bibliothèque global est simple.


Lorsque vous enregistrez votre docu- ment, cochez l'option "Enregistrer sous Global".

Tout élément sauvegardé avec cette option devient un élément global.

Les éléments globaux dans le générateur de pages sont facilement identifiables par leur couleur verte.


Si vous éditez un module, une ligne ou une section qui est verte, ou si la fenêtre des paramètres modaux que vous avez ouverte est verte, vous savez que vous êtes en train d'éditer un élément global.


Il est important de savoir quand un élément global est en cours d'édition, car tout changement que vous apportez sera reflété sur chaque page sur laquelle l'élément a été placé.



Modules globaux et synchronisation sélective

Comme mentionné précédemment, vous pouvez synchroniser sélectivement n'importe laquelle des options de paramétrage du module lors de l'enregistrement d'un élément de la bibliothèque globale.


Par exemple, si vous créez un nouveau module global et choisissez de ne synchroniser que l'option "Couleur d'arrière-plan", alors seule la "Couleur d'arrière-plan" de ce module sera mise en miroir.

Qu'est-ce que cela signifie exactement et pour- quoi est-il utile?

Supposons que vous ayez un module Fullwidth Header en haut de toutes vos pages. C'est assez courant. Chaque module d'en-tête a un titre différent dans l'onglet "Contenu" pour représenter la page courante.

Vous avez également modifié les options de l'onglet "Design" pour donner à votre en-tête un aspect unique en ajustant la couleur de la police de titre au bleu, le style de police de titre au gras et toutes les majuscules, et la taille de la police de titre à 40px.

Vous voulez que tous les modules d'en-tête de chaque page utilisent ce style unique, mais vous avez besoin de chaque page pour avoir des titres uniques. Dans ce cas, vous pouvez créer un module Global Fullwidth Header et choisir de ne synchroniser sélectivement que ces options (couleur de police, style et taille de police).


Maintenant, chaque fois que vous ajoutez ce module global à une nouvelle page, ces options seront synchronisées, mais toutes vos autres options resteront uniques pour le module courant.


Si vous voulez changer le style des en-têtes sur toutes vos pages, vous pouvez modifier les options de synchronisation du style de texte d'en-tête partagé par ces modules globaux et les changements seront reflétés sur chaque page où l'en-tête global a été utilisé! Wow, ça vous fait gagner un temps incroyable.

Modules globaux et synchronisation sélective

Cette même théorie pourrait également s'appliquer aux options de l'onglet "Avancé".


Supposons que vous avez créé un module Slider et appliqué une animation unique au bouton du curseur. Vous souhaitez utiliser cette nouvelle animation unique sur tous les modules Slider de votre site web.

Dans ce cas, vous pouvez créer un nouveau Global Slider Module et synchroniser sélectivement le CSS personnalisé pour le bouton Slide (qui inclut votre animation CSS personnalisée).

Ajoutez ce curseur à votre page et vous pouvez ajuster toutes les autres options librement, tout en gardant votre option CSS personnalisée unique synchronisée sur toute la série de modules.

Si vous souhaitez modifier l'option CSS Personnalisé pour cette série de modules globaux, vous n'avez qu'une seule fois. Modification de l'option Personnaliser CSS dans une seule mise à jour du module pour toutes les implémentations de ce Global Slider Module.


Chaque fois que vous éditez un module global, vous pouvez facilement identifier quelles options sont actuellement synchronisées par l'icône verte de synchronisation située à gauche de chaque option.

Les options qui ont l'icône de synchronisation verte sont des options qui sont actuellement synchronisées dans le module global. Les options éditées avec les icônes de synchronisation verte sont partagées par toutes les instances de l'élément global. Pour désynchroniser une option, cliquez simplement sur l'icône verte de synchronisation et vous verrez l'icône rouge.

Les options qui ont l'icône de synchronisation rouge NE sont PAS actuellement synchronisées dans le module global.


MERCI