Notre plugin Beaver Builder vous aide à créer des sites Web complets avec des modèles et des modules. Cependant, il peut arriver que vous souhaitiez personnaliser davantage votre site. Avec les shortcodes Beaver Builder, vous pouvez ajouter du contenu supplémentaire dans les modules, les en-têtes, les pieds de page et les barres latérales.

Dans cet article, nous présenterons les codes abrégés Beaver Builder et vous montrerons comment les insérer dans votre contenu. Nous explorerons également quelques exemples qui pourraient améliorer la conception de votre site Web. Allons-y !

Une introduction aux codes abrégés Beaver Builder

Si vous avez déjà travaillé avec des sites Web WordPress, vous connaissez peut-être déjà les shortcodes. Ce sont de petits extraits de code qui ajoutent des fonctionnalités à votre site.

Plutôt que de tout écrire en HTML à l'aide de l'éditeur de code, vous pouvez simplement insérer un shortcode dans votre page. Cela aura un slug ou un ID qui correspond à un élément Beaver Builder, comme un module, une ligne ou une colonne. Vous pouvez également utiliser des codes abrégés pour les publications, les pages ou les modèles de mise en page.

Dans cet exemple, nous ajoutons une ligne enregistrée à un module HTML :

Lorsque nous cliquons sur Enregistrer , Beaver Builder convertit automatiquement le shortcode dans la ligne enregistrée à laquelle il correspond :

Plus tard dans le post, nous vous montrerons comment ajouter des shortcodes dans l'éditeur. Pour l'instant, discutons des avantages de l'utilisation des codes abrégés Beaver Builder.

Les codes abrégés peuvent être pratiques pour ajouter des éléments visuels aux zones textuelles. Par exemple, vous pouvez créer un module de tarification et utiliser un shortcode pour ajouter une photo de produit. De cette façon, vous n'aurez pas besoin de travailler avec deux modules individuels (Tarification et Photo) puisqu'ils seront combinés :

Les codes abrégés vous permettent également d'insérer des éléments Beaver Builder dans votre contenu tout en travaillant avec l'éditeur de blocs WordPress. Cela signifie que vous n'aurez pas besoin de passer à l'éditeur Beaver Builder pour ajouter un module, une ligne ou une colonne.

Vous pouvez ajouter des shortcodes à n'importe quel module Beaver Builder avec un champ de texte, y compris :

• HTML
• Texte
• Entête
• Faire appel à
• Icône
• Onglets

Cependant, il n'est peut-être pas judicieux d'ajouter trop de codes abrégés. Cela pourrait augmenter les temps de chargement car le serveur doit demander les fichiers CSS et Javascript pour chaque shortcode. Nous vous recommandons d'en utiliser au maximum deux par page.

5 exemples de codes abrégés utiles de Beaver Builder

Il existe de nombreux cas d'utilisation des codes abrégés Beaver Builder. Examinons quelques exemples utiles.

1. Boutons d'appel à l'action dans un tableau de prix

Supposons que vous ayez un tableau de prix avec plusieurs options de produits sur une page de destination ou une page de vente. Vous pouvez simplement répertorier les prix, puis diriger les clients vers le paiement avec un bouton en bas de la page. Cependant, les utilisateurs devront faire défiler davantage vers le bas, ce qui pourrait potentiellement nuire à l'expérience utilisateur (UX).

Au lieu de cela, vous pouvez créer un bouton d'appel à l'action (CTA) qui invite les clients à acheter le produit. Cela créera un lien direct vers la page de paiement afin que les clients n'aient pas à naviguer plus loin. Ensuite, vous pouvez ajouter ce bouton à votre tableau de prix avec un shortcode :

N'oubliez pas de personnaliser le bouton CTA en fonction de votre marque visuelle.

2. Un formulaire de contact dans un onglet

