Comment créer un formulaire personnalisé en utilisant Beaver Builder (en 5 étapes)
L’un des plus grands avantages de Beaver Builder est le grand nombre de modules disponibles. Quel que soit le type d’élément dont votre page a besoin, notre plug – in peut l’inclure. Cependant, chaque site est différent et nécessite des fonctionnalités uniques. Si nos options par défaut ne répondent pas à tous vos besoins, vous pouvez créer un module personnalisé dans Beaver Builder pour répondre entièrement à vos besoins. Dans cet article, nous vous expliquerons ce qu’est un module personnalisé, pourquoi il est si puissant et comment créer votre propre module. Nous vous donnerons donc quelques exemples de démarrage. Plongeons!
Introduction aux modules personnalisés dans Beaver Builder comme vous le savez peut – être déjà, les modules sont les éléments de base que Beaver Builder utilise pour créer des pages. Notre plug – in Premium est prêt à l’emploi et offre un large choix de modules pour s’adapter à presque n’importe quelle mise en page, du texte de base et des photos aux éléments avancés de curseur et d’action (CTA). Cependant, ne vous inquiétez pas si vous trouvez que ce dont vous avez besoin est légèrement différent de ce qui est disponible par défaut. Chaque module Beaver Builder peut être personnalisé en fonction de vos besoins avec ses paramètres. Cependant, si vous avez besoin d’une solution plus personnalisée, vous pouvez créer un nouveau formulaire à partir de zéro.
Les modules personnalisés permettent à l’utilisateur de créer presque n’importe quelle mise en page que vous pouvez imaginer, de la vue personnalisée de la bibliothèque à la conception Multi – colonnes complexe. Cela fait de Beaver Builder une option extrêmement flexible pour la conception de sites Web. La seule limite est votre créativité. Plus important encore, tous les modules que vous créez peuvent être réutilisés sur votre site ou même exportés vers d’autres sites. Une fois que vous avez encodé et installé le module, il est facile de l’ajouter à n’importe quelle page en le faisant glisser – déposer. Vous pouvez également intégrer votre propre panneau de configuration pour le nouveau projet.
Comment créer un formulaire personnalisé en utilisant Beaver Builder (en 5 étapes) La création d’un formulaire personnalisé en utilisant Beaver Builder nécessite du Code, ce qui n’est pas une tâche de base. En approfondissant ce processus, nous supposons que vous connaissez au moins les principes de base et le langage du développement web, y compris PHP et CSS. Si vous n’êtes pas familier avec ces compétences ou si vous avez besoin d’un examen, w3schools fournit un tutoriel php et un tutoriel CSS. Lorsque vous êtes prêt à plonger, passez aux étapes suivantes.
Étape 1: créer un nouveau plug – in la première étape consiste à créer un plug – in simple. L’ajout d’un module au plug – in au lieu de l’ajouter directement à Beaver Builder garantit qu’il n’est pas écrasé par la mise à jour. Pour créer ce plugin, vous devez accéder au système de fichiers WordPress. Pour ce faire, vous pouvez utiliser un client FTP (File Transfer Protocol), comme Filezilla, ou un gestionnaire de fichiers dans l’hôte Web cpanel. Dans le système de fichiers, allez à WP content > plugins, qui est l’emplacement par défaut pour les plugins WordPress. Créez un nouveau dossier et attribuez – lui un nom unique en minuscules et en traits d’union, comme un formulaire de création personnalisé.
Dans ce dossier, créez un nouveau fichier PHP avec le même nom de dossier (par exemple, Custom Builder modules.php). Dans ce fichier, collez le code suivant: \/ * * * nom du plug – in: Mon module personnalisé * Uri du plug – in: http:\/\/www.mywebsite.com Description: module personnalisé pour le plug – in Beaver Builder Version: 1.0 * auteur: votre nom * URI de l’auteur: http:\/\/www.mywebsite.com * \/ définition (‘My _ modules dir’, plugin Dir path (File u)); Définition (‘My _ modules URL’, plugins URL (‘\/’, file u)); Fonction my _ Load module examples ()
Si (Class _ exists (‘flbuilder’) {\/ \/ include Custom modules here.}} Add _ action (‘init’, my Load module
E _ exemple \
Une fois terminé, allez au tableau de bord WordPress, allez au plugin et activez le nouveau plugin:
Fonctions publiques construction () {parent: \ Construct (array (‘name’ = > \ \ = > \ (‘My module’, ‘fl Builder’), ‘description’ = > \ = > \ \ \ \ = \ = \ = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = catégorie ‘,’ fl Builder ‘)) \
‘= > true is enabled, \/ \/ default is true and can be omitted. \
Collez le code suivant dans odulo dans le plug – in créé dans le fichier plug – in (Custom Builder – modules.php):
Mon Module \/ mon module est requis une fois. Php ‘; Ce code doit remplacer la ligne Read \/ \/ qui contient le formulaire personnalisé ici à la fin du fichier: Étape 3: utilisez le module enregistré pour définir les paramètres du module, puis définissez les paramètres à afficher pour le module dans Beaver Builder page Builder. Le Code de base est le suivant: flbuilder:: Register _ module (‘mymoduleclass’, array (); Dans ce tableau, vous pouvez définir les onglets, les sections et les paramètres qui apparaissent dans le panneau de configuration du module Beaver Builder. Il existe de nombreux paramètres disponibles, tels que les commutateurs d’alignement (gauche, droite, Centre), les bordures, les sélecteurs de couleurs, les champs d’entrée de texte personnalisés CSS et Javascript, et plus encore. Les paramètres que vous incluez dépendent de votre point de vue sur le module et de la façon dont il est utilisé. Pour voir tous les paramètres et exemples de code disponibles, consultez la référence complète des champs de configuration dans le Guide du développeur de modules personnalisés Beaver Builder. N’oubliez pas que vous pouvez intégrer ce module personnalisé dans les pages futures et d’autres projets, même si vous le créez pour une utilisation particulière. Plus de paramètres vous donneront plus de flexibilité. Étape 4: la dernière étape nécessaire pour ajouter le HTML de première ligne d’un formulaire est de créer un fichier HTML de première ligne pour un formulaire personnalisé. Ce code rend le formulaire sur une page Web en direct qui l’intègre. Tout d’abord, allez dans le dossier modules (modules de constructeur personnalisés > mes modules) et créez un nouveau dossier appelé include. Puis ajoutez un fichier nommé frontend. Php. Puis il y a le chemin complet vers le fichier HTML du module pers
Filmez le même sujet avec différentes caméras. Il s’applique également avant et après le tournage. Vous trouverez le processus complet de création de ce module dans notre base de connaissances. Ensuite, il y a une bibliothèque d’images horizontales de défilement appelée broadside, à partir d’un module personnalisé Beaver rusé. Cette magnifique galerie d’images est idéale pour présenter des projets, des affiches et d’autres médias et pour créer des pages de portefeuille: