Cómo usar la generación completa de sitios con Divi AI

Cómo usar la generación completa de sitios con Divi AI

Aprende a crear un nuevo sitio web usando Divi Quick Sites y Divi AI.


Divi Quick Sites puede generar un nuevo sitio web usando Divi AI o sitios prediseñados Divi Starter.

Quick Sites configurará todo tu sitio, incluyendo páginas personalizadas, elementos del menú, plantillas del Theme Builder y más.

Este artículo usará la generación completa de sitios con Divi Quick Site AI para crear un nuevo sitio Divi desde cero.

Nota: Antes de comenzar, asegúrate de tener Divi instalado y que sea la versión más reciente.

Generación completa de sitios con Divi AI

1. Ve al Escritorio de WordPress → Divi → Escritorio

Divi Quick Sites Dashboard

2. Haz clic en el botón Generar un nuevo sitio

Divi Quick Sites - Generate A New Site

3. En la sección Genera tu sitio con IA, haz clic en el botón Generar mi sitio web

Divi Quick Sites - Generate Your Site With AI

4. En el formulario Cuéntanos sobre tu sitio web, completa todos los detalles sobre tu sitio:

Divi Quick Sites - AI Prompts window

  • Nombre del sitio

  • Lema del sitio

  • Cuéntale a Divi AI sobre tu sitio web: Aquí puedes proporcionar tantos detalles como sea posible sobre tu negocio. Divi AI usará esta información para construir todo el sitio web. El nombre y lema del sitio también son importantes para asegurar que Divi AI sea lo más preciso posible.

  • Comercio electrónico: Activa esta opción si también quieres incluir una tienda y todas las páginas relacionadas, como carrito y pago.

  • Logo: Elige el logo de tu negocio

  • Imágenes: Escoge el tipo de imágenes que quieres que Divi AI use al generar todo el sitio:

    • Usar imágenes de archivo (más rápido): Esta opción usa imágenes de Unsplash.com. Aunque acelera el proceso, la precisión de las imágenes puede no ser siempre exacta.

    • Generar imágenes con IA (más lento): Esto usará la generación de imágenes de Divi AI. El proceso puede ser más lento, pero es más preciso.

    • Usar imágenes de marcador de posición: Las imágenes usadas serán marcadores de posición. Puedes cambiarlas después. Esta opción es ideal si ya tienes imágenes diferentes que quieres usar en tu sitio web.

  • 5. Personalizar fuentes y colores: Usa esta sección desplegable para indicarle específicamente a Divi AI qué fuentes y colores debe usar. Si quieres dejar que Divi AI elija las fuentes y colores para tu nuevo sitio web, asegúrate de que la opción Dejar que la IA elija esté activada para todas las opciones disponibles.

Divi Quick Sites - AI Customize Fonts and Colors

6. Haz clic en el botón Generar y Publicar Mi Sitio Web

Notas:

  • Todo el proceso puede tardar algunos minutos, especialmente si eliges usar Divi AI para la generación de imágenes.

  • Las páginas que hayas publicado previamente seguirán existiendo y funcionando exactamente igual que antes. La generación completa de sitios con Divi AI creará nuevas páginas para ti. Si, por ejemplo, hay una o varias páginas con el mismo nombre, sus nombres de “slug” las diferenciarán.

  • Las plantillas del Theme Builder que hayas creado previamente seguirán disponibles dentro del Theme Builder; sin embargo, las plantillas antiguas estarán desactivadas.


Caso práctico: Construir un sitio web completamente generado por IA para un restaurante de hamburguesas llamado Burger Bliss

Para este caso práctico, construiremos un sitio web completo aprovechando el poder de Divi AI para un restaurante de hamburguesas llamado Burger Bliss. Las imágenes también serán generadas usando la generación de imágenes de Divi AI.

Para empezar, llena el formulario Cuéntanos sobre tu sitio web con los detalles del negocio:

  • Nombre del sitio: Burger Bliss

  • Lema del sitio: Tu experiencia definitiva de hamburguesas en el corazón del Área de la Bahía

  • Cuéntale a Divi AI sobre tu sitio web:
    Burger Bliss es el destino principal para amantes de las hamburguesas en el Área de la Bahía de San Francisco. Ubicado en el vibrante corazón de San Francisco, nuestro local es un refugio culinario donde sabores deliciosos e ingredientes de calidad se unen para crear la experiencia definitiva en hamburguesas.

    En Burger Bliss, creemos en el arte de preparar la hamburguesa perfecta. Nuestro menú presenta diversas hamburguesas gourmet, cada una diseñada cuidadosamente para deleitar tu paladar. Desde las clásicas hamburguesas de carne hasta opciones innovadoras vegetarianas y veganas, atendemos todas las preferencias y necesidades dietéticas. Cada hamburguesa se elabora con los ingredientes más frescos, de origen local, asegurando una experiencia de la granja a la mesa que celebra la rica herencia culinaria del Área de la Bahía.

    Nuestro ambiente acogedor y moderno, combinado con nuestro compromiso con un servicio al cliente excepcional, hace de Burger Bliss el lugar perfecto para un almuerzo casual, una cena familiar o una comida nocturna. Ya seas local o visitante, encontrarás una cálida bienvenida y una comida satisfactoria en Burger Bliss.

  • Comercio electrónico: desactivado

  • Logo: un archivo JPEG, PNG o WEBP

  • Imágenes: para este caso usaremos imágenes generadas con IA

  • Personalizar fuentes y colores: Dejar que la IA elija

Divi Quick Sites - AI prompts

Sitio web listo

