Cómo crear un módulo personalizado usando Beaver Builder (en 5 pasos)

Una de las mayores ventajas de Beaver Builder es la gran cantidad de módulos disponibles. Independientemente del tipo de elemento que necesite para su página, las posibilidades de nuestro complemento lo incluyen. Sin embargo, cada sitio es diferente y requiere características únicas. Si nuestras opciones prefabricadas no coinciden con todas sus necesidades, puede crear un módulo personalizado en Beaver Builder para que se ajuste exactamente a sus necesidades en este artículo, abordaremos cuáles son los módulos personalizados, por qué son tan fuertes y cómo crearlas en usted. Luego le dará algunos ejemplos para comenzar. ¡Vamos a bucear!
Una introducción a los módulos personalizados en Beaver Builder, como probablemente ya sepa, los módulos son los bloques básicos utilizados por Beaver Builder para crear páginas. Fuera de la caja, nuestro complemento Premium ofrece una gran selección de módulos para que coincida con casi cualquier aspecto, desde texto básico y fotos hasta diapositivas avanzadas y llamadas de acción (CTA). Sin embargo, si siente que necesita algo un poco diferente de lo que está disponible por defecto, no se preocupe. Cada módulo Beaver Builder se puede personalizar para que se ajuste a sus necesidades a través de su configuración. Sin embargo, si necesita una solución aún más personalizada, puede crear módulos completamente nuevos desde cero.
Los módulos personalizados permiten a los usuarios crear casi cualquier aspecto que pueda imaginar, desde vistas personalizadas de la galería hasta modelos complejos con múltiples columnas. Esto hace que Beaver Builder sea una opción extremadamente flexible para diseñar sitios web. El único límite es tu creatividad. Lo mejor, cualquier módulo que cree se puede reutilizar en su sitio e incluso exportarse a otros sitios. Una vez que haya codificado e instalado un módulo, agregarlo a cualquier página es tan simple como deslizar y colocar. Incluso puede incorporar su propio panel de configuración para su nuevo elemento. Cómo crear un módulo personalizado usando Beaver Builder (en 5 pasos) crear un módulo personalizado que usa Beaver Builder implica trabajar con el código y no es un nivel de inicio. A medida que profundizamos en este proceso, asumiremos que usted está al menos familiarizado con los principios y idiomas básicos del desarrollo web, incluidos PHP y CSS. Si no está familiarizado con estas habilidades o necesita mejorar su conocimiento, W3Schools tiene un tutorial sobre PHP y otro sobre CSS. Después de que esté listo para hundirse, continúe con los pasos a continuación. Paso 1: Cree un nuevo complemento El primer paso es crear un complemento simple. Agregar su módulo al complemento, en lugar de directamente en Beaver Builder, le asegura que no se sobrescribirá.
Para crear este complemento, necesitará acceso a su sistema de archivos de WordPress. Esto se puede hacer utilizando un cliente FTP (Protocolo de transferencia de archivos) como Filezilla, o a través del Administrador de archivos en su host web. En su sistema de archivos, navegue en WP-Content> Plugins, que es la ubicación predeterminada para los complementos de WordPress. Cree un archivo nuevo y déle un nombre único con minúsculas y guiones, como módulos de construcción personalizada. En esa carpeta, cree un nuevo archivo PHP con el mismo nombre que la carpeta (por ejemplo, personalizado-building-modules.php). En este archivo, pegue el siguiente código:/** * Nombre del complemento: Mis módulos personalizados * Plugin: http://www.mywebsite.com * Descripción: Módulos personalizados para Beaver Builder. * Versión: 1.0 * Autor: Su nombre * Autor Autor: http://ww.mywebsite.com */define (‘my_modules_dir’, plugin_dir_ (__file__)); Define (‘my_modules_url’, plugins_url (‘/’, __file__)); La función my_load_module_example () {if (class_exists (‘flBuilder’)) {// incluye sus módulos personalizados aquí. }} add_action (‘init’, ‘my_load_module_example’); Reemplace los campos en la parte superior con su información. Las constantes “My_ Modules_Dir” y “my_modules_url” también deben modificarse para que coincidan con el espacio de nombre del complemento. Como puede ver en este ejemplo, puede agregar cualquier módulo personalizado que desarrolle en el mismo director en el mismo complemento, pero en este tutorial, nos centraremos en crear un solo módulo personalizado.
Cuando termine, vaya al tablero de WordPress, navegue por los complementos y active el nuevo complemento: Paso 2: Agregue un módulo a su complemento Ahora puede construir su módulo personalizado para que pueda agregarlo al complemento que creó. Cree una nueva subcarpeta en su archivo de complemento (módulos personalizados-constructor) y dale un nombre único. Para este ejemplo, usaremos My-Model. Cree un nuevo archivo PHP en la carpeta del mismo nombre (my-Module.php). Abra este archivo para editar e inserte el siguiente código: MyModuleClass Class extiende flBuilderModule {public function __construct ()
{parent :: __ construct (array (‘name’ => __ (‘mi módulo’, ‘fl-builder’), ‘descripción’ => __ (‘un módulo absolutamente maravilloso!’, ‘fl-builder’), ‘Group’ => __ (‘My Group’, ‘Fl-Builder’), ‘Categoría’ => __ (‘mi categoría’, ‘FL-Builder’), ‘Dir’ => My_Modules_Dir. “Mi módulo/” , ‘Url’ => my_modules_url. “Mi módulo /”, ‘icona’ => ‘button.svg’, ‘editor_export’ => true, // El valor predeterminado en true y puede ser omitido. ‘Habilitado’ => true , / / ​​El valor predeterminado a verdadero y se puede omitir.
‘parcial_refresh’ => false, // El valor predeterminado en falso y se puede omitir. )); }} Este código asigna el módulo de una clase, que deberá registrarse en Beaver Builder en el paso 3. El nombre de la clase debe seguir el nombre de su módulo. Según la Convención, los nombres de las clases concisas palabras escribiendo la palabra de cada palabra.

Luego incluya el módulo en el complemento que creó pegando el siguiente código en su archivo de complemento (Custom-Builder-Modules.php): Request_once ‘My-Module/my-Module.php’;Este código debe reemplazar la línea que lee // incluye módulos personalizados aquí en la parte inferior del archivo: Paso 3: Defina la configuración de su módulo registrado, el siguiente paso es definir la configuración que desea aparecer en el Beaver del generador de página Constructor.El código básico se ve así: flBuilder :: registre_module (‘mymoduleclass’, array ());La matriz es el lugar donde definirá las pestañas, secciones y configuraciones que aparecen en el panel de configuración para el módulo Beaver Builder.Tiene muchas configuraciones, como interruptores de alineación (izquierda, derecha, centro), borde, selección de color, CSS y campos de introducción de JavaScript y más.
La configuración que incluye depende de su visión para su módulo y de cómo se utilizará. Para ver todas las configuraciones disponibles más ejemplos de código, consulte la referencia completa del campo Configuración en la Guía de desarrollador de módulos personalizados de Beaver Builder. Tenga en cuenta que incluso si construye este módulo personalizado con un cierto uso en mente, puede incorporarlo en páginas futuras y otros proyectos. Más configuraciones le darán más flexibilidad con el tiempo. Paso 4: Agregue el código HTML frontal del último paso requerido es crear un archivo frontal HTML para su módulo personalizado. Este código reproduce el módulo en las páginas web en vivo donde lo incorporó. Primero, ingrese la carpeta de su módulo (Custom-Builder-Modules> My-Module) y cree otra carpeta nueva llamada Incluya. Luego agregue un archivo llamado frantend.php. Por lo tanto, la ruta completa al archivo HTML del módulo personalizado debe ser: Custom-Builder-Modules> My-Modules> Incluye> frontend.php. Un ejemplo del código para este archivo es:
textARea_field;?> My-Medules> CSS> frontand.css. Cualquier CSS que agregue aquí se aplicará a todos los tribunales de su módulo personalizado en Beaver Builder. Aquí hay un ejemplo de un código que puede incluir: .fl-nodo- ; } Este código ajusta el color de fondo de su módulo. Simplemente use códigos de color HTML para ajustar el aspecto del elemento. Una vez que su módulo sea elegante como desee, está listo. Ahora debería poder acceder a él desde la pantalla de edición de Beaver Builder y usarla en cualquier página que desee. Ejemplos de módulos personalizados Los desarrolladores de Beaver Builder han creado algunos módulos personalizados increíbles para Beaver Builder. Para darle algunos ejemplos de lo que puede hacer, presentaremos tres de nuestros favoritos. Primero es un glaster personalizado para comparar las imágenes que le permiten deslizar una barra deslizante para comparar dos imágenes:

Puede tirar de la barra para mostrar más o menos de cada imagen. Esto podría ser muy útil al mostrar fotos del mismo tema hecho con diferentes cámaras, por ejemplo. También funciona bien para fotos antes y después. Puede encontrar el proceso completo para crear este módulo en nuestra base de conocimiento. Hay una galería de imágenes con deslizamiento horizontal llamado Broadside de Crafty Beaver Custom Modules. Esta hermosa galería de imágenes es perfecta para presentar modelos, carteles y otros medios y sería ideal para una página de cartera: finalmente, existe el módulo de línea de tiempo para Beaver Builder, que está disponible como un complemento gratuito en el directorio de complementos de WordPress. Agrega el módulo a la instalación de Beaver Builder para que pueda incluirlo en cualquier aspecto de página:

Una cronología como esta es perfecta para presentar eventos con un poco de estilo. Conclusión Una de las mayores fortalezas de Beaver Builder es su flexibilidad. Ya sea que solo tenga que hacer un ligero cambio en un elemento existente o si desea crear algo completamente nuevo, nuestro soporte de complementos para módulos personalizados le brinda el poder de hacerlo. Para crear su propio módulo, siga estos cinco pasos:
Crea un nuevo complemento.
Agregue un módulo al complemento.

Defina la configuración del nuevo módulo.

Agregue el código HTML frontal del módulo.

Apare a su nuevo módulo con CSS.
¿Cuáles son sus usos favoritos para módulos personalizados? ¡Háganos saber en la sección de comentarios!