Cómo transferir un nuevo estilo de diseño a otra página usando 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 haya querido 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 Divi y sus funciones de eficiencia. 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 en todo el 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. Con suerte, esta publicación lo ayudará 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 las páginas difieren entre sí, por eso es difícil transferir completamente un estilo de diseño con un solo clic. Pero con Divi, puede usar 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: Abrir 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 destino 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 destino del paquete de diseño de la empresa de hospedaje (la página que queremos cambiar).

Parte 2: restablecer ciertas configuraciones de sección

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

Parte 3: Uso de las funciones de estilos de extensión y copiar y pegar entre páginas 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 principal al nuevo estilo de diseño copiando las configuraciones del nuevo estilo de diseño y pegándolas en la página existente. Después de hacer eso, extenderemos estos estilos a elementos similares en la página.

Parte 4: Realice cambios manuales (según el diseño) y utilice 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 realizados 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: Abrir dos páginas una al lado de la otra

Crear nueva página usando el diseño usando la página de destino del paquete de diseño de la tienda de muebles

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

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

Cree otra página utilizando también la página de destino del paquete de diseño de la empresa de hospedaje. Vamos a reemplazar el estilo de diseño de este diseño con el diseño de la página de destino del paquete de diseño de la tienda de muebles.

Parte 2: restablecer ciertas configuraciones de sección

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

Abrir sección de héroe

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

Restablecer fondo de sección y extender a todas las secciones

Vaya a la configuración de fondo y restablezca las opciones haciendo clic 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 todos los divisores de sección de la página hayan desaparecido.

Parte 3: Uso de las funciones de estilos de extensión y copiar y pegar entre páginas de Divi para la sección Hero

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

Ajustes de sección

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

Configuración de fila

Haz lo mismo para la fila.

Módulo de texto de título

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

Módulo de cuerpo de texto

Abra la descripción Módulo de texto 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 amplíe estos estilos a todos los módulos de la página.

Cambie las orientaciones del texto posterior al centro donde sea necesario

Notará que la orientación del texto hacia 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 en la sección principal al que deberá aplicar nuevos estilos de módulos es el Módulo de botones.

Ampliar estilos para la configuración de botones

En lugar de extender los estilos completos del módulo de botones, extenderemos la configuración específica de los botones.

Extender estilos para espaciado

Junto con la configuración de espaciado.

Extender estilos para Box Shadow

Y la configuración de la sombra de la caja también.

Copiar y pegar los elementos restantes una vez + estilo extendido

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, extienda los estilos de este módulo a lo largo de toda la página.

Parte 4: Realice cambios manuales (según el diseño) y utilice 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 será hacer coincidir la fuente. Abra un módulo de texto en la página y busque la fuente Rubik que se usa en toda la página. Luego, haga clic en Buscar y reemplazar y reemplace la fuente con Montserrat.

Buscar y reemplazar el peso 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 usando Buscar y reemplazar y aplicando ‘0px’ a cada una de las esquinas en toda 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, extienda estos estilos a todas las llamadas a la acción en 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 la CTA en la sección

Reemplace el Color del texto con ‘Claro’ en toda la sección tambié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
  • Espaciado entre letras de botones: 2 px (predeterminado), 1 px (desplazar)
  • Fuente del botón: Montserrat
  • Peso de fuente: semi negrita
  • Estilo de fuente: Mayúsculas
  • Alineación de botones: Izquierda

Ampliar estilos para tablas de precios y módulos CTA

Extienda la nueva configuración del 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 para la sección a continuación.

  • 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

Use otro fondo degradado para la sección a continuació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 característica 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 tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar una sección de comentarios a continuación!