Cómo crear diseños adhesivos personalizados "Volver al principio" con Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño en curso de Divi, le mostraremos cómo crear diseños personalizados que se adhieran al principio con Divi y el paquete de diseño de energía verde. Esta técnica lo ayudará a mejorar la experiencia del usuario en sus páginas mientras aprovecha las opciones integradas de Divi en el lado del diseño. ¡Esperamos que este tutorial lo inspire a crear su propia alternativa a los mejores diseños y usarlos en su próximo sitio web!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de este tutorial.

GIF

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

1. Agregue un desplazamiento suave al HTML de la página

Subir la página de destino de Green Energy a una nueva página

Lo primero que deberá hacer es crear una nueva página y cargar la página de inicio del paquete de diseño de energía verde.

Abrir configuración de página

Abra la configuración de la página haciendo clic en el icono marcado en la pantalla de impresión a continuación:

Agregar desplazamiento suave al cuadro CSS personalizado

Vaya a la pestaña avanzada y agregue un comportamiento de desplazamiento suave a toda la página agregando el siguiente código CSS al cuadro CSS personalizado:

html {
scroll-behavior: smooth;
}

2. Agregue el ID de CSS a la sección Hero

Sección de héroe abierta

El diseño de regreso a la parte superior redirigirá a los visitantes a la sección de héroes. Para lograrlo, primero deberá abrir la configuración de la sección de héroe.

Agregar ID de CSS

Luego, vaya a la pestaña avanzada y agregue una ID de CSS a la sección. Más adelante en esta publicación, agregaremos un enlace de anclaje que llevará a los visitantes a esta sección.

• ID de CSS: sección-1

3. Agregue una nueva sección a la parte inferior de la página con el diseño "Volver al principio"

Pasos generales

Agregar nueva sección regular al final de la página

Como puede notar en la vista previa de esta publicación, vamos a recrear tres ejemplos de diseño diferentes. Para agilizar el proceso, comenzaremos con algunos pasos generales primero y nos centraremos en cada ejemplo de diseño individualmente más adelante en la publicación. Agrega una nueva sección regular al final de tu página.

Espaciado

Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

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

Agregar enlace de ancla

Tan pronto como alguien haga clic en toda la fila, queremos que sea redirigido a la parte superior de la página. Para hacer eso, agregaremos un enlace que redirige a la sección de héroe de la página.

• URL del enlace de fila: yourwebsite.com/page/#section-1

Alineación de filas

También colocamos la fila en el lado derecho del contenedor de la sección.

• Alineación de filas: derecha

Posición fija

A continuación, vamos a arreglar toda la fila yendo a la pestaña avanzada de la fila y actualizando las siguientes opciones de posición:

• Posición: fija
• Desplazamiento vertical: 30px
• Desplazamiento horizontal: 30px
• Índice Z: 99

Además de hacer que la fila sea fija, nos aseguramos de que la fila se superponga a todo el contenido de la página aumentando el índice z.

Recrear el ejemplo de diseño n. ° 1

Configuración de filas

Cambiar la estructura de la columna

Ahora que hemos seguido todos los pasos generales, vamos a recrear los tres ejemplos diferentes que pudo ver al principio de esta publicación. ¡Empecemos por el primero! Cambiar la estructura de la columna de la fila:

Color de fondo

Continúe abriendo la configuración de la fila y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Dimensionamiento

Vaya a la pestaña de diseño y cambie la configuración de tamaño.

• Usar ancho de canalón personalizado: 1
• Ancho: 9vw (escritorio), 23vw (tableta), 35vw (teléfono)

Espaciado

Agregue también algunos valores de relleno personalizados.

• Acolchado superior: 2.5vw (escritorio), 6vw (tableta), 10vw (teléfono)
• Acolchado inferior: 2.5vw (escritorio), 6vw (tableta), 10vw (teléfono)
• Acolchado izquierdo: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
• Relleno derecho: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)

Frontera

Continúe agregando '10px' a cada una de las esquinas en la configuración del borde.

Sombra de la caja

Y agregue una sombra de cuadro usando la siguiente configuración:

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)

Monitor

Para asegurarnos de que las columnas permanezcan una al lado de la otra en todos los tamaños de pantalla, agregaremos una línea adicional de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto a la primera columna con algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Arial
• Peso de la fuente del texto: negrita
• Alineación de texto: derecha
• Color del texto: # 000000
• Tamaño del texto: 1.1vw (escritorio), 3vw (tableta), 4.4vw (teléfono)
• Espaciado de letras de texto: -1px
• Altura de la línea de texto: 1em

Agregar módulo de texto a la columna 2

Agregar símbolo

Continúe con la segunda columna y agregue un módulo de texto allí también. Agregue el símbolo '▲' al cuadro de contenido.

Configuración de texto

Por último, pero no menos importante, vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Alineación de texto: centro
• Color del texto: # 000000
• Tamaño del texto: 3vw (escritorio), 8vw (tableta), 12vw (teléfono)
• Altura de la línea de texto: 0.6em

Recrear el ejemplo de diseño n. ° 2

Configuración de filas

Dimensionamiento

¡Pasemos al segundo ejemplo! Abra la configuración de la fila y cambie el ancho de la fila.

• Ancho: 7%

Espaciado

Continúe con la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de texto a la columna

Agregar símbolo

Continúe agregando un módulo de texto a la fila e ingrese el símbolo '↑'.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Alineación de texto: centro
• Color del texto: # 000000
• Tamaño del texto: 56px
• Altura de la línea de texto: 1em

Espaciado

A continuación, agregaremos algunos acolchados superior e inferior personalizados.

• Acolchado superior: 30px
• Acolchado inferior: 50px

Frontera

Pase a la pestaña de diseño y agregue '50vw' a cada una de las esquinas. Agregue un borde también usando la siguiente configuración:

• Ancho del borde: 3px
• Color del borde: # 000000

Recrear el ejemplo de diseño n. ° 3

Configuración de filas

Dimensionamiento

¡Pasemos al siguiente y último ejemplo! Abra la configuración de la fila y modifique el ancho.

• Ancho: 4% (escritorio), 10% (tableta), 15% (teléfono)

Espaciado

A continuación, elimine el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de la caja

Agregue una sombra de cuadro personalizada a la fila usando la siguiente configuración:

• Fuerza de propagación de la sombra de caja: 4px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de texto a la columna

Agregar símbolo

El único módulo que necesitamos para este ejemplo de diseño es un módulo de texto. Agregue '^' al cuadro de contenido.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Open Sans
• Peso de la fuente del texto: Ultra Bold
• Alineación de texto: centro
• Color del texto: # 4359e9
• Tamaño del texto: 56px
• Altura de la línea de texto: 1em

• Color de la sombra del texto: # 35d764

Espaciado

Continúe yendo a la configuración de espaciado y agregando algunos acolchados superior e inferior personalizados.

• Acolchado superior: 30px
• Acolchado inferior: 20px

Frontera

Por último, pero no menos importante, agregue un borde al módulo de texto y ¡listo!

• Ancho del borde: 3px
• Color del borde: # 4359e9

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.

GIF

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Pensamientos finales

En este tutorial de casos de uso, le mostramos cómo crear diseños personalizados back to top con Divi. Agregamos un desplazamiento suave a nuestras páginas, asignamos un ID de sección a la sección de héroe y vinculamos una fila fija a la sección de héroe. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.