Cómo convertir diseños Divi en wireframes reutilizables

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo convertir los diseños en wireframes reutilizables utilizando el paquete de diseño de catering de alimentos de Divi. Los wireframes son excelentes para el proceso inicial de creación de un sitio web. Le ayudan a decidir sobre la estructura general y el estilo de diseño de un sitio web. También pueden ayudar a obtener la opinión de un cliente sobre un estilo de diseño sin tener que adaptar todo de antemano.

¡Hagámoslo!

Avance

Antes de sumergirnos en él, echemos un vistazo al resultado final que crearemos.

Convierta el diseño en estructura alámbrica

Abrir página de inicio de catering con Visual Builder

Continúe y abra la página de inicio que ha creado con el paquete de diseño de catering de alimentos de Divi.

Eliminar imágenes de fondo de encabezado de ancho completo y sección, colores de fondo y fondos degradados

El primer paso para crear un wireframe es eliminar todas las imágenes de fondo, fondos degradados y colores de fondo de las secciones de su página y el módulo de encabezado de ancho completo en la sección de héroe.

En su lugar, dé a las secciones alternas un color de fondo gris

Para ayudar a determinar las diferentes secciones en el diseño de su página, continúe y asigne a cada una de las secciones alternas un color de fondo '# f9f9fb'. Más adelante, cuando use una estructura alámbrica para crear una página, podrá usar la función Buscar y reemplazar para agregar la paleta de colores a su página sin problemas.

Eliminar todo el color en los elementos de diseño mediante el filtro de estilos modificados

Habilitar el filtro de estilos modificados en el módulo de botones

También vamos a deshacernos de la paleta de colores que se está utilizando. De esa manera, no seremos influenciados por él al crear una página. Abra uno de los módulos de botones en su página y habilite el filtro de estilos modificados para ver todas las configuraciones actuales.

Dar color de borde y fondo oscuro al módulo de botones

Cambie tanto el Color de fondo del botón como el Color del borde del botón a '# 2b2b2b'.

Copiar estilos de botones y aplicarlos a otros botones

Continúe copiando los estilos de botón haciendo clic con el botón derecho en la configuración del botón y haciendo clic en 'Copiar estilos de botón'. Luego, agregue los estilos de botones a cada uno de los módulos de botones restantes en la página.

Eliminar configuraciones de diseño adicionales (como Box Shadow)

Eliminar la sombra del cuadro de botones

También eliminaremos elementos adicionales, como Box Shadow. Abra el mismo módulo de botones en el que estaba trabajando y elimine la sombra del cuadro por completo.

Copiar configuración de sombra de cuadro de módulo de botón

Copie los estilos de sombra de cuadro de este módulo de botones y agréguelo también a los módulos de botones restantes.

Eliminar Box Shadow manualmente en la sección Hero & Contact

Los únicos dos botones que necesitan la extracción manual de Box Shadow son el incluido en el módulo de encabezado de ancho completo y el módulo de contacto. Estos botones forman parte de un módulo con varios elementos de diseño, por eso necesitamos eliminarlos manualmente.

Dar a la sección resaltada el mismo color de fondo que las llamadas a la acción

Luego, desplácese hacia abajo hasta que encuentre la sección 'resaltada'. Aquí, use el color de fondo de la sección '# 2b2b2b'. Se utilizó el mismo color para las llamadas a la acción.

Determinar las dimensiones de la imagen

Ir a la biblioteca de medios

Para eliminar el tema de diseño de nuestro diseño por completo, reemplazaremos todos los módulos de imagen con marcadores de posición que contienen las dimensiones de imagen necesarias. Para encontrar estas dimensiones, vaya a su Biblioteca de medios.

Abrir imágenes usadas individualmente

Abra cada una de las imágenes que se incluyen en su página por separado.

Anote las diferentes dimensiones de las imágenes en la página

Una vez que lo haga, podrá ver las dimensiones de esa imagen en particular. Lleve un registro de todas las dimensiones que necesita en su página escribiéndolas en algún lugar antes de pasar al siguiente paso.

Crear marcadores de posición con dimensiones

Abrir Photoshop

