Si está ofreciendo ofertas de membresía en su sitio web, es importante asegurarse de que las personas las noten en su sitio web. Para darle una ventaja inicial, le proporcionaremos un impresionante escaparate de membresía que puede recrear paso a paso usando Divi y sus opciones integradas únicamente. Estamos combinando un hermoso fondo de sección con módulos de Blurb que muestran ofertas de membresía y un botón separado que lleva a sus visitantes a la página correcta.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al diseño que recrearemos en diferentes tamaños de pantalla.
en el escritorio
en tableta
En movil
Descargar los archivos de este tutorial
Para poner sus manos en los archivos de imágenes gratuitas, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Agregar una nueva sección
Fondo degradado
Comience creando una nueva página o abriendo una existente y cambiando a Visual Builder. Una vez que lo haga, agregue una nueva sección, abra la configuración de la sección y aplíquele el siguiente fondo degradado:
- Color 1: rgba(255.255.255,0)
- Color 2: #150a56
- Tipo de gradiente: lineal
- Dirección del gradiente: 165 grados
- Posición final: 36%
Imagen de fondo
Abra la pestaña de la imagen de fondo a continuación, cargue la imagen ‘ home_office-39.jpg ‘ que puede encontrar en la carpeta descargada y aplique ‘Multiplicar’ como su Mezcla de imagen de fondo.
Divisores
Lo siguiente que haremos será agregar nuestros divisores de sección. Usaremos un divisor superior e inferior para crear un bonito efecto de fondo. Comience abriendo la pestaña Superior y aplique la siguiente configuración:
- Color del divisor: rgba (30,35,96,0.75)
- Altura del divisor: 700px
- Disposición de los divisores: Debajo del contenido de la sección
Luego, cambie a la pestaña Inferior y realice los siguientes cambios:
- Estilo de divisor: Buscar en la lista
- Color del divisor: rgba (2,0,35,0.93)
- Altura del divisor: 430px
- Disposición de los divisores: Debajo del contenido de la sección
Espaciado
Crearemos algo de espacio adicional en la parte superior e inferior de la sección agregando el siguiente relleno personalizado:
- Relleno superior: 130px
- Relleno inferior: 65px
Agregar primera fila
Estructura de la columna
Ahora que hemos realizado todos los cambios deseados en nuestra sección, podemos comenzar a agregar la primera fila. La estructura de columnas que necesitamos es la siguiente:
Dimensionamiento
Antes de agregar cualquier módulo, haremos una pequeña modificación en la configuración predeterminada de la fila. Abra la subcategoría Tamaño dentro de la pestaña Diseño y habilite la opción ‘Hacer esta fila de ancho completo’.
Agregar módulo de texto de título a la columna 2
Configuración de texto
¡Ahora podemos comenzar a agregar nuestros módulos! Solo usaremos la segunda columna de esta fila. Agregue un módulo de texto de título que contenga la siguiente configuración de texto:
- Fuente de texto: ABeeZee
- Tamaño del texto: 56px
- Color del texto: #f9f9f9
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Espaciado
Necesitaremos algo de espacio en la parte superior también. Es por eso que estamos agregando ’50px’ al margen superior.
Agregue el módulo de texto de descripción a la columna 2
Configuración de texto
Justo debajo del módulo de texto anterior, continúe y agregue uno nuevo para su descripción. Una vez que agregue su contenido, aplique la siguiente configuración de texto:
- Tamaño del texto: 16px
- Color de texto:
- Altura de la línea de texto: 1,4 em
- Orientación del texto: Centro
Dimensionamiento
También cambiaremos el ancho de este módulo de texto a ‘70%’ y habilitaremos la alineación del módulo central.
Agregue el módulo de texto CTA a la columna 2
Configuración de texto
Una vez que haya terminado con la descripción Módulo de texto, continúe y agregue un Módulo de texto CTA justo debajo de él y aplíquele la siguiente configuración de texto:
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #ffffff
- Espaciado entre letras de texto: 5px
- Orientación del texto: Centro
Agregue el módulo de imagen de flecha a la columna 2
Cargar imagen
El último módulo que necesitaremos agregar a esta fila es un módulo de imagen. Cargue la imagen ‘ arrow.png ‘ que puede encontrar en la carpeta descargada.
Dimensionamiento
Cambie el ancho de esta imagen a ‘13%’ a continuación.
Espaciado
Queremos que esta flecha aparezca a la misma altura que nuestro módulo de texto CTA. Es por eso que también agregaremos ‘-100px’ al margen superior.
Visibilidad
Por último, deshabilitaremos este módulo de imagen en tabletas y teléfonos, ya que no coincidirá con esos tamaños de pantalla.
Agregar segunda fila
Estructura de la columna
Para las ofertas de membresía, necesitaremos agregar otra fila usando la siguiente estructura de columnas:
Alineación de filas
Antes de agregar cualquier módulo, aplicaremos una alineación de fila izquierda.
Dimensionamiento
Y también haremos algunas modificaciones a la subcategoría Tamaño:
- Usar ancho personalizado: Sí
- Ancho personalizado: 1030px
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Agregue el módulo Blurb a la columna 2
Añadir texto
Para mostrar un acuerdo de membresía, usaremos un módulo de Blurb en combinación con un módulo de botón. Comience agregando un módulo de Blurb a la segunda columna de su fila y agregue el contenido de su elección.
Cargar imagen
A continuación, cargue la imagen ‘ conference_illustration_05.png ‘ que puede encontrar en su carpeta descargada.
Color de fondo
Luego, use ‘#ffffff’ como color de fondo de su módulo de Blurb.
Configuración del texto del título
Tendremos que hacer algunas modificaciones al título de nuestro módulo de Blurb a continuación:
- Peso de la fuente del título: ultra negrita
- Estilo de fuente del título: Mayúsculas
- Alineación del texto del título: Centro
- Color del texto del título: #485B90
Configuración del texto del cuerpo
También cambiaremos la configuración del texto del cuerpo:
- Alineación del cuerpo del texto: Centro
- Tamaño del cuerpo del texto: 11px
- Color del cuerpo del texto: #485B90
Dimensionamiento
Continúe abriendo la subcategoría Dimensionamiento y realice los siguientes cambios:
- Ancho de la imagen: 50%
- Ancho del contenido: 250 px
- Ancho: 72 % (escritorio), 50 % (tableta), 99 % (teléfono)
No estamos usando ‘100%’ para el teléfono que, de lo contrario, heredaría el ‘50%’ de la tableta.
Espaciado
El espaciado del Módulo Blurb es una parte muy importante de este tutorial. Vamos al margen superior e izquierdo negativo en el escritorio para empujar el módulo de Blurb hacia la izquierda y hacer que se superponga con la fila anterior. También agregaremos algo de relleno personalizado para crear un resultado más atractivo:
- Margen superior: -380 px (escritorio), 0 px (tableta y teléfono)
- Margen izquierdo: -180px (Escritorio), 35% (Tableta), 20% (Teléfono)
- Relleno superior: 30px
- Relleno derecho: 10px
- Relleno inferior: 30px
- Relleno izquierdo: 10px
Borde
A continuación, agregaremos ’20px’ a cada una de las esquinas dentro de la subcategoría Borde.
Sombra de la caja
Y como si fuera poco, habilitaremos la primera opción de sombra de caja.
Configuración de botones
Justo debajo del Módulo Blurb que ha agregado a la segunda columna, agregue un Módulo de botones. Después de agregar el CTA a su botón, aplique la siguiente configuración de botón:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #485B90
- Color de fondo del botón: #ffffff
- Ancho del borde del botón: 0px
- Radio del borde del botón: 10px
- Peso de fuente: ultra negrita
- Estilo de fuente: Mayúsculas
Espaciado
Como hemos empujado el módulo de Blurb hacia la izquierda (en el escritorio), tendremos que hacer lo mismo con el módulo de botones.
- Margen superior: 20px
- Margen inferior: 50 px (tableta y teléfono)
- Margen izquierdo: -100px (Escritorio), 53% (Tableta), 50% (Teléfono)
- Relleno derecho: 30px
- Relleno izquierdo: 30px
Sombra de la caja
Agregaremos la primera opción de sombra de cuadro a este módulo de botones también.
Cambiar imagen y texto
Ahora, clone el Módulo Blurb y el Módulo de botones de su segunda columna y colóquelos en la tercera columna. Estamos usando la misma imagen para este módulo de Blurb que usamos para el módulo de Blurb que se encuentra en la primera columna.
Eliminar color de fondo y agregar fondo degradado
Abra la configuración de ambos módulos individualmente, elimine su color de fondo y agregue el siguiente fondo degradado:
- Color 1: #6F9AF1
- Color 2: #485B90
- Tipo de gradiente: lineal
- Dirección del gradiente: 159 grados
Cambiar los colores de texto de ambos módulos
Cambie los colores del texto de ambos módulos a ‘#ffffff’ también.
Cambiar el espaciado del módulo Blurb
Luego, ve a la subcategoría Espaciado de tu Módulo Blurb y modifica el margen personalizado:
- Superior: -470 px (escritorio), 0 px (tableta y teléfono)
- Izquierda: -260px (Escritorio), 35% (Tableta), 20% (Teléfono)
Cambiar el espaciado del módulo de botones
Y por último, pero no menos importante, también necesitaremos modificar el margen personalizado del Módulo de botones:
- Margen superior: 20px
- Margen izquierdo: -180px (Escritorio), 53% (Tableta), 50% (Teléfono)
Avance
Ahora que hemos seguido todos los pasos de este tutorial, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
en el escritorio
en tableta
En movil
Pensamientos finales
En este tutorial, le mostramos cómo resaltar de manera creativa sus ofertas de membresía en una sección. Hemos combinado una hermosa paleta de colores con un impresionante fondo de sección y hemos usado módulos publicitarios y módulos de botones para crear el escaparate de membresía. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!