Cómo crear una hermosa página de fondo que aparezca bajo los divisores del div

A lo largo de todas las tendencias de diseño, los sótanos siguen siendo esenciales. La gente se ha acostumbrado tanto, lo que a su vez los hace muy fáciles de usar. Ayudan a los visitantes a organizar su estadía en su sitio web y navegar en la página exacta que están buscando. Con Div, puede crear fácilmente cualquier sótano en una sola sección. Ahora, si desea darle al sótano un tamaño e interacción adicional, le encantará esta publicación. Combinaremos creativamente una sección del sótano con secciones para crear una revelación del sótano.
¡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 el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo 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íbase a nuestro canal de YouTube 1. Cree una nueva página vacía y cargue su elección, Agregue una nueva página vacía, lo primero que tendrá que hacer es crear una nueva página vacía.
Cargue el paquete Seas Destination Pag a Visual Builder y cargue la página de destino del paquete de diseño SaaS. Aunque usamos este aspecto específico, puede hacer que la técnica funcione en cualquier tipo de página en la que trabaje.

2. Agregue el índice Z a cada sección y elimine las animaciones de la sección Agregar índice Z a la sección Héroe Continuar cambiando el índice Z de la sección Hero en la página.

IND ÍNDICE: 3
Copie el índice y pegue z a todas las otras secciones en la página Copie el índice z y pídalo a todas las demás secciones de la página. El aumento del índice Z para cada una de las secciones es un paso crucial para que el tutorial funcione. Permitirá que cada una de las secciones aparezca en la parte superior de la sección del sótano, que agregaremos a la publicación.

Elimine la animación de la sección de héroes para garantizar que el sótano permanezca oculto hasta la parte inferior de la página, eliminaremos todas las animaciones de la sección. Abra la sección del héroe y elimine la animación. Animación Styl: Ninguno


Extienda la animación a todas las secciones en la página Extienda los estilos de animación a todas las secciones de toda la página.
3. Cambie la última sección en la página Cambie el color de fondo a la última sección de la página y cambie el color de fondo.

Color de fondo: # F2F2F2


4. Agregue la sección regular # 1 a la parte inferior de la configuración de la página de ajuste de configuración, como puede ver en la vista previa de esta publicación, el sótano aparecerá en un divisor de sección. Dedicaremos una nueva sección en la parte inferior de nuestra página, este separador de secciones. Abra la configuración de la sección y use un color de fondo totalmente transparente. Esto permitirá que el sótano se muestre a través del contenedor de sección, incluso si su posición estará debajo de él.
Color de fondo: RGBA (0.0,0,0)

El divisor superior vaya a la pestaña de diseño de la sección y agregue un separador superior.
Estilo divisor: encontrar en la lista

Altura del divisor: 250 px (escritorio), 150 px (tableta), 100 px (teléfono)
Repetición del distribuidor horizontal: 2x
El índice z Esta nueva sección también necesita un aumento del índice Z.
IND ÍNDICE: 3

5. Agregue la sección regular # 2 a la parte inferior de la configuración de la página, la sección del sótano es hora de crear la sección del sótano. Agregue una nueva sección habitual en la parte inferior de la página y seleccione un color de fondo de su elección.
Color de fondo: # 202332

Dimensión Vaya a la pestaña Diseño y asegúrese de que el ancho sea “100%”.
Ancho: el espaciado del 100%también tendrá que aumentar la capacidad superior de la sección.

Revestimiento superior: 500 px
IND ÍNDICE IND El índice que atribuimos a esta sección es más bajo que el de las otras secciones en la página. Esto nos ayudará a ocultar la sección hasta llegar a la parte inferior de la página.

IND ÍNDICE: 2
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:
Use el ancho personalizado de la canaleta: sí


El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Espacio de columna luego abra la configuración de la columna 1 y agregue algunos rellenos a la izquierda.
ENLIZACIÓN IZQUIERDA: 20 PX
La columna derecha agregó un borde recto a la columna.