¡Es hora de crear los marcadores de posición! Abra Photoshop o cualquier otro software de edición de imágenes.

Crear nuevos proyectos para dimensiones

Cree un nuevo proyecto para cada conjunto de dimensiones que tenga en su página. En nuestro caso, necesitaremos un proyecto separado para cada una de las siguientes dimensiones:

• 800 x 1029
• 400 x 400
• 48 x 48

Elija color gris

Elija '# e7e8ed' como su color.

Desbloquear la capa de fondo

Desbloquea también tu capa de fondo.

Seleccione la herramienta Bote de pintura y agregue color a la capa

Luego, use la herramienta Bote de pintura para colorear su lienzo de gris.

Agregar texto con dimensiones

Para ayudarlo a realizar un seguimiento de las dimensiones de la imagen, también puede agregar las dimensiones en el medio de su marcador de posición. De esa manera, sabrá qué dimensiones de imagen necesitará para su página una vez que esté editando las imágenes con las que las reemplazará.

Guardar para Web

Una vez que haya terminado, guarde su marcador de posición de imagen para la web.

Repita para cada una de las dimensiones de la imagen en la página

Repita estos pasos para cada uno de los conjuntos de dimensiones de su página. Para esta página, necesitará tres conjuntos diferentes en total:

• 800 x 1029 (sección sobre nosotros
• 400 x 400 (sección de galería)
• 48 x 48 (iconos)

Reemplazar imágenes con marcadores de posición

Una vez que haya exportado todos sus marcadores de posición de imagen, continúe y reemplace las imágenes.

Hacer que la estructura alámbrica sea fácilmente reutilizable

Crear un mapa de estructura alámbrica en la computadora

Una vez que haya terminado de crear una estructura alámbrica, se recomienda que guarde su apariencia en algún lugar. Crea una nueva carpeta en algún lugar de tu computadora.

Diseño de captura de pantalla y guardado localmente

Luego, use el complemento / extensión de captura de pantalla de su elección para capturar su página. En las imágenes a continuación, usamos el complemento FireShot para Mozilla Firefox. Asegúrese de que cuando guarde su captura de pantalla, le dé un nombre adecuado.

Guardar diseño en biblioteca con el mismo nombre

Use el mismo nombre que usó para su captura de pantalla para guardar el diseño de estructura alámbrica en su Biblioteca Divi. Esto le permite echar un vistazo al wireframe en su computadora antes de subirlo a una de sus páginas.

Cambiar la configuración de diseño para Wireframed personalizado

Agregar divisores de sección

No está limitado a crear una estructura alámbrica por página. Puede modificar fácilmente la configuración del diseño para crear nuevas estructuras alámbricas. Puede jugar con los separadores de secciones, por ejemplo, para crear diseños únicos.

Juega con la tipografía

Habilitar Buscar y reemplazar en fuente de encabezado

O también puedes jugar con la tipografía. Abra el módulo de encabezado de ancho completo en la sección de su héroe y haga clic con el botón derecho en la fuente del título. Continúe habilitando la función Buscar y reemplazar.

Cambiar fuente

¡Cambie la fuente que se está utilizando en su página a otra y tendrá una nueva estructura alámbrica!

Guardar elementos de diseño separados mediante categorías

Haga clic en el icono 'Agregar a la biblioteca'

Otra cosa que puede hacer es guardar elementos de diseño particulares en su página por separado. Digamos, por ejemplo, que desea crear una colección de secciones de héroes, puede agregar fácilmente su sección de héroes a su Biblioteca Divi.

Agregar nueva categoría y dar un nombre al elemento de diseño

Para tener una estructura más organizada, continúe agregando una nueva categoría de secciones llamada 'Secciones de héroe' para que pueda encontrar fácilmente la sección de héroe de su elección y explorar todos los diseños que tiene en la tienda.

Avance

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

Pensamientos finales

En esta publicación de blog de casos de uso, le mostramos cómo convertir los diseños de Divi en wireframes reutilizables. Convertir diseños en wireframes le ayuda a mantener la visión general de cómo desea que se vea la estructura de un sitio web. También son excelentes para informar sobre el estilo de diseño a un cliente en la primera etapa del proceso de creación de un sitio web. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios!