Lo más destacado del complemento Divi: Divi Module Builder

Divi Builder incluye muchos módulos para ayudarlo a agregar prácticamente cualquier elemento de diseño a sus diseños, pero ¿y si quisiera crear sus propios módulos? Un complemento de terceros llamado Divi Module Builder le brinda esta capacidad.

En este artículo, echaré un vistazo al complemento y veré lo que puede hacer y lo fácil que es de usar. Requiere Divi 3.0.50 o superior y funciona con Divi y Extra. Está disponible en el sitio web del desarrollador: DiviPlugins.com.

Instalación de Divi Module Builder

Una vez que haya activado el complemento, haga clic en Página de activación de DMB . Alternativamente, puede ver esta pantalla yendo a Módulos personalizados en el panel y haciendo clic en Licencia .

Ingrese su clave de licencia y haga clic en Activar licencia . Se agrega un nuevo menú al tablero llamado Módulos personalizados . Dentro de este menú encontrará todo lo que necesita para construir sus módulos.

Agregar módulo

Los módulos se crean en el menú del tablero en Módulos personalizados , Agregar módulo . Hay dos áreas que usará para crear el módulo. El área de la izquierda es donde creará los campos. El área de la derecha es donde agregará el código que usarán los campos. Puede hacer que el módulo sea estándar o de ancho completo. Puede guardar un borrador o publicarlo cuando esté listo. Una vez que se publique el módulo, aparecerá en Divi Builder.

Los campos

Su módulo puede tener tantos campos como desee. Cada campo tiene propiedades de campo dentro de él. Aquí hay un vistazo más de cerca a cada una de las propiedades del campo:

Etiqueta de campo : la etiqueta que se mostrará como el título del campo en la pestaña de contenido del módulo.

Identificador de campo : un valor único que utilizará para hacer referencia al campo en HTML. Utilice solo letras minúsculas, números y guiones bajos para los identificadores de campo.

Descripción del campo : agregue su propia descripción para explicar el propósito del campo. Esto se mostrará debajo de la entrada en la pestaña de contenido del módulo. Este campo es opcional, pero recomiendo agregar información o ejemplos para ayudar a los usuarios.

Tipo de campo : determina el tipo de entrada que ve el usuario. Elija varios tipos de campo en el cuadro desplegable, incluidos texto, área de texto, color, imagen, alternar Sí / No e icono.

Ficha Diseño : agrega controles de fuente para este campo dentro del Diseño del módulo. Verá esta opción si selecciona texto o área de texto. Tendrá que identificar a qué elemento aplicar los controles de fuente agregando una clase en el HTML.

Ocultar campo : permite a los usuarios controlar la fuente de un elemento en la salida HTML sin permitirles controlar el contenido de este elemento. Esta opción solo estará disponible si se selecciona un texto o un tipo de campo de área de texto.

Agregue su etiqueta de campo, identificador, descripción, elija el tipo de campo, habilite la pestaña de diseño o seleccione para ocultar el campo. Reorganice los campos haciendo clic en las flechas arriba / abajo de cada campo. Cada sección y campo proporciona una descripción y un ejemplo.

Código

Agregue HTML, PHP, CSS y JavaScript personalizados para controlar la salida. Los campos HTML pueden aceptar consultas personalizadas y PHP. Deberá habilitar PHP antes de que reconozca el código. De lo contrario, imprimirá el código en la pantalla. Tanto HTML como PHP utilizan identificadores de campo para hacer referencia a los campos.

Los atajos de código se proporcionan como botones debajo de los campos de código. Esto incluye etiquetas e identificadores de campo. Agregue sus identificadores de campo y luego estará disponible en la parte inferior del área del código donde puede hacer clic para agregarlos a su código. Los identificadores HTML se ven como botones naranjas y PHP se ve como verde. Puede usar más de lo que está disponible como atajos, pero estos están aquí para ayudar a acelerar el tiempo de desarrollo.

Crear un módulo

A continuación, se muestra un ejemplo rápido de cómo crear un módulo. El título será el nombre que aparece en el módulo en Divi Builder. Agregué la etiqueta del campo, la descripción, elegí Texto como tipo de campo y creé un identificador de campo.

Lo guardé como borrador para que el identificador apareciera en los accesos directos HTML. A continuación, seleccioné la etiqueta H1 de los accesos directos, coloqué el cursor entre las etiquetas y seleccioné la etiqueta de los accesos directos HTML. Una vez que terminé, presioné publicar. El resultado debe ser un módulo con un campo donde los usuarios puedan ingresar texto. La salida mostrará el texto como un encabezado 1.

El módulo ahora aparece en Divi Builder. Puedo agregar a la página como cualquier módulo Divi.

La pestaña Contenido incluye los campos que agregué con mis etiquetas.

El módulo muestra el texto que ingresé en el campo. Desde que agregué HTML para mostrarlo como H1, el texto tiene automáticamente una propiedad H1. Podría agregar la pestaña Diseño para incluir más funciones de personalización. Esto requerirá algo de código para apuntar al campo correctamente.

