homefinance blog
El módulo Glisor Divor está lleno de opciones de diseño que facilitan el pensamiento fuera de la caja y crea increíbles modelos deslizantes. Así que hoy, cambiaremos algunas cosas (literalmente). En la siguiente publicación, agregaremos elementos deslizantes verticales al módulo Glisor Divor. Con una diapositiva con elementos verticales (como el texto del texto y las diapositivas), los visitantes pueden ver más diapositivas e imágenes de fondo en columnas más estrechas (especialmente en dispositivos móviles). Y los elementos verticales agregan un giro refrescante al diseño general. Para hacer esto, utilizaremos la opción de convertir la transformación del divor para rotar y luego activar otros elementos en cada diapositiva, según sea necesario, para crear un diseño moderno de la diapositiva vertical. Comenzaremos pasando sobre la técnica básica. Luego crearemos un diseño de encabezado completamente único con esta diapositiva vertical.
¡Vamos a bucear! Tirar del ojo
Descargue el aspecto de los elementos deslizantes divisionales de forma gratuita para poner su mano en los dibujos en este tutorial, 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!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? https://youtu.be/nmuy9vayo4m Suscríbase a nuestro canal de YouTube lo que necesita comenzar a comenzar, tendrá que tener lo siguiente:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Dos imágenes que se rotaron 90 grados en la dirección opuesta a las agujas del reloj. Esto se puede hacer fácilmente utilizando las opciones Built -in de su sistema operativo o por cualquier aplicación simple de edición de fotos. También puede rotar directamente en WordPress editando el elemento de medios.
Después de eso, estás listo para crear tu obra maestra en el Div.
La idea básica de la idea básica detrás de la adición de elementos deslizantes verticales es usar las opciones de transformación de la división para rotar el módulo deslizante con 90 grados (en sentido horario o en la dirección opuesta), para mostrar verticalmente en la página. Para las imágenes de fondo de diapositivas (o diapositivas), querrá girar la imagen de antemano (o usar el editor de imágenes de WordPress), de modo que la imagen se muestre en posición vertical cada vez que gira la diapositiva. Esto mostrará comandos deslizantes, flechas y texto vertical como era de esperar. La parte difícil viene con la personalización de la altura y el ancho de la diapositiva, porque las cosas se giran literalmente. Este diseño deslizante funciona mejor en una apariencia con dos o más columnas. Un ejemplo rápido de cómo hacer esto. En una sección normal con dos columnas, agregue un módulo deslizante a la columna izquierda. Luego agregue algunas diapositivas cada una con un título, una oración de contenido del cuerpo y una imagen de fondo que se giró previamente en reversa a un reloj de 90 grados.
Luego gire el módulo deslizante con 90 grados a lo largo del eje Z utilizando las opciones de transformación de la división.
Luego agregue espaciado (relleno inferior) al portaobjetos para crear un ancho adicional y alinee el texto a la derecha de cada diapositiva.
Aquí está el resultado.
Como puede ver, el concepto es simple, pero estos elementos deslizantes verticales pueden ser muy útiles para crear modelos únicos.
A continuación, haremos una grieta en la creación de uno de estos modelos deslizantes únicos juntos. Agregar elementos deslizantes verticales al módulo de divisor Glisor para una creación de diseño de encabezado única de la sección y fila El fondo de la sección comienza creando una sección regular con dos columnas. Antes de agregar un módulo en una fila, primero actualice la sección con la sección con la Siguiente color de fondo: Color de fondo: # 24272a
Configuración de la fila Entonces, debemos darle a la fila un ancho personalizado de la canaleta 1 y luego establecer el ancho usando la unidad de longitud VW. El uso de la unidad de longitud VW es importante para que nuestro control deslizante vertical responda más tarde.
Abra la configuración de la fila y actualice lo siguiente: El ancho de canaletas: 1 Ancho: 80VW (escritorio y tableta), 95VW (teléfono) Ancho máximo: 80VW (escritorio y tableta), 95VW (teléfono) y luego agregue una cajra para fines de diseño. Box Shadow: Ver Captura de pantalla Posición horizontal de la sombra de la caja: -10px Sombra Publicación vertical: 0px Color de sombra: RGBA (255,255,255,03)
Agregue el contenido del encabezado usando un módulo de texto al final, agregaremos el control deslizante en la columna 2, pero por ahora agregamos el título del encabezado con un texto adicional en la columna 1. Para hacer esto, agregaremos dos módulos de texto en la columna 1.
Agregue el módulo de texto de título para agregar el título del encabezado, agregue un módulo de texto a la columna 1.
Actualice el contenido de su cuerpo con la siguiente sección H2:
Mi trabajo
Luego actualice lo siguiente: Fuente de la Sección 2: Karla Sección 2 Color de texto: #FFFFFF 2 Tamaño de texto: 5VW (escritorio), 60 px (tableta), 50 px (teléfono) forro: 15% arriba, 20% de baja, 5% izquierda , 5% de la sombra de la cáscara: ver Captura de pantalla Posición horizontal de la caja: 60 PX Box Sombra Posición vertical: 0px Color de sombra: # 9A2508
Agregue un módulo de texto para el contenido del cuerpo y luego, agregue un nuevo módulo de texto debajo del primer módulo de texto en la columna 1. Podemos dejar el contenido predeterminado por el momento.
Luego actualice lo siguiente: El color de texto del texto: #CCCCCCC Ancho: 70% Alineación del módulo: Margen correcto: -5% revestimiento superior: 5% inferior, 10% izquierda, 5% derecho
Box Sombra: ver Captura de pantalla Posición horizontal de la sombra de la caja: 0 PX Box Sombra Posición vertical: 10 PX Color de sombra: RGBA (255,255,255,03)
Creando el control deslizante vertical ahora estamos listos para crear la diapositiva con los elementos deslizantes verticales. Para hacer esto, agregue un módulo deslizante a la columna 2.
Abra la configuración de diapositivas en la primera de las dos diapositivas predeterminadas.
Corte el texto predeterminado del cuerpo para incluir una sola línea de texto. Luego agregue una imagen de fondo que se giró previamente en la dirección opuesta a un reloj de 90 grados.
Luego haga lo mismo para la segunda diapositiva predeterminada, dándole una imagen de fondo diferente.
Gire el portaobjetos y luego gire el portaobjetos usando la opción transformada: eje transformador Z: 90 grados
El control deslizante de altura no tiene que preocuparse por el ancho de la diapositiva, ya que cubrirá automáticamente el 100% de la columna. La columna es del 50% de 80VW (ancho de fila), por lo que el ancho será predeterminado 40VW. Ahora tenemos que darle al control deslizante una altura adecuada de 40 VW en el escritorio y luego establecer la altura en 80 VW en la tableta y 95 VW en el teléfono. Actualice lo siguiente: Altura: 40VW (escritorio), 80VW (tableta), 95VW (teléfono) y luego ajusta el relleno para alinear el texto a la derecha de la diapositiva vertical. Relleno (escritorio): 0 px hacia arriba, 21 vw hacia abajo, 0 izquierda izquierda, 0 px revestimiento derecho (tableta): 42 VW Downstone (teléfono): 50 VW abajo
Actualización de la configuración del texto Ajuste el título y el texto del cuerpo de la siguiente manera: Alineación del texto: Título izquierdo Fuente: Karla Tamaño del texto Título: 32 PX Altura del título: 1.3EM Spaction of Corpal Liters: 3 PX Altura del cuerpo: 1.8EM
Atilización del botón para estilizar y colocar el botón, actualice lo siguiente: Botón Tamaño del texto: 16 Botón PX Color: # 9A2508 Ancho del botón: 0 PX Distancia entre letras y botones: 2 PX Botón de fuente: Botón de icono semi en negrita: firmar más (firmar (firmar (firmar (firmar (firmar (firmar (firmar (firmar (firmar (firmar (firma Ver captura de pantalla) Alineación del botón: Botón marja derecho: 10% más, 10% de baja
Gradiente de fondo Para crear un fondo para el texto en el título vertical de la diapositiva, podemos agregar un gradiente de jardinería a la diapositiva de la siguiente manera: Color izquierdo del gradiente de fondo: # 9A2508 Color derecho del gradiente de fondo: RGBA (0.0, 0.0, 0.0 ) Posición inicial: 12% Posición final: 0% Coloque el gradiente sobre la imagen de fondo: Sí: si lo desea, puede ajustar la opacidad del gradiente de fondo derecho para crear una superposición para sus imágenes de diapositivas. Botón y deslizar con CSS personalizado Debido a que nuestro botón aún es vertical, tendremos que girarlo de nuevo a su posición anterior con un fragmento CSS. Agregue los siguientes CSS al botón Slide: Transformar: Rotado (-90deg);
Para flechas deslizantes, puede agregar el mismo fragmento CSS, de modo que indiquen a la derecha e izquierda en lugar de arriba y hacia abajo. Y mientras estemos allí, podemos aumentar el tamaño de las flechas. Agregue el siguiente CSS para transformar: rotado (-90deg);
Tamaño de fuente: 80px;
¡Eso es todo! Verifiquemos el resultado final. Resultado final
Y aquí está la tableta y el teléfono.
Siéntase libre de explorar nuevos modelos cambiando los elementos verticales. Aquí hay un ejemplo del mismo diseño con el botón colocado a la izquierda y una superposición de texto.
