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 :
enregistrement dns
Comprendre les DNS / Gérer

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Les enregistrements DNS (Domain Name System) sont des entrées qui permettent de lier les noms de domaines aux adresses IP correspondantes. Ils jouent un.

Lire l'article
Gérer son nom de domaine sur Heroku

Le contenu ruby on rails est d√©di√© √† la communaut√© du Wagon (√©l√®ves et professeurs). Pour vous inscrire au bootcamp pour devenir web d√©veloppeur c'est ici. Un nom de domaine est similaire √† une adresse postale. Il est important pour votre application rails qu’elle soit accessible sur le nom de.

Lire l'article
scraper en ruby
Créer un scraper automatisé en ruby

Le contenu ruby on rails est d√©di√© √† la communaut√© du Wagon (√©l√®ves et professeurs). Pour vous inscrire au bootcamp pour devenir web d√©veloppeur c'est ici. Le scraping vous permet d’extraire de la donn√©e d’un site internet afin de la traiter localement. L’int√©r√™t du scraping est de pouvoir manipuler, traiter,.

Lire l'article