Descargue una columna de diseño de diseño CTA de sección para div Div

La sección de héroes de tu página merece toda la atención que puedes recibir. Hay interminables formas de estilizar su sección de héroes, dependiendo de cuál sea su sitio web y cómo se comporte el público objetivo. Para algunos sitios web, puede ser útil colocar tarjetas CTA en varias columnas sin crear una experiencia abrumadora. Una excelente manera de acercarse es creando tarjetas CTA con deslizamiento en la columna. En el tutorial de la división de hoy, le mostraremos cómo crear un diseño increíble desde cero para abordar esta técnica. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue las secciones de héroes gratuitos para poner sus manos en héroes gratuitos, primero deberá descargarlas usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Suscríbete a nuestro canal de YouTube para comenzar a recrear! Agregue una nueva sección de fondo de gradiente Agregue una nueva sección a la página que trabaja, abra la configuración de la sección e ingrese un fondo de gradiente.
Color 1: #ffffff
Color 2: # F5ED5
Dirección de gradiente: 90 grados
Posición inicial: 17%
Posición final: 17%
Espacio ir a la pestaña de diseño y agregar algunos forros personalizados en la parte superior e inferior en diferentes tamaños de pantalla.

Revelaje superior: 5VW (escritorio), 10VW (tableta), 13VW (teléfono)
Bajo forro: 5VW (escritorio), 10VW (tableta), 13VW (teléfono)
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo.

Color de fondo: # fff6ed
Dimension Switch a la pestaña de diseño y modifique la configuración de tamaño de la fila.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 60VW (escritorio), 100% (tableta y teléfono)
Ancho máximo: 100%
Alineación de las filas: corrija y también agregue algunos valores de llenado personalizados a la configuración de espaciado.
Revestimiento superior: 6VW

Revestimiento inferior: 6VW
Revelaje izquierdo: 5.5VW
Junta derecha: 24 VW
El borde vaya a la configuración del siguiente borde y agregue un borde izquierdo utilizando la siguiente configuración:
Ancho del borde izquierdo: 6 PX

Color del borde izquierdo: #ffffff
Box Shadow Agregue una sombra de un cuadro sutil para crear profundidad en la sección Hero.
Poder de poco claro de la sombra de la caja: 100 px

Color de la sombra: RGBA (0.0,0,0.22)
Clase CSS y use una clase CSS en la pestaña Avanzada. Más adelante en esta publicación usaremos esta clase CSS para ocultar la barra de desplazamiento.
Clase CSS: Slide-Baar

El elemento principal para crear un desplazamiento / diapositiva horizontal, necesitaremos colocar las columnas horizontalmente. Lo haremos agregando un código CSS personalizado en el elemento principal de la fila. Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: repetir (6, 100%);

Grid-column-gap: 2VW;
Las operaciones van a la configuración de visibilidad y cambian el giro de la fila.
Superación horizontal: desplazamiento

Desbordamiento verticalmente: oculto
Configuración de la columna Después de completar la configuración de la fila, puede abrir la configuración de la primera columna.
Fondo de gradiente Agregue un fondo de gradiente.

Color 1: RGBA (245.237.229.0.91)

Color 2: RGBA (219,34,65,0.84)
Posición inicial: 35%
Posición final: 81%
Coloque el gradiente sobre la imagen de fondo: sí
Imagen de fondo junto con una imagen de fondo.
Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
Repetir la imagen de fondo: sin repetición
Espaciado Vaya a la pestaña de diseño y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla. Habitación más alta: 4VW (escritorio), 10 VW (tableta), 12VW (teléfono)
Bajo forro: 4VW (escritorio), 10VW (tableta), 12VW (teléfono)

ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 5VW (tableta), 7VW (teléfono)
Revestimiento derecho: 2VW (escritorio), 5VW (tableta), 7VW (teléfono)
El borde continúa agregando el radio de borde “20px” a cada una de las esquinas en la configuración del borde.
El elemento principal, otra parte importante para lograr esto es la adición de una sola línea de código CSS al elemento principal de la columna. Ancho: 100%! Importante;
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H3 es hora de comenzar a agregar módulos. Puede agregar cuántos módulos desea y puede estilizarlos de acuerdo con sus propias preferencias. Sin embargo, si desea recrear exactamente el mismo ejemplo que se ha distribuido en la vista previa de esta publicación, comience con un módulo de texto e ingrese un contenido H3.

Configuración de texto H3 Cambiar a la pestaña Diseño y cambiar la configuración de texto H3 en consecuencia:

3 Fuentes: Poppins

Sección 3 Peso de la fuente: luz

Rúbrica 3 Color de texto: # E92640
Título 3 Dimensión de texto: 1.5VW (escritorio), 3.5VW (tableta), 4.5VW (teléfono)
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido La siguiente forma en que necesitamos es otro módulo de texto. Ingrese un contenido de párrafo de su elección.
Configuración de texto Vaya a la siguiente configuración de texto y realice algunos cambios.
Texto de fuente: Poppins

El peso de la fuente de texto: luz


Color de texto: # E92640
Tamaño de texto: 0.8VW (escritorio), 1.9VW (tableta), 2.8VW (teléfono)
Espacio también agregamos un margen más bajo para crear espacio en nuestra tarjeta deslizante de columna. Matrimonio inferior: 18 VW (escritorio), 30 VW (tableta), 42 VW (teléfono)
Agregue el módulo de botón a la columna 1 Agregue una copia Pase al siguiente módulo, que es un módulo de botón. Ingrese una copia de su elección.
Configuración del botón Pase a la pestaña Diseño y cambie la configuración del botón correctamente:

