Cómo diseñar las marcas de la página en la pantalla completa en Div

Los aspectos de la página de pantalla completa pueden ser muy útiles en el mundo del diseño web. Una de las principales ventajas de la apariencia de la página en la pantalla completa es la visibilidad. Con páginas de pantalla completa, todo el contenido de su página permanece en la ventana del navegador. En un mundo donde los usuarios se ejecutan rápidamente, si contiene todo su contenido en la ventana de vista del navegador desde el principio, puede ser estimulante para el espectador y también podría ayudar a los conversos. Si está familiarizado con DIV, ya debe conocer el módulo de encabezado de ancho completo, que tiene la funcionalidad de la pantalla completamente construida. Esta es una solución maravillosa para crear páginas de pantalla completa con contenido mínimo. Pero si desea aprovechar la creación de un aspecto de página de pantalla completa usando una sección normal con múltiples filas y módulos, esto está publicando para usted. Le mostraré algunos trucos simples para garantizar que su contenido de su página (incluso el cabezal de la barra y Sótano) Caer en la ventana de su navegador y luego escalar maravillosamente en diferentes tamaños del navegador.
Vamos a empezar. Lleva su ojo a una breve mirada al aspecto final de la página en la pantalla completa que crearemos en este tutorial.

Observe cómo la altura de la página se ajusta a la altura de la ventana del navegador para que todo permanezca en su lugar.

Lo que necesitas para este tutorial, todo lo que necesitas es Div. También usaré el paquete de diseño del gimnasio Fitness, accesible desde Divi Builder. Suscríbase a nuestro canal de YouTube cómo hacer una página de pantalla personalizada en la pantalla de la Divicidad antes de ingresar el diseño principal de este tutorial, pensé en mostrarle la idea básica detrás de crear una página de pantalla completa. Después de todo, podría sorprenderse de lo simple que puede ser. La idea básica se explicó en una nueva página, elija la plantilla de página vacía. Esto dejará de mostrar el encabezado principal y la barra inferior en la página (le mostraré cómo incluirlos más tarde).
Ahora implementa Divi Builder en el frente para crear tu página desde cero. Luego agregue una sección regular con una fila de una columna. Luego agregue un módulo de temporizador inverso (o cualquier módulo) en una sola fila de columna.

Para facilitar las cosas en el ojo, elimine el color de fondo en el recuento inverso y agregue un color de fondo a la sección para que podamos reconocer mejor la altura de la sección en la página. Actualmente, la altura de la sección es relativa a la altura del contenido que contiene. En este caso, el único contenido que tenemos es una sola fila con un solo módulo.

Ahora abra la configuración de la sección y acceda a la pestaña Avanzada y agregue los siguientes CSS personalizados al elemento principal: Min-HEight: 100VH;

Pantalla: Flex;
Dirección flexible: columna;
Establecer la altura mínima de la sección a 100 VH (100% de la altura para la ventana de observación) asegurará que su sección se estire sobre toda la ventana del navegador (o ventana). La propiedad “Display: Flex” es una forma rápida y fácil de centrar el contenido de su sección. Consulte esta útil guía para obtener más información sobre la unidad de longitud VH. Vea su página en vivo en un navegador de incógnito para ver el resultado, porque si está conectado a WordPress, la barra de administrador superior arrojará fácilmente la altura del navegador. Bueno, usted va. Esta es la idea básica de la forma de crear un aspecto personalizado de la página en la pantalla completamente en la división. Girar el encabezado y el sótano en su página de pantalla completa. Si desea tener el encabezado y la barra del sótano en la página de pantalla completa, deberá hacer un pequeño ajuste. Primero, cambie la plantilla de página nuevamente a la plantilla predeterminada en el editor de la página.

