Bienvenido a nuestra serie de 2 partes sobre cómo recrear nuestros filtros de color, efectos y ejemplos de modo de fusión con Divi . Puede consultar nuestra página de demostración de filtros para ver estos ejemplos y tener una idea de lo que crearemos juntos.
Con el reciente lanzamiento de los nuevos filtros, efectos y modos de fusión de Divi, tiene un arsenal completo de herramientas de diseño dentro del generador visual. Ahora no tienes que ir a Photoshop cada vez que quieras hacer este tipo de ajustes porque estas nuevas opciones se pueden aplicar a cualquier elemento dentro de Divi. Y me encanta cómo puedes hacer ajustes visuales sobre la marcha directamente en tu navegador sin tener que interrumpir el proceso de diseño.
Hoy les mostraré cómo recrear las primeras 3 secciones de la demostración y resaltaré los diferentes filtros, efectos y modos de fusión utilizados en las secciones. Esté atento a los aspectos destacados a lo largo de la publicación que le darán más información sobre cómo funcionan estas nuevas opciones.
Empecemos.
Aquí están las dos secciones que crearemos hoy.
Elementos de diseño necesarios
Dado que recrearé ejemplos de nuestra demostración, usaré las mismas imágenes y configuraciones de diseño. Los únicos elementos de diseño que necesitará son las imágenes que usaré en este tutorial que proporcionaré a medida que avancemos. Para usar la imagen que está incrustada en esta publicación, simplemente arrástrela fuera de la página a su escritorio o carpeta de su elección.
Aparte de eso, todo lo que necesita es una instalación actualizada de Divi y está listo para comenzar.
Cómo recrear los filtros de color, efectos y ejemplos de modos de fusión con Divi (Parte 1)
Suscríbete a nuestro canal de Youtube
Recreando la Sección #1 con Divi
Puntos destacados de la sección
Modo de fusión utilizado: filtros de luminosidad
y efectos utilizados: saturación, opacidad y desenfoque
Esta sección destaca el uso del modo Luminosity Blend y el efecto Blur. El resultado es un grupo de imágenes que parecen flotar y ciertas profundidades con colores a juego combinados para unir realmente el diseño. Aquí se explica cómo construirlo.
Crear una sección regular
Comenzaremos desde un lienzo en blanco utilizando Visual Builder. Ya debería tener una sección regular con una fila de una columna. Comience editando la sección y actualizando lo siguiente:
En la pestaña Contenido…
Colores de degradado de fondo: #1300bf, #ff00a1
Dirección de degradado: 120 grados
En la pestaña Diseño…
Relleno personalizado: 130 px arriba, 130 px abajo
Guardar ajustes
Cambiar la estructura de columna de la fila
En este momento tenemos una estructura de una columna para la fila. Cambie esto a una estructura de columna de un cuarto, medio, un cuarto.
Agregue un módulo de texto para la sección de título
Agreguemos un título para nuestra sección. Inserte un módulo de texto en la columna central de la fila y actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Contenido:
|
01
02
|
<h2>New Features</h2>Suspendisse pulvinar lacus nec sollicitudin finibus.Pellentesque sed euismod mauris. Nec sollicitudin finibus, ligula quam dui maximus ornare ex nulla ut lacus, sit amet cursus leo. |
En la pestaña Diseño…
Color del texto:
Texto claro Fuente:
Texto Poppins Tamaño del texto: 16 px
Altura de la línea del texto: 2 em
Orientación del texto: Centrado
Seleccione la pestaña H2
Fuente del título 2: Poppins
Título 2 Tamaño del texto: 56 px
Altura de la línea del título 2: 1,3 em
Margen personalizado : 10px Estilo de animación inferior
: Diapositiva
Intensidad de animación: 20%
Opacidad inicial de animación: 100%
Agregue una fila de tres columnas para sus imágenes
Haga clic para agregar una fila de tres columnas (1/3 1/3 1/3) directamente debajo de la fila anterior. Esto será donde mostraremos nuestras tres imágenes. En la configuración de la fila, vaya a la pestaña de diseño y actualice lo siguiente:
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 2
columnas 1 relleno personalizado: 3 % superior, 3 % derecha, 3 % inferior, 3 %
columna izquierda 3 relleno personalizado: 5 % superior, 5 % derecha, 5 % inferior, 5 % izquierda
Modo de fusión: luminosidad
Agregar imagen a la primera columna
En la primera columna, agregue un módulo de imagen y cargue/inserte su imagen en la configuración de la pestaña de contenido. Aquí está la imagen que estoy usando (arrástrela a su escritorio si desea usarla):
Debido al efecto de fusión de Luminosidad que se configuró para la fila, su imagen adoptará automáticamente un nuevo color «mezclado» al agregarla a la columna de la fila. Esto se debe a que la imagen está incluida en la capa o fila combinada.
Vaya a la pestaña Diseño y actualice lo siguiente:
Margen personalizado: 60 px inferior, -6 px a la izquierda (para tabletas y teléfonos inteligentes, elimine el margen izquierdo de -6 px)
Sombra de cuadro: primera selección
Posición vertical de sombra de cuadro: 16 px
Intensidad de desenfoque de sombra de cuadro: 100 px
Saturación: 64%
Opacidad: 49%
Desenfoque: 4px
Estilo de animación: Diapositiva
Dirección de animación: Arriba
Duración de la animación: 1250 ms
Intensidad de la animación: 9 %
Opacidad inicial de la animación: 100 %
Copie el módulo de la imagen n.º 1 para crear una segunda imagen en la segunda columna
No hay necesidad de trabajar más duro de lo que tenemos que hacerlo. Entonces, copiemos y peguemos el módulo de imagen que acaba de crear en la segunda columna y restablezcamos lo siguiente a la configuración predeterminada haciendo clic en el icono de restaurar predeterminado a la derecha de la opción.
Saturación: 64% (restaurar a los valores predeterminados)
Opacidad: 49% (restaurar a los valores predeterminados)
Desenfoque: 4px (restaurar a los valores predeterminados)
Luego actualice la siguiente configuración de animación:
Duración de la animación: 1300ms
Intensidad de la animación: 19%
Guardar cambios
Copie el módulo de la imagen n.º 1 para crear una tercera imagen en la tercera columna
Copie el módulo de imagen en la primera columna nuevamente y péguelo en la tercera columna y actualice la configuración del módulo de imagen en la pestaña de diseño de la siguiente manera:
Saturación: 48%
Opacidad: 24%
Desenfoque: 10px
Duración de la animación: 1350ms
Intensidad de la animación: 7%
Guardar configuración
Para agregar el botón correspondiente debajo de las tres imágenes, simplemente cree una fila de una columna, agregue un módulo de botón y actualice lo siguiente:
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 14 px
Color del texto del botón: #4444ff
Espaciado entre letras del botón: 1 px
Fuente del botón: Poppins Grosor de la fuente: Botón
semi negrita
Espaciado entre letras al pasar el mouse sobre el botón: 1 px
Relleno personalizado: 12 px arriba, 24 px a la derecha, 12 px abajo, 24px Izquierda
Echa un vistazo a los nuevos efectos de filtro:
Recreando la Sección #2
La siguiente sección muestra el modo de mezcla Multiplicar para combinar dos imágenes de fondo para producir un hermoso diseño y un efecto de paralaje. Aquí se explica cómo construirlo.
Crear una sección regular
Primero agregue una nueva sección regular con una fila de una columna. Antes de agregar nuestro primer módulo, acceda a la configuración de la sección y, en la pestaña de contenido, agregue una imagen de fondo. Aquí está el que estoy usando …
Además, seleccione usar el efecto de paralaje con el método True Parallax . Esto creará ese movimiento atractivo de las montañas al desplazarse hacia abajo en la página.
Luego vaya a la pestaña Diseño y actualice lo siguiente:
Relleno personalizado: 0px arriba, 0px derecha, 0px abajo, 0px izquierda
Editar la configuración de la fila
El objetivo aquí es que su fila abarque todo el ancho y alto de su sección para que la imagen de fondo de la fila pueda combinarse con la imagen de fondo de su sección. Para hacer esto, edite la configuración de su fila y agregue una nueva imagen de fondo a su fila. Aquí está el que estoy usando …
Seleccione para utilizar el método de paralaje CSS .
Ahora necesitamos expandir la fila al ancho completo de la sección y agregar nuestro modo de fusión. Podemos hacer esto en la pestaña Diseño de la siguiente manera:
Usar ancho personalizado: SÍ
Unidad: % Ancho
personalizado: 100 %
Relleno personalizado: 20 % superior, 0 px a la derecha, 20 % inferior, 0 px a la izquierda
Modo de fusión: Multiplicar
Agregue el módulo de texto para el título
Ahora que su fila está configurada, continúe y agregue un módulo de texto a su columna y actualice lo siguiente:
En la configuración de Contenido…
Contenido:
|
01
02
|
<h2>Travel</h2>EXPLORE THE WORLD |
En la configuración de Diseño…
Color del texto:
Texto claro Fuente: Lato
Peso de la fuente del texto: Texto pesado Espaciado entre
letras
: 9px Orientación
del texto
: Centro
Seleccione para editar la pestaña H2
. : 12vw
Encabezado 2 Espaciado entre letras: -0,02em
Encabezado 2 Altura de línea: 1,4em
Mira el resultado.
Recreando la Sección #3
La siguiente sección utiliza algunos html/css personalizados, pero el resultado final es definitivamente una chispa de inspiración. Incluso sin la animación, las letras de diferentes colores del texto sobre el fondo degradado funcionan muy bien juntas para mostrar una opción de diseño única para pantallas de texto grandes.
Agregar una sección regular con una fila de una columna
Primero, agregue una nueva sección regular con una fila de una columna. Ahora regrese y edite la configuración de la sección de la siguiente manera:
En la pestaña Contenido…
Colores de fondo de degradado: #0ac9ff, #4600bf
Dirección de degradado: 164 grados
En la pestaña Diseño…
Relleno personalizado: 0px arriba, 0px a la derecha, 0px abajo, 0px a la izquierda
Actualizar configuración de fila
Ahora necesitamos expandir un poco la configuración de nuestras filas. Actualice la configuración de la fila con lo siguiente en la pestaña de diseño.
Usar ancho personalizado: SÍ
Unidad: %
Ancho personalizado: 100%
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 3
Relleno personalizado: 200 px Arriba, 60 px Derecha, 200 px Abajo, 60 px
Modo de fusión: Superposición
Agregar el primer módulo de texto
Ahora vamos a agregar algo de texto. Agregue un módulo de texto con lo siguiente:
En la pestaña Contenido…
Contenido: «Tema Divi»
En la pestaña Diseño…
Color del texto:
Fuente de texto claro
: Peso de fuente de texto Nunito:
Estilo de fuente de texto ultra negrita: Texto en mayúsculas (TT)
Tamaño de texto: 22 px
Espaciado de texto en letras: 9 px
Orientación del texto: Centro
Agregue el segundo módulo de texto para el texto grande
Ahora, este próximo módulo de texto es lo más destacado de la sección. Agregue un módulo de texto y actualice lo siguiente:
Contenido:
|
01
|
<h2>C<span style="color:rgba(247,247,247,0.4);">o</span></span style="color:rgba(219, 8, 215, 0.4);">n</span><span style="color:rgba(185, 255, 10, 0.47);">d</span><span style="color:rgba(1, 55, 91, 0.47);">e</span><span style="color:rgba(0, 192, 198, 0.77);">n</span><span style="color:rgba(8, 17, 204, 0.52);">s</span>e<span style="color:rbga(0, 224, 201, 0.69);">d</span></h2> |
En la pestaña Diseño…
Haga clic en la pestaña H2…
Encabezado 2 Fuente: Nunito
Encabezado 2 Grosor de la fuente: En negrita
Encabezado 2 Alineación del texto: Centro
Encabezado 2 Tamaño del texto: 16vw
Encabezado 2 Color del texto: rgba(0,0,0,0.36)
Encabezado 2 Dejar empacar: -0.2em
En la pestaña Avanzado…
Clase CSS: espaciado entre letras
Nota : esta clase CSS se usará para agregar CSS personalizado para agregar una animación desplegable.
Pero antes de agregar nuestro CSS personalizado, agreguemos el módulo Botón con la siguiente configuración:
En la pestaña Contenido…
Texto del botón: Unirse ahora
En la pestaña Diseño…
Alineación del botón: Centro
Color del texto: Claro
Usar estilos personalizados para el botón: SÍ
Espaciado entre letras del botón: 3px
Fuente del botón: Nunito
Peso de la fuente: Negrita
Estilo de fuente: Mayúsculas (TT)
Espaciado entre letras del botón flotante: 3px
Relleno personalizado: 10px 30px 10 píxeles 30 píxeles
Guardar ajustes
Agregue CSS personalizado al modal de configuración de página
Ahora agreguemos nuestro CSS personalizado para animar nuestras letras. Abra para expandir el menú de configuración en la parte inferior y haga clic para abrir la configuración de la página. Desde el Modo de configuración de la página, haga clic en la pestaña Avanzado y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
|
.letter-spacing .et_pb_text_inner h2 {white-space: nowrap;-webkit-animation: et_pb_fade_2 4s infinite ease !important; /* Safari 4+ */ -moz-animation: et_pb_fade_2 4s infinite ease !important; /* Fx 5+ */ -o-animation: et_pb_fade_2 4s infinite ease !important; /* Opera 12+ */ animation: et_pb_fade_2 4s infinite ease !important; /* IE 10+, Fx 29+ */}@-webkit-keyframes et_pb_fade_2 { 0% { opacity: 0; letter-spacing: 0em; } 50% { opacity: 1; letter-spacing: -0.25em; } 100% { opacity: 0; letter-spacing: 0em; }}@-moz-keyframes et_pb_fade_2 { 0% { opacity: 0; letter-spacing: 0em; } 50% { opacity: 1; letter-spacing: -0.25em; } 100% { opacity: 0; letter-spacing: 0em; }}@keyframes et_pb_fade_2 { 0% { opacity: 0; letter-spacing: 0em; } 50% { opacity: 1; letter-spacing: -0.25em; } 100% { opacity: 0; letter-spacing: 0em; }} |
NOTA: El uso de CSS personalizado en la configuración de la página es una forma conveniente de agregar CSS externo a una página específica sin usar un tema secundario . Dado que no necesitamos este CSS en ninguna otra página, esto tiene más sentido.
¿Quiere saber más?
Consulte estos enlaces para obtener referencias útiles de Photoshop que ayudan a explicar la diferencia entre filtros, efectos y modos de fusión:
http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
https://helpx.adobe.com/premiere-pro/using/blending-modes.html
Subiendo
En la siguiente parte de este tutorial, le mostraré cómo recrear las secciones 4 y 5 de los ejemplos de demostración, así como también hablaré sobre los filtros y los modos de fusión utilizados en todo momento. ¡Espero verte allí!
Por favor, siéntase libre de agregar sus comentarios a continuación.
Hasta la proxima vez…