Una vez que termine todo el proceso de construcción con IA, recibirás un desglose de las páginas del sitio web y las plantillas del Theme Builder que Divi AI creó:

Divi Quick Sites - Explore your website


Explora el nuevo sitio web generado por Divi AI

El sitio web resultante es increíble. Contiene contenido e imágenes excelentes, perfectos para usar como punto de partida. Haz clic aquí para ver el resultado final.

¿Qué sigue?

Después de que el sitio web esté completo, puedes hacer cambios adicionales en todas las páginas y elementos de diseño que Divi AI haya creado.

Editar páginas

  1. Ve a Escritorio de WordPress → Divi → Escritorio
  2. Bajo Páginas del sitio, pasa el cursor sobre la página que quieres editar y haz clic en el ícono del lápiz.

Divi Quick Site - Delete, Edit and Preview generated page


3. La página respectiva se abrirá en una nueva pestaña del navegador con el Constructor Visual activo.


Divi - Edit an element with Visual Builder


Nota: También puedes acceder a todas tus páginas desde Escritorio de WordPress → Páginas → Todas las páginas.


WordPress  - Edit pages

Editar plantillas del Theme Builder

  1. Ve a Escritorio de WordPress → Divi → Escritorio
  2. Bajo Resumen de Divi, haz clic en el enlace Administrar plantillas.

Divi - Access the AI Generated Theme builder templates


3. Se cargará la página del Theme Builder, mostrando todas las plantillas que Divi AI creó. Desde esta página, puedes elegir qué plantilla quieres editar haciendo clic en el ícono del lápiz.


Divi - Edit a Theme Builder Template


Personalizar la paleta de colores

Cuando creas tu sitio web usando Quick Site junto con Divi AI, Divi AI establecerá todos los colores como Colores Globales.
  1. Abre cualquiera de tus páginas con el Constructor Visual.
  2. Edita cualquiera de los elementos (sección, filas, módulo).
  3. Elige una opción de color, como color de fondo o color de texto.
  4. Haz clic en la opción Global.
Divi - Global colors

5. Haz clic en el ícono de engranaje.
Divi - Open the global color editor


6. Haz clic en el ícono del lápiz para el color que quieres cambiar.


Divi - Edit a global color


7. Elige un color diferente.

8. Confirma el cambio.


Divi - Confirm global color change


9. Haz clic en Finalizar edición de colores globales.


Divi - Finish editing a global colorTodos los módulos que usan el color global modificado actualizarán todas las instancias de ese color.


Personalizar el preset del elemento

Similar a los colores globales, Divi AI creará y usará presets en todo el diseño.
  1. Edita cualquiera de los elementos (sección, fila, módulo).
  2. Abre la ventana de selección de preset.

Divi - Open the module Preset list


3. Haz clic en el ícono del lápiz para editar el preset del elemento.


Divi - Edit a module preset


4. Realiza los cambios deseados en la pestaña Diseño.

5. Haz clic en el botón de marca de verificación verde para guardar tus cambios.

6. Confirma los cambios.


Divi - Confirm Preset changes


Editar el preset de un elemento es otra manera rápida de personalizar el diseño generado por Divi AI. Dado que cada elemento comparte un preset específico, editar cualquiera de esos presets se aplicará a todos los módulos en tu sitio web que usen ese preset específico.


Preguntas frecuentes

  • ¿Puedo usar la generación completa de sitios con Divi AI si ya tengo páginas publicadas en mi sitio web?

  • ¿Qué pasa con mis páginas publicadas anteriormente?

  • ¿Puedo usar la generación completa de sitios con Divi AI si ya tengo plantillas del Theme Builder creadas?

  • ¿Qué pasa con mis plantillas anteriores del Theme Builder?


Recursos adicionales

  • Cómo usar Divi AI: Todo lo que necesitas saber

  • Cómo transformar un diseño de Divi usando Divi AI

  • Cómo usar Divi AI para mejorar automáticamente tus textos

  • Construyendo una página principal con Divi AI de principio a fin

  • Consejos principales para crear indicaciones para imágenes con Divi AI

  • Cómo escribir una entrada de blog con Divi AI

  • El nuevo editor de imágenes de Divi AI


    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • Generación de Secciones con Divi AI

      Aprende cómo usar la Generación de Secciones con Divi AI para crear contenido bien redactado y secciones de imágenes visualmente atractivas, todo impulsado por el poder de Divi AI. <br> Generación de Secciones con Divi ...
    • Cómo usar Divi Layouts IA

      Aprende a aprovechar el poder de Divi Layouts IA para crear diseños profesionales y visualmente atractivos en minutos. <br> Este artículo ofrece una guía paso a paso sobre cómo usar eficazmente Divi Layouts IA para agilizar y mejorar tu ...
    • Cómo Generar Imágenes con Divi IA

      Aprende a usar Divi IA, especificar los requisitos y personalizar las imágenes generadas para que se integren perfectamente en el diseño de tu sitio web. En este artículo, te guiaremos en el uso de Divi IA para generar imágenes para tu sitio web. ...
    • Cómo usar el Editor de Imágenes de Divi IA

      Aprende a usar el Editor de Imágenes de Divi IA para crear y editar fácilmente imágenes impresionantes directamente dentro del Constructor de Divi. <br> Cómo usar el Editor de Imágenes de Divi IA Este artículo te guiará paso a ...
    • Cómo usar Divi Código IA

      Aprende a usar las capacidades de Divi Código IA para generar fragmentos de código limpios y eficientes para diversos elementos web. <br> Divi Código IA es una función innovadora que aprovecha la inteligencia artificial para ayudarte a ...