Combinar los módulos anuncio y conmutador de Divi para mostrar información

por | 10 Sep, 2018 | Diseño Divi, Módulos, Tutoriales

Presentación

A veces nos ponemos delante del ordenador para crear una nueva página y activamos Divi. Después creamos una sección y buscamos el módulo conveniente. Simplemente vemos un montón de módulos y escogemos uno como quien elige una pieza de fruta de la nevera. Pero si queremos hacer algo más elaborado, un pastel por ejemplo, necesitaremos combinar varios ingredientes. Y cocinando terminaremos convirtiéndonos en chefs. Y eso es lo que queremos hacer con Divi. Cocinar con todos los ingredientes que nos brinda el tema. Y de esta manera, si vemos esos ingredientes o módulos como herramientas complementarias unas de otras, y no como piezas individuales, conseguiremos crear. Seremos master chef de Divi.

De vez en cuando me gusta combinar algunos módulos de Divi para conseguir alcanzar el objetivo con facilidad. Y hoy es uno de esos días. Vamos a combinar los módulos anuncio y conmutador para mostrar información con sencillez pero con elegancia.

Claro que podemos conseguir resultados similares con distintos ingredientes, y será bueno que practiques. Yo te propongo una composición como la que ves bajo estas líneas.

Selecciona tu futuro

 

Desbloqéate

 

w

¿Hablamos?

 

Más información

Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso.

Más información

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó convertido en un monstruoso insecto. Estaba echado de espaldas sobre un duro caparazón y, al alzar la cabeza, vio su vientre convexo y oscuro, surcado por curvadas callosidades.

Más información

Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas;

Selecciona tu futuro

Más información

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Desbloqéate

Más información

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

w

¿Hablamos?

Más información

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

La estructura

Este tutorial lo vamos a hacer casi íntegramente desde el constructor visual. Necesitaremos una sección que contendrá dos filas de tres columnas cada una. En la primera fila estarán los módulos anuncio. En la fila inferior insertaremos los módulos conmutador. Aquí tienes la estructura del contenido. Lo vamos a hacer poniendo cada tipo de módulo en una fila diferente para ajustar luego la estructura a la vista móvil o tablet. Simplemente para practicar un poco más.  Sin embargo, en el vídeo lo haremos en una sola fila evitando así tener que hacer una versión adicional.

estructura-Combinar-los-módulos-anuncio-y-conmutador-de-Divi

 

Versión móvil

Eligiendo filas distintas para cada tipo de módulo será necesario hacer una versión para tablets y móvil. En estos dispositivos, las tres columnas se convertirán en una y aparecerían descolocadas en la versión móvil. Lo haremos más adelante. Así se verá en tabletas y móviles.

Version-movil-Combinar-los-módulos-anuncio-y-conmutador-de-Divi

Creando los módulos

Creamos una nueva página o entrada y activamos el constructor Divi. Seguidamente, añadimos una fila con una estructura de 3 columnas. Duplicamos esta fila, de forma que tendremos una sección con dos filas. Y cada fila contiene 3 columnas. Puedes ver  la estructura más arriba.

Ahora, aunque puedes seguir en la vista estándar, te recomiendo que cambies al constructor visual. Así irás viendo cada cambio que hagas sobre los contenidos.

El módulo anuncio

Vamos a hacer un módulo anuncio y otro conmutador. Los demás serán clones de éstos con cambios puntuales, como color, icono, etc.

De manera que insertamos un módulo anuncio en la primera columna de la primera fila. Y estos son los ajustes que yo he hecho.

Pestaña contenido

Ponemos el título que queramos, si quieres hacerlo igual que yo pon “selecciona tu futuro”.

Marca usar icono y elige uno ( yo elegí el cursor).

Finalmente, añade un color de fondo, naranja en mi caso, y habremos terminado en esta pestaña.

Pestaña diseño

En el primer panel, Imagen e icono, selecciona blanco como color del icono. Activa también Usar tamaño de fuente de icono y establece el tamaño en 60 px.

Pasamos al siguiente panel de esta pestaña, texto, y elige color de texto claro y justificación del texto centrado.

Título de texto: yo he usado la fuente Abel, regular, he seleccionado la tercera opción en estilo, cuerpo 24px.

Separación: en este panel, introducimos los siguientes valores en relleno personalizado: superior y base 30px y derecha-izquierda 15px.

configuracion-anuncio-Combinar-los-módulos-anuncio-y-conmutador-de-Divi

Con esto, habremos finalizado la configuración del modulo anuncio. Ahora puedes duplicar dos veces este módulo y modificar color de fondo, texto e icono. Deben ocupar las columnas 2 y 3 de esta misma fila.

El módulo conmutador

En la fila inferior, insertamos un módulo conmutador y ajustamos de la forma que te muestro a continuación:

Pestaña contenido

Escribimos “mas información” en título. En contenido agrega el texto que quieras. Yo he usado texto simulado.

Pestaña diseño

Panel icono> color blanco

En el panel conmutador asignamos los colores de fondo para cuando esté abierto y cerrado. En ambos intruduce el mismo color que has usado en el módulo anuncio, y oscurécelo un poco.  Si quieres cambiar el color de texto, puedes hacerlo aquí también.

configuracion-conmutador-Combinar-los-módulos-anuncio-y-conmutador-de-Divi

Título de texto: Abel, 16px.

Cuerpo texto: Abel, 14px, altura de línea 1,4 em.

Y ya tendremos listo este módulo. Duplica cómo has hecho antes con los módulos anuncio. Pero esta vez ocuparán su columna correspondiente de la fila inferior. Cuando tengas terminada toda la sección, ve a la pestaña avanzado de los ajustes de la sección y desactiva la visibilidad en teléfono y tablet.

Visibilidad-seccion-Combinar-los-módulos-anuncio-y-conmutador-de-Divi

Duplica esta sección y  dispón los módulos como ves en la imagen inferior. Tal vez para hacer esto estés más cómodo en la vista estándar.

estructura-Combinar-los-módulos-anuncio-y-conmutador-de-Divi-MOVIL

Como hiciste antes, ve a la pestaña avanzado de los ajustes de esta sección y desactiva ahora la visibilidad en escritorio.

Últimos retoques (opcional)

Si quieres añadir una separación como la del ejemplo entre módulo anuncio y conmutador, solo tienes que abrir los ajustes de fila conmutador > pestaña diseño > separación > margen personalizado y añade 2 pixeles en la casilla base. Puedes hacer esto mismo de varias maneras, pero esta es la más rápida.

¡Y listo! Por si se te ha escapado algo te dejo un vídeo con los pasos que he explicado en el post. Y si te ha sido útil, ¡comparte!