SIMPLIFIEZ-VOUS LA VIE AVEC LES MODELES D'ELEMENTOR PRO !

Summary

Dans cette vidéo, l'Académie du web explore l'utilisation des modèles dans WordPress grâce à Elementor Pro. Elle met en lumière la création de modèles, qui permettent de simplifier le processus de travail en offrant des instances qui se mettent à jour automatiquement lorsqu'une modification est effectuée sur le modèle original. L'auteur démontre comment créer un bandeau avec un texte dynamique et évoque l'utilisation de Jet Engine pour des fonctionnalités avancées. La vidéo incite les utilisateurs à s'abonner pour découvrir plus de contenus sur le design web.

Takeaways

• 😀 Les modèles dans Elementor Pro facilitent la création de mises en page cohérentes sur WordPress.
• 💻 Les instances de modèles permettent de réutiliser des designs sans les dupliquer.
• 🛠️ Modifier le modèle de base met automatiquement à jour toutes les instances associées.
• 📊 Les modèles peuvent être liés à des widgets, des sections ou des pages entières.
• 🌐 L'utilisation de modèles globaux simplifie le processus de travail sur plusieurs pages.
• 📸 Les éléments dynamiques permettent d'afficher des contenus différents selon les pages.
• 🔧 L'intégration de Jet Engine offre des fonctionnalités avancées pour la personnalisation dynamique.
• 💡 Enregistrer un modèle permet de l'exporter facilement vers d'autres sites WordPress.
• ✍️ L'édition de modèles se fait directement dans l'interface d'Elementor, offrant flexibilité et contrôle.
• 📅 Pour une gestion optimale, il est conseillé de mettre les titres de page avant d'utiliser des éléments dynamiques.

Q & A

Quels sont les principaux avantages d'utiliser des modèles dans Elementor Pro?

Les modèles permettent de créer des mises en page cohérentes et réutilisables sur plusieurs pages, ce qui simplifie le processus de conception et assure une uniformité visuelle.

Qu'est-ce qu'une instance de modèle dans le contexte d'Elementor Pro?

Une instance de modèle est une copie d'un modèle de base qui n'a pas de vie propre, ce qui signifie que toute modification apportée au modèle de base sera répercutée automatiquement sur toutes ses instances.

Comment enregistrer une section en tant que modèle dans Elementor Pro?

Pour enregistrer une section, il suffit de faire un clic droit sur le conteneur et de sélectionner l'option pour l'enregistrer comme modèle, en lui attribuant un nom spécifique.

Quel type de contenu peut être intégré dans un modèle?

Un modèle peut contenir divers éléments tels que du texte, des images, des sections, et même des widgets personnalisés, permettant une flexibilité dans la conception.

Comment modifier un modèle déjà enregistré?

Pour modifier un modèle, il faut accéder à l'onglet des modèles dans le backoffice d'Elementor, sélectionner le modèle souhaité, et le modifier directement avec l'éditeur Elementor.

Pourquoi utiliser des widgets globaux dans Elementor?

Les widgets globaux permettent de modifier un élément unique et de voir ces changements s'appliquer instantanément à toutes les instances où ce widget est utilisé, facilitant ainsi la gestion du contenu.

Comment importer ou exporter des modèles entre différents sites WordPress?

On peut exporter un modèle en générant un fichier JSON qui contient tous les détails de la mise en page, puis l'importer sur un autre site WordPress à partir de l'onglet des modèles.

Qu'est-ce que le contenu dynamique dans Elementor Pro?

Le contenu dynamique permet d'afficher des informations qui changent en fonction du contexte, comme le titre d'une page, ce qui offre une personnalisation automatique selon le contenu de chaque page.

Comment utiliser Jet Engine avec Elementor Pro pour des fonctionnalités avancées?

Jet Engine fournit des composants dynamiques qui peuvent être intégrés dans Elementor, permettant de personnaliser encore plus le contenu et d'utiliser des éléments qui dépendent d'un modèle de base.

