Cómo transferir un nuevo estilo de diseño a otra página utilizando las funciones de eficiencia de Divi

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo transferir un nuevo estilo de diseño a otra página utilizando el paquete de diseño de tienda de muebles de Divi. Con todos los nuevos paquetes de diseño que están saliendo, es posible que desee cambiar el estilo de una página existente utilizando el estilo del nuevo paquete de diseño. En lugar de reemplazar toda la página, también puede transferir el estilo de diseño utilizando las funciones de eficiencia de Divi. Una de las opciones más nuevas que se incluye en Visual Builder es la función de copiar y pegar entre páginas. Esto le permitirá realizar muchos cambios a lo largo del diseño sin tocar la configuración de un elemento de diseño.

Pero, por supuesto, cada diseño es único, lo que significa que también tendrá que aplicar algunos cambios manuales. La buena noticia es que puede extender esa configuración manual a elementos similares en la página con un solo clic. Esperamos que esta publicación te ayude a seguir una determinada estructura al transferir un estilo de diseño.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado.

Acercarse

Las estructuras de página difieren entre sí, por eso es difícil transferir completamente un estilo de diseño con un solo clic. Pero con Divi, puede utilizar las funciones de eficiencia para acelerar el proceso. Combinaremos la función de copiar y pegar entre páginas, la función de extender estilos y la función de buscar y reemplazar para ahorrar tiempo al transferir un estilo de diseño a una página existente, sin tener que cambiar la estructura de la página.

Parte 1: Apertura de dos páginas una al lado de la otra

Comenzaremos abriendo dos páginas una al lado de la otra. La página existente y la nueva página que contiene el estilo de diseño que queremos aplicar. Vamos a tomar la página de inicio del paquete de diseño de la tienda de muebles (el estilo de diseño que queremos aplicar a la página existente) y la página de inicio del paquete de diseño de la empresa de alojamiento (la página que queremos cambiar).

Parte 2: Restablecimiento de la configuración de ciertas secciones

La segunda parte tratará sobre restablecer la configuración de ciertas secciones. La configuración que necesita restablecer varía de un diseño a otro, pero generalmente incluye la configuración del fondo y la configuración del divisor.

Parte 3: Uso de las funciones de estilos de copia, pegado y extensión de páginas cruzadas de Divi para la sección Hero

Luego, podemos comenzar a usar la función de copiar y pegar entre páginas de Divi para comenzar a cambiar las cosas. Lo natural es comenzar con las secciones de héroe. Cambiaremos cada elemento de diseño en la sección de héroe al nuevo estilo de diseño copiando la configuración del nuevo estilo de diseño y pegándola en la página existente. Después de hacer eso, ampliaremos estos estilos a elementos similares en la página.

Parte 4: Realizar cambios manuales (según el diseño) y utilizar funciones de eficiencia

Como se mencionó anteriormente, cada diseño es único. Es por eso que también es necesario realizar cambios manuales en la página existente. Una vez que se realizan los pocos cambios, puede extender el estilo o usar buscar y reemplazar para que se aplique a elementos similares en la página.

Parte 5: Agregar características de diseño

Por último, pero no menos importante, también puede agregar ciertas características de diseño a la página existente.

Parte 1: Apertura de dos páginas una al lado de la otra

Crear una nueva página usando Layout usando la página de inicio del paquete de diseño de la tienda de muebles

Ahora que hemos revisado la parte de enfoque de esta publicación, ¡comencemos a usar Divi! Agregue una nueva página utilizando la página de inicio del paquete de diseño de la tienda de muebles.

Crear nueva página utilizando la página de inicio del paquete de diseño de la empresa de alojamiento

Cree otra página utilizando también la página de inicio del paquete de diseño de la empresa de alojamiento. Reemplazaremos el estilo de diseño de este diseño con el diseño de la página de inicio del paquete de diseño de la tienda de muebles.

Parte 2: Restablecimiento de la configuración de ciertas secciones

Restablecer la configuración específica de la sección de la página de inicio de la empresa de alojamiento

Sección de héroe abierta

Una vez que tenga ambos diseños cerca, continúe abriendo la configuración de la sección de héroe de la página de inicio de la empresa de alojamiento.

Restablecer el fondo de la sección y extenderlo a todas las secciones

Vaya a la configuración de fondo y restablezca las opciones haciendo clic con el botón derecho y haciendo clic en Restablecer fondo. Una vez hecho esto, puede extender estos estilos de fondo a todas las secciones de la página para asegurarse de que ninguna sección de su página contenga elementos de fondo.

Restablecer divisores y extender a todas las secciones

Haga lo mismo con los divisores de sección para asegurarse de que desaparezcan todos los divisores de sección de la página.

Parte 3: Uso de las funciones de estilos de copia, pegado y extensión de páginas cruzadas de Divi para la sección Hero

Elementos de la sección Hero de copiar y pegar entre páginas

Configuración de la sección

¡Es hora de comenzar a usar la opción de copiar y pegar entre páginas! Modificaremos todos los elementos de diseño en la sección de héroes. Comience copiando los estilos de la sección de héroe en la página de inicio de la tienda de muebles. Luego, regrese a la página de inicio de la empresa de alojamiento y pegue los estilos de sección copiados.

Configuración de filas

Haz lo mismo con la fila.

Módulo de texto de título

