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 diseños en estructuras metálicas 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 por adelantado.
¡Hagámoslo!
Antes de sumergirnos en él, echemos un vistazo al resultado final que crearemos.
Convierta el diseño en una estructura alámbrica
Abra la página de inicio de catering de alimentos con Visual Builder
Continúe y abra la página de destino que ha creado con el paquete de diseño de catering de alimentos de Divi.
Eliminar sección e imágenes de fondo de encabezado de ancho completo, colores de fondo y fondos degradados
El primer paso para crear una estructura alámbrica es eliminar todas las imágenes de fondo, los fondos degradados y los colores de fondo de las secciones de su página y el Módulo de encabezado de ancho completo en la sección principal.
Dale a las secciones alternas un color de fondo gris en su lugar
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 usando el filtro de estilos modificado
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 construir 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’.
Copie estilos de botones y aplíquelos 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 la sombra del cuadro)
Quitar 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.
Configuración de la sombra del cuadro del módulo del botón Copiar
Copie los Estilos de sombra de cuadro de este Módulo de botones y agréguelos también a los Módulos de botones restantes.
Eliminar Box Shadow manualmente en la sección Héroe y contacto
Los únicos dos botones que necesitan la eliminación manual de Box Shadow son el que se incluye en el módulo de encabezado de ancho completo y el módulo de contacto. Estos botones son parte de un módulo con varios elementos de diseño, por eso debemos eliminarlos manualmente.
Dar a la sección resaltada el mismo color de fondo que las llamadas a la acción
Luego, desplázate hacia abajo hasta que encuentres la sección ‘resaltada’. Aquí, use el color de fondo de la sección ‘#2b2b2b’. Se utilizó el mismo color para los CTA.
Determinar las dimensiones de la imagen
Ir a la biblioteca de medios
Para eliminar por completo el tema de diseño de nuestro diseño, vamos a reemplazar 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 multimedia.
Abrir imágenes usadas individualmente
Abre cada una de las imágenes que se incluyen en tu página por separado.
Escriba 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. Realice un seguimiento de todas las dimensiones que necesita en su página escribiéndolas en algún lugar antes de continuar con el 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×1029
- 400×400
- 48×48
Elija color gris
Elige ‘#e7e8ed’ como tu color.
Desbloquear capa de fondo
Desbloquee su capa de fondo también.
Seleccione la herramienta Cubo de pintura y agregue color a la capa
Luego, use la herramienta Cubo 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 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. Cree una nueva carpeta en algún lugar de su computadora.
Diseño de captura de pantalla y guardar localmente
Luego, use su complemento/extensión de captura de pantalla de su elección para capturar su página. En las imágenes a continuación, hemos utilizado 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 de diseño para crear nuevos wireframes. Puedes jugar con los separadores de secciones, por ejemplo, para crear diseños únicos.
Juega con la tipografía
Habilitar Buscar y reemplazar en la fuente del encabezado
O también puedes jugar con la tipografía. Abra el Módulo de encabezado de ancho completo en su sección principal 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 usando 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.
Agregue una nueva categoría y asigne 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 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 caso de uso, le mostramos cómo convertir diseños Divi en estructuras metálicas reutilizables. Convertir diseños en wireframes lo ayuda a mantener la vista general sobre 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 del sitio web. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios!