Comment utiliser le widget Elementor Shortcodes [Guide du débutant]

Récemment, je suis passé à Elementor en tant que générateur de glisser-déposer de prédilection. Dès le début, la courbe d'apprentissage était si facile et visuellement divertissante - quelque chose que je pouvais utiliser pour rendre une page Web visuellement parfaite avec une précision extrême.

Quelques jours plus tard, dans WordPress Elementor, j'ai réalisé que je pouvais multiplier par dix le processus de construction simplement en utilisant les « shortcodes Elementor ».

Pour commencer, optimiser un site Web pour le rendre rapide est une chose et d'autre part, créer un site Web rapidement et facilement en est une autre. Parlons donc de la façon d'utiliser très facilement les shortcodes WordPress Elementor et si c'est une bonne idée d'utiliser les shortcodes Elementor pour votre projet.

Que sont les codes courts Elementor ?

Les codes courts Elementor sont une chaîne de caractères ou un extrait qui peut être copié et collé pour dupliquer un composant spécifique de votre site Web. En d'autres termes, les shortcodes sont des balises spéciales ; quelque chose, une fois entré, générera un composant différent une fois que vous l'afficherez.

Si cela vous semble compliqué, laissez-moi le décomposer pour vous. La bibliothèque Elementor possède une énorme collection de widgets prédéfinis que vous pouvez utiliser pour accélérer le processus de création de votre site Web.

Maintenant, si vous êtes de haut niveau dans le développement et que vous avez besoin de dupliquer un composant, les codes courts sont le meilleur moyen de le faire en quelques secondes.

Tout d'abord, vous devez copier l'extrait du composant sélectionné et le coller là où vous souhaitez le dupliquer.

Supposons que vous travaillez sur la création d'un formulaire que vous allez utiliser sur une autre page. Normalement, vous créeriez exactement le même formulaire à l'aide d'Elementor, et cela vous prendrait quelques minutes pour le faire.

Cependant, les codes courts du modèle Elementor vous permettent de sélectionner un composant prédéfini de votre choix à partir d'une page Web, puis de le dupliquer à d'autres endroits.

C'est l'une des utilisations les plus basiques des codes courts de widget, et honnêtement, il y a une utilisation plus efficace pour cela. Alors, si vous pensez déjà…

Quand et comment utiliser les codes courts Elementor ?

Voici un cas réel que j'ai trouvé le mieux adapté à l'utilisation des shortcodes WordPress Elementor :

Les codes courts Elementor sont le choix idéal pour ajouter rapidement plus de contenu à votre site Web s'il est partiellement conçu à l'aide d'Elementor.

Si vous souhaitez ajuster l'ancien contenu et ajouter des widgets prédéfinis à votre page, la suggestion d'un expert indique que les codes abrégés sont la voie à suivre. Alors mettez les shortcodes pour le modèle que vous voulez, et le tour est joué !

C'est le meilleur choix pour injecter des shortcodes Elementor pour peaufiner. Un scénario courant dans lequel vous pouvez rencontrer cette situation est de travailler sur les pages par défaut d'un thème choisi.

Tous les thèmes ne sont pas conçus à l'aide d'Elementor, donc essayer de les convertir en une page Web Elementor peut casser la structure de la page.

En outre, d'autres plugins qui ne prennent pas en charge Elementor ne permettront pas de modifier ces éléments et vous laisseront ainsi dans un état de catastrophe.

Mais ne vous inquiétez pas…

Avec les shortcodes Elementor, vous pouvez ajouter de nouveaux composants ou éléments à votre site Web sans risque de conflit avec d'autres constructeurs de pages et/ou plugins. Et en plus, il vous permet également d'ajouter votre propre modèle personnalisé.

Comment installer des shortcodes pour Elementor ?

L'installation de shortcodes est vraiment simple et ne prend que 3 étapes pour le faire. Voici comment installer des shortcodes pour Elementor.

Un petit rappel - les trois étapes de ce guide d'installation nécessitent que vous ayez installé Elementor dans WordPress. Donc, si vous ne l'avez pas fait jusqu'à présent, faites-le rapidement et revoyez les étapes plus tard.