Copie también los estilos de módulo del título Módulo de texto y haga que se apliquen al título de la página de inicio de la empresa de alojamiento.

Módulo de texto del cuerpo

Abra el módulo de texto de descripción a continuación y copie los estilos de texto. Una vez que lo haga, haga que se apliquen al módulo de texto en la página de la empresa de alojamiento.

Extender estilos

Una vez que haya aplicado los nuevos estilos de texto, continúe y extienda estos estilos a todos los módulos de la página.

Cambiar las orientaciones del texto hacia atrás al centro donde sea necesario

Notará que la orientación del texto a la izquierda se aplicará a todos los elementos de diseño en toda la página. Puede mantenerlo así o volver a cambiar la orientación del texto manualmente.

Configuración de botones

El último módulo de la sección de héroe al que deberá aplicar nuevos estilos de módulo es el Módulo de botones.

Ampliar estilos para la configuración de botones

En lugar de ampliar todos los estilos del módulo de botones, ampliaremos la configuración de los botones específicos.

Extender estilos para espaciado

Junto con la configuración de espaciado.

Extender estilos para Box Shadow

Y la configuración de la sombra del cuadro también.

Copiar y pegar elementos restantes una vez + extender estilo

Divisor

También necesitaremos copiar y pegar los estilos del módulo divisor y hacer que se apliquen a los divisores en la página de inicio de la empresa de alojamiento.

Extender estilos

Nuevamente, amplíe los estilos de este módulo a lo largo de toda la página.

Parte 4: Realizar cambios manuales (según el diseño) y utilizar funciones de eficiencia

Cambios específicos de diseño

Buscar y reemplazar fuente de título

¡Es hora de comenzar a hacer algunos cambios manuales! Lo primero que haremos es hacer coincidir la fuente. Abra un módulo de texto en la página y busque la fuente Rubik que se utiliza en toda la página. Luego, haga clic en Buscar y reemplazar y reemplace la fuente con Montserrat.

Buscar y reemplazar el grosor de la fuente del título

Haz lo mismo con el peso de la fuente. En lugar de usar Medio, seleccione Ligero.

Buscar y reemplazar esquinas redondeadas

También estamos eliminando los bordes de las esquinas redondeadas en toda la página utilizando Buscar y reemplazar y aplicando '0px' a cada una de las esquinas de la página.

Restablecer la configuración de fondo de CTA y extender el estilo en la sección

Continúe buscando los módulos de llamada a la acción en la página y restablezca la configuración de fondo del primer módulo. Luego, amplíe estos estilos a todos los llamados a la acción de la sección.

Buscar y reemplazar el color de fondo de la CTA en la sección

Una vez que lo haga, aparecerá el color de fondo predeterminado. Busque y reemplace este color y cámbielo a '# 1a2545' en toda la sección.

Buscar y reemplazar el color del texto de CTA en la sección

Reemplace también el Color del texto con 'Claro' en toda la sección.

Cambiar la configuración del botón de la tabla de precios

Luego, vaya a las tablas de precios en la página y cambie la configuración del botón:

• Color de fondo del botón: # ef6f49
• Ancho del borde del botón: 8px
• Color del borde del botón: # ef6f49
• Radio del borde del botón: 0px
• Espacio entre letras del botón: 2px (predeterminado), 1px (desplazamiento)
• Fuente del botón: Montserrat
• Peso de fuente: Semi negrita
• Estilo de fuente: mayúsculas
• Alineación de botones: izquierda

Amplíe los estilos para tablas de precios y módulos CTA

Amplíe la configuración del nuevo botón a todas las tablas de precios y módulos de llamada a la acción en toda la página.

Parte 5: Agregar características de diseño

Color de fondo de la sección # 1

En la última parte de este tutorial, agregaremos manualmente algunas características de diseño. Esto incluye, entre otros, la configuración de fondo. Abra la sección marcada en la pantalla de impresión a continuación y cambie el color de fondo.

• Color de fondo: # f7f3ec

Color de fondo de la sección # 2

Haga lo mismo con la sección siguiente.

• Color de fondo: # f7f3ec

Fondo degradado de sección n. ° 1

Luego, busque la sección en la pantalla de impresión a continuación y agregue un fondo degradado.

• Color 1: #ffffff
• Color 2: # 1a2545
• Dirección del gradiente: 90 grados
• Posición inicial: 55%
• Posición final: 55%

Fondo degradado de sección n. ° 2

Utilice otro fondo degradado para la siguiente sección:

• Color 1: rgba (210,218,228,0.38)
• Color 2: #ffffff
• Dirección del gradiente: 90 grados
• Posición inicial: 45%
• Posición final: 45%

Fondo degradado de sección n. ° 3

Por último, pero no menos importante, agregue un fondo degradado lineal a la última sección de la página también.

• Color 1: #ffffff
• Color 2: # f7f3ec
• Posición inicial: 40%
• Posición final: 40%

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.

Pensamientos finales

En esta publicación, le mostramos cómo puede transferir el estilo de diseño de un diseño utilizando las funciones de eficiencia de Divi. Este tutorial aprovecha la nueva función de copiar y pegar entre páginas que forma parte del nuevo Visual Builder. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, en la que intentamos poner algo extra en su caja de herramientas de diseño todas las semanas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar una sección de comentarios a continuación!