Quels conseils l'auteur donne-t-il pour ceux qui souhaitent en savoir plus sur Elementor Pro?

L'auteur recommande de consulter sa chaîne pour des vidéos supplémentaires sur l'utilisation d'Elementor Pro et des fonctionnalités avancées, en particulier concernant Jet Engine.

Outlines

00:00

🛠️ Introduction aux Modèles dans Elementor Pro

Dans cette vidéo de l'Académie du Web, le présentateur aborde le concept de modèles (templates) dans WordPress, avec un accent particulier sur Elementor Pro. Il explique que les modèles sont essentiels pour le développement sur WordPress, car ils facilitent la gestion des mises en page. Elementor Pro permet de créer des modèles liés à divers éléments comme des widgets et des sections, ce qui garantit une cohérence dans le design à travers différentes pages. En modifiant le modèle de base, toutes les instances sont automatiquement mises à jour, ce qui simplifie le processus de maintenance et de mise à jour du site.

05:01

🎨 Création et Utilisation de Modèles

Le présentateur fournit un exemple pratique de la création d'un bandeau avec une image et un texte, enregistré comme modèle. Ce modèle peut être utilisé sur plusieurs pages, permettant d'assurer une uniformité visuelle. Il démontre comment insérer le modèle dans une nouvelle page à l'aide du widget de modèle et souligne l'importance de l'interface utilisateur d'Elementor pour faciliter ces opérations. Ce processus illustre la puissance d'Elementor Pro pour maintenir un design cohérent sur tout le site.

10:03

📄 Contenu Dynamique avec les Modèles

Le contenu dynamique est introduit comme une fonctionnalité clé des modèles dans Elementor Pro. Le présentateur montre comment rendre le titre d'une page dynamique, en utilisant des balises dynamiques qui s'ajustent au contenu spécifique de chaque page. Cela permet d'adapter le contenu sans créer de nouvelles instances de modèles. En plus, il évoque l'utilisation de Jet Engine pour intégrer des éléments encore plus dynamiques et personnalisables, renforçant ainsi la flexibilité des modèles dans le design de sites WordPress.

🚀 Exploration Avancée des Fonctionnalités

Dans cette section, le présentateur encourage les spectateurs à explorer les fonctionnalités avancées d'Elementor Pro et à utiliser Jet Engine pour des composants dynamiques. Il explique comment ces outils peuvent transformer le processus de conception en permettant des modifications simultanées sur plusieurs instances de modèles. La vidéo conclut en invitant les spectateurs à s'abonner à la chaîne pour recevoir des mises à jour sur de nouvelles vidéos et pour soutenir la création de contenu continu.

Keywords

💡Modèles

Les modèles sont des structures prédéfinies utilisées pour créer des mises en page cohérentes sur un site WordPress. Dans le contexte de la vidéo, ils permettent aux développeurs de réutiliser des éléments de design sur différentes pages, ce qui facilite la gestion du site. Par exemple, le créateur mentionne l'utilisation d'un modèle appelé 'bandeau page' qui peut être inséré sur plusieurs pages, assurant une uniformité de présentation.

💡Elementor Pro

Elementor Pro est un plugin avancé pour WordPress qui offre des outils de conception de sites Web sans nécessiter de compétences en codage. Dans la vidéo, l'intervenant souligne que la force d'Elementor Pro réside non seulement dans ses widgets, mais surtout dans sa capacité à gérer des modèles qui s'intègrent à la hiérarchie des templates de WordPress, simplifiant ainsi le processus de développement.

💡Hiérarchie des templates

La hiérarchie des templates de WordPress est l'organisation des différents fichiers de modèle utilisés pour afficher le contenu d'un site. L'intervenant explique que Elementor Pro permet de se connecter facilement à cette hiérarchie, permettant aux utilisateurs de créer des modèles adaptés à différents types de contenu, qu'il soit standard ou personnalisé.

