Ser creativo con nuevas opciones de reemplazo de división

Las nuevas opciones para reemplazar el IMA IMA Divii le dan a sus proyectos un nivel de creatividad completamente nuevo. En esta publicación, le mostraremos cómo crear una hermosa sección con imágenes que cambien para caminar. Esperamos que este diseño lo inspire a crear sus propias secciones creativas con las opciones de reemplazo de la división. ¡Podrá descargar el archivo JSON de forma gratuita! 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 la imagen para reemplazar la imagen de forma gratuita para poner su mano en el reemplazo de imagen gratuita, primero deberá descargarla 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.
Te has suscripto satisfactoriamente. ¡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 para comenzar a recrear Agregar una nueva sección de espaciado creando una nueva página o agregando una nueva sección a una página existente. Antes de agregar una fila, ajuste la configuración de separación de la sección.
Margen superior e inferior: 2 VW
Margen izquierdo y derecho: 2VW
Borde y luego agregue un rayo de borde.

Esquinas redondeadas: 10 px
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Papel tapiz antes de agregar módulos, agregue un fondo de gradiente de salmón pálido.

Antecedentes: gradiente
Color degradado 1: Salmón PAL # F4E9DE
Color degradado 2: salmón incluso pálido # fff0e8
La dimensión continúa ajustando el ancho de la fila.

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Finalmente espaciado, ajuste la distancia.

Revestimiento superior:
Desktop + tableta: 5VW
Forro izquierdo:
Tableta + teléfono: 5VW
Junta derecha:
Escritorio: 7VW
Tableta + teléfono: 5VW
Agregue un módulo de texto en la columna 1 Agregar contenido H2 es hora de comenzar a agregar módulos. Agregue un módulo de texto en la columna 1 e ingrese un contenido H2 de su elección.

Mostrar texto Vaya a la pestaña Diseño y estilice la configuración de texto H2 en consecuencia:

El nivel del texto del encabezado: H2
Font H2: Annie usa tu telescopio
H2 FUENT PESO: Bold
Alineación del texto H2: Centro
H2 Color de texto: Brown # 793715
Color de texto H2:
Escritorio: 7.2VW
Tableta: 12VW
Teléfono: 11VW
Dimensión Cambie el ancho en el escritorio aún más.

Ancho: Escritorio: 45VW
Tableta + teléfono: 100%
Gire no por último, gire el texto y cambie su posición utilizando la configuración de transformación.
Transformación de rotación:

Escritorio: 270 grados
Transformar la traducción:
X eje: -10VW
Eje Y: 19VW
Agregue el primer módulo de imagen a la columna 1 Agregue una ilustración transparente Agregue un nuevo módulo de imagen justo debajo del módulo de texto y cargue una ilustración de su elección. Puede encontrar las imágenes que utilizamos en este tutorial descargando la carpeta ZIP al comienzo de esta publicación.
Dimensión ahora, forzar el tamaño de la imagen al ancho completo.


Ancho completo: si

Extienda luego, ajuste la configuración de espaciado.
Margen superior:

Desktop + tableta: -11VW
Borde izquierdo:
Escritorio: -2VW
Tableta + teléfono: -36VW
Forro izquierdo y derecho:
Escritorio: 10 VW
Tableta + teléfono: 34VW
Agregue el segundo módulo de imagen a la columna 1 Agregue una ilustración transparente justo debajo del primer módulo de imagen, agregue otro. Ingrese una ilustración de su elección.
La dimensión obliga al módulo al ancho completo.

Ancho completo: si

Extienda luego, ajuste la configuración de espaciado.
Margen superior:

Escritorio: -2VW
Tableta + teléfono: -10VW
Borde izquierdo:
Desktop + tableta: -14VW
Forro izquierdo y derecho:
Escritorio: 7VW
Tableta + teléfono: 35VW
Agregue el tercer módulo de imagen a la columna 1 Agregar una imagen Agregue otro módulo de imagen en la columna e ingrese una ilustración.
Dimensión Entonces, obliga al módulo a un ancho completo.

Ancho completo: si

Finalmente espaciado, ajuste la distancia.
Margen superior:

Tableta + teléfono: -18VW
Borde izquierdo:
Escritorio: -13VW
Tableta + teléfono: 10 VW
Forro izquierdo y derecho:
Escritorio: 7VW
Tableta + teléfono: 35VW
Agregue el cuarto modo de imagen en la columna 1 Agregue una imagen El módulo final en la columna 1 es otro módulo de imagen. Ingrese una ilustración. La dimensión obliga al módulo al ancho completo.
Ancho completo: si


Espacio y luego ajusta el espacio.

Margen superior:
Escritorio: 3VW

Tableta + teléfono: -15VW
Borde izquierdo:
Escritorio: -3VW
Tableta + teléfono: 30VW
Forro izquierdo y derecho:
Escritorio: 10 VW
Tableta + teléfono: 35VW
Transformar no por último, rotar la ilustración.
Transformación de rotación: 84 grados
¡Agregue el primer módulo de texto a la columna 2 Agregue contenido a la siguiente columna! Agregue un módulo de texto con un contenido H3 de su elección.

Agregue un enlace y luego, agregue un enlace al modo.
Acceda al papel tapiz de acceso a la configuración de fondo y agregue un color de fondo adicional.

Color de fondo

Color de fondo: Brown # 793715

Envíe texto luego, estilice el texto H3 en la pestaña de diseño.
El nivel del texto del encabezado: H3
Font H3: Annie usa tu telescopio

Color H3: blanco #ffffff
Tamaño de fuente H3:
Escritorio: 2VW
Tableta: 5VW
Teléfono: 6VW
Dimensión ahora, ajuste la configuración del tamaño.
Ancho: 33%
Alineación del módulo: centro

Extienda luego, agregue algunos valores de espaciado en diferentes tamaños de pantalla.
Margen inferior: 1 VW
Revestimiento superior:

Escritorio: 0.5 VW
Tableta + teléfono: 2.3VW
Levante inferior:
Desktop + tableta: 1.1VW
El borde continúa agregando un rayo de borde.
Esquinas redondeadas: 1 VW todas las esquinas
Box Shadow Finalmente agregue un tono de caja.

Box Shadow: Primera opción
Posición horizontal: 7 PX

Fuerza de harina: 25 px
Agregue el primer módulo de imagen a la columna 2 agrega la siguiente forma en que necesitamos en la columna 2 es un módulo de imagen. Cargue dos imágenes diferentes: una para condición estática y otra en Hover.star: Primera imagen
Coloque el cursor: la segunda imagen
La dimensión obliga a la imagen al ancho completo.

Ancho completo: si
Espacio luego ajuste los valores de espaciado.
Margen superior:


Escritorio: -2VW
Tableta + teléfono: 20VW

Margen inferior:
Desktop + tableta: 4VW
Borde izquierdo:
Escritorio: -5VW
El borde agrega esquinas redondeadas.
Esquinas redondeadas: 10 px todas las esquinas
Box Shadow and Image A Sustil Box Shade.
Box Shadow: segunda opción

Posición vertical: 20 PX
Fuerza de harina: 80 PX

Gire en última instancia, ajuste los valores de la escala de transformación al cursor.
Escala de transformación para caminar: 110%
Duplicar los módulos de texto e imagen en la columna 2 clon ambos módulos y colocar duplicados en el orden correcto.
Ajuste el segundo módulo de texto en la columna 2 Cambie el contenido y el enlace cambie el contenido del módulo de texto duplicado.

Ajuste el segundo modo de imagen en la columna 2 Cambie las imágenes, cambie las imágenes en la configuración estática y de viaje.
Clon Columna 2 Lear la columna 3 y Copiar la columna 2 Regrese a la configuración promedio y borre la tercera columna. Luego copie la segunda columna.

Ajuste el primer módulo de texto en la columna 3 Cambie el contenido y el enlace después de duplicar la segunda columna, ajuste el texto y la conexión en el módulo 1 en la columna 3.

Ajuste el primer módulo de imagen en la columna 3 Cambie las imágenes y las imágenes en el módulo de imagen.

Espacio y luego ajusta el espacio.


Margen superior: escritorio: -2VW

Tableta + teléfono: 11VW

El margen inferior


Desktop + tableta: 5VW
Ajuste el segundo módulo de texto en la columna 3 Cambie el contenido y el enlace cambie el texto y el último módulo de texto en la columna 3.
Ajuste la imagen del módulo 2 en la columna 3 Cambie el cambio y las imágenes estáticas y coloque el último cursor del módulo de imagen.
Finalmente, espaciado, ajuste el espacio del módulo de imagen y ¡termine!
Margen superior:
Escritorio: -3VW

Tableta + teléfono: 7VW

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
Conclusión En esta publicación, le mostré cómo crear un diseño con las opciones de reemplazo de la nueva división. Esta funcionalidad puede conducir a muchas posibilidades creativas. Esperamos que los use en sus propios proyectos. Recuerde usar las mismas dimensiones de imagen para imágenes estáticas y de ratón. Si tiene alguna pregunta o sugerencia, ¡no dude en dejarlas en la sección de comentarios a continuación!