1893 avis : 5/5 ⭐⭐⭐⭐⭐

Wordpress développement

Developpeur wordpress fullstack

site internet elementor

Utiliser Elementor pro sous wordpress

Si vous avez dĂ©cidĂ© de crĂ©er un site Web et que vous souhaitez modifier son apparence sans vous creuser la tĂȘte avec du code, apprendre Ă  utiliser le constructeur de pages Elementor pour WordPress peut vous ĂȘtre d’une grande aide.

Pour les dĂ©butants, la crĂ©ation d’un site web peut sembler une tĂąche trĂšs difficile, et la modification de sa conception encore pire.

Pour les utilisateurs plus expĂ©rimentĂ©s, la crĂ©ation d’un site n’est qu’une question de ressources et de temps, des facteurs qui font souvent dĂ©faut.

L’image parfaite pour WordPress

WordPress nous facilite Ă©normĂ©ment la vie. Au fil du temps, des outils appelĂ©s “constructeurs visuels de pages” ou « page builder » en anglais, sont devenus de plus en plus populaires.

Ces outils vous permettent de crĂ©er des pages web par le biais d’une interface simple, en visualisant les rĂ©sultats en temps rĂ©el et en partant Ă©ventuellement de modĂšles prĂ©Ă©tablis. Elementor vous permet de le faire ! En fait, Elementor, comme presque tous les meilleurs constructeurs visuels, nous permet de nous concentrer sur l’apparence de notre site et sur l’expĂ©rience du visiteur.

De cette façon, vous Ă©vitez d’investir trop de temps dans la comprĂ©hension des aspects techniques de la crĂ©ation d’un site web. (Ce qui est important mais peut toujours se produire lorsque la premiĂšre version du site est en ligne).

Quels sont les avantages d’Elementor par rapport aux autres constructeurs de pages ?

Contrairement Ă  de nombreux constructeurs de pages, notamment ceux qui sont dĂ©jĂ  prĂ©sents dans certains thĂšmes, avec Elementor, vous pouvez concevoir entiĂšrement chaque section de votre site Web, et pas seulement le contenu. En fait, vous pouvez crĂ©er vos en-tĂȘtes, pieds de page et barres latĂ©rales avec cet outil, puis faire une sorte de collage et crĂ©er votre page entiĂšrement personnalisĂ©e.

GrĂące aux modĂšles prĂȘts Ă  l’emploi, vous pouvez choisir le modĂšle de page qui vous plaĂźt le plus ou qui correspond le mieux au type d’activitĂ© que vous exercez.

À partir de lĂ , il sera ensuite trĂšs facile de commencer Ă  crĂ©er votre page, puis de la personnaliser en fonction de votre style personnel.

Comme Elementor vous permet donc de travailler sur tous les dĂ©tails, on vous suggĂšre d’utiliser un thĂšme trĂšs simple et lĂ©ger. Pour cette raison, la mĂȘme Ă©quipe qui a dĂ©veloppĂ© le plugin a Ă©galement crĂ©Ă© un thĂšme extrĂȘmement basique qui fonctionne parfaitement avec le constructeur de pages. Il s’appelle Hello Theme.

Utilisez plutĂŽt des thĂšmes plus riches en fonctionnalitĂ©s si vous dĂ©cidez d’utiliser Elementor uniquement pour construire quelques pages, et non l’ensemble de votre site.

Dans la suite de ce guide sur d’Elementor, nous allons voir comment utiliser le plugin.

Elementor, le créateur de pages pour WordPress

Elementor est disponible dans une version gratuite et une version Pro. La version gratuite peut ĂȘtre installĂ©e comme n’importe quel autre plugin Ă  partir de votre tableau de bord WordPress.

Si vous souhaitez passer Ă  Elementor Pro, vous n’avez pas besoin de supprimer la version gratuite. Ce que vous devez faire, c’est :

  • Laissez la version gratuite installĂ©e ;
  • Achetez ensuite Elementor Pro ;
  • TĂ©lĂ©chargez le plugin Elementor Pro depuis votre espace client ;
  • Installez-le comme un plugin normal (sans dĂ©compresser le fichier .zip) ;
  • Activez le plugin ;

Suivez ces instructions pour connecter votre site Ă  l’API d’Elementor.

Rappelez-vous donc que dans les plugins, vous aurez toujours à la fois Elementor de Base (gratuit) et Elementor Pro installés.