La inclusión del encabezado y el sótano inferior agregará una altura adicional a la ventana de la vista del navegador para que la sección no se ajuste perfectamente como lo era antes. Esto se debe al hecho de que su página ahora está compuesta por una altura de la sección que es el 100% de la altura de la ventana más la altura del encabezado y la barra del sótano inferior. Es demasiado. Para remediar esto, debemos ajustar el CSS personalizado de nuestra sección a la siguiente:

Min -Height: Calc (100VH – 133px);

Pantalla: Flex;
Dirección flexible: columna;
La única diferencia es el valor de la altura mínima. Ahora hay un cálculo que tiene en cuenta la altura adicional (en píxeles) del encabezado y la barra del sótano inferior. 132 PX se basa en la altura total implícita del encabezado (80 px) y la altura predeterminada de la base inferior (53 px). Ahora, tenemos una comprensión básica sobre cómo crear una página personalizada en la pantalla, para bucear en un diseño más complejo. Construyendo un diseño completo de la página en la pantalla completa para iniciar cosas para este diseño, crear una nueva página, darle a la página un título e implementar Div Builder. Seleccione la opción Elija un aspecto prefabricado y en la ventana emergente en la biblioteca, seleccione la página del gimnasio de fitness de diseño. Luego haga clic para usar la página de precios.
Una vez que se carga la aparición en el constructor, haga clic en el botón para construir en el frente (el constructor visual) y estará listo para comenzar. Creación de una nueva sección El aspecto prefabricado está ahí para ayudar a lanzar el proyecto. Usaremos estos elementos de diseño a lo largo de la carretera y limpiaremos el resto del aspecto después de que terminemos. Para crear la sección principal para nuestro aspecto de pantalla completa, continúe y cree una nueva sección habitual y tire de la parte superior de la página. Luego agregue un cuarto de estructura en una fila la mitad de la mitad de una columna. Esta será la base de nuestra página en una pantalla completa.
Agregando módulos a las columnas usando multiselecto (mantenga presionado CTRL / CMD y haga clic), seleccione todos los módulos de las dos primeras filas en la primera sección de la apariencia y tírelas en la primera columna de la nueva sección en la parte superior de la página.

Luego use multiselecto para copiar todos los módulos en la tercera fila en la misma primera sección y pégalos en la segunda columna de la nueva sección de la parte superior de la página. El texto se ocultará debido al fondo blanco, pero cambiaremos el fondo de color más tarde. En la tercera columna, agregue un módulo deslizante. Esta diapositiva eventualmente cubrirá toda la altura de la pantalla, pero por ahora configuramos el contenido. En la configuración del control deslizante, borre una de las dos diapositivas predeterminadas que existen de forma predeterminada y luego haga clic para abrir la configuración de deslizamiento único.

En la configuración de la diapositiva, agregue una imagen de fondo asegurándose de que sea lo suficientemente grande como para cubrir toda la altura del navegador.

Esto se encarga de todos nuestros módulos que necesitamos por ahora. Más tarde revisaremos la configuración de diseño, pero por el momento, para personalizar nuestro turno. Personalizar la configuración de la fila Abra la configuración de la fila y comience agregando el color de fondo en la columna 2: columna 2 color de fondo: # 2a2e40

Cambie a la pestaña de diseño y actualice lo siguiente: Haga que esta fila se complete el ancho: Sí, el ancho de la canaleta: 1 iguala las alturas de la columna: Sí, el revestimiento personalizado: 0 px hacia arriba, 0 px hacia abajo

Personalizar la configuración de la sección Lo único requerido en este momento para la configuración de nuestra sección es eliminar cualquier relleno predeterminado, pero pensé que sería bueno agregar un divisor de sección que enmarca la parte superior de la primera columna. Abra la configuración de la sección y actualice lo siguiente: Conjunto de divisor superior: consulte la captura de pantalla El color del separador superior: # 2A2E40 Altura de separador alto: 8VW Reparación horizontal del separador superior: 0.8x Flip divisor superior: vertical y horizontalizado: 0 PX hacia arriba , 0 px abajo