Il y a deux processus dans ce guide d'installation - l'installation automatique et l'installation manuelle

Installation automatique

1. Rendez-vous sur « Plugins » et suivez « Ajouter un nouveau » à partir du même écran.
2. Recherchez les codes courts WordPress pour Elementor.
3. Installez le plugin et activez-le.

Installation manuelle

1. Téléchargez le code court RS<a href=" #"> Elementor.
2. Extrayez le fichier shortcode.zip. Les fichiers du plugin seront dans le répertoire nommé rselements-lite.
3. Téléchargez les fichiers du plugin à l'emplacement de votre installation WordPress. Le répertoire devrait ressembler à ceci - /wp-content/plugins/elementor-short-code.
4. Activez le plugin depuis la section 'Plugins' du menu WordPress.

L'installation manuelle n'est qu'un exemple d'un plugin particulier, et le processus est similaire pour tout plugin que vous souhaitez installer manuellement.

Comment entrer les modèles Elementor à l'aide de codes courts ?

Voici comment vous pouvez entrer un modèle Elementor préconçu à l'aide de codes abrégés. Voici comment vous pouvez le faire. Rendez-vous sur -

WordPress -> Modèles -> Modèles enregistrés

Ici, vous pourrez vérifier le shortcode pour chaque widget de la bibliothèque. En outre, vous pouvez également créer votre propre modèle et générer un shortcode unique pour celui-ci.

Chaque modèle enregistré a son propre shortcode unique, qui est toujours disponible pour une utilisation sur d'autres pages.

Par exemple, vous souhaitez créer une fenêtre contextuelle WooCommerce où vos clients peuvent voir l'état de leur commande.

Pour cela, tout ce que vous avez à faire est de faire glisser et déposer un widget contextuel depuis la barre latérale sur votre toile. Maintenant, générez le shortcode à partir de la fenêtre contextuelle d'origine et collez-le dans la nouvelle fenêtre contextuelle, et il générera exactement le même widget contextuel en un rien de temps.

Maintenant que vous connaissez les shortcodes et leur fonctionnement, vous vous demandez peut-être si Elementor convertit chaque contenu d'une page Web en shortcodes ? Eh bien, si vous le demandez déjà, voici votre réponse.

Elementor entre-t-il du contenu dans des pages Web avec ou sans shortcodes ?

Pour dissiper votre confusion, Elementor n'insère pas de contenu dans une page Web à l'aide de codes courts. En termes simples, il ne convertit pas un modèle en un shortcode unique, puis le place sur la page Web. Voici pourquoi…

Si Elementor utilisait des codes courts pour chaque modèle généré dans la bibliothèque, ses éléments de bibliothèque dépendraient énormément du plugin Elementor.

Et pour une raison quelconque, si vous devez supprimer Elementor de la liste des plugins installés pour votre page Web, vous perdrez toute la prise en charge des composants de la bibliothèque Elementor existants et les codes courts leur sont associés. Comme si cela deviendrait un cauchemar absolu si cela se produisait.

Mais ce n'est pas le cas avec Elementor, car il résout le problème simplement. Elementor génère un shortcode pour le modèle sélectionné que vous souhaitez copier.

Mais avant cela, il crée une copie de votre modèle conçu sous forme de code sur la page.

Et donc, la prochaine fois que vous copiez quelque chose d'un endroit à un autre, vous collez le code à l'arrière. Mais visuellement, vous utilisez des shortcodes pour le faire.

Les constructeurs de pages antérieurs avaient de telles dépendances sur des plugins et des modèles spécifiques, pour lesquels il était difficile d'utiliser d'autres plugins sur un site Web.

Mais maintenant, sans dépendances, vous pouvez facilement modifier une page Web, qu'elle utilise ou non le générateur de pages Elementor.

En résumé

A présent, vous avez toutes les idées dont vous avez besoin pour commencer à utiliser les shortcodes Elementor sur votre site WordPress. De plus, les premières fois sont toujours un peu déroutantes. Alors, assurez-vous de regarder quelques vidéos pendant que vous le faites pour vous assurer que votre apprentissage est parfait.