Dans la version Pro, vous bénéficiez de nombreuses fonctionnalités supplémentaires, notamment :

  • 50 Ă©lĂ©ments Pro Ă  insĂ©rer dans vos pages ;
  • Le constructeur de thĂšme pour vous permettre de construire toutes les sections de votre site ;
  • Le constructeur pour la crĂ©ation de popups ;
  • 15 Ă©lĂ©ments spĂ©ciaux pour WooCommerce ;
  • Effets graphiques avancĂ©s ;
  • Support premium.

Le fait que vous puissiez passer Ă  Elementor Pro est un Ă©norme avantage. Vous pouvez commencer par vous familiariser avec l’outil, puis le mettre Ă  niveau lorsque vous le jugez nĂ©cessaire. Passons maintenant aux choses sĂ©rieuses et dĂ©couvrons comment fonctionne Elementor et comment l’utiliser.

Qu’est-ce que Elementor ?

Le constructeur de pages Elementor est un plugin WordPress qui appartient à la catégorie des constructeurs visuels de pages. Sorti en 2016, il a été immédiatement apprécié par la communauté pour son offre gratuite de fonctionnalités généralement premium.

Sur WordPress.org, il a Ă©tĂ© installĂ© plus de 700 000 fois et bĂ©nĂ©ficie d’excellentes notes, 5/5 Ă©toiles.

Ces statistiques confirment la grande popularitĂ© de cet outil, dont les points forts sont une interface basĂ©e sur le “drag and drop” (glisser-dĂ©poser), qui est vraiment Ă  la portĂ©e de tous, et des modĂšles prĂȘts Ă  l’emploi.

Si vous ne savez pas comment crĂ©er ou modifier un thĂšme ou la conception d’un site Web, cet outil est fait pour vous.

Ce plugin vous permet de créer des designs personnalisés sans aucune connaissance technique, grùce à une interface intuitive et des aperçus en temps réel qui vous permettent de tester vos modifications en quelques clics de souris.

Elementor vous propose diffĂ©rents modĂšles que vous pouvez simplement tĂ©lĂ©charger et dont l’aspect de votre site est prĂȘt en quelques minutes.

En utilisant le thĂšme spĂ©cialement dĂ©veloppĂ© par les crĂ©ateurs eux-mĂȘmes, le thĂšme Hello, vous ĂȘtes Ă©galement assurĂ© d’une compatibilitĂ© totale. Comme indiquĂ©, cet outil dispose d’une version gratuite, mais une version premium est Ă©galement disponible, beaucoup plus riche en fonctionnalitĂ©s, Ă  partir de 49 dollars par an pour un site.

Vous pouvez comparer les fonctionnalités des différentes versions en visitant le site officiel du plugin.

Elementor et WordPress : installation et premiers pas

AprÚs avoir installé et activé le plugin, que ce soit dans sa version gratuite ou Pro, il suffit de cliquer sur Elementor dans le tableau de bord de WordPress pour accéder aux paramÚtres du plugin.

Elementor est essentiellement activé pour les articles et les pages, et dans cette section vous pouvez également décider qui aura accÚs aux outils fournis par ce plugin.

Elementor : les paramÚtres généraux

Sous Elementor > ParamĂštres, vous trouverez des cases pour choisir d’utiliser le plugin sur les pages et les articles.

Vous pouvez Ă©galement conserver les paramĂštres de votre thĂšme concernant les couleurs et les polices.

Si vous laissez ces cases désactivées, vous pouvez décider des couleurs et des polices directement lors de la construction de la page.

La section Elementor > Role Manager, quant Ă  elle, vous permet de choisir qui peut avoir accĂšs au constructeur en fonction du rĂŽle WordPress de l’utilisateur.

Par exemple, vous pouvez sĂ©lectionner Éditeur pour empĂȘcher ce rĂŽle d’utiliser Elementor et n’utiliser que l’Ă©diteur classique ou l’Ă©diteur de blocs Ă  la place.

AprĂšs avoir effectuĂ© les modifications souhaitĂ©es, n’oubliez pas de les enregistrer via le bouton disponible dans l’Ă©cran.

Comment marche le plugin pour WordPress ?

Pour accéder aux fonctionnalités du plugin, il suffit de créer un nouvel article ou une nouvelle page sur votre site. En cliquant sur le bouton Editer avec Elementor, vous accédez à un écran de chargement et, peu aprÚs, au constructeur de pages.

En utilisant le bouton + (Ajouter une nouvelle section), vous pouvez créer votre page à partir de zéro en utilisant les commandes de glisser-déposer dans la colonne de gauche.

Choisissez ensuite la structure de la section en fonction du nombre de colonnes, puis sĂ©lectionnez le symbole + dans celle-ci pour choisir l’Ă©lĂ©ment Ă  insĂ©rer.