Debido a que el divisor se establece para mostrar debajo del contenido de la sección, se esconderá detrás del portaobjetos en la columna 3 y no se mostrará en la columna 2, porque coincide con el color del fondo de la columna. Esto crea un hermoso elemento de diseño de clasificación para la columna 1.

Elimine el resto del aspecto prefabricado en este momento, nuestra sección superior tiene todo disponible para la apariencia de la página en una pantalla completa, para que podamos eliminar todas las secciones restantes que vinieron con el aspecto prefabricado. Así es como su página debería verse tan lejos.

Ahora estamos listos para comenzar a personalizar nuestra página para convertirnos en una pantalla completa. Agregando CSS personalizado para hacer la página en la pantalla completa en el ejemplo básico desde el comienzo de este artículo, agregué el CSS personalizado directamente a la sección. Sin embargo, para garantizar que nuestra funcionalidad de pantalla completa solo se aplique al escritorio (y recurra al estilo predeterminado en el móvil), la agregaré al CSS en la configuración de la página. Esto me permitirá agregar CSS externo que solo se aplique a esta página, pero también me da la opción de agregar una consulta de medios que limite el estilo al escritorio. Desde el menú Configuración en la parte inferior del fabricante frontal, abra la configuración de la página. En la pestaña avanzada, ingrese el siguiente CSS personalizado: @Media (Min-Width: 980px) {/*Si ha agregado IDS CSS, esto hace que la altura del elemento sea la ventana del navegador en el encabezado y el pie de página inferior*//

#fullsection, #fullslide .et_pb_slide {

Altura: Calc (100VH – 133px);

}
/*Esto centra el contenido de la sección cuando se aplica la ID de CSS*/