Use estilos personalizados para el botón: Sí
El tamaño de texto del botón: 0.8VW (escritorio), 1.8VW (tableta), 2.5VW (teléfono)

El color del texto del botón: # F5ED5

El ancho del nudo del botón: 1 PX
El color del marco del botón: # F5ED5
Botón Raza: 5 PX
Botón de fuente: Poppins
El espacio aumenta el tamaño del botón Agregar algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)


Revestimiento derecho: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
Agregue un módulo divisor en la visibilidad de la columna 1 La siguiente forma en que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea va a la pestaña de diseño y cambia el color de la línea.
Color de línea: # F5ED5

Agregue el módulo de texto no. 3 en la columna 1 agrega el siguiente contenido y la última forma en que necesitamos en esta columna es otro módulo de texto. Ingrese un contenido de párrafo de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: Poppins
El peso de la fuente de texto: luz

Color de texto: # F5EDE5Dimension Texto: 0.8VW (escritorio), 1.9VW (tableta), 2.8VW (teléfono)

La altura de la línea de texto: 2.3em
Espacio agregue algunos bordes superiores.
Margen superior: 2VW
Clon la columna hasta 5 veces y se reutilice para otros CTA Después de haber completado la primera columna y todos los módulos en ella, puede clonar toda la columna hasta 5 veces, dependiendo de cuántas columnas se deslice en las tarjetas de CTA que desee para mostrar. Asegúrese de cambiar todas las copias para cada duplicado de columna, junto con los enlaces de los botones.
¡Agregue la estructura de la fila # 2 de la columna por segundo! Usaremos esta fila para crear una superposición con la anterior. Elija la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y ajuste la configuración de tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Ancho: 100%

Ancho máximo: 100%

Espacio más tarde, agregaremos los módulos que necesitamos y crearemos una superposición negativa para que parezca que los módulos son parte de la primera fila. Esto significa que no necesitamos la segunda fila para ocupar el espacio en nuestro diseño. Por lo tanto, eliminamos todos los valores predeterminados desde arriba e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H1 es hora de comenzar a agregar módulos. Comience con un primer módulo de texto e ingrese un contenido H1 de su elección.
Configuración de texto H1 Cambiar a la pestaña Diseño y cambiar la configuración de texto H1 en consecuencia:

Fuente del título: Poppins
Texto Pre -Text: # E92741
Encabezado de texto de tamaño: 3VW (escritorio), 5VW (tableta), espacio de 7VW (teléfono) Agregue algunos valores de margen.

Margen superior: -35VW (escritorio), 7VW (tableta), 10VW (teléfono)

Margen izquierdo: 5VW
Margen derecho: 12VW
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido La segunda forma que necesitamos es otro módulo de texto. Ingrese un contenido de párrafo de su elección.
Configuración de texto Acceda a la pestaña Diseño y modifique la configuración de texto en consecuencia:

Texto de fuente: Poppins
El peso de la fuente de texto: luz
Color de texto: # E92741
Tamaño de texto: 0.8VW (escritorio), 1.9VW (tableta), 2.8VW (teléfono)

La altura de la línea de texto: 2.8em

Espacio agregamos algunos valores de margen personalizados al módulo de texto.
Margen superior: 2VW (escritorio), 7VW (tableta), 10VW (teléfono)
Margen inferior: 2 VW (escritorio), 7VW (tableta), 10VW (teléfono)
Margen izquierdo: 5VW
Margen derecho: 13VW (escritorio), 5VW (tableta y teléfono)
Agregue el módulo de botón a la columna 1 Agregue una copia El siguiente modo que necesitamos es un módulo de botón. Ingrese una copia de su elección.

Establece el botón y luego vaya a la pestaña de diseño y estilice el botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.9VW
El color del texto del botón: # E92741
El color de fondo del botón: # F5ED5

El ancho del nudo del botón: 0 PX

Botón Raza: 5 PX
Botón de fuente: Poppins
El espacio también aumenta el tamaño del botón agregando valores de espaciado personalizados.
Margen superior: 2VW
Margen izquierdo: 5VW
Revelaje superior: 1.5VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
Bajo forro: 1.5VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
Revelaje izquierdo: 6VW (escritorio), 9VW (tableta), 15 VW (teléfono) ENLAVE RECTO: 6VW (escritorio), 9VW (tableta), 15VW (teléfono)


Box Shadow Completa el diseño del módulo de botones agregando un tono de caja sutil.
Box Shadow Posición vertical: 20 PX
Poder de poco claro de la sombra de la caja: 50 px
Poder de extender la sombra de la caja: -5 PX
Shadow Color: RGBA (0.0,0,0.19)
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, compartí una hermosa sección de héroes gratis con la columna y te mostré cómo recrearla desde cero. Esta es una excelente manera de presentar más libros de CTA en la sección de héroes sin tener un diseño que parezca demasiado abrumador. Esperamos que le haya gustado este tutorial y si tiene alguna pregunta o sugerencia, ¡asegúrese de dejarlas en la sección de comentarios a continuación! Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.