Faites glisser l’Ă©lĂ©ment souhaitĂ© dans la colonne de gauche (drag), puis dĂ©posez-le Ă  l’endroit souhaitĂ© (drop).

Lorsque vous sĂ©lectionnez un Ă©lĂ©ment sur votre page, plusieurs options sont disponibles et s’affichent dans la colonne de gauche.

Par exemple, vous pouvez rĂ©diger et mettre en forme du texte, choisir une image dans la mĂ©diathĂšque, personnaliser la couleur d’une icĂŽne de lien, etc.

Si vous souhaitez utiliser les modÚles Elementor disponibles, sélectionnez le bouton représentant une icÎne de dossier. Cela vous donnera accÚs à la bibliothÚque de modÚles. Choisissez celui que vous préférez, puis personnalisez-le à votre guise. Vous trouverez ici non seulement des modÚles de pages entiers, mais aussi des éléments individuels.

Afin de tester pleinement la fonctionnalitĂ© de ce plugin, on vous recommande de commencer par l’un des modĂšles disponibles, de cliquer sur le bouton Ajouter un modĂšle et de choisir celui qui se rapproche le plus du design que vous aviez en tĂȘte.

Si vous utilisez Elementor gratuitement, vous verrez le label Pro sur certains d’entre eux. Cela signifie qu’il s’agit de modĂšles uniquement disponibles avec la version Premium.

Cliquez sur le bouton Insérer pour ajouter le modÚle que vous avez choisi à la page.

Une fois le modÚle chargé, vous pouvez sélectionner les éléments avec la souris et le plugin vous montrera les paramÚtres pertinents dans la colonne de gauche.

Lorsque vous crĂ©ez une nouvelle section, un petit menu d’icĂŽnes apparaĂźt chaque fois que vous la survolez avec la souris :

  • Le + indique l’insertion d’une nouvelle section ;
  • Les points d’une rangĂ©e sont utilisĂ©s pour faire glisser la section vers une autre position ;
  • Le X supprime la section.

MĂȘme aprĂšs avoir chargĂ© un modĂšle, vous pouvez ajouter de nouveaux Ă©lĂ©ments Ă  la page, toujours en utilisant la technique du glisser-dĂ©poser.

Vous pouvez enregistrer vos modifications Ă  l’aide du bouton Enregistrer. Le bouton Enregistrer ne publiera pas le contenu sur le site, il ne fera qu’enregistrer vos modifications. Vous pourrez afficher un aperçu ou revenir au tableau d’affichage WordPress oĂč vous pourrez publier ultĂ©rieurement le contenu final.

L’interface d’Elementor est basĂ©e sur : les sections, les colonnes et les widgets

RĂ©sumons les Ă©lĂ©ments sur lesquels ce constructeur de pages est basĂ©. Les sections sont les blocs qui composent votre page et servent de “collecteur” pour diffĂ©rentes colonnes et diffĂ©rents styles. Chaque section est divisĂ©e en colonnes et dĂ©termine la structure des sections. Vous pouvez choisir le type de colonnes lors de la crĂ©ation d’une section. Les widgets sont les diffĂ©rents carrĂ©s de la colonne de gauche qui reprĂ©sentent des Ă©lĂ©ments que vous pouvez simplement glisser-dĂ©poser pour les placer dans la section souhaitĂ©e. Chaque Ă©lĂ©ment, donc aussi bien les sections que les widgets, peut ĂȘtre personnalisĂ© Ă  l’aide des options situĂ©es Ă  gauche.

Passez un peu de temps Ă  essayer les diffĂ©rentes commandes. Afin de vous rendre compte du grand potentiel crĂ©atif offert par ce plugin. Sans compromettre la facilitĂ© d’utilisation et l’attention portĂ©e aux utilisateurs moins expĂ©rimentĂ©s.

Comment utiliser le constructeur de thĂšme Elementor

L’une des caractĂ©ristiques les plus intĂ©ressantes d’Elementor est la possibilitĂ© de crĂ©er votre propre thĂšme WordPress sans compĂ©tences en programmation. Cette option n’est disponible qu’avec la version Pro. Voici comment utiliser cet outil. Tout d’abord, voyons quels Ă©lĂ©ments vous pouvez crĂ©er avec le CrĂ©ateur de thĂšmes.

Allez dans ModÚle > Créateur de thÚme, vous y trouverez plusieurs onglets :

  • Constructeur de thĂšmes
  • En-tĂȘte
  • Pied de page
  • Simple
  • Poste unique
  • Page unique
  • Archives
  • RĂ©sultats de la recherche
  • Erreur 404

Pour crĂ©er un en-tĂȘte personnalisĂ© avec Elementor, allez dans En-tĂȘte et sĂ©lectionnez Ajouter un nouvel en-tĂȘte. Donnez-lui un nom et continuez.