#fullsection {
Pantalla: Flex;
Dirección flexible: columna;
Desbordamiento: oculto;
}
/*Esto hace que la barra de pie de página inferior coincida con el encabezado de ancho completo si se aplica*/
#Piefer-Bottom .Container {
Ancho: 100%;
MAX-ANCHO: 100%;
Right de relleno: 30px;
ROLDE-LEFURA: 30px;
}
}
Para aquellos de ustedes que no están familiarizados con CSS, observe que el código está envuelto por una consulta de medios que aplica el estilo cuando el navegador tiene un ancho mínimo de 980 PX. Con los soportes, el primer fragmento incluye una ID de CSS llamada “Sección completa” seguida de una ID de CSS llamada “Fullslide”. Es importante recordar estas dos ID de CSS porque tendremos que agregarlas a nuestra sección y deslizarnos. Después de hacerlo, CSS aplicará “Altura: Calce (100VH – 133px)”, haciéndolos ambos en la pantalla completa (cubriendo la altura completa de la ventana del navegador). El segundo fragmento aplicará la propiedad de la pantalla Flex a la sección, haciendo todo el contenido de la sección centrada verticalmente. Para obtener más información sobre esto, consulte nuestra publicación sobre cómo alinear verticalmente el contenido en el Div. El tercer fragmento es completamente opcional. Esto simplifica el ancho completo de la plantilla de la parte inferior para que se ajuste un poco mejor al diseño y también para que coincida con el estilo del cabezal de ancho completo que agregaremos. Ahora que tiene el CSS externo, podemos agregar nuestras ID de CSS a nuestra sección y deslizamiento. Acceda a la configuración de la sección y agregue el siguiente ID CSS: ID CSS: Complete la sección Cómo abrir la configuración del módulo deslizante en la columna 3 y agregue el siguiente ID CSS: CSS ID: FullSlide
Toques finales En este momento, la funcionalidad de la página de pantalla completa está en su lugar y debería funcionar. Puede verificarlo en un navegador de incógnito para estar seguro. Solo quedan unos pocos toques finales. Agregue espacio a nuestras columnas Abra la configuración de la fila para agregar algunos rellenos a la parte superior de la columna 1 y la columna 2 de la siguiente manera: Columna 1 Reinicio personalizado: 12 VH hacia arriba, 1 VW Left, 1VW Columna 2 Reinicio personalizado: 12 VH, 1VW izquierda, 1VW Right -Conscribe que utilicé la unidad de longitud VH para mis valores de llenado superiores. Esto permitirá que el relleno se expanda con la altura de la pantalla, creando más rellenos a medida que la ventana del navegador se vuelve más alta y crea menos relleno a medida que el navegador se acorta. Utilicé la longitud de VW (ancho de vista) para mis valores de llenado izquierdo y derecho, de modo que el llenado se escalará dependiendo del ancho del navegador. Agregue unidades de longitud VH al texto grande para maximizar el espacio de visualización como puede ver, hay algunos módulos con un texto muy grande, que no coincide en absoluto con la ventana del navegador. Para remediar esto, podemos establecer el tamaño de texto en una unidad de longitud VH. Esto le permitirá reducir el texto en las pantallas más cortas del navegador. Abra la configuración del módulo de texto en la columna Top 1 y actualice el tamaño de texto del encabezado H1 (no VW).
Luego abra la configuración del módulo de texto en la parte superior de la columna 2 y actualice el tamaño del encabezado 2 a 6VH.
Actualice el diseño del control deslizante para completar el diseño, puede copiar el botón de diseño del botón 2 y pegarlo en los estilos de botón deslizante. Para hacer esto, abra la configuración del botón para el botón en la columna 2 y haga clic en la categoría Opciones del botón y haga clic en “Copiar los estilos”. Desde la diapositiva.
También puede agregar una superposición de fondo a las diapositivas individuales.
Los ajustes del encabezado y la barra del sótano pueden recordar que ya hemos agregado un pequeño fragmento CSS personalizado que expandió nuestro sótano al ancho completo. Esto estaba esperando hacer la barra de menú principal, también ancho completo. Para que la barra de menú principal tenga el ancho completo, vaya al tablero de WordPress y explore la división> el tema y la navegación> la barra de menú principal. Luego verifique la opción. Debido a que mostramos la barra inferior en nuestra página de pantalla completa, podemos actualizar la parte inferior de la barra inferior para que coincida con el diseño. Manténgase en el cliente temático y navegue en el sótano> barra a continuación. Luego establezca el color de fondo en # 2A2E40. Luego publique los cambios.
El resultado final es el diseño final. Observe cómo todo encaja maravillosamente en la ventana del navegador.

Y verifique cómo se ve cuando ajusta el navegador a diferentes tamaños.

Y no lo olvide, porque hemos aplicado nuestro CSS personalizado solo a los anchos del navegador mayores de 980 PX, el diseño volverá a la normalidad en los dispositivos móviles. Aquí está la tableta y el teléfono inteligente.

Pensamientos finales La creación de un aspecto personalizado de la pantalla completa en la división no es tan abrumadora una vez que comprende cómo ajustar adecuadamente la altura de la sección a una altura de su navegador con algunos fragmentos CSS. Pero una vez que tenga Down, puede crear innumerables modelos de páginas de pantalla completa dentro de Divi Builder. Solo tenga cuidado de mantener el contenido al mínimo si tiene la intención de mantener todo en la ventana del navegador. Este tipo de diseño funciona bien para sitios personales, ofertas promocionales y todo tipo de páginas de destino. También es una excelente solución para las páginas que han contenido bajo y desea evitar mostrar la barra del sótano en la parte inferior de la página en la mitad de la página. Y no olvides la opción de usar el Div FullWidth Div Aunque no tendrá la misma flexibilidad que el método utilizado en esta publicación, es perfecto para páginas mínimas de contenido. Aquí hay algunas otras publicaciones que puede disfrutar del tema de las páginas de pantalla completa.

Cómo crear secciones de pantalla completas con lazos superior e inferior con div Div

Diseñe una apariencia de división única en una pantalla completa con un botón de desplazamiento animado

y otra


Espero tener noticias suyas en los comentarios a continuación. ¡Suerte!