A principios de esta semana, presentamos Divi 2.4 , la mayor actualización en la historia de Divi y un gran avance para nuestro tema de WordPress más popular. Hay tantas funciones excelentes para explorar en esta actualización que fue difícil describirlas todas en la publicación de lanzamiento, por lo que hemos decidido hacer una serie de publicaciones de blog informativas de 2 semanas que tendrán como objetivo enseñarle cómo tomar aprovecha al máximo Divi 2.4 y sus nuevas opciones. En la quinta parte de esta serie, exploraremos el nuevo módulo de código Divi y cómo se puede usar para integrar complementos de terceros en Divi Builder.
Aprenda todo sobre Divi 2.4 aquí
En Divi 2.4, es más fácil que nunca integrar complementos de terceros directamente en Divi Builder. Esto es gracias al nuevo módulo de código y al módulo de código de ancho completo. Cuando en el pasado, los módulos de texto se podían usar para agregar códigos cortos a la página, el módulo venía con campanas y silbatos adicionales que eran superfluos para la integración del código. Más importante aún, no existía ningún método para agregar códigos cortos a las secciones de ancho completo. Ambos problemas se han resuelto en 2.4, y es sorprendente lo que un módulo simple puede permitirle hacer.
El poder de Divi proviene no solo de la amplia gama de módulos nativos que incluye, sino, lo que es más importante, de las herramientas de diseño intuitivas del constructor. Su capacidad para crear diversos diseños utilizando la amplia gama de estructuras de columnas y opciones de filas de Divi es lo que hace que el constructor sea tan versátil.
Cuando considera el hecho de que estos diseños complejos se pueden combinar con complementos de terceros, se abren muchas más posibilidades. Divi viene con mucho con lo que trabajar, pero no hay razón por la que no puedas diversificarte también.
Uso del módulo de código
Divi ahora viene con un módulo de código y un módulo de código de ancho completo, lo que significa que puede agregar código y códigos cortos de terceros en un tipo de sección. Cada vez que agregue un nuevo módulo a una columna o una sección de ancho completo, busque el nuevo módulo de código en su lista de módulos disponibles.
Usar los módulos de código es increíblemente fácil. En realidad, es solo un lugar para colocar sus códigos abreviados, y solo hay un único campo de texto dentro de la configuración del módulo (aparte de las opciones de Etiqueta de administrador, ID de CSS y Clase de CSS que vienen con todos los módulos).
Si alguna vez desea agregar un código abreviado a su página, simplemente péguelo en el campo de texto del Módulo de código y guárdelo.
Ejemplos de integración de terceros
¡Hay formas ilimitadas de usar los módulos de código, ya que hay tantos complementos increíbles de WordPress por ahí! Solo para darle una idea de cómo se puede usar la integración de complementos de terceros para expandir sus sitios Divi, he esbozado algunos ejemplos de integraciones a continuación.
Deslizador de revolución de ancho completo
Usando el módulo de código de ancho completo, puede integrar sin problemas Slider Revolution (y otros complementos de control deslizante de terceros populares ). Si el Divi Slider Module no es lo suficientemente robusto para ti, no dudes en probar otra cosa. Combinar Divi con otros excelentes complementos es sin duda una forma de aprovechar al máximo el constructor.
En este ejemplo, he usado el complemento Slider Revolution para crear un nuevo control deslizante. Este es el control deslizante que me gustaría usar en lugar del control deslizante Divi estándar de ancho completo.
Cada vez que crea un nuevo control deslizante con Slider Revolution, como con la mayoría de los complementos de control deslizante, se genera un código abreviado que se puede usar para agregar su control deslizante a cualquier publicación o página de su sitio.
Aquí es donde entra en juego el nuevo módulo de código de ancho completo de Divi. Usando este módulo en combinación con el código abreviado del control deslizante, puede crear un control deslizante personalizado y disfrutar de toda la versatilidad y libertades a las que se ha acostumbrado con Divi.
El módulo de código de Divi es bastante simple (ese es el punto), simplemente pegue su código en el campo de texto y haga clic en guardar. ¡Eso es todo!
Dado que estamos utilizando un módulo de código de ancho completo dentro de una sección de ancho completo, este nuevo control deslizante se extiende por todo el ancho de la página y se adapta perfectamente a su diseño Divi. Es difícil decir que el control deslizante ha sido generado por un complemento de terceros, ya que se ha colocado dentro de Divi Builder.
Galería de cuadrícula esencial de ancho completo
Essential Grid es otro complemento comercial popular que ofrece una alternativa a los módulos nativos Divi Gallery y Portfolio. Si está buscando lograr un estilo que nuestros módulos no son compatibles actualmente, vale la pena intentar diversificarse a complementos de galería de terceros. Gracias al módulo de código, agregar Essential Grid al estándar de secciones de ancho completo es simple.
Lo primero es lo primero, creé mi nueva galería usando el complemento Essential Grid. Al igual que con la mayoría de los complementos de la galería, recibo un código abreviado que se puede usar para mostrar esta galería en cualquier lugar de mi sitio. Al copiar y pegar este código abreviado en el generador, podemos agregar la nueva cuadrícula en nuestra página de Divi-builder.
Cada vez que agrega un nuevo código abreviado a su página, el Módulo de código es la mejor manera de hacerlo. En este caso, quiero que mi galería se extienda por todo el ancho del navegador (al igual que el módulo nativo de Fullwidth Portfolio de Divi). Como quiero que sea de ancho completo, agregué una nueva sección de ancho completo junto con un módulo de código de ancho completo. Dentro del campo de contenido del Módulo de ancho completo, pegué el código abreviado de Essential Grid que copié anteriormente.
Después de actualizar la página, puede ver que mi nueva galería de terceros se ha agregado a la página. Se ve muy bien en nuestra fila de ancho completo ya que usé el módulo de código y una sección de ancho completo, cada una de las cuales no contiene estilo ni espaciado adicionales. El resultado es una cuadrícula fluida que encaja perfectamente en el diseño.
Formularios de suscripción de Bloom
Usar el módulo de código también es una excelente manera de integrar nuestro propio complemento Bloom en Divi. Bloom tiene varios métodos de integración. Algunas opciones agregarán automáticamente una ventana emergente o un formulario de suscripción a su página, lo que facilita comenzar a crear su lista de correo electrónico. Sin embargo, Bloom también ofrece integración de códigos abreviados, lo que le brinda más control sobre dónde aparece exactamente el formulario de suscripción. En lugar de agregar el formulario automáticamente en la parte superior o inferior de sus páginas, el código abreviado se puede usar para agregar el formulario de suscripción dentro del generador. Usando el shortcode en combinación con el módulo de código de Divi, puede ser más estratégico sobre dónde aparecen los formularios de suscripción. Es posible que obtenga más conversiones cuando el formulario de suscripción se coloca en ciertos puntos a lo largo de su página.
Después de crear mi formulario de suscripción en línea, copio y pego el código abreviado como lo hemos hecho anteriormente. Este shortcode ahora se puede colocar dentro del módulo de código Divi.
Esta vez usaré el módulo de código estándar dentro de una sección de especialidad, en lugar de usar el módulo de código de ancho completo que usamos para la integración de Slider Revolution y Essential Grid.
Al colocar esta nueva sección debajo del control deslizante en mi página de inicio, puedo estar seguro de que los usuarios verán el formulario de suscripción de inmediato. También me da la oportunidad de respaldar el formulario de suscripción con algunos anuncios informativos a la izquierda. Con esta técnica, puede colocar formularios de suscripción individuales en cualquier lugar de su sitio, adaptando esos formularios al contenido de la página y los intereses de su visitante.
Hacer que sea más fácil diversificarse
Nos gusta pensar en Divi como una excelente solución todo en uno, ¡pero eso no significa que no puedas usar complementos de terceros de vez en cuando! De hecho, es la comunidad de WordPress y los miles de complementos gratuitos y comerciales disponibles lo que hace que WordPress sea tan bueno. Los ejemplos anteriores son solo algunas posibilidades entre miles, ¡así que siéntete libre de experimentar!