LĂ  encore, vous pouvez choisir l’un des modĂšles disponibles. Cliquez sur Insertion et commencez Ă  personnaliser son apparence (marges, taille, couleurs…). Lorsque vous aurez terminĂ©, cliquez sur le bouton Publier et il vous sera demandĂ© oĂč utiliser cet en-tĂȘte.

Ajoutez une condition et choisissez de l’afficher sur l’ensemble du site ou uniquement sur certaines pages. La mĂȘme procĂ©dure peut Ă©galement ĂȘtre appliquĂ©e Ă  la crĂ©ation de tous les autres Ă©lĂ©ments. Lorsque vous crĂ©ez une page telle que la page de rĂ©sultats de recherche, assurez-vous qu’aprĂšs la publication, vous attribuez la bonne condition pour afficher ce modĂšle. (Dans ce cas, vous devez sĂ©lectionner RĂ©sultats de recherche).

Créer une popup avec Elementor

Elementor Pro dispose Ă©galement d’une fonction intĂ©ressante pour la crĂ©ation de popups. Allez dans ModĂšles > Popups et cliquez sur Ajouter un nouveau popup. Lors du choix d’un modĂšle, vous trouverez dĂ©sormais Ă©galement une section Popup. Dans laquelle vous pourrez sĂ©lectionner celle que vous prĂ©fĂ©rez. AprĂšs l’avoir insĂ©rĂ©, vous pouvez personnaliser divers aspects, du contenu aux graphiques. Jusqu’Ă  prĂ©sent, tout fonctionne de la mĂȘme maniĂšre que pour la crĂ©ation de tout autre Ă©lĂ©ment Ă  l’aide du constructeur de thĂšme Elementor. Mais maintenant, lorsque vous cliquez sur Publier, de nouvelles options apparaissent.

Tout d’abord, la section Conditions vous permet de choisir oĂč afficher votre popup. (Comme nous l’avons vu pour l’en-tĂȘte, par exemple). Vous pouvez ensuite sĂ©lectionner le Trigger, c’est-Ă -dire l’Ă©vĂ©nement qui provoquera l’affichage de la pop-up.

Plusieurs options sont Ă©galement possibles. Au chargement de la page, au clic sur un Ă©lĂ©ment, au dĂ©filement, ou mĂȘme lorsque l’utilisateur tente de quitter la page.

Enfin, grùce aux rÚgles avancées, vous pouvez établir des paramÚtres avancés pour le déclencheur.

Par exemple, vous pouvez choisir d’afficher la fenĂȘtre contextuelle aprĂšs une certaine pĂ©riode. Ou bien aprĂšs que l’utilisateur a consultĂ© un certain nombre de pages.

Conclusion

Elementor Pro est un plugin WordPress incroyablement puissant qui offre aux utilisateurs une grande flexibilitĂ© en termes de ce qu’ils peuvent crĂ©er. Avec Elementor, vous n’avez pas besoin de compĂ©tences en programmation. CrĂ©ez des en-tĂȘtes, des pieds de page, des pages et des popups personnalisĂ©s. Il vous suffit de sĂ©lectionner un modĂšle et de commencer Ă  le modifier en fonction de vos besoins. Les possibilitĂ©s sont infinies !

Articles dans la thématique Wordpress :
commandes github & heroku
Commandes github/heroku AntisĂšche

Commandes Github Créer un repo sur github (lead dev) : Lister toutes les branches : Créer une branche Pusher votre branch : Retourner sur la branch master : Récupérer du code qui a été mergé sur la branch master : Commandes Heroku Avant de déployer sur heroku (déploiement par le.

Lire l'article
Créer une application Rails (commandes basiques)

Lancer une application avec le template de base (postgres + webpack js) Petit warning ⚠ bien aller dans le dossier code avant de lancer la commande : cd code/ Pour savoir quels dossiers sont Ă  ta dispo : ls Configurer l’application avant de commencer : DerniĂšre Ă©tape : CrĂ©er le.

Lire l'article
audit seo developpement web alexis stephan
Audit SEO DĂ©finition : Tout dont vous devez savoir

Un audit SEO est le processus d’Ă©valuation d’un site Web dans le but de trouver les problĂšmes qui peuvent empĂȘcher le site d’ĂȘtre mieux rĂ©fĂ©rencĂ© dans les pages de rĂ©sultats des moteurs de recherche (SERPs). L’objectif d’un audit SEO est d’identifier les amĂ©liorations potentielles qui peuvent ĂȘtre apportĂ©es Ă  un.

Lire l'article