4 formas de personalizar el módulo Anuncio [blurb] en Divi

por | 10 Dic, 2016 | Divi, Tutoriales

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.

módulo-anuncio-predetermin

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:

módulo-anuncio-ajustes

1. Anuncio centrado

modulo-anuncio-ajustes-ejemplo1

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

modulo-anuncio-ajustes-ejemplo2

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

módulo-anuncio-ejemplo3

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:

modulo-anuncio-ajustes-ejemplo3_fase1

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:

modulo-anuncio-ajustes-ejemplo3_fase2-sombra

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

módulo-anuncio-ajustes-ejemplo4-final

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:

modulo-anuncio-ajustes-ejemplo4_previo

Necesitamos que las líneas queden correctamente alineadas, por lo tanto abrimos los ajustes de la fila.

ajustes-modulo-fila

 

Y marcamos El Uso Personalizado de Canalón de Ancho. El espacio entre columnas lo ponemos en 1.

modulo-ajustes-fila

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.