Si vous avez un site d'entreprise, vous pouvez ajouter quelques onglets à votre section À propos. De cette façon, les utilisateurs peuvent en savoir plus sur votre entreprise sans avoir à faire défiler la page.

Supposons que vous souhaitiez également que les clients potentiels vous contactent au sujet de vos services dès qu'ils ont fini de lire. Les utilisateurs passent déjà du temps à basculer entre vos onglets. Les diriger ailleurs pourrait leur donner quelques secondes supplémentaires pour repenser leur décision de tendre la main.

Au lieu de cela, vous pouvez ajouter un formulaire de contact à l'un de vos onglets, en utilisant un shortcode :

C'est si facile! Désormais, les clients peuvent vous contacter sans avoir à quitter la page.

3. Images dans une zone de texte

Lors de la création de vos pages, vous préférerez peut-être ajouter des images et du texte à un seul module. Bien que vous puissiez utiliser deux modules distincts, le contenu serait divisé et vous ne pourriez pas placer l'image au milieu du texte.

Combiner du texte et des images est un moyen efficace d'afficher des produits dans votre boutique en ligne. Par exemple, vous pouvez ajouter des images à votre module Pricing Box pour présenter différentes fonctionnalités du produit :

Théoriquement, vous pourriez assembler cette même disposition avec différents modules empilés les uns sur les autres. Cependant, l'utilisation d'un shortcode d'image peut accélérer le processus de conception.

4. N'importe quel module dans l'éditeur de blocs

Vous pouvez également utiliser les codes abrégés Beaver Builder lorsque vous travaillez avec l'éditeur de blocs. Cela peut être particulièrement pratique si vous écrivez un article de blog et que vous souhaitez ajouter des éléments interactifs à votre article.

Vous pouvez facilement déposer un module Beaver Builder dans la page sans quitter l'éditeur de blocs. Insérez simplement un bloc Shortcode et collez votre code à l'intérieur :

Une fois que vous publiez le message, le shortcode affichera le contenu sur le front-end :

Par exemple, vous pouvez insérer un module Formulaire de contact. Vous pouvez également ajouter un appel à l'action qui dirige les clients vers votre magasin ou une carte intégrée de l'emplacement de votre magasin.

5. La date (thème Beaver Builder uniquement)

Notre thème Beaver Builder est livré avec un shortcode de date personnalisé. Cela affiche la date actuelle sur n'importe quelle partie de votre page, y compris les en-têtes, les pieds de page et les barres latérales :

Ce shortcode pourrait être utile si vous gérez un site Web d'actualités. Vous pouvez ajouter la date en utilisant l'un des shortcodes suivants :

Vous pouvez également utiliser ce shortcode à côté de votre message de copyright dans le pied de page. De cette façon, vous pouvez vous assurer qu'il est toujours à jour.

Comment ajouter des codes courts avec Beaver Builder (en 2 étapes)

Nous venons de couvrir plusieurs scénarios dans lesquels les codes abrégés Beaver Builder peuvent accélérer et simplifier votre processus de conception. Voyons maintenant comment les ajouter à votre site :

Étape 1 : Créez votre code court

Les codes abrégés ne sont pas facilement disponibles sur votre site Web. Vous devrez d'abord enregistrer les éléments Beaver Builder avant de pouvoir les insérer en tant que codes abrégés. Ces éléments peuvent inclure :

• Modules
• Lignes
• Colonnes
• Modèles

Par exemple, supposons que vous souhaitiez concevoir un module de formulaire de contact personnalisé. Vous pouvez le faire en accédant à Beaver Builder > Modules enregistrés > Ajouter nouveau :

Vous serez ensuite invité à nommer votre module et à choisir son type :

Cliquez sur Ajouter un module enregistré . Sur la page suivante, sélectionnez Lancer Beaver Builder pour accéder à l'éditeur. Ici, vous pouvez personnaliser le formulaire de contact à votre guise :

