4 formas de personalizar el módulo Anuncio [blurb] en Divi
Este post es una adaptación al castellano del artículo publicado en el blog de elegantthemes 5 Fun Ways to Style Divi’s Blurb Module. En cualquier caso, intentaré respetar la esencia del artículo original modificando los conceptos sólo para hacerlo más comprensible en nuestro idioma. Igualmente, se cambiarán las imágenes por capturas de la versión de Divi en Castellano.
Decir también que para seguir este tutorial necesitarás tener instalado el tema Divi de elegantthemes en tu WordPress.
4 maneras de personalizar el módulo anuncio
En este artículo, vamos a explorar una de las características más populares de Divi, el módulo anuncio. Aunque parece un módulo simple, tiene varias opciones de configuración de iconos e imagen y muchas características personalizables que pueden dar vida a tu sitio web. En general, el módulo anuncio se usa para secciones como servicios, beneficios, información de contacto, etc. Pero Divi nos proporciona tantos iconos y opciones para configurar que las posibilidades son infinitas.
El módulo predeterminado
Este módulo anuncio añade por defecto un título alineado a la izquierda y ningún icono. Sin embargo, con algunos cambios en su configuración y un poco de CSS, daremos a este módulo un aspecto nuevo.
Sobre estas líneas puedes ver el aspecto del módulo anuncio por defecto. Conmo puedes ver, es bastante austero.
En todos estos ejemplos, cambiaremos la configuración en 3 áreas principales:
1. Anuncio centrado
Ejemplo 1
Para este primer ejemplo, utilizaremos un icono (portátil) relacionado con nuestro título (diseño web). Alineamos el módulo al centro y damos un color de fondo brillante. Podemos hacer todo esto a través de la configuración del módulo sin necesidad de CSS. A continuación puedes ver los parámetros que debes cambiar. Las opciones que no se mencionan, déjalas como están:
Configuración general:
- Usar icono: SI
- Color de icono: #ffffff
- Icono circular: SI
- Color del Círculo: # 0c8dff
- Mostrar borde del círculo: SI
- Color del borde del círculo: #ffffff
- Ubicación de la imagen o el icono: Superior
- Animación de la imagen o el icono: Sin animación
- Color del texto: Claro
- Orientación del texto: Centro
Ajustes avanzados de diseño:
- Cabecera fuente: Oswald (negrita, mayúscula)
- Cabecera tamaño de fuente: 35px
- Color de fondo: # 61009e
- Relleno personalizado: 20px, 20px, 20px, 20px
El resultado debe ser como el de la imagen «Ejemplo 1». De todas formas, hemos creado un vídeo para que puedas repasar los pasos:
2. Círculo sombreado
Ejemplo 2
En el ejercicio 2, Vamos a crear un diseño circular que dará a tu módulos anuncio un toque único. Aunque pocos, esto requerirá algunos cambios en la configuración del módulo y algo de CSS. Así que vamos a ello.
Configuración general:
- Usar icono: SI
- Color de icono: #ffffff
- Ubicación de la imagen o el icono: Superior
- Animación de la imagen o el icono: Sin animación
- Color del texto: Claro
- Orientación del texto: Centro
Ajustes avanzados de diseño:
- Usar tamaño de fuente de icono: SÍ
- Tamaño de fuente de icono: 90
- Cabecera Fuente: Georgia (bold)
- Cabecera Tamaño de fuente: 24 px
- Color de fondo: #ea7900
- Relleno personalizado: 20px, 20px, 20px, 20px
CSS Personalizado:
Elemento principal
border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;
Con este código se creará el círculo, aunque no tendrá aún la forma deseada.
width: 300px; height: 300px;
De esta manera establecemos el ancho y la altura para que la forma del círculo se ajuste.
border: 3px solid white;
Y así, con el código que ves sobre estas lineas, generamos el borde blanco, que se verá cuando pongamos la sombra. Por supuesto, puedes cambiar los valores para una línea con distinto grosor.
box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17); -moz-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17); -webkit-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
Y, por último, añadimos una sombra suave al círculo. evidentemente, puedes cambiar los valores si quieres modificar el aspecto de la sombra. Por ejemplo, prueba a cambiar los valores de 0.17 a 5 para conseguir una sombra más intensa.
Pulsa el botón guardar y salir y ya lo tendrás.
A continuación tienes todo el código para que puedas copiar y pegar en CSS personalizado.
border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; width: 300px; height: 300px; border: 3px solid white; box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17); -moz-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17); -webkit-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
Y ahora, el vídeo para que puedas repasar todos los pasos:
3. Un módulo a cada lado con icono a la izquierda
Ejemplo 3
Para este diseño, vamos a crear 2 anuncios similares con el módulo anuncio con una paleta de color neutra. A continuación destacaremos los iconos y el título. Finalmente, añadiremos una sombra y un marco con un poco de CSS. En cualquier caso, lo primero que debemos hacer es crear una fila con 2 columnas.
Configuración general:
- Usar icono: SI
- Color de icono: #ffffff
- Icono circular: SÍ
- Color del Círculo: # 5e8393
- Mostrar borde del círculo: SÍ
- Color del borde del círculo: #ffffff
- Ubicación de la imagen o el icono: Izquierda
- Animación de la imagen o el icono: Sin animación
- Color del texto: Oscuro
- Orientación del texto: Izquierda
Ajustes avanzados de diseño:
- Usar tamaño de fuente de icono: SÍ
- Tamaño de fuente de icono: 30px
- Cabecera Fuente: Bitter
- Cabecera Tamaño de fuente: 24 px
- Color fuente cabecera: #5e8393
- Color de fondo: #ffffff
- Relleno personalizado: 25px, 25px, 25px, 25px
De momento tenemos esto:
CSS Personalizado:
Elemento principal
box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17); -moz-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17); -webkit-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
Esto creará una sombra suave en la caja:
outline: solid 1px #5e8393; outline-offset: -10px;
Y con este código añadimos un marco 10 píxeles hacia dentro como el que ves en la imagen bajo estas líneas
Ahora duplica el módulo que acabamos de crear y cambia el icono y texto.
Pulsa el botón guardar y salir y ya lo tendrás.
A continuación tienes todo el código para que puedas copiar y pegar en CSS personalizado.
box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17); -moz-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17); -webkit-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17); outline: solid 1px #5e8393; outline-offset: -10px;
Y como siempre, el vídeo por si se te ha escapado alguno de los pasos:
4. Estilo cuadrícula
Ejemplo 4
A Continuación vamos a hacer un ejercicio un poco más avanzado, sin embargo, el aspecto final será limpio y elegante. Crearemos un diseño de estilo de rejilla que puede dar a tus módulos de anuncio un aspecto moderno y profesional. El mayor cambio que vamos a introducir aquí es agregar un borde a los módulos para crear el aspecto de la cuadrícula. Lo recomendable será completar un módulo y luego duplicar y cambiar el título, icono, etc, para evitar la repetición de los pasos.
Además, como estamos usando 4 módulos de anuncio en este diseño, renombraremos los módulos como anuncio1, anuncio2, anuncio3 y anuncio4. Empezamos.
En consecuencia, la estructura de nuestra sección será de 2 columnas. Así pues creamos el primer módulo: Insertar módulo > Anuncio.
En primer lugar ajustamos la configuración para el primer módulo.
Configuración general:
- Usar icono: SÍ
- Color de icono: #ffffff
- Icono circular: SÍ
- Color del Círculo: # 035a9e
- Ubicación de la imagen o el icono: Superior
- Animación de la imagen o el icono: Sin animación
- Color del texto: Oscuro
- Orientación del texto: Centro
Ajustes avanzados de diseño:
- Usar tamaño de fuente de icono: SÍ
- Tamaño de fuente de icono: 40px
- Cabecera Fuente: Lato (Negrita, mayúsculas)
- Cabecera Tamaño de fuente: 26 px
- Color fuente cabecera: #035a9e
- Texto Fuente: Lato light; 16 px; color #035a9e.
- Color de fondo: #ffffff
- Relleno personalizado: 20px, 20px, 20px, 20px
CSS Personalizado:
Módulo anuncio 1. Elemento principal.
border-right: 1px solid #e6e6e6;
De esta forma, añadimos una línea gris a la derecha de este módulo. Así, nuestro módulo empieza a tomar forma.
Pulsamos Guardar y salir para guardar el módulo. A continuación duplicamos el módulo.
Módulo anuncio 2. Elemento principal.
Borramos este código:
Módulo anuncio 1. Elemento principal.
border-right: 1px solid #e6e6e6;
Pulsamos Guardar y salir. A continuación duplicamos de nuevo el módulo para crear el tercero.
Módulo anuncio 3. Elemento principal.
border-right: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
O sea, añadimos una línea gris en la parte superior y a la derecha de este módulo.
Guardar y salir. Seguidamente duplicamos de nuevo el módulo para crear el cuarto.
Módulo anuncio 4. Elemento principal.
Módulo anuncio 3. Elemento principal.
border-top: 1px solid #e6e6e6;
En este caso hemos añadido una línea gris en la parte superior de este cuarto módulo.
Pulsamos Guardar y salir.
De momento, a falta del último retoque tenemos esto:
Necesitamos que las líneas queden correctamente alineadas, por lo tanto abrimos los ajustes de la fila.
Y marcamos El Uso Personalizado de Canalón de Ancho. El espacio entre columnas lo ponemos en 1.
Hay un montón de formas para crear las líneas, sólo asegúrate de no superponerlas. De lo contrario tendrá una línea extra gruesa porque hay un borde izquierdo y derecho superpuestos.
¡Y ahí lo tienes! Aunque puede parecer complicado, en realidad es muy fácil. Sólo unas pocas líneas de CSS para crear las líneas de la cuadrícula y ya lo tenemos.
¿Te has perdido en algún paso? Mira el vídeo para ver el ejercicio completo.
Muy bueno el blog, me gustaria que publicaran algunos trucos de como publicar blog en DIVI que no sea el que viene por defecto que esta horrible.
Muchas gracias por tu comentario. Posiblemente la semana proxima subamos algún tutorial sobre personalización de la página de blog.
Saludos
Muy bueno,
gracias
Muchas gracias por tu comentario, José Ramón
Buenas tardes, muy buen artículo. Me gustaría preguntarte una duda. Estoy usando el modulo de anuncios para crear una fila con 3 anuncios. En el pc sale sin problema los 3 anuncios de forma horizontal pero en la vista con el teléfono móvil salen los 3 anuncios individualmente de forma vertical. Cómo podría solucionarlo? Gracias de antemano.
Hola, José Miguel. Gracias por tu comentario. Efectivamente, cuando creas una serie de modulos como los de anucio, o modulo de precios o similares, Divi hace que se muestren de uno en uno en dispositivos móviles. Esto es por el diseño responsive y creo que es mejor opción que mostrarlos como en modo escritorio, ya que la usabilidad y experiencia de usuario es mejor y google lo valora más. Tal vez debas ajustar algunas opciones de tamaños y espacios para la visualización en móviles. No obstante sí se podría forzar que se viera como en modo escritorio añadiendo código CSS. No sabría decirte qué codigo debes utilizar. He estado trastenando por internet y lo que encuentro es precisamente para lo contrario de lo que quieres. Como hacer responsive paginas que no lo son. Si encuentro algo te informo.
Saludos!