Cómo usar el kit Divi Wireframe para crear páginas de destino profesionales

Cómo usar el kit Divi Wireframe para crear páginas de destino profesionales (o cualquier tipo de página)

Para seguirlo en su propio sitio web de Divi, primero deberá usar el botón a continuación para descargar la carpeta comprimida del paquete de diseño: divi-100-from-wireframe-to-landing-page-step-by-step.zip . A diferencia de nuestros paquetes típicos, que generalmente solo tienen archivos json, cuando descomprima este, tendrá algunas carpetas y archivos adicionales.

Además de los tres archivos json All.json , Landing Page (Wireframe) y Landing Page (Final Design), hay dos imágenes de vista previa de cada diseño, así como una carpeta llamada «tutorial-images». En esa carpeta encontrará todas las imágenes que necesita para seguir las instrucciones del video anterior o las instrucciones escritas a continuación.

Descargar el paquete de diseño

Resumen: cómo usamos el kit Divi Wireframe para crear una página de destino en seis pasos (¡y usted también puede hacerlo!)

En el video anterior y en las instrucciones paso a paso a continuación, le mostraremos cómo pasar de la versión «A» a la «B». La descarga anterior incluye todos los archivos necesarios para que pueda seguir y realizar exactamente las mismas ediciones en el diseño de la página de destino de Wireframe que hacemos. Así que póngase el cinturón, síganos y aprenda algo que creemos que será una valiosa habilidad de diseño para cualquiera que use Divi.

Paso 0: importe el archivo «All.json» y cargue el diseño de estructura metálica

Para seguir las instrucciones a continuación y/o el video anterior, primero deberá importar el archivo «All.json» yendo a Biblioteca Divi > Importar y exportar»>Divi > Biblioteca Divi > Importar y exportar . Cuando aparezca el modal de portabilidad, vaya a la pestaña de importación, haga clic en el botón negro de elegir archivo y seleccione el archivo «All.json» de la carpeta que acaba de descargar y descomprimir.

Una vez que haya importado los diseños, querrá crear una nueva página yendo a Páginas > Agregar nuevo. Recomiendo llamar a esta página: Tutorial de la página de destino. Luego haga clic en el botón morado Usar Divi Builder, vaya a Cargar desde la biblioteca > Agregar a la biblioteca y cargue el diseño «Página de destino (estructura alámbrica). Cuando guarde y obtenga una vista previa en la parte frontal, debería verse como la imagen a continuación.

Paso 1: Editar Sección #1

Configuración de la sección:

• Abra la configuración de la sección azul y agregue la imagen «01.jpg» de la carpeta «tutorial-images» como fondo de la sección.

Configuración del módulo de imagen:

• Agregue la imagen «02.png» de la carpeta «tutorial-images» al módulo de imagen en la pestaña Configuración general.

Configuración del módulo de texto:

• En la pestaña Configuración avanzada de diseño, cambie el color del texto de todos los módulos de texto a #ffffff.
• En el tercer módulo de texto (abajo) reemplace la imagen del logotipo de App Store con el archivo de imagen «03.png» de la carpeta «tutorial-images».
• La forma más fácil de hacerlo es simplemente reemplazar el enlace de la imagen «src» en la pestaña de texto del área de contenido. Esto preservará los estilos en línea ya aplicados a la imagen.
  

Si elimina accidentalmente los estilos en línea, puede copiarlos del fragmento a continuación:

Cuando guarde todas sus configuraciones, incluya la página en sí y obtenga una vista previa de los resultados, ahora debería tener una sección superior que se ve así.

Paso 2: Editar Sección #2

Configuración del módulo divisor:

• Tanto en el módulo divisor de escritorio como en el móvil, agregue este código de color en la pestaña Configuración general: rgba (48,48,48,0.3)

Configuración del módulo de texto:

• Dentro de la pestaña Configuración avanzada de cada módulo de texto, cambie el color del texto a #303030.

Configuración del módulo de imagen:

• Dentro del módulo de imagen, cambie la imagen a «04.png» de la carpeta «tutorial-images» y cambie su alineación al centro.

Cuando todos estos ajustes se hayan configurado y guardado, guarde la página nuevamente y obtenga una vista previa en la interfaz. Debe tener un aspecto como este.

Paso 3: Editar Sección #3

Configuración del módulo de imagen:

• Dentro del módulo de imagen, reemplace la imagen con el archivo llamado «05.png» de la carpeta «tutorial-images».

Configuración del módulo divisor:

• Dentro de cada módulo divisor cambia el color a este código: rgba(48,48,48,0.3)

Todas las configuraciones del módulo de texto:

• Dentro de cada módulo de texto en la pestaña Configuración de diseño avanzado, cambie el color del texto a #303030.

Configuración del segundo y tercer módulo de texto:

• Dentro del segundo y tercer módulo de texto (los dos inferiores) reemplace la imagen del ícono de verificación ubicada dentro del área de contenido con el archivo de imagen «06.png» de la carpeta «tutotial-images».
• Asegúrese de usar la misma técnica para reemplazar el enlace src que usamos anteriormente para vender los estilos en línea.
  

Si elimina accidentalmente los estilos en línea, puede obtenerlos del fragmento a continuación.

Cuando haya configurado y guardado todos sus ajustes, guarde la página y obtenga una vista previa en el anverso. La tercera sección ahora debería verse así.

Paso 4: Editar Sección #4

Configuración del módulo de imagen:

• Dentro del módulo de imagen, agregue el archivo de imagen llamado «07.png» de la carpeta «tutorial-images».

Configuración del módulo divisor:

• Dentro de cada módulo divisor agrega este código de color: rgba(48,48,48,0.3)

Configuración del módulo de texto:

• Dentro de cada módulo de texto en la pestaña Configuración de diseño avanzado, cambie el color del texto a #303030.

Cuando todos sus ajustes hayan sido configurados y guardados, guarde la página y obtenga una vista previa del resultado en la parte delantera. Ahora debería verse como la imagen de abajo.

Paso 5: Editar Sección #5

Configuración de la sección:

• En la sección de configuración en la pestaña Configuración general, cambie el color de fondo a: #f7f7f7.

Configuración del módulo divisor:

• Dentro de cada módulo divisor agrega este código de color: rgba(48,48,48,0.3)

Configuración del módulo de texto:

• Dentro del módulo de texto, en la pestaña Configuración avanzada de diseño, cambie el color del texto a #303030.

Configuración del módulo deslizante:

• Dentro de la pestaña Configuración de diseño avanzado del módulo deslizante, cambie los colores del texto a #303030.
• Dentro de la configuración de diapositivas del módulo deslizante, en la pestaña Configuración de diseño avanzado, cambie todos los colores del texto a #303030 y cambie el Color personalizado de las flechas, así como el Color personalizado de Dot Nav a #303030.
• En la sección de contenido de la diapositiva, reemplace la imagen del usuario con el archivo llamado «08.png» de la carpeta «tutorial-images». Reemplace el enlace solo para mantener intacta la configuración en línea.

Si eliminó accidentalmente el otro texto y el código en línea, puede obtenerlo todo del fragmento a continuación.

Cuando haya configurado todos estos ajustes y los haya guardado, guarde la página y obtenga una vista previa del resultado en la interfaz. Esta sección ahora debería verse como la imagen de abajo.

Paso 6: Editar Sección #6

Configuración del módulo divisor:

• Dentro de cada módulo divisor agrega este código de color: rgba(48,48,48,0.3)

Configuración del módulo de texto:

• Dentro del módulo de texto, cambie el color del texto a #303030.

Configuración del módulo de botones:

• Dentro del módulo de botones, cambie el fondo del botón y los colores del borde (así como el fondo del botón flotante y los colores del borde) a #41bb99.

Cuando todos sus ajustes estén configurados y guardados, guarde la página y obtenga una vista previa de la sección en la parte delantera.

El resultado final

En este punto, ahora debería tener un diseño de diseño final convertido de nuestro kit de estructura metálica a algo que pueda usar en un sitio web en vivo. Por supuesto, en este caso todavía estamos usando contenido de ejemplo, pero cuando haces el mismo proceso por ti mismo, estarás usando tu propio contenido original o el contenido que te dio un cliente.

Mañana: aprenda a exportar y compartir sus propios diseños Divi, elementos de biblioteca y configuraciones personalizadas

Como una especie de continuación del tutorial de hoy, mañana Nathan le mostrará nuestras mejores prácticas recomendadas para exportar y compartir sus propios archivos Divi json para diseños, elementos de biblioteca individuales y configuraciones personalizadas. ¡Te veo allí!

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!