Encuéntrelo en el mercado Divi
¡ Divi Module Builder está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Plugins en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).
Compra en el mercado Divi
Divi Builder incluye muchos módulos para ayudarlo a agregar prácticamente cualquier elemento de diseño a sus diseños, pero ¿qué sucede si desea 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 usarlo. Requiere Divi 3.0.50 o superior y funciona tanto con Divi como con Extra . Está disponible en el sitio web del desarrollador: DiviPlugins.com .
Instalación del generador de módulos Divi
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 tablero y haciendo clic en Licencia .
Introduzca 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ás todo lo que necesitas para construir tus 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 utilizará 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 borrador o publicar cuando esté listo. Una vez que se publique el módulo, aparecerá en Divi Builder.
Campos
Su módulo puede tener tantos campos como desee. Cada campo tiene propiedades de campo dentro de él. Aquí hay una mirada más cercana a cada una de las propiedades del campo:
Etiqueta de campo : la etiqueta que se mostrará como 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. Use 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, incluido un texto, un área de texto, un color, una imagen, un botón de alternancia Sí/No y un 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. Deberá identificar a qué elemento aplicar los controles de fuente agregando una clase en el HTML.
Ocultar campo : dé a los usuarios control sobre 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 tipo de campo de texto o á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 usan 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 accesos directos, pero están aquí para ayudar a acelerar el tiempo de desarrollo.
Creación de un módulo
Aquí hay 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 de HTML. A continuación, seleccioné la etiqueta H1 de los atajos, coloqué el cursor entre las etiquetas y seleccioné la etiqueta de los atajos HTML. Una vez que terminé, presioné publicar. El resultado debería 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. Dado que agregué HTML para mostrarlo como H1, el texto automáticamente tiene 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 panel. 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á verlos en Configuración .
Configuración del módulo personalizado
El menú Configuración proporciona una ubicación donde puede administrar sus módulos. Puede ver los módulos publicados y los borradores.
Puede clonarlos, lo que le brinda un buen lugar para comenzar en un módulo que necesita mucho código que ha usado en otro módulo. También puede editar, deshabilitar o habilitar PHP (lo cual es útil si no puede acceder al 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 «bien» como ejemplo, muestro el increíble ejemplo 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. Aquí hay un vistazo a cada uno.
Módulo de cuadrícula de blog personalizado
El campo 1 está etiquetado como 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 Sí/No Alternar. El filtro se crea en CSS.
El campo 3 está etiquetado como Título de publicación y utiliza 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 de código de salida HTML.
El CSS personalizado se agrega al cuadro de salida de CSS.
Aquí está el Javascript. Deberá tener una buena comprensión 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.
Las configuraciones 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 en 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 la cuadrícula de blog personalizada
El resultado es una cuadrícula de blog con animación flotante. Habilité el modo en 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 pasar el mouse en lugar de oscurecerla.
En este, deshabilité el modo en 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 Lifetime Unlimited Sites incluye actualizaciones y soporte de por vida.
La documentación se proporciona en el sitio web del desarrollador. Se incluye código de ejemplo junto con instrucciones paso a paso.
Pensamientos finales
Divi Module Builder es un poderoso 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. ¿Has probado Divi Module Builder? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada vía aliaksei kruhlenia / shutterstock.com