💡Instances

Les instances sont des représentations d'un modèle de base qui partagent ses caractéristiques, mais n'ont pas d'existence autonome. La vidéo décrit comment les modifications apportées au modèle principal se répercutent automatiquement sur toutes ses instances, permettant une mise à jour efficace et cohérente sur l'ensemble du site.

💡Template dynamique

Un template dynamique est un modèle capable d'afficher du contenu variable en fonction de la page ou de l'élément où il est utilisé. L'intervenant démontre cela en modifiant un modèle pour afficher le titre de chaque page, rendant ainsi le contenu plus pertinent et personnalisé tout en utilisant le même design de base.

💡Conteneur

Un conteneur est un élément de mise en page qui regroupe d'autres éléments, comme des widgets ou des sections, dans Elementor. Le créateur évoque la création d'une section en tant que conteneur qui peut être enregistrée comme modèle, facilitant ainsi l'organisation et la réutilisation des éléments sur le site.

💡Widget

Les widgets sont des composants modulaires dans Elementor qui ajoutent des fonctionnalités spécifiques à une page. Dans la vidéo, l'intervenant mentionne que des widgets variés peuvent être utilisés, mais que l'élément le plus puissant d'Elementor Pro est la capacité de créer et d'utiliser des modèles de widgets pour simplifier le processus de design.

💡Marge interne

La marge interne fait référence à l'espace à l'intérieur d'un élément de mise en page, qui aide à espacer le contenu de ses bords. Dans le script, l'intervenant illustre l'utilisation de marges internes pour améliorer la lisibilité et l'esthétique de la section de son modèle, renforçant ainsi l'importance du design dans l'expérience utilisateur.

💡Crocoball Jet Engine

Crocoball Jet Engine est un plugin complémentaire qui étend les fonctionnalités d'Elementor en ajoutant des éléments dynamiques. L'intervenant le recommande pour ceux qui souhaitent explorer davantage les capacités dynamiques de leur site, montrant comment ces outils peuvent enrichir l'expérience de conception et de développement sur WordPress.

💡Exportation et importation

L'exportation et l'importation de modèles permettent de transférer facilement des designs d'un site à un autre. Dans la vidéo, l'intervenant souligne que les modèles peuvent être exportés sous forme de fichiers JSON, ce qui facilite leur partage et leur réutilisation, optimisant ainsi le flux de travail des développeurs.

Highlights

Introduction à l'importance des modèles dans le développement WordPress avec Elementor Pro.

Elementor Pro permet d'accéder facilement à la hiérarchie complexe des templates de WordPress.

Les modèles simplifient le processus de travail en permettant de créer des instances d'un modèle de base.

Les instances de modèles n'ont pas de vie propre et se mettent à jour automatiquement lorsqu'on modifie le modèle de base.

Démonstration de la création d'un bandeau standard dans Elementor Pro.

Possibilité de prévisualiser et d'exporter les modèles pour les utiliser sur d'autres sites.

Utilisation du widget 'template' pour insérer des modèles enregistrés sur plusieurs pages.

Modification de modèles permet de changer le design sur toutes les pages où ils sont utilisés.

Utilisation de balises dynamiques pour afficher des contenus différents selon les pages.

Démonstration de l'intégration d'un titre dynamique qui reflète le nom de la page actuelle.

Introduction à Jet Engine comme outil pour créer des éléments encore plus dynamiques.

Les composants dynamiques permettent des personnalisations avancées dans Elementor.

Importance de la structure des modèles pour une gestion efficace des éléments de design sur WordPress.

Encouragement à interagir avec la communauté à travers les commentaires et à s'abonner pour plus de contenu.

Conclusion sur l'utilisation efficace des templates dans Elementor Pro pour améliorer le développement web.

Transcripts

bonjour et bienvenue dans une nouvelle