Módulos

Puede ver la lista de módulos en el menú del tablero. Vaya a Módulos personalizados , Módulos . Aquí puede editar o eliminar sus módulos. Muestra si PHP está activado o desactivado para cada módulo. Si desea clonar un módulo, deberá verlo en Configuración .

Configuración de módulo personalizado

El menú Configuración proporciona una ubicación donde puede administrar sus módulos. Puede ver tanto los módulos publicados como los borradores.

Puede clonarlos, lo que le brinda un buen lugar para comenzar en un módulo que necesita una gran cantidad de código que ha utilizado en otro módulo. También puede editar, deshabilitar o habilitar PHP (lo cual es útil si está bloqueado del editor debido a un error de código; hice esto y usé esta función para editar el módulo) e importar y exportar sus módulos.

Agregar dependencia

Aquí puede agregar dependencias de CSS y Javascript de terceros. Agréguelos como URL externas o internas. Elija CSS o Javascript en el cuadro desplegable, agregue el nombre y agregue la URL. Luego se pueden usar en cualquier página. Da un ejemplo del uso de Font Awesome. Esta es una excelente manera de crear una dependencia en una ubicación y luego usarla en cualquier lugar.

Ejemplo de generador de módulos Divi: cuadrícula de blog personalizada

En lugar de crear un módulo "aceptable" como ejemplo, estoy mostrando el ejemplo asombroso que creó el desarrollador: Custom Blog Grid (disponible para descargar en el sitio web del desarrollador de forma gratuita). Incluye 3 campos, HTML, PHP y CSS. He aquí un vistazo a cada uno.

Módulo de cuadrícula de blog personalizado

El campo 1 tiene la etiqueta Categorías, utiliza categorías como identificador y el tipo de campo se establece en Texto.

El campo 2 está etiquetado como Efecto de imagen en blanco y negro. El identificador es filtro y el tipo de archivo es Alternar Sí / No. El filtro se crea en CSS.

El campo 3 está etiquetado como Título de la publicación y usa post_title como identificador. El tipo de campo se establece en Texto y tiene habilitada la pestaña Diseño. Veremos personalizaciones para este campo en el módulo. Este campo recibe una clase H2 en HTML.

PHP está seleccionado para que pueda usarse en el cuadro Código de salida HTML.

Se agrega CSS personalizado al cuadro de salida de CSS.

Aquí está el Javascript. Deberá tener un buen conocimiento de HTML, PHP, CSS y Javascript para aprovechar al máximo este complemento. En otras palabras, este es un complemento para desarrolladores.

El módulo de cuadrícula de blog personalizado en Divi Builder

Una vez que se publique el módulo, lo encontrará en Divi Builder.

Los ajustes que aparecen dentro del módulo y sus etiquetas diferirán según las selecciones que realice. Este módulo le permite agregar categorías, habilitar el efecto blanco y negro y agregar un título de publicación en la pestaña Contenido. También incluye la configuración de fondo (que es la predeterminada para los módulos).

La pestaña Diseño está habilitada para este módulo. Incluye configuraciones para el texto, el texto del título de la publicación, el borde, el espaciado y la animación.

Resultados de cuadrícula de blog personalizados

El resultado es una cuadrícula de blog con animación flotante. He habilitado el modo blanco y negro para que las imágenes se muestren en blanco y negro a menos que esté sobre ellas. Prefiero esta forma de desplazamiento: revelar la imagen al desplazar el cursor en lugar de oscurecerla.

En este, desactivé el modo blanco y negro, cambié la fuente del título y agregué un degradado de fondo. Se pueden agregar más ajustes en el código para cambiar el botón, agregar superposiciones, etc. Si puede codificarlo, puede hacer que haga prácticamente cualquier cosa que pueda imaginar.

Licencia y documentación

Hay tres licencias para elegir: única, ilimitada y de por vida. La licencia ilimitada cubre sitios web ilimitados e incluye 1 año de actualizaciones y soporte. La licencia de sitios ilimitados de por vida incluye actualizaciones y soporte de por vida.

La documentación se proporciona en el sitio web del desarrollador. Se incluye un código de ejemplo junto con instrucciones paso a paso.

Pensamientos finales

Divi Module Builder es un potente complemento con mucho potencial en las manos adecuadas. Dado que requiere un buen conocimiento del código, no es para todos. Esto brinda a los desarrolladores una excelente herramienta para crear y compartir módulos. Me gusta que puedas importar y exportar de un sitio a otro. Cada sitio que use el módulo necesitará el complemento instalado. Si tiene un buen conocimiento del código y está interesado en crear sus propios módulos Divi, vale la pena echarle un vistazo a Divi Module Builder.

Queremos escuchar de ti. ¿Ha probado Divi Module Builder? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de aliaksei kruhlenia / shutterstock.com