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 en curso de Divi, le mostraremos cómo convertir diseños en estructuras alámbricas 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.

estructura metálica

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 destino que creó con el paquete de diseño de catering de comida de Divi.

estructura metálica

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.

estructura metálica

estructura metálica

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.

estructura metálica

estructura metálica

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 forma, no nos dejará influenciar 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.

estructura metálica

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".

estructura metálica

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.

estructura metálica

estructura metálica

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.

estructura metálica

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

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.

estructura metálica

estructura metálica

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 debemos eliminarlos manualmente.

estructura metálica

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.

estructura metálica

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 contengan las dimensiones de imagen necesarias. Para encontrar estas dimensiones, vaya a su Biblioteca de medios.

estructura metálica

Abrir imágenes usadas individualmente

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

estructura metálica

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.

estructura metálica

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.

estructura metálica

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

estructura metálica

Elija color gris

Elija "# e7e8ed" como su color.

estructura metálica

Desbloquear la capa de fondo

Desbloquea también tu capa de fondo.

estructura metálica

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.

estructura metálica

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á.

estructura metálica

Guardar para Web

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

estructura metálica

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.

estructura metálica

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.

estructura metálica

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.

estructura metálica

estructura metálica

Guardar diseño en la 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.

estructura metálica

Cambiar la configuración de diseño para estructura metálica personalizada

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.

estructura metálica

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.

estructura metálica

Cambiar fuente

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

estructura metálica

estructura metálica

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.

estructura metálica

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éroes" para que pueda encontrar fácilmente la sección de héroes que elija y explorar todos los diseños que tiene en la tienda.

estructura metálica

Avance

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

estructura metálica

Pensamientos finales

En esta publicación de blog de casos de uso, le mostramos cómo convertir 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!