vidéo de l'Académie du web aujourd'hui

nous allons parler de modèles alors les

modèles c'est quelque chose auquel on

est confronté assez rapidement lorsque

l'on développe sur WordPress et que l'on

travaille notamment avec elementor Pro

éléor pro la force première de cette

extension n'est pas finalement de vous

proposer des widgets divers et variés

mais surtout de vous donner accès au

système de template de modèle de

WordPress

la hiérarchie des templates de WordPress

est un une hiérarchie qui est assez

complexe et elementor Pro vous permet de

vous y connecter très simplement et donc

de créer des modèles d'affichage pour

vos différents types de données qu'ils

soi standard ou custom et ça c'est

vraiment intéressant aujourd'hui on va

se focaliser sur les modèles donc non

pas qui sont reliés à la hiérarchie des

templates mais à aux modèles qui vont

vous permettre de simplifier votre

process de travail alors le principe va

être le suivant j'ai fait un petit

schéma ici pour vous l'expliquer donc le

principe c'est que on va créer un un

modèle alors un modèle peut-être relié à

un widget c'est-à-dire un petit symbole

comme vous les avez d'ailleurs dans

l'interface d'éléor à un container

c'est-à-dire par exemple à une Flex box

ou à une section voir à une page donc on

va créer un modèle et ensuite on va

utiliser à différents endroit endroit ce

modèle sur des pages par exemple

différentes du site internet sur lequel

vous travaillez l'intérêt c'est qu'en

fait ces différentes représentations du

modèle s'appellent en informatique des

instances c'est-à-dire qu'elles n'ont

pas de vie propre c'est simplement une

sorte de copie fantôme du modèle de base

quel intérêt et bien le suivant ça va

permettre à partir du moment où on va

modifier dans le modèle de base des

paramètres spécifiques et bien

automatiquement ils seront immédiatement

répercutés sur l'ensemble des instances

donc on va se retrouver sur mon

backoffice pour développer

cela alors sur mon backofice pour ce qui

est des modèles on va les retrouver dans

l'onglet modèle du backofice ici modèle

enregistré alors je vous rappelle modèle

en anglais euh se dit template donc

c'est

euh de au même titre que les modèles qui

sont accessibles dans le TH buer mais

qui là concerne des modèles euh qui sont

insérés dans la hiérarchie des templates

de WordPress et bien les modèles eux

sont finalement des euh mises en page

que l'on va globaliser euh c'est pour ça

qu'on va parler aussi de Global widget

et ensuite que l'on pourra utiliser à

son choix un peu partout sur le site

alors on va prendre un exemple tout à

fait euh particulier donc je vous

rappelle le le raccourci clavier

contrôle e sur PC ou commande e sur Mac

qui vous permet de lancer le Finder

d'éementor et là je vais créer donc une

nouvelle page en tapant new et je vais

ajouter une page donc imaginons que je

souhaite mettre sur chacune de mes pages

un bandeau avec une image à l'intérieur

et et un titre qui qui va être toujours

le même sur plusieurs pages de mon site

internet donc déjà je vais enlever dans

mon enentête ici je pense que j'ai dû

mettre ici une marge ver voilà une marge

au bas en bas donc là voilà là je je

ressort de là je mets à jour et je

reviens sur l'édition de la page alors

je vais créer une flexbx verticale je

vais mettre ici en arrière-plan une

image je vais mettre par exemple cette

image là je la sélectionne comme ceci

donc la résolution entière la position

centrée centrée la répétition aucune et

la taille couvrir comme ça je suis sûr

qu'elle va couvrir l'intégralité de ma

section et là maintenant je vais

augmenter sa taille voilà je souhaite

avoir sur chacune de mes pages du du

site

cette

cette cette section ensuite à

l'intérieur je souhaite avoir par

exemple un texte donc je vais centrer le

texte dans la section je vais la mettre

au centre comme ceci et là je vais

mettre par exemple

