Como crear Wireframes en Divi de forma rápida usando Divi Cloud

En este videotutorial te mostraremos como crear Wireframes para un sitio web en vivo con Divi y usando todo el poder de Divi Cloud. Con este sistema, podrás crear la base de diseño para cualquier sitio web, presentando una estructura previa de diseño a tu cliente, y ahorrando decenas de horas en cambios que el cliente quiera hacer a la estructura de último momento ¿Quiere ver como lo hacemos? ¡Vamos a ello!

Índice

Paso 1: Adquiere nuestro Divi Wireframe UI Kit

El primer paso que necesitamos hacer es tener ya preparado una serie de layouts con los elementos que van a conformar el Wireframe que queramos diseñar como base en nuestro sitio web. Para ello lo puedes hacer directamente con los módulos de Divi, tal como mostramos en este tutorial prémium donde hacemos los Wireframes de un sitio web desde cero.

Pero como sabemos que tu tiempo es oro, y quieres lograr tener una solución de Wireframes completos en pocos minutos, hemos preparado para ti este excelente pack de Wireframes y premade layouts para Divi, que podrás adquirir ahora mismo en oferta, así como ver la demo en vivo.

El proceso de compra en sencillo, y recuerda que si eres prémium, tendrás en la intranet un cupón de descuento para que lo puedas comprar con un precio aún más bajo.

Una vez que hayas adquirido el Divi UI KIT Wireframe template descomprímelo, y cargalo en el sitio web.

Paso 2: Importa el Divi Wireframe UI Kit a tu librería de Divi

El proceso de carga es muy sencillo. Una vez que tengas el archivo .JSON del zip que descomprimiste, importalo en la biblioteca siguiendo estos pasos

El archivo es único y contiene todos los diseños a importar, los cuales se dividen en:

✅ 40 Secciones con diferentes tipos de diseño según páginas a usar

✅ 10 layouts completos de las diferentes páginas a construir en un sitio web

Todos los elementos de diseño se importan por separado y con sus respectivas etiquetas.

Paso 3: Guarda cada elemento en Divi Cloud

Para poder usar todos estos elementos en cualquier sitio web vamos a enseñarte a usar todo el poder de Divi Cloud. Como sabes, Divi Cloud es un servicio que lanzó Elegant Themes hace algunas semanas, que básicamente te permite cargar los diseños que puedas tener en cualquier librería completa de Divi de forma local, pero en la nube, de forma que puedas importarla en muy pocos clics a cualquier sitio web. Para saber más sobre como funciona Divi Cloud mira nuestro tutorial donde explicamos todo a detalle.

Para ello debemos acceder a nuestra cuenta de elegant themes, recuerda que podemos usar Divi Cloud con hasta 50 diseños completamente gratis.

Después de acceder a la cuenta, iremos a la librería local y comenzaremos a guarda cada elemento en la nube de Divi Cloud. Lo sabemos, es un proceso que a priori parece ser lento, pero que una vez que tomemos el ritmo, veremos que es relativamente rápido.

Posterior a tener todo guardado, podremos importar los diseños en tantas páginas o sitios como queramos.

Paso 4: Crea páginas e importa los diseños directamente desde tu Divi Cloud

Con todos los diseños cargados en el Divi Cloud, podrás importar los layouts completos o las secciones a cualquier página dentro de cualquier sitio web hecho con Divi.

Si quieres importar un layout completo, solo debes crear la página, entrar al constructor, y en el símbolo de «+» dar clic para seleccionar el layout que quieras:

Al cargar la pantalla, podrás ver todos los diseños de layout completos y además podrás seleccionarlos por categoría, escoge el diseño que quieras y da clic en «Elegir diseño»

Una vez que importes el layout completo, repite los mismos pasos para cada una de las páginas que quieras, y de ese modo, podrás crear Wireframes en Divi en un sitio web en muy pocos minutos, utilizando nuestro kit de diseño de Wireframes y Divi Cloud.

Para usar las secciones, son los mismos pasos, con la diferencia de que en vez de seleccionar el símbolo de «+» de las opciones de la página, lo harás el símbolo de «+» de agregar una sección

Y allí seleccionarás «añadir desde la biblioteca».

Al cargar la biblioteca encontrarás todos los diseños de Divi Cloud que tengas cargados en la nube, y podrás importarlos en tan solo 2 clics.

Conclusiones

Como ves, hacer Wireframes en Divi para un sitio web es bastante sencillo, y además, podrás ahorrar cientos de horas al momento de crear sitios web para presentar al cliente. Usando Divi UI Wireframes Kit y Divi Cloud, tendrás una librería de 50 elementos de diseño ya preparados para que maquetes cualquier tipo de sitio web en minutos.

¿Te ha gustado esta solución? Deja tus comentarios acá abajo.