+41 78 955 3005

Actualmente existen muchos modos de darle un toque único y diferente a ciertas secciones de tu página web; es por ello que te enseñaremos a aplicar esta idea para las tarjetas de anuncio, utilizando el módulo de anuncio para mantener la tarjeta, el icono y el módulo de botón en un solo enlace.

 

Puedes descargar el siguiente archivo zip que contiene el diseño y el CSS de forma sencilla y práctica.Este archivo es cortesía de yatesdesign

Si Deseas importar este archivo de diseño puedes ingresar a la publicación de elegant Themes

Esta idea proporciona una forma sencilla de modificar y personalizar la funcionalidad de las tarjetas de anuncio, sin dejar de cumplir su objetivo; si estás interesado en el diseño de sitios web, o posees un tema hijo divi, esto te ayudará a entender y estilizar más tu espacio web.

 

A continuación los pasos que debes seguir para aplicar este modo:

 

Paso 1

-Crea una sección estándar y en los ajustes coloca de fondo: #f5f5f5

Paso 2

Añade una fila con 2, 3 o 4 columnas y ajusta lo siguiente:
-Activar “Hacer que esta fila tenga anchura completa: ”
-Habilitar  “El Uso Personalizado De Canalón De Ancho: ” : Colocar el Espacio entre columnas en: 2
-En la pestaña Custom CSS, establecer la clase CSS para “blurb-card


Paso 3

Añade un módulo de anuncio a cada columna y ajusta lo siguiente:
-Añade un título y URL
-Selecciona SI para el uso del icono
-Establece el color del icono a blanco
-Selecciona SI para activar icono circular
-Ajusta el color del circulo a: # 0f2c41
-Establece la orientación de texto a centrado
-Añade una descripción en la sección de contenido


Paso 4

Añade un módulo de botón a cada columna y añade un URL y título a cada uno de ellos (el título debe estar oculto pero debe tener contenido en él para que funcione)


Paso 5

Añade el siguiente código a tu pagina CSS personalizada. En Divi puedes agregar CSS personalizado a las páginas individuales haciendo click en la parte superior del constructor divi, en el icono de ajustes (3 líneas una sobre otra).


Y así es como funciona el método!.


Sin embargo puedes encontrar más información sobre otros temas de tu interés acá en TantoMarketing


Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.

Pin It on Pinterest

Share This