bienvenue sur mon site internet comme

ceci alors je vais mettre ça en en blanc

et la typographie je vais un petit peu

l'augmenter 1 2

lato graiss 300 voilà même 2.5 ça sera

mieux voilà donc imaginons que je

souhaite faire

ça et puis finalement je souhaite aussi

avoir ici une marge interne donc je vais

rajouter 16 pixels de marge interne et

sur ce titre je vais ajouter dans

l'arrière-plan de ce titre là

une couleur noire avec une opacité de

façon à pouvoir voir un petit peu le

fond voilà comme ceci alors ça là j'ai

créé une une section standard avec avec

elementur Pro donc ce que je vais faire

c'est que je vais faire je vais cliquer

sur bouton droit sur Modifier le

conteneur ici et je vais

enregistrer cette section comme étant un

modèle alors je n j'appelle ce modèle

alors par exemple je vais appeler ça

bandeau page et je

l'enregistre voilà donc il va arriver

dans mes modèles ici il va être

accessible alors il est là bandeau page

c'est un type container puisque on peut

avoir des modèles de différentes sortes

on peut avoir des widget modèles des des

des sections des containers des pages et

cetera l'avantage c'est que je peux ici

le prévisualiser donc là je vois quel

est ce ce container je peux l'insérer je

peux l'exporter c'estàdire je peux

l'exporter sur un autre site par exemple

ça va créer un fichier JSON qui

comportera l'intégralité de la

description de l'élément qui ça me

permettra de l'importer sur un autre

site je peux également importer des

modèles à partir d'ici donc bref ça

devient un élément qui est assez

intéressant pourquoi parce que quand je

vais donc je vais mettre à jour cette

page je vais créer une nouvelle page

donc je tape new et j'ajoute une autre

page et là j'ai sur cette page besoin

également de remettre ce le modèle que

j'ai enregistré dans les modèles alors

je j'aurais pu venir ici copier

l'élément le coller mais si je fais ça

je duplique l'élément c'est pas c'est

pas souhaitable en fait ce que je vais

faire c'est que je vais utiliser dans la

liste des widgets ici le widget qui

s'appelle template ici et je vais le

glisser au début et ensuite je vais

chercher donc en tapant bandeau page et

vous allez voir que voilà le modèle

revient

automatiquement alors je faut que je

mette ça en en pleine voilà et là je

publie mon site donc là j'ai ce bandeau

qui apparaît sur deux pages différentes

maintenant mais ce ne sont que des

instances d'un bandeau initial la preuve

en est que si je change je vais aller

changer ici dans on retrouve ici he dans

les modèles modèle enregistré bandeau

page il est ici je vais le modifier avec

éémentor je vais changer par exemple

l'alignement du texte puisque le client

décide qu'au lieu d'être centré il

préférait l'avoir en bas du de du bloc

bloc donc je vais le mettre ici en bas

et puis il trouve que finalement il

faudrait changer la couleur de de fond

donc je vais aller dans avancer

arrière-plan et là je vais changer la

couleur du fond pour passer sur une

couleur qui soit comme ceci par exemple

voilà je mets à jour le modèle et ce qui

se passe c'est que comme j'ai mis à jour

le parent hein je vous le rappelle dans

cette structure là ce ne sont que des

instances et bien si je retourne sur les

pages donc je vais reprendre la page que

j'ai créé ici en dernier celle-ci je

fais voir et bien voilà le système a été

mise à jour chaque fois qu'on a utilisé

le modèle et bien donc ça c'était celle

d'avant le modèle

maintenant si je crée par exemple une

nouvelle page ici je la modifie avec

alémentor je retourne dans template

alors je l'ai mis dans favoris favoris

vous prenez les templates et vous pouvez

les glisser ou faire bouton droit

ajouter au favoris et à ce moment-là ils

vont se retrouver dans accès beaucoup

plus simple dans les favoris ici donc je

prends le template ici je l'ajoute

ensuite je cherche ici

bandeau je le mets et voilà le

modèle répond donc à son design ça c'est

quelque chose qui est très intéressant

dans l'utilisation de d'éementor pro

puisque c'est une fonctionnalité

d'éementor pro car ça vous permet de

d'avoir des des modèles qui sont répétés

plusieurs fois sur votre site que l'on

peut exporter importer mais qui ne

dépendent qu'un que d'un seul modèle h

commun qui est le modèle euh paire

c'est-à-dire le modèle qui est tout en

haut de la hiérarchie alors la question

que vous pourriez me poser c'est ok mais

qu'est-ce comment on pourrait faire si

je souhaite euh avoir euh sur une page

bienvenue sur mon site internet et sur

une autre page quelque chose de

différent alors la première réponse

c'est que un modèle dans elementor pro

euh peut-être dynamique si le contenu

est dynamique c'est-à-dire que si euh là

je vais changer cette page je vais

retourner ici dans mes modèles modèle

enregistré bandeau page je vais l'éditer

avec

élémentor imaginons maintenant je

souhaite plutôt avoir le titre de la

page plutôt que bienvenue sur mon site

ce que je peux faire pour cet élément

dynamique c'est sélectionner le titre

ici aller dans la balise dynamique ici à

droite et je peux prendre ici le post

title qui va l'urrence le titre de la

page donc je mets à jour et à partir de

maintenant et bien dans un cas

euh dans un cas donc des pages que j'ai

faites ici voir on a vous voyez

elementor 1072 c'est le nom de la page

qui est ici bon je pas modifier mais

vous comprenez le principe elementor

1043 alors c'était pas celui-là de

modèle c'était

euh je vais l'ajouter J est sur une

autre

hop alors ce que je fais il faut pas le

faire hein il faut d'abord mettre le

titre à la page moi je fais pour gagner

du temps mais la première chose à faire

est de toujours mettre euh le titre de

la page en premier c'est ça qui va créer

l'URL voyez 1078 1078 donc là on est

bien en présence d'un d'un template

dynamique alors si on peut arriver à

passer par là pour avoir un aspect

dynamique euh c'est bien

la question est-ce qu'on peut on ne

pourrait pas plutôt encore avoir pour ce

modèle-là des éléments encore plus

dynamiques alors à cette à cette

question la réponse est euh ben utiliser

jet engine puisque dans la dernière

version et je vous renvoie vous

trouverez le lien sur ma vidéo dans le

jet enging on a des composants et les

composants sont exactement

euh j'en acrit un ici hein ce simple

text component si je prends une page

alors je vais reprendre une page que

j'ai faite ici celle-ci par exemple le

composant est un élément dynamique qui

est qu'on va retrouver donc dans les

widget elementor tout en bas ici j'ai

créé un simple Tex component il me

suffit de le positionner sur une page il

a un texte mais vous voyez qu'ici il a

aussi un contrôle alors on peut avoir

plusieurs contrôles je vous renvoie vers

la vidéo et là je peux taper welcome to

my website et vous voyez on peut le

personnaliser mais il dépend égal lui

aussi du composant de base donc si je

modifie le composant de base et bien

tous les composants seront mis à jour

voilà donc là j'ai fait un tour un petit

peu sur les templates au niveau plutôt

des éléments de design qu'on va

retrouver sur WordPress grâce à

elementor pro je vous conseille

crocoball jet engine si vous voulez

aller plus loin pour les parties

dynamiques et sur ma chaîne il y a

quantité de vidéos qui sont dédié à ça

si vous avez des questions c'est dans

les commentaires n'hésitez pas de vous

abonner à ma chaîne si ce n'est pas

encore fait pour euh B tout d'abord la

soutenir et ensuite me permettre de

continuer à mettre des vidéos

régulièrement et je vous dis à bientôt

pour une nouvelle vidéo de l'Académie du

web design