El ancho del borde recto: 1 PX
Color de borde derecho: # 515151


Copie los estilos de columna, aplique los cambios de todas las columnas mediante la expansión de los estilos o utilizando la opción Copy-Lip.
Agregue el módulo de imagen a la columna 1 ¡Cargue la imagen es hora de comenzar a agregar módulos! Agregue un nuevo módulo de imagen a la primera columna y cargue el logotipo.
Dimension Switch a la pestaña de diseño y cambie el ancho en diferentes tamaños de pantalla.

Ancho: 35% (escritorio), 30% (tableta), 25% (teléfono)


Alineación del módulo: izquierda

Espaciado Agregar un margen más bajo.
Muestra el espacio debajo de la imagen: Sí
Margen inferior: 50 PX

Agregue el módulo de texto no. 1 En la columna 2 Agregar contenido vamos a la segunda columna! Agregue un primer módulo de texto con un contenido de su elección.
Configuración de texto Cambie la configuración de texto.
Texto de fuente: Nunito Sans

El peso de la fuente de texto: semi audaculador del texto: #ffffff

Tamaño del texto: 19 PX
Espacio y agregue algunos bordes personalizados e inferiores en diferentes tamaños de pantalla.
Margen superior: 15 PX (escritorio y tableta), 10 PX (teléfono)
Margen inferior: 15 PX (escritorio y tableta), 10 px (teléfono)
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue un segundo módulo de texto a la segunda columna e ingrese un contenido de su elección.

Agregue un enlace Agregue un enlace que coincida con el elemento del sótano.
Dirección de URL del módulo: #
Configuración de texto Cambie la configuración de texto a continuación.

Texto de fuente: Nunito Sans

Color de texto: #DBDBDB
Tamaño del texto: 17 PX

Espacio y agregue algunos rellenos personalizados en la parte superior e inferior en diferentes tamaños de pantalla.
Margen superior: 15 PX (escritorio y tableta), 10 PX (teléfono)
Margen inferior: 15 PX (escritorio y tableta), 10 px (teléfono)
Clon el módulo de texto no. 2 ¿Cuántas veces es necesario clonar el segundo módulo de texto en la columna 2 tantas veces como sea necesario?

Cambie el contenido Asegúrese de cambiar el contenido.
Cambie los enlaces con los enlaces.
Dirección de URL del módulo: #

Módulos de clon en la columna 2 y colocar en las columnas restantes Después de completar la segunda columna, puede clonar ambos módulos tantas veces como sea necesario y puede colocar los duplicados en las dos columnas restantes.

Cambie el contenido Cambie el contenido de cada duplicado.

Cambie los enlaces junto al enlace.
Dirección de URL del módulo: #

6. Haz la sección no. 2 Fijado en la parte inferior de la página Agregue CSS personalizado ahora, para crear la pantalla del desfile, nos aseguraremos de que la sección del sótano permanezca en la parte inferior de nuestra página agregando dos líneas de código CSS al elemento principal de la sección. Posición: fijo; abajo: 0;

7. Agregue el margen inferior a la sección # 1 para crear el efecto de revelación Agregue el margen inferior en diferentes tamaños de pantalla también, necesitaremos espacio en la parte inferior de nuestra página, lo que permite que se muestre el sótano. Abra la sección que contiene el divisor de la sección y agregue un borde inferior en diferentes tamaños de pantalla y ¡termine!

Margen inferior: 400 PX (escritorio), 700 PX (tableta), 800 PX (teléfono)
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, le mostré cómo crear un sótano hermoso para crear un sótano para crear un efecto único. Esta es una excelente manera de hacer cualquier sótano interactivo y llamar la atención sobre los elementos enumerados en el sótano. ¡Esperamos que este tutorial lo inspire a crear su propio divisor del sótano! 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 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.