Al mostrar varias llamadas a la acción en su página, puede ayudar a crear un efecto de desplazamiento interactivo que une diferentes elementos. Una forma de abordar esto es convirtiendo los módulos en elementos fijos mientras se mueven en su contenedor de columnas. En el tutorial de hoy, le mostraremos cómo crear un hermoso diseño que maneje esta técnica.

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

contenedor de columna

Tableta y móvil

contenedor de columna

¡Comencemos a recrear!

Agregar nueva sección

Comience agregando una nueva sección regular a la página en la que está trabajando.

contenedor de columna

Espaciado

Abra la configuración de la sección y modifique el relleno superior e inferior en diferentes tamaños de pantalla.

  • Relleno superior: 7vw (escritorio), 10vw (tableta), 15vw (teléfono)
  • Relleno inferior: 20vw (escritorio), 7vw (tableta), 10vw (teléfono)

contenedor de columna

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

contenedor de columna

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección. También es muy importante  habilitar la opción ‘Ecualizar alturas de columna’. Al hacerlo, creará un espacio vacío en las columnas que permitirá que los módulos fijos se muevan libremente mientras se desplaza hacia abajo en la página.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

contenedor de columna

Columna 2 Acolchado Superior

Abra la configuración de la columna 2 a continuación y agregue algo de relleno superior en el escritorio.

  • Relleno superior: 20vw (escritorio), 0vw (tableta y teléfono)

contenedor de columna

Columna 3 Acolchado Superior

Agregue un valor de relleno superior personalizado a la tercera columna también.

  • Relleno superior: 40vw (escritorio), 0vw (tableta y teléfono)

contenedor de columna

Columna 4 Acolchado Superior

Y complete la configuración de la fila agregando un valor de relleno superior a la columna 4 también.

  • Relleno superior: 60vw (escritorio), 0vw (tableta y teléfono)

contenedor de columna

Agregar CTA a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos en la columna 1 es un Módulo CTA. Inserte algún contenido de su elección.

contenedor de columna

Enlazar

Agregue un enlace al botón también. Hacer esto permitirá que el botón aparezca en el diseño.

  • URL del enlace del botón: #

contenedor de columna

Color de fondo

Cambie el color de fondo del módulo a continuación.

  • Color de fondo: #ffffff

contenedor de columna

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto general.

  • Alineación de texto: centro
  • Color del texto: oscuro

contenedor de columna

Configuración del texto del título

Cambie la configuración del texto del título también.

  • Nivel de título del título: H3
  • Fuente del título: espectral
  • Color del texto del título: # 000000
  • Tamaño del texto del título: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

contenedor de columna

Configuración de texto del cuerpo

Junto con la configuración del texto del cuerpo.

  • Fuente del cuerpo: Fira Sans
  • Peso de la fuente del cuerpo: ligero
  • Color del texto del cuerpo: # 000000
  • Tamaño del texto del cuerpo: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Altura de la línea del cuerpo: 1.8em

contenedor de columna

Configuraciones de botones

No olvides diseñar el botón de tu Módulo CTA también.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 444eff
  • Ancho del borde del botón: 0px

contenedor de columna

  • Radio del borde del botón: 50vw
  • Fuente del botón: Fira Sans

contenedor de columna

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado izquierdo: 3vw (escritorio), 7vw (tableta), 13vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 7vw (tableta), 13vw (teléfono)

contenedor de columna

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 8vw
  • Relleno inferior: 8vw

contenedor de columna

Frontera

Agregue algunas esquinas redondeadas al módulo también.

  • Esquinas redondeadas: 1vw (todas las esquinas)

contenedor de columna

Sombra de la caja

Complete el diseño del módulo agregando una sombra de cuadro sutil.

  • Posición horizontal de la sombra de la caja: 10px
  • Fuerza de desenfoque de sombra de caja: 50 px
  • Color de sombra: rgba (0,0,0,0.08)

contenedor de columna

Clase CSS

Ahora, para que funcione el efecto adhesivo de desplazamiento, necesitaremos agregar algunas líneas de código CSS al final de este tutorial. En preparación para eso, agregaremos una clase CSS al Módulo CTA.

  • Clase CSS: sticky-cta

contenedor de columna

Agregar módulo de imagen a la columna 1

Cargar imagen

En el siguiente y último módulo que necesitamos en la columna 1, que es un módulo de imagen. Cargue una imagen PNG de su elección.

contenedor de columna

Alineación

Cambie la alineación de la imagen a continuación.

  • Alineación de imagen: centro

contenedor de columna

Dimensionamiento

Asegúrese de forzar el ancho completo en el módulo también.

  • Forzar ancho completo: sí

contenedor de columna

Espaciado

Complete la configuración del módulo yendo a la configuración de espaciado y agregando algunos valores de espaciado personalizados en diferentes tamaños de pantalla.

  • Margen superior: -5vw (tableta y teléfono)
  • Margen inferior: -12vw (escritorio), 5vw (tableta y teléfono)
  • Acolchado izquierdo: 3vw (escritorio), 10vw (tableta), 25vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 10vw (tableta), 25vw (teléfono)

contenedor de columna

Clone ambos módulos tres veces y colóquelos en las columnas restantes

Una vez que haya completado ambos módulos en la columna 1, puede clonarlos tres veces y colocar los duplicados en las columnas restantes de la fila.

contenedor de columna

Cambiar imágenes

Asegúrese de cambiar la imagen en cada módulo de imagen duplicado.

contenedor de columna

Cambiar contenido de CTA y colores de fondo del botón

Cambie el contenido de CTA junto con los colores de fondo del botón también.

  • Módulo CTA # 2: # 89ffb4
  • Módulo CTA # 3: # ff89f1
  • Módulo CTA # 4: # ffd389

contenedor de columna

Agregue la clase CSS a los módulos de imagen en las columnas 1, 2 y 3

Ahora, para asegurarnos de que el efecto adhesivo también funcione en las imágenes, necesitaremos agregar una clase CSS a los Módulos de imagen en las columnas 1, 2 y 3.

  • Clase CSS: imagen fija

contenedor de columna

Agregar fila # 2

Estructura de columna

Lo único que queda por hacer es agregar el código CSS. Para hacer eso, agregue una nueva fila.

contenedor de columna

Agregar módulo de código con código CSS

Agregue un módulo de código a la fila, inserte el código CSS a continuación y listo.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}
 
.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

contenedor de columna

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!