Lorsque vous êtes prêt, assurez-vous de publier votre module. Il apparaîtra maintenant sur votre page Modules enregistrés . Si vous utilisez la dernière version de Beaver Builder, vous pourrez voir les shortcodes générés automatiquement :

Si vous ne voyez pas la colonne ShortCode , vous devrez créer le code manuellement. Pour ce faire, vous aurez besoin du slug du module.

Si vous cliquez sur le bouton Modifier sous votre module, vous devriez pouvoir voir son slug. Si vous ne le voyez pas, ouvrez le menu Screen Options et cochez la case à côté de Slug :

Vous pouvez maintenant utiliser le code suivant pour créer un shortcode pour ce module :

 [fl_builder_insert_layout slug="my-post-slug"]

Pensez à remplacer « my-post-slug » par le slug de votre module Beaver Builder. Dans notre exemple, cela ressemblera à ceci :

 [fl_builder_insert_layout slug="contact-form"]

C'est tout - vous savez maintenant comment créer des codes abrégés pour les modules Beaver Builder.

Étape 2 : Insérez le shortcode dans votre page

La dernière étape consiste à ajouter le shortcode à votre page. Dans la plupart des cas, ce processus impliquera de coller l'extrait de code dans le champ Texte d'un module.

Voici notre exemple de tableau de prix de plus tôt. Comme vous pouvez le voir, nous avons ajouté le shortcode pour le bouton CTA dans la zone de texte Feature 5 :

Étant donné que Beaver Builder utilise un éditeur frontal, vous pourrez voir immédiatement votre module enregistré. Dans certains cas (comme lors de l'utilisation d'un module HTML), vous devrez peut-être enregistrer vos modifications avant que le shortcode ne soit converti en élément visuel.

Conclusion

Les codes abrégés Beaver Builder vous permettent d'ajouter rapidement des modules, des lignes, des colonnes ou des mises en page enregistrés dans différentes parties de vos pages. Vous pouvez les utiliser pour accélérer le processus de conception et créer de belles pages WordPress.

Pour récapituler, vous pouvez utiliser les shortcodes Beaver Builder en suivant ces étapes simples :

1. Enregistrez un élément (module, ligne, colonne ou mise en page) et recherchez son shortcode ou son slug.
2. Insérez le shortcode dans un champ de texte dans un module Beaver Builder ou le bloc Shortcode dans l'éditeur de blocs.

Êtes-vous prêt à commencer à créer de superbes pages pour votre site ? Consultez la liste complète des fonctionnalités conviviales de Beaver Builder !

QUESTIONS CONNEXES

Beaver Builder utilise-t-il des codes abrégés ?

Beaver Builder fournit des codes abrégés pour les éléments enregistrés tels que les modules, les lignes, les colonnes et les modèles. Vous pouvez ensuite ajouter ces extraits aux champs et modules textuels. Cela est possible à la fois dans l'éditeur frontal de Beaver Builder et dans l'éditeur de blocs WordPress. De plus, les shortcodes vous permettent d'utiliser vos autres plugins préférés avec Beaver Builder.

Avez-vous besoin du thème Beaver Builder pour utiliser des codes courts ?

Vous n'avez pas besoin du thème officiel Beaver Builder pour utiliser les shortcodes. Vous pouvez créer des pages et ajouter des codes abrégés avec la plupart des thèmes à l'aide du plugin de création de page. Cependant, certains shortcodes, comme le shortcode Date, ne fonctionnent qu'avec le thème Beaver Builder.

Quelle est la différence entre Beaver Builder et Beaver Themer ?

Beaver Builder est un outil de création de pages qui vous permet de modifier la zone de contenu des pages et des publications à l'aide de modules et de modèles. En revanche, Beaver Themer est un plugin complémentaire qui vous permet de modifier les zones de votre site qui sont généralement contrôlées par votre thème, telles que les en-têtes, les pieds de page et les barres latérales. Ce contenu comprend des modèles de thème, des parties de modèle et des grilles de publication.