Curso de Divi

Aprende a diseñar con Divi desde cero

¿Qué vas a encontrar aquí?

27 puntos de contenidos donde vas a poder saber mucho más sobre Divi, cómo se utiliza, las distintas partes que debes configurar para sacarle el máximo partido a tu web con uno de los mejores maquetadores.

Un curso de Divi con el que podrás aprender a diseñar con él desde cero.

1.- Personalizaciones de WordPress

Es importante realizar algunas personalizaciones clave en WordPress para asegurarse de que tu sitio esté optimizado y listo para trabajar con el tema Divi

Instalación y configuración de WordPress:

  1. Asegúrate de tener la última versión de WordPress instalada en tu servidor.
  2. Configura la configuración general del sitio, incluyendo el título del sitio, la descripción y la configuración de las zonas horarias

 

Permalinks amigables:

  1. Ve a “Ajustes” > “Enlaces permanentes”.
  2. Selecciona la opción “Nombre de la entrada” para asegurar enlaces amigables y fácilmente comprensibles para los motores de búsqueda.

Configuración de lectura:

  1. Accede a “Ajustes” > “Lectura”.
  2. Decide si quieres que tu página de inicio sea estática o muestre las últimas entradas del blog según tus necesidades.

Configuración de comentarios:

  1. Si no planeas utilizar comentarios en tu sitio, puedes desactivarlos.
  2. Ve a “Ajustes” > “Comentarios” y ajusta las configuraciones según sea necesario.

Configuración de medios:

  1. Ajusta las configuraciones de tamaño de imagen según tus preferencias.
  2. Ve a “Ajustes” > “Medios” y define los tamaños de imagen que se ajusten a tus necesidades.

Configuración de usuarios:

  1. Crea una cuenta de usuario con un nombre de usuario único y una contraseña segura.
  2. Considera eliminar la cuenta de usuario predeterminada “admin” por motivos de seguridad.

Seguridad:

  1. Instala un plugin de seguridad para proteger tu sitio. Plugins populares incluyen Wordfence o Sucuri.
  2. Asegúrate de tener un respaldo programado de tu sitio.

Instalación del tema Divi:

  1. Compra y descarga el tema Divi desde el sitio web de Elegant Themes.
  2. Instala el tema a través de “Apariencia” > “Temas” > “Añadir nuevo” > “Subir tema”.

Activación de Divi Builder:

  1. Una vez que Divi esté instalado, activa el Divi Builder en “Divi” > “Opciones del tema” > “Constructor Divi”.

 

Actualización y optimización de plugins:

  1. Asegúrate de que todos los plugins estén actualizados a sus últimas versiones.
  2. Elimina cualquier plugin innecesario para mantener un sitio ligero y rápido.

 

Con estos pasos, tu instalación de WordPress estará lista para comenzar a diseñar con Divi.

2.- Configuraciones básicas de Divi

Después de haber configurado WordPress, es hora de ajustar algunas configuraciones básicas dentro del tema Divi para asegurarte de que se adapte a tus necesidades.

Aquí tienes los pasos esenciales:

Configuración general de Divi:

  1. Ve a “Divi” en el menú principal del panel de administración y selecciona “Opciones del tema”.
  2. En la pestaña “General”, asegúrate de que las opciones básicas, como el logotipo, la paleta de colores y la tipografía, estén configuradas según tus preferencias.

 

Configuración de diseño del sitio:

  1. Explora las opciones en la pestaña “Diseño del sitio” para establecer el ancho del contenido, el espaciado y la disposición global de tu sitio.
  2. Define si deseas un diseño de caja o ancho completo.

 

Configuración de tipografía:

  1. En la pestaña “Tipografía”, personaliza la fuente y el estilo de texto para encabezados y párrafos.
  2. Ajusta también las opciones de espaciado y alineación.

 

Configuración de encabezado y navegación:

  1. Personaliza el diseño y estilo del encabezado desde la pestaña “Encabezado y navegación”.
  2. Decide si prefieres un encabezado fijo o desplegable, y ajusta la apariencia del menú de navegación.

 

Configuración de diseño de página y blog:

  1. En la pestaña “Diseño de página” y “Diseño de blog”, establece las configuraciones predeterminadas para las páginas y las entradas del blog.
  2. Ajusta la disposición de las barras laterales, el formato de la fecha, y otros elementos.

 

Configuración de pie de página:

  1. Personaliza el pie de página desde la pestaña “Pie de página” según tus preferencias.
  2. Puedes incluir información de contacto, enlaces sociales, y personalizar la apariencia general.

 

Integración con redes sociales:

  1. Configura las cuentas de redes sociales en la pestaña “Integración de redes sociales”.
  2. Esto permitirá que los iconos de redes sociales se muestren en tu sitio web.

 

Integración con API de Google Maps:

  1. Si planeas usar mapas en tu sitio, configura la API de Google Maps en la pestaña “API de Google Maps”.

 

Configuración de integración de código:

  1. Si necesitas agregar scripts personalizados, como códigos de seguimiento, puedes hacerlo en la pestaña “Integración de código”.

 

Guardar cambios:

  1. Asegúrate de guardar todas tus configuraciones antes de salir de la página.

 

Estas configuraciones básicas te permitirán personalizar el aspecto y la funcionalidad de tu sitio web utilizando Divi.

A medida que avances en el diseño, podrás explorar opciones más avanzadas y específicas según tus necesidades

3.- Instalando un layout para la web

Instalar un layout predefinido es una excelente manera de acelerar el proceso de diseño y obtener un punto de partida sólido.

Divi proporciona una variedad de layouts prediseñados que puedes instalar y personalizar fácilmente.

Aquí te explico cómo hacerlo:

Accede al constructor de páginas Divi:

  1. Ve a la página o entrada en la que deseas aplicar el nuevo diseño.
  2. Haz clic en el botón “Habilitar el Constructor Divi” que se encuentra en la parte superior de la pantalla.

 

Agregar nueva sección:

  1. Haz clic en el botón (+) para agregar una nueva sección.
  2. Selecciona la opción “Agregar desde la biblioteca” para elegir un layout predefinido.

 

Explora las opciones de diseño:

  1. Divi te mostrará una biblioteca de layouts. Puedes explorar diferentes categorías y elegir el que mejor se adapte a tus necesidades. Hay opciones para páginas de inicio, páginas de servicios, portafolios, blogs, y más.

 

Vista previa y selecciona el layout:

  1. Puedes previsualizar los layouts haciendo clic en ellos. Una vez que encuentres uno que te guste, haz clic en “Usar este diseño”.

 

Personaliza el layout:

  1. Después de seleccionar el layout, podrás personalizar cada sección según tus preferencias. Puedes cambiar textos, imágenes, colores y otros elementos según lo necesites.
  2. Utiliza el Divi Builder para hacer ajustes más detallados, como agregar nuevos módulos, cambiar la disposición y ajustar el diseño.

 

Guardar y publicar:

  1. Una vez que estés satisfecho con las personalizaciones, asegúrate de hacer clic en “Guardar” y luego en “Publicar” para aplicar los cambios a tu sitio en vivo.

 

Guardar en la biblioteca (opcional):

  1. Si has realizado personalizaciones que te gustaría reutilizar en otras partes de tu sitio, puedes guardar la página actual en la biblioteca Divi. Esto te permitirá cargar ese diseño en otras páginas o entradas en el futuro.

 

Al seguir estos pasos, podrás instalar rápidamente un layout predefinido en tu sitio web utilizando Divi.

Recuerda que estos layouts son completamente personalizables, así que no dudes en ajustarlos según tus necesidades específicas.

4.- Personalizando el logo de la web

Personalizar el logo es una parte esencial del diseño de tu sitio web con Divi.

Aquí te explico cómo puedes personalizar y agregar un logo a tu sitio:

Preparación del logo:

  1. Antes de comenzar, asegúrate de tener tu logo preparado en el tamaño y formato adecuado.
  2. Puedes utilizar herramientas de diseño gráfico como Adobe Photoshop o herramientas en línea para crear un logo profesional.

 

Accede a las opciones del tema Divi:

  1. En el panel de administración de WordPress, ve a “Divi” > “Opciones del tema”.

 

Configuración del logo:

  1. Dentro de la pestaña “General”, encontrarás la sección “Configuración del logo”.
  2. Haz clic en “Cargar logo” para seleccionar tu archivo de logo desde tu computadora.

 

Ajusta el tamaño del logo:

  1. Una vez cargado, puedes ajustar el tamaño del logo según tus preferencias utilizando los controles deslizantes proporcionados.
  2. Divi te permite especificar el tamaño del logo tanto para la versión de escritorio como para la versión móvil.

 

Alineación y espaciado:

  1. En la misma sección, puedes ajustar la alineación del logo y el espaciado con respecto a otros elementos del encabezado.
  2. Experimenta con estas opciones para asegurarte de que el logo se vea como deseas en todas las pantallas.

 

Guarda cambios:

  1. No olvides hacer clic en el botón “Guardar cambios” para aplicar la configuración de tu logo.

 

Visualización en el encabezado:

  1. Después de configurar tu logo, verifica cómo se ve en el encabezado de tu sitio. Puedes hacerlo visitando cualquier página de tu sitio y observando el encabezado.

 

Ajustes adicionales (si es necesario):

  1. Si necesitas realizar ajustes más detallados en la posición o estilo del logo, puedes hacerlo utilizando el Constructor Divi.
  2. Accede al Constructor Divi, selecciona el módulo de encabezado y ajusta las opciones según tus necesidades.

 

Siguiendo estos pasos, podrás personalizar y agregar tu logo de manera efectiva a tu sitio web con Divi.

Recuerda que la coherencia en el diseño y la elección de un logo que se ajuste a la identidad de tu marca son elementos clave

5.- Creación de menús

Crear y personalizar menús en Divi es un proceso fundamental para la navegación efectiva de tu sitio web.

Aquí te explico cómo puedes crear y configurar menús con Divi:

Accede al personalizador de WordPress:

  1. En el panel de administración de WordPress, ve a “Apariencia” > “Personalizar”.

 

Configuración del menú de navegación:

  1. Dentro del Personalizador, busca la sección “Menús” o “Navegación”, dependiendo del tema que estés utilizando.
  2. Algunos temas Divi proporcionan opciones específicas para el menú en esta sección.

 

Crea un nuevo menú:

  1. Si aún no has creado un menú, busca la opción para crear uno nuevo.
  2. Asigna un nombre descriptivo al menú y haz clic en “Crear Menú”.

 

Agregar elementos al menú:

  1. Una vez creado el menú, puedes empezar a agregar elementos. Puedes agregar páginas, categorías, enlaces personalizados, y más.
  2. Selecciona los elementos que deseas agregar desde las opciones disponibles y haz clic en “Añadir al Menú”.

 

Organiza los elementos:

  1. Arrastra y suelta los elementos del menú para organizar su orden.
  2. Puedes crear menús desplegables arrastrando elementos ligeramente hacia la derecha debajo del elemento principal.

 

Asigna el menú a ubicaciones:

  1. En la sección de ubicaciones del menú, asigna tu menú recién creado a la ubicación deseada (por ejemplo, menú principal, menú secundario, etc.).

 

Guarda cambios:

  1. No olvides guardar los cambios antes de cerrar el Personalizador.

 

Personaliza el diseño del menú con Divi:

  1. Si deseas personalizar aún más el diseño del menú, puedes hacerlo utilizando las opciones de Divi.
  2. Accede al Constructor Divi, selecciona el módulo de menú y ajusta las opciones según tus necesidades.

 

Visualización en el sitio:

  1. Después de realizar todas las configuraciones, visita tu sitio web para asegurarte de que el menú se muestra correctamente y funciona como se espera.

 

Menú en el encabezado (si es necesario):

  1. Si estás utilizando un encabezado personalizado con Divi, asegúrate de que el menú se integre bien con el diseño general.

 

Siguiendo estos pasos, podrás crear y personalizar menús de manera efectiva en tu sitio web Divi.

La claridad en la navegación es crucial para una buena experiencia del usuario.

6.- Personalizando la cabecera de la web

Personalizar la cabecera (o encabezado) de tu sitio web es clave para lograr un diseño atractivo y funcional. Divi te ofrece muchas opciones para personalizar la cabecera de manera visual y efectiva.

Aquí te indico cómo puedes hacerlo:

Accede al constructor Divi:

  1. Ve a la página o entrada en la que deseas personalizar la cabecera.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona el módulo de encabezado:

  1. Dentro del Constructor Divi, busca y selecciona el módulo de encabezado en la sección donde deseas personalizarlo.

 

Opciones de diseño del encabezado:

  1. Divi te ofrece diversas opciones para personalizar el diseño del encabezado. Puedes ajustar la altura del encabezado, la posición del logotipo, el estilo de navegación, entre otras cosas.
  2. Experimenta con las opciones disponibles para lograr el diseño que mejor se adapte a tu sitio.

 

Añadir elementos al encabezado:

  1. Puedes agregar varios elementos al encabezado, como un menú de navegación, un formulario de búsqueda, información de contacto, etc.
  2. Utiliza la funcionalidad de arrastrar y soltar para organizar los elementos y ajustar su apariencia.

 

Diseño responsive:

  1. Asegúrate de que el diseño del encabezado sea receptivo, es decir, que se vea bien en dispositivos móviles y tablets.
  2. Divi te permite ajustar específicamente el diseño para cada tipo de dispositivo.

 

Estilos de menú:

  1. Personaliza el estilo del menú, incluyendo colores, tipografía, efectos al pasar el mouse, y más.
  2. Puedes hacer esto desde las opciones de estilo dentro del módulo de encabezado.

 

Fondo del encabezado:

  1. Decide si deseas un fondo para tu encabezado y ajusta su color o imagen según tus preferencias.
  2. Puedes hacer esto en la sección de diseño del encabezado.

 

Guardar cambios:

  1. Asegúrate de hacer clic en “Guardar” y luego en “Publicar” para aplicar los cambios al encabezado de tu sitio.

 

Visualización en el sitio:

  1. Después de realizar las personalizaciones, visita tu sitio web para asegurarte de que la cabecera se vea y funcione como deseas.

 

Prueba en diferentes páginas:

  1. Verifica que tu diseño de encabezado funcione bien en diferentes páginas y situaciones dentro de tu sitio.

 

Siguiendo estos pasos, podrás personalizar la cabecera de tu sitio web con Divi de manera efectiva.

La coherencia en el diseño del encabezado es esencial para la identidad visual de tu sitio.

7.- Diseñando la página de inicio

Diseñar la página de inicio es crucial, ya que es la primera impresión que los visitantes tendrán de tu sitio web. Divi facilita la creación de una página de inicio atractiva y funcional.

Aquí te explico cómo puedes diseñar la página de inicio con Divi:

Accede al constructor Divi:

  1. Ve a la página de inicio de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona la estructura de la página:

  1. Divi te permite elegir entre diferentes estructuras de página. Puedes seleccionar una estructura prediseñada o comenzar desde cero.
  2. Selecciona la opción que mejor se adapte a tus necesidades.

 

Añade secciones y filas:

  1. Utiliza la interfaz de arrastrar y soltar para agregar secciones y filas a tu página.
  2. Las secciones son contenedores principales, y las filas son subdivisiones dentro de esas secciones.

 

Añade módulos:

  1. Dentro de las filas, puedes agregar diversos módulos, como texto, imágenes, llamadas a la acción, testimonios, etc.
  2. Experimenta con los módulos disponibles para construir la estructura y contenido de tu página de inicio.

 

Personaliza los módulos:

  1. Cada módulo tiene opciones de personalización. Ajusta textos, colores, tamaños de fuente y otros detalles según tus preferencias.
  2. Utiliza las opciones de diseño y avanzadas para un control aún más detallado.

 

Añade imágenes y multimedia:

  1. Siempre que sea relevante, incorpora imágenes, videos y otros elementos multimedia para hacer tu página más visualmente atractiva.
  2. Divi permite agregar galerías de imágenes, carruseles y mucho más.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive. Divi te permite ajustar cómo se ve tu página en diferentes dispositivos, como computadoras de escritorio, tablets y teléfonos móviles.

 

Navegación y enlaces:

  1. Incluye enlaces a secciones específicas de tu página de inicio para facilitar la navegación.
  2. Puedes hacerlo utilizando anclas o vinculando elementos de menú a secciones específicas.

 

Guarda y publica:

  1. Después de cada cambio significativo, asegúrate de hacer clic en “Guardar” y luego en “Publicar” para aplicar los cambios a tu página de inicio.

 

Prueba en diferentes navegadores:

  1. Verifica que tu diseño se vea bien en diferentes navegadores para garantizar una experiencia consistente para todos los usuarios.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad de carga de tu página, ya que esto afecta la experiencia del usuario y el SEO. Utiliza imágenes optimizadas y cuida la cantidad de contenido multimedia.

 

Siguiendo estos pasos, podrás diseñar una página de inicio efectiva y atractiva con Divi. Recuerda que la simplicidad y la claridad son clave para una página de inicio exitosa.

8.- Diseñando la página de contacto

Diseñar la página de contacto es crucial para facilitar la comunicación entre tu sitio web y tus visitantes.

A continuación, te explico cómo diseñar la página de contacto con Divi:

Accede al constructor Divi:

  1. Ve a la página de contacto de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona la estructura de la página:

  1. Elige una estructura de página que se adapte a tus necesidades. Puedes optar por una estructura prediseñada o comenzar desde cero según la información que desees incluir.

 

Añade secciones y filas:

  1. Agrega secciones y filas a tu página de contacto utilizando la interfaz de arrastrar y soltar de Divi.
  2. Considera dividir la página en secciones para la información de contacto, el formulario de contacto y cualquier otra información relevante.

 

Añade módulos para información de contacto:

  1. Utiliza módulos de texto para agregar la información de contacto, como la dirección, el número de teléfono y la dirección de correo electrónico.
  2. Puedes usar módulos de iconos para agregar íconos atractivos junto a la información.

 

Añade el formulario de contacto:

  1. Agrega un módulo de formulario de contacto para permitir que los visitantes se pongan en contacto contigo directamente desde la página.
  2. Configura los campos del formulario según tus necesidades y asegúrate de que se ajusten al diseño de la página.

 

Personaliza los módulos:

  1. Personaliza los módulos de texto, iconos y formulario según la apariencia que desees. Ajusta los colores, tamaños de fuente y cualquier otro detalle necesario.

 

Añade mapa (si es necesario):

  1. Si tu ubicación es importante, puedes agregar un módulo de mapa para mostrar la ubicación física de tu empresa u oficina.
  2. Configura el módulo del mapa para que se ajuste al diseño general de la página.

 

Diseño responsive:

  1. Al igual que con la página de inicio, asegúrate de que tu diseño sea responsive para una experiencia óptima en diferentes dispositivos.

 

Guarda y publica:

  1. Después de realizar cambios significativos, guarda y publica la página para aplicar los ajustes.

 

Prueba el formulario de contacto:

  1. Asegúrate de probar el formulario de contacto para verificar que funcione correctamente y que los mensajes se envíen a la dirección de correo electrónico designada.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu formulario de contacto implica cargar scripts adicionales. Mantén la página lo más ligera posible.

Siguiendo estos pasos, podrás diseñar una página de contacto efectiva y funcional con Divi. Recuerda que la accesibilidad y la claridad son esenciales en una página de contacto.

9.- Diseñando la página del blog

Diseñar la página del blog con Divi te permite crear un espacio atractivo y fácil de navegar para mostrar tus publicaciones.

A continuación, te explico cómo puedes diseñar la página del blog con Divi:

Accede al constructor Divi:

  1. Ve a la página del blog de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona la estructura de la página:

  1. Elige una estructura de página que se adapte a tus necesidades. Puedes optar por una estructura prediseñada o comenzar desde cero, dependiendo de la apariencia que desees para tu página del blog.

 

Añade secciones y filas:

  1. Agrega secciones y filas a tu página utilizando la interfaz de arrastrar y soltar de Divi.
  2. Considera dividir la página en secciones para la presentación de las publicaciones, la barra lateral (si es necesario) y cualquier otra información adicional.

 

Añade módulos de publicación:

  1. Utiliza el módulo de “Blog” para mostrar tus publicaciones. Este módulo te permite personalizar la presentación de las entradas, como la cantidad de columnas, el número de publicaciones a mostrar y el diseño.

 

Personaliza el diseño de las publicaciones:

  1. Dentro del módulo de Blog, ajusta las opciones de diseño para definir la apariencia de las miniaturas de las imágenes, el contenido de las publicaciones, los metadatos y otros detalles.
  2. Considera la posibilidad de utilizar el formato de entrada “Extracto” o “Completo” según tus preferencias.

 

Añade paginación (si es necesario):

  1. Si tienes muchas publicaciones, puedes añadir la opción de paginación para dividir las publicaciones en varias páginas.
  2. Esto ayuda a mejorar la velocidad de carga y la experiencia del usuario.

 

Añade barra lateral (opcional):

  1. Si deseas incluir una barra lateral con widgets, puedes añadir una fila y utilizar módulos de barra lateral para agregar contenido adicional, como categorías, etiquetas, archivos, etc.

 

Personaliza los módulos de barra lateral:

  1. Ajusta la apariencia de los módulos de la barra lateral según tus preferencias. Puedes personalizar colores, tamaños de fuente y otros detalles.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para una óptima visualización en diferentes dispositivos.

 

Guarda y publica:

  1. Después de realizar cambios significativos, guarda y publica la página para aplicar los ajustes.

 

Prueba la navegación y funcionalidad:

  1. Asegúrate de que la navegación entre las páginas de tu blog funcione correctamente. Prueba los enlaces y verifica que la presentación de las publicaciones sea coherente y atractiva.

 

Optimización de velocidad:

  1. Considera la optimización de velocidad para asegurarte de que la página del blog cargue rápidamente. Utiliza imágenes optimizadas y limita la cantidad de elementos en la página.

 

Siguiendo estos pasos, podrás diseñar una página del blog atractiva y funcional con Divi. La organización y presentación efectiva de tus publicaciones son clave para una buena experiencia de usuario.

10.- Configurando redes sociales

Configurar las redes sociales en tu sitio web es esencial para permitir que los visitantes se conecten contigo a través de diferentes plataformas.

A continuación, te explico cómo puedes configurar las redes sociales en tu sitio web con Divi:

Accede al personalizador de WordPress:

  1. En el panel de administración de WordPress, ve a “Apariencia” > “Personalizar”.

 

Configuración de redes sociales en Divi:

  1. Dentro del Personalizador, busca la sección “Redes Sociales” o “Iconos Sociales”. La ubicación exacta puede variar según el tema que estés utilizando.
  2. En Divi, es probable que encuentres estas opciones dentro de las “Configuraciones del Tema” o una sección similar.

 

Añadir enlaces a redes sociales:

  1. Añade los enlaces a tus perfiles de redes sociales. Puedes incluir URLs de tus perfiles de Facebook, Twitter, Instagram, LinkedIn, y otras plataformas que utilices.
  2. Algunos temas Divi también permiten añadir iconos sociales directamente desde la sección de Personalizador.

 

Ajusta la apariencia de los iconos:

  1. Configura la apariencia de los iconos sociales, como el tamaño, el estilo y el color. Asegúrate de que los iconos se ajusten al diseño general de tu sitio web.

 

Ubicación de los iconos:

  1. Decide dónde deseas mostrar los iconos sociales. Pueden estar en la barra de navegación, el pie de página, la barra lateral o en otras ubicaciones según el diseño de tu tema.
  2. Ajusta la ubicación y el estilo según tus preferencias.

 

Guardar cambios:

  1. No olvides guardar los cambios antes de cerrar el Personalizador.

 

Prueba los enlaces:

  1. Después de configurar los enlaces a las redes sociales, prueba cada uno para asegurarte de que redirijan correctamente a tus perfiles.

 

Añadir módulos de redes sociales (opcional):

  1. Si deseas una mayor personalización, puedes utilizar módulos de redes sociales en las páginas individuales. Esto te permite destacar tus perfiles de redes sociales en lugares específicos de tu contenido.

 

Diseño responsive:

  1. Asegúrate de que los iconos sociales se vean bien en dispositivos móviles. Divi te permite ajustar la apariencia para diferentes tamaños de pantalla.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si estás utilizando scripts adicionales para mostrar los iconos sociales. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás configurar y mostrar tus enlaces a redes sociales de manera efectiva en tu sitio web Divi.

La presencia en redes sociales es crucial para la interacción y el compromiso con tus visitantes.

11.- Personalizando el pie de página

Personalizar el pie de página (footer) es importante para dar una impresión cohesiva y profesional a tu sitio web.

A continuación, te explico cómo puedes personalizar el pie de página con Divi:

Accede al constructor Divi:

  1. Ve a cualquier página o entrada de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona el módulo de pie de página:

  1. Dentro del Constructor Divi, busca y selecciona el módulo de “Pie de Página” (Footer) en la sección donde deseas realizar las personalizaciones.

 

Estructura del pie de página:

  1. Divi te permite dividir el pie de página en secciones y columnas. Puedes añadir diferentes módulos en cada sección para mostrar información específica.
  2. Ajusta la estructura del pie de página según tus necesidades.

 

Añade módulos al pie de página:

  1. Utiliza módulos de texto, iconos, enlaces, información de contacto, etc., para personalizar el contenido del pie de página.
  2. Puedes incluir un formulario de suscripción, enlaces a redes sociales, información de copyright, y más.

 

Personaliza los módulos:

  1. Ajusta los textos, colores, tamaños de fuente y otros detalles de cada módulo para que coincidan con el estilo general de tu sitio web.
  2. Experimenta con las opciones de diseño y avanzadas para obtener un control más detallado.

 

Añade menús de navegación (si es necesario):

  1. Algunos sitios web optan por incluir menús de navegación en el pie de página. Puedes hacer esto utilizando módulos específicos de menú de Divi.
  2. Personaliza el estilo y los enlaces según tus necesidades.

 

Enlaces de redes sociales (si no los has configurado en otro lugar):

  1. Si aún no has configurado los enlaces a redes sociales, puedes incluirlos en el pie de página para una mayor visibilidad.

 

Diseño responsive:

  1. Asegúrate de que el pie de página sea responsive para que se vea bien en diferentes dispositivos.
  2. Divi te permite ajustar la disposición de los módulos para diferentes tamaños de pantalla.

 

Guarda y publica:

  1. Después de realizar los cambios, guarda y publica la página para aplicar los ajustes al pie de página.

 

Prueba en diferentes páginas:

  1. Verifica que el pie de página funcione bien en diferentes páginas de tu sitio.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tienes muchos elementos en el pie de página. Mantén el contenido del pie de página eficiente para una carga rápida.

 

Siguiendo estos pasos, podrás personalizar el pie de página de tu sitio web Divi de acuerdo con tus necesidades y estilo.

12.- Mantener DIVI actualizado

Mantener Divi actualizado es crucial para asegurarte de que tu sitio web funcione de manera óptima y se beneficie de las últimas características, mejoras de rendimiento y correcciones de seguridad.

Aquí te explico cómo mantener Divi actualizado:

Realiza una copia de seguridad:

  1. Antes de actualizar cualquier componente crítico del sitio web, realiza una copia de seguridad completa. Puedes utilizar plugins de copias de seguridad o las herramientas proporcionadas por tu proveedor de hosting.

 

Accede al panel de administración de WordPress:

  1. Ingresa al panel de administración de WordPress con tus credenciales.

 

Ve a la sección de temas:

  1. Dirígete a “Apariencia” > “Temas” en el menú lateral.

 

Actualiza Divi:

  1. Si hay una nueva versión de Divi disponible, verás una notificación de actualización. Puedes actualizar Divi directamente desde esta sección.
  2. Haz clic en el botón de actualización junto al tema Divi.

 

Actualiza Divi Builder (si es necesario):

  1. Divi Builder es el plugin asociado con Divi. Si también lo utilizas, asegúrate de actualizarlo. Puedes hacerlo desde la sección de “Plugins” en el panel de administración de WordPress.
  2. Busca el plugin “Divi Builder” y haz clic en el enlace de actualización si hay una nueva versión disponible.

 

Verifica la compatibilidad con WordPress:

  1. Antes de actualizar, verifica que la versión de Divi que estás instalando sea compatible con la versión de WordPress que estás utilizando. La mayoría de las veces, Divi se actualiza para ser compatible con las últimas versiones de WordPress.

 

Verifica compatibilidad con otros plugins:

  1. Algunos plugins pueden tener problemas de compatibilidad con nuevas versiones de Divi. Si utilizas otros plugins, asegúrate de que también estén actualizados y sean compatibles.

 

Prueba el sitio después de la actualización:

  1. Después de actualizar Divi, navega por tu sitio y realiza pruebas para asegurarte de que todo funcione como debería. Verifica las páginas críticas, formularios, funciones de e-commerce, etc.

 

Monitorea problemas post-actualización:

  1. Si experimentas problemas después de la actualización, verifica los foros de soporte de Elegant Themes o de Divi Builder para ver si otros usuarios han informado problemas similares y si hay soluciones disponibles.

 

Actualiza regularmente:

  1. Mantén un hábito regular de revisar e instalar actualizaciones de Divi y otros componentes de tu sitio web. Esto garantiza que estés utilizando las últimas características y mejoras de seguridad.

 

Información del desarrollador:

  1. Si eres un desarrollador o trabajas con uno, asegúrate de revisar la documentación de Divi para conocer detalles específicos de cada actualización.

 

Siguiendo estos pasos, podrás mantener Divi actualizado de manera segura y efectiva. Mantener tu sitio web actualizado es esencial para la seguridad y el rendimiento a largo plazo.

13.- Construcción de cabecera global

La construcción de una cabecera global en Divi te permite diseñar una cabecera consistente y reutilizable en todas las páginas de tu sitio web.

Aquí te explico cómo construir una cabecera global con Divi:

Accede al constructor Divi:

  1. Ve a cualquier página o entrada de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona el módulo de cabecera:

  1. Busca y selecciona el módulo de “Cabecera” (Header) en la sección donde deseas construir la cabecera global. Este módulo es específico de Divi Builder.

 

Diseña la cabecera:

  1. Utiliza la interfaz de arrastrar y soltar para construir la cabecera de tu elección. Puedes añadir elementos como el logotipo, menús de navegación, información de contacto, botones, y más.
  2. Experimenta con las opciones de diseño y estilo para ajustar la apariencia de la cabecera.

 

Configura el diseño responsive:

  1. Asegúrate de que el diseño de tu cabecera sea responsivo, lo que significa que se adapte bien a diferentes tamaños de pantalla. Divi te permite ajustar la apariencia para dispositivos móviles y tablets.

 

Guarda la cabecera global:

  1. Después de diseñar la cabecera a tu gusto, haz clic en “Guardar” en la parte inferior del Constructor Divi.

 

Guarda la cabecera como global:

  1. En la ventana de guardado, elige la opción “Guardar la cabecera global”. Esto permitirá que la cabecera se utilice en todas las páginas de tu sitio web.

 

Asigna la cabecera global a todas las páginas:

  1. Para asegurarte de que la cabecera global se utilice en todas las páginas, ve a “Divi” > “Opciones del tema” en el panel de administración de WordPress.
  2. En la sección “Configuración del tema”, selecciona tu cabecera global recién creada en la opción “Seleccionar un diseño de cabecera predeterminado”.

 

Guarda cambios:

  1. Asegúrate de hacer clic en “Guardar cambios” para aplicar la cabecera global a todas las páginas de tu sitio.

 

Actualizaciones de la cabecera global:

  1. Si necesitas realizar cambios en la cabecera global en el futuro, simplemente edítala desde cualquier página y los cambios se reflejarán automáticamente en todas las páginas.

 

Prueba en diferentes páginas:

  1. Verifica que la cabecera global se vea y funcione correctamente en todas las páginas de tu sitio web.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu cabecera incluye elementos pesados. Mantén el contenido del encabezado eficiente para una carga rápida.

 

Siguiendo estos pasos, podrás construir y mantener una cabecera global coherente en todas las páginas de tu sitio web con Divi. Esto garantiza una experiencia de usuario consistente y facilita la gestión del diseño de tu sitio

14.- Construcción de pie de página global

La construcción de un pie de página global en Divi te permite diseñar un pie de página consistente y reutilizable en todas las páginas de tu sitio web.

Aquí te explico cómo construir un pie de página global con Divi:

Accede al constructor Divi:

  1. Ve a cualquier página o entrada de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Selecciona el módulo de pie de página:

  1. Busca y selecciona el módulo de “Pie de Página” (Footer) en la sección donde deseas construir el pie de página global. Este módulo es específico de Divi Builder.

 

Diseña el pie de página:

  1. Utiliza la interfaz de arrastrar y soltar para construir el pie de página de tu elección. Puedes añadir elementos como información de contacto, enlaces, copyright, widgets, y más.
  2. Experimenta con las opciones de diseño y estilo para ajustar la apariencia del pie de página.

 

Configura el diseño responsive:

  1. Asegúrate de que el diseño de tu pie de página sea responsivo, adaptándose bien a diferentes tamaños de pantalla. Divi te permite ajustar la apariencia para dispositivos móviles y tablets.

 

Guarda el pie de página global:

  1. Después de diseñar el pie de página a tu gusto, haz clic en “Guardar” en la parte inferior del Constructor Divi.

 

Guarda el pie de página como global:

  1. En la ventana de guardado, elige la opción “Guardar el pie de página global”. Esto permitirá que el pie de página se utilice en todas las páginas de tu sitio web.

 

Asigna el pie de página global a todas las páginas:

  1. Para asegurarte de que el pie de página global se utilice en todas las páginas, ve a “Divi” > “Opciones del tema” en el panel de administración de WordPress.
  2. En la sección “Configuración del tema”, selecciona tu pie de página global recién creado en la opción “Seleccionar un diseño de pie de página predeterminado”.

 

Guarda cambios:

  1. Asegúrate de hacer clic en “Guardar cambios” para aplicar el pie de página global a todas las páginas de tu sitio.

 

Actualizaciones del pie de página global:

  1. Si necesitas realizar cambios en el pie de página global en el futuro, simplemente edítalo desde cualquier página y los cambios se reflejarán automáticamente en todas las páginas.

 

Prueba en diferentes páginas:

  1. Verifica que el pie de página global se vea y funcione correctamente en todas las páginas de tu sitio web.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu pie de página incluye elementos pesados. Mantén el contenido del pie de página eficiente para una carga rápida.

 

Siguiendo estos pasos, podrás construir y mantener un pie de página global coherente en todas las páginas de tu sitio web con Divi.

15.- Sección principal y llamada a la acción

La creación de una sección principal con una llamada a la acción (CTA) efectiva es crucial para captar la atención de los visitantes y dirigirlos hacia los objetivos deseados en tu sitio web.

A continuación, te explico cómo puedes diseñar una sección principal con una llamada a la acción utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página principal de tu sitio web.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección principal:

  1. Utiliza la interfaz de Divi para añadir una sección principal. Puedes hacerlo seleccionando la estructura adecuada para tu diseño.

 

Añade un módulo de título:

  1. Dentro de la sección principal, añade un módulo de “Título”. Este será el encabezado que captará la atención del visitante.
  2. Utiliza un título impactante y claro relacionado con el propósito de tu sitio o la oferta que estás promocionando.

 

Añade un módulo de texto:

  1. Junto al título, añade un módulo de “Texto”. Utiliza este módulo para proporcionar información adicional y destacar los beneficios clave o el mensaje principal.

 

Añade un módulo de llamada a la acción (CTA):

  1. Agrega un módulo de “Llamada a la Acción”. Este módulo te permite crear un botón de acción que dirige a los visitantes hacia una página específica o una acción deseada.
  2. Personaliza el texto del botón con un mensaje claro y atractivo, como “Regístrate”, “Compra ahora”, “Descargar”, etc.

 

Personaliza los módulos:

  1. Ajusta el diseño y el estilo de los módulos según tus preferencias. Puedes cambiar colores, tamaños de fuente, márgenes y otros detalles.

 

Añade imágenes o multimedia (si es necesario):

  1. Si es relevante para tu mensaje, considera añadir imágenes o multimedia que refuercen la llamada a la acción. Divi permite fácilmente integrar elementos visuales en tu diseño.

 

Configura la fondo de la sección (opcional):

  1. Puedes personalizar la apariencia de la sección principal ajustando el fondo. Puedes utilizar colores sólidos, gradientes, imágenes de fondo o incluso videos.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para ofrecer una experiencia coherente en dispositivos móviles y tablets.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección principal a tu página principal.

 

Prueba la llamada a la acción:

  1. Asegúrate de que el botón de la llamada a la acción funcione correctamente y dirija a los visitantes a la página deseada.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección principal incluye elementos multimedia. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección principal atractiva con una llamada a la acción efectiva utilizando Divi. La claridad y la relevancia en el mensaje son clave para convertir visitantes en acciones deseadas.

16.- Sección de tarjetas con módulos de llamada a la acción y de imagen

Crear una sección de tarjetas con módulos de llamada a la acción (CTA) y de imagen es una excelente manera de presentar información de manera visualmente atractiva.

A continuación, te explico cómo puedes diseñar esta sección utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página donde deseas agregar la sección de tarjetas.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección:

  1. Utiliza la interfaz de Divi para añadir una nueva sección a tu página. Puedes elegir la estructura de columna que mejor se adapte a tu diseño.

 

Añade módulos de imagen y título:

  1. Dentro de cada columna, añade un módulo de “Imagen” para representar visualmente la información de cada tarjeta.
  2. Añade un módulo de “Título” debajo de la imagen para proporcionar un encabezado breve y descriptivo.

 

Añade módulo de texto:

  1. Agrega un módulo de “Texto” debajo del título para incluir una breve descripción o información adicional sobre cada tarjeta.

 

Añade módulo de llamada a la acción (CTA):

  1. Incluye un módulo de “Llamada a la Acción” para cada tarjeta. Este módulo te permitirá agregar un botón con un mensaje persuasivo y un enlace que dirija a los visitantes a una página específica.

 

Personaliza los módulos:

  1. Ajusta el diseño y el estilo de cada módulo según tus preferencias. Puedes cambiar colores, tamaños de fuente, márgenes y otros detalles.

 

Configura fondos (opcional):

  1. Si deseas destacar aún más las tarjetas, puedes configurar fondos específicos para cada sección o columna. Divi ofrece opciones para agregar colores, gradientes, imágenes de fondo o videos.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para garantizar una experiencia coherente en diferentes dispositivos.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección de tarjetas a tu página.

 

Prueba las llamadas a la acción:

  1. Asegúrate de que los botones de llamada a la acción funcionen correctamente y dirijan a los visitantes a las páginas deseadas.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección incluye elementos multimedia. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección de tarjetas atractiva con módulos de llamada a la acción y de imagen utilizando Divi.

Este enfoque visualmente impactante puede ser efectivo para resaltar servicios, productos o características clave de tu sitio.

17.- Sección media con fondo y módulos anuncios

Crear una sección media con fondo y módulos de anuncios es una forma efectiva de destacar contenido importante en tu sitio web.

A continuación, te explico cómo puedes diseñar esta sección utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página donde deseas agregar la sección media.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección con fondo:

  1. Agrega una nueva sección y elige una estructura de columna que se adapte a tu diseño.
  2. Configura el fondo de la sección utilizando las opciones de diseño de Divi. Puedes elegir colores sólidos, gradientes, imágenes o incluso videos como fondo.

 

Añade módulos de anuncios:

  1. Dentro de la sección, añade módulos de “Texto” o “HTML” para crear tus anuncios.
  2. Incluye información promocional, enlaces, imágenes u otros elementos que desees destacar en esta sección.

 

Personaliza los módulos:

  1. Ajusta el diseño y el estilo de cada módulo para que coincida con el tono y la apariencia general de tu sitio web.
  2. Utiliza tamaños de fuente, colores y márgenes para resaltar la información clave.

 

Añade módulo de llamada a la acción (CTA) (si es necesario):

  1. Si tu sección de anuncios requiere una acción específica, como “Comprar ahora” o “Obtener más información”, añade un módulo de “Llamada a la Acción”.
  2. Configura el texto del botón y el enlace según sea necesario.

 

Configura fondos adicionales (opcional):

  1. Si deseas agregar capas visuales adicionales, puedes utilizar módulos de fondo en cada columna para resaltar aún más la sección.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para garantizar que se vea bien en diferentes tamaños de pantalla.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección de anuncios a tu página.

 

Prueba los anuncios y las llamadas a la acción:

  1. Asegúrate de que los elementos de anuncios y las llamadas a la acción funcionen correctamente y dirijan a los visitantes a las páginas deseadas.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección incluye elementos multimedia. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección media impactante con fondo y módulos de anuncios utilizando Divi.

Esta sección puede ser útil para destacar promociones, eventos o cualquier información importante que desees resaltar en tu sitio web.

18.- Sección de módulo de galería de imágenes – equipo

Crear una sección de módulo de galería de imágenes para el equipo es una forma efectiva de presentar a los miembros de tu equipo de manera visualmente atractiva.

Aquí te explico cómo puedes diseñar esta sección utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página donde deseas agregar la sección de la galería de imágenes del equipo.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección:

  1. Agrega una nueva sección y elige una estructura de columna que se adapte a tu diseño.

 

Añade un módulo de galería de imágenes:

  1. Dentro de la sección, añade un módulo de “Galería de Imágenes” de Divi.

 

Carga las imágenes del equipo:

  1. Carga las imágenes de los miembros de tu equipo en la galería. Puedes agregar títulos o descripciones si lo deseas.

 

Personaliza el diseño de la galería:

  1. Ajusta el diseño de la galería según tus preferencias. Puedes configurar el número de columnas, el espaciado entre las imágenes y otros aspectos visuales.

 

Añade módulos de texto (si es necesario):

  1. Para cada miembro del equipo, puedes añadir un módulo de “Texto” debajo de su imagen para incluir detalles como el nombre, cargo y una breve biografía.

 

Configura fondos adicionales (opcional):

  1. Si deseas agregar capas visuales adicionales, puedes utilizar módulos de fondo en cada columna para resaltar aún más la sección.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para garantizar que se vea bien en diferentes tamaños de pantalla.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección de la galería de imágenes del equipo a tu página.

 

Prueba la galería y la información del equipo:

  1. Asegúrate de que las imágenes se muestren correctamente y que la información del equipo esté formateada según tus preferencias.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección incluye muchas imágenes. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección de módulo de galería de imágenes para presentar a tu equipo de manera efectiva en tu sitio web con Divi.

Este enfoque visual puede ayudar a construir una conexión más personal con los visitantes

19.- Sección de módulos de contadores

Crear una sección de módulos de contadores es una forma efectiva de destacar cifras importantes o logros en tu sitio web.

A continuación, te explico cómo puedes diseñar esta sección utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página donde deseas agregar la sección de módulos de contadores.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección:

  1. Agrega una nueva sección y elige una estructura de columna que se adapte a tu diseño.

 

Añade módulos de contadores:

  1. Dentro de la sección, añade módulos de “Contadores” de Divi. Este módulo te permite mostrar cifras numéricas animadas.

 

Configura los contadores:

  1. Para cada módulo de contador, configura el número inicial, el número final (cifra objetivo), la velocidad de animación y otros ajustes según tus necesidades.
  2. Puedes añadir un título descriptivo o una breve descripción junto a cada contador para dar contexto a las cifras.

 

Personaliza el diseño de los contadores:

  1. Ajusta el diseño de los contadores según tus preferencias. Puedes configurar colores, tamaños de fuente, estilos y márgenes para que se integren con el diseño general de tu página.

 

Añade módulos de texto (si es necesario):

  1. Si deseas proporcionar más información o contexto sobre cada contador, puedes añadir módulos de “Texto” debajo de cada módulo de contador.

 

Configura fondos adicionales (opcional):

  1. Si deseas agregar capas visuales adicionales, puedes utilizar módulos de fondo en cada columna para resaltar aún más la sección.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para garantizar que los contadores se vean bien en diferentes tamaños de pantalla.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección de módulos de contadores a tu página.

 

Prueba los contadores:

  1. Asegúrate de que los contadores se animen correctamente y muestren las cifras deseadas.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección incluye muchos elementos animados. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección efectiva de módulos de contadores para destacar cifras clave en tu sitio web utilizando Divi.

Esta función es útil para resaltar logros, estadísticas, o cualquier dato numérico relevante para tu audiencia.

20.- Sección de módulo de galería imágenes – proyectos

Crear una sección de módulo de galería de imágenes para proyectos es una excelente manera de destacar visualmente el trabajo que has realizado.

A continuación, te explico cómo puedes diseñar esta sección utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página donde deseas agregar la sección de galería de imágenes de proyectos.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección:

  1. Agrega una nueva sección y elige una estructura de columna que se adapte a tu diseño.

 

Añade módulo de galería de imágenes:

  1. Dentro de la sección, añade un módulo de “Galería de Imágenes” de Divi.

 

Carga las imágenes de proyectos:

  1. Carga las imágenes de tus proyectos en la galería. Asegúrate de seleccionar imágenes que destaquen la calidad y diversidad de tu trabajo.

 

Personaliza el diseño de la galería:

  1. Ajusta el diseño de la galería según tus preferencias. Puedes configurar el número de columnas, el espaciado entre las imágenes y otros aspectos visuales.

 

Añade módulos de texto (si es necesario):

  1. Para cada proyecto, puedes añadir un módulo de “Texto” debajo de su imagen para incluir detalles como el nombre del proyecto, una breve descripción y enlaces adicionales.

 

Configura fondos adicionales (opcional):

  1. Si deseas agregar capas visuales adicionales, puedes utilizar módulos de fondo en cada columna para resaltar aún más la sección.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para garantizar que se vea bien en diferentes tamaños de pantalla.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección de galería de imágenes de proyectos a tu página.

 

Prueba la galería y la información de proyectos:

  1. Asegúrate de que las imágenes de los proyectos se muestren correctamente y que la información adicional esté formateada según tus preferencias.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección incluye muchas imágenes. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección efectiva de módulo de galería de imágenes para resaltar tus proyectos en tu sitio web utilizando Divi.

Esta función es útil para mostrar tu trabajo de manera visualmente atractiva.

21.- Sección de formulario contacto

Crear una sección de formulario de contacto es esencial para permitir a los visitantes ponerse en contacto contigo de manera fácil y rápida.

A continuación, te explico cómo puedes diseñar esta sección utilizando Divi:

Accede al constructor Divi:

  1. Ve a la página donde deseas agregar la sección del formulario de contacto.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Añade una sección:

  1. Agrega una nueva sección y elige una estructura de columna que se adapte a tu diseño.

 

Añade módulo de formulario de contacto:

  1. Dentro de la sección, añade un módulo de “Formulario de Contacto” de Divi.

 

Configura las opciones del formulario:

  1. Personaliza el formulario según tus necesidades. Puedes agregar campos como nombre, correo electrónico, asunto y mensaje.
  2. Ajusta las configuraciones de notificación para recibir alertas cuando se envíe un formulario.

 

Personaliza el diseño del formulario:

  1. Ajusta el diseño del formulario según tus preferencias. Divi te permite cambiar colores, tamaños de fuente y otros estilos.

 

Añade módulo de texto (si es necesario):

  1. Puedes añadir un módulo de “Texto” encima o debajo del formulario para proporcionar instrucciones adicionales o información sobre por qué los visitantes deberían ponerse en contacto.

 

Configura fondos adicionales (opcional):

  1. Si deseas agregar capas visuales adicionales, puedes utilizar módulos de fondo en cada columna para resaltar aún más la sección.

 

Diseño responsive:

  1. Asegúrate de que tu diseño sea responsive para garantizar que el formulario se vea bien en diferentes tamaños de pantalla.

 

Guarda y publica:

  1. Después de realizar los cambios, haz clic en “Guardar” y luego en “Publicar” para aplicar la sección del formulario de contacto a tu página.

 

Prueba el formulario:

  1. Asegúrate de que el formulario funcione correctamente y que puedas recibir mensajes de prueba.

 

Optimización de velocidad:

  1. Considera la optimización de la velocidad, especialmente si tu sección incluye muchos elementos. Mantén la carga del sitio eficiente.

 

Siguiendo estos pasos, podrás diseñar una sección efectiva de formulario de contacto para tu sitio web utilizando Divi. Esta sección es esencial para facilitar la comunicación con tus visitantes.

22.- Colores globales en Divi 4

Los colores globales en Divi 4 son una característica poderosa que te permite establecer una paleta de colores consistente y fácilmente modificable en todo tu sitio web.

Aquí te explico cómo puedes utilizar los colores globales en Divi 4:

Accede al constructor Divi:

  1. Ve a cualquier página de tu sitio en la que estés utilizando Divi.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Abre el personalizador de temas:

  1. En el Constructor Divi, haz clic en el ícono del menú de tres líneas en la esquina inferior izquierda y selecciona “Personalizar” para abrir el Personalizador de Temas de WordPress.

 

Accede a la configuración de colores globales:

  1. Dentro del Personalizador de Temas, busca la sección “Colores Globales”. Dependiendo de la configuración de tu tema, es posible que encuentres esta sección en diferentes lugares.

 

Configura tus colores globales:

  1. Dentro de la sección de Colores Globales, podrás establecer una paleta de colores que se aplicará de manera consistente en todo tu sitio web.
  2. Define colores para elementos como el fondo del cuerpo, encabezado, enlaces, texto y otros elementos importantes.

 

Aplica colores globales en el constructor Divi:

  1. Al diseñar páginas con el Constructor Divi, puedes aplicar los colores globales seleccionándolos directamente desde las opciones de diseño.
  2. Por ejemplo, al cambiar el color de un módulo de texto, puedes seleccionar un color global en lugar de definir un color específico. Esto garantiza la coherencia en todo el sitio.

 

Actualiza y guarda cambios:

  1. Después de configurar tus colores globales, asegúrate de hacer clic en “Guardar Cambios” en el Personalizador de Temas.

 

Prueba en diferentes páginas:

  1. Asegúrate de revisar diferentes páginas de tu sitio para confirmar que los colores globales se aplican de manera consistente.

 

Optimización de estilos:

  1. Considera la optimización de estilos, especialmente si estás utilizando CSS personalizado. Los colores globales facilitan la gestión de estilos en todo el sitio.

 

Colores globales en módulos:

  1. Además de aplicar colores globales en el Constructor Divi, también puedes utilizar colores globales directamente en la configuración de módulos.

 

Al utilizar colores globales en Divi 4, simplificas la gestión de la apariencia de tu sitio web al permitir cambios rápidos y coherentes en toda la paleta de colores. Esta característica es particularmente útil para mantener la coherencia visual y facilitar futuras actualizaciones de diseño

23.- Retoques finales con CSS

Los retoques finales con CSS te permiten personalizar y perfeccionar detalles específicos de tu diseño en Divi.

Aquí tienes algunas pautas sobre cómo realizar retoques finales con CSS en Divi:

Accede al personalizador de temas:

  1. Ve a cualquier página de tu sitio en la que estés utilizando Divi.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.
  3. Luego, selecciona “Personalizar” para abrir el Personalizador de Temas de WordPress.

 

Navega a la sección de CSS adicional:

  1. Dentro del Personalizador de Temas, busca la sección que proporciona la opción para añadir CSS adicional. En Divi, esta sección suele llamarse “Opciones de Tema” y luego “Avanzado” o algo similar.

 

Utiliza selectores específicos:

  1. Para realizar retoques finales, utiliza selectores específicos en tu CSS. Puedes identificar los elementos utilizando inspección de elementos en tu navegador web (clic derecho en la página y selecciona “Inspeccionar” o “Inspeccionar elemento”).

 

Ejemplos de retoques finales:

Ajuste de márgenes y relleno:

ajuste márgenes

 

Cambio de estilos de texto:

cambios estilo texto

 

Estilos de fondo y borde:

estilos fondo y borde

 

Prueba y ajusta:

  1. Después de agregar tu CSS, guarda los cambios y visualiza tu sitio para asegurarte de que los ajustes finales se apliquen como se esperaba.
  2. Ajusta según sea necesario.

 

Optimización responsiva:

  1. Asegúrate de que tus ajustes CSS sean responsivos para que funcionen en diferentes tamaños de pantalla.

 

Documentación y respaldo:

  1. Documenta tus cambios CSS y realiza respaldos periódicos. Esto facilita futuras actualizaciones y ajustes.

 

Validación de CSS:

  1. Utiliza herramientas de validación de CSS para asegurarte de que tu código sea correcto.

 

Al realizar retoques finales con CSS en Divi, puedes personalizar cada detalle de tu diseño para que se ajuste perfectamente a tus necesidades.

Recuerda siempre hacer cambios de manera cautelosa y probar en diferentes dispositivos para garantizar la coherencia visual.

24.- Cómo utilizar el Modo Seguro en Divi 4

El Modo Seguro en Divi 4 es una función útil que te permite desactivar temporalmente los estilos y scripts personalizados para solucionar problemas de visualización o conflicto con tu diseño.

Aquí te explico cómo utilizar el Modo Seguro en Divi 4:

Accede al constructor Divi:

  1. Ve a la página en la que estás trabajando con Divi.
  2. Haz clic en el botón “Habilitar el Constructor Divi” en la parte superior de la pantalla.

 

Activa el modo seguro:

  1. En la parte inferior del Constructor Divi, encontrarás un enlace llamado “Opciones del Tema”. Haz clic en ese enlace para abrir las configuraciones del tema.

 

Navega a la pestaña “Soporte”:

  1. Dentro de las opciones del tema, busca la pestaña llamada “Soporte”.

 

Activa el modo seguro:

  1. En la pestaña “Soporte”, encontrarás una opción llamada “Modo Seguro”. Activa esta opción.

 

Guarda los cambios:

  1. Después de activar el Modo Seguro, asegúrate de hacer clic en “Guardar Cambios” para aplicar la configuración.

 

Visualiza la página:

  1. Ahora, visualiza la página en la que estás trabajando. Divi desactivará temporalmente los estilos y scripts personalizados.

 

Identifica problemas de visualización:

  1. Observa si el problema que estás experimentando desaparece. Si es así, es probable que el problema esté relacionado con tu personalización de estilos o scripts.

 

Realiza ajustes:

  1. Si el problema desaparece en el Modo Seguro, es hora de revisar tus personalizaciones de CSS o scripts. Puedes ir desactivando cambios uno por uno para identificar la fuente del problema.

 

Desactiva el modo seguro:

  1. Una vez que hayas identificado y solucionado el problema, puedes desactivar el Modo Seguro y guardar los cambios.

 

Guarda y publica:

  1. Después de realizar los ajustes necesarios, guarda y publica los cambios para que se apliquen a tu sitio.

 

Optimización responsiva:

  1. Asegúrate de que tus ajustes sean responsivos para que funcionen en diferentes tamaños de pantalla.

 

El Modo Seguro en Divi es una herramienta valiosa para solucionar problemas de diseño y conflictos con facilidad. Al permitirte aislar los estilos y scripts, puedes identificar y resolver problemas de manera más eficiente

25.- Opciones para añadir código CSS en Divi 4

En Divi 4, hay varias opciones para añadir código CSS a tu sitio web. Puedes utilizar estas opciones para personalizar y ajustar el diseño de tu página según tus necesidades.

Aquí te explico algunas de las opciones disponibles:

Personalizador de temas:

  1. Accede al Personalizador de Temas de WordPress.
  2. Busca la sección que proporciona la opción para añadir CSS adicional. En Divi, esto suele encontrarse en “Opciones de Tema” y luego “Avanzado” o algo similar.
  3. Añade tu código CSS en el campo proporcionado.

 

Configuración de módulo o sección:

  1. En el Constructor Divi, al editar un módulo o sección, puedes encontrar una pestaña llamada “Avanzado”.
  2. Dentro de la pestaña “Avanzado”, busca la sección “CSS Personalizado” donde puedes añadir tu código CSS específico para ese módulo o sección.

 

Divi > opciones del tema > integración:

  1. En el menú de administración de WordPress, ve a “Divi” y luego a “Opciones del Tema”.
  2. Dentro de las opciones del tema, busca la pestaña “Integración”.
  3. En la sección “Añadir código a la cabecera”, puedes agregar código CSS que se aplicará a todo el sitio.

 

Divi > opciones del tema > código personalizado:

  1. En las “Opciones del Tema” de Divi, también puedes encontrar una pestaña llamada “Código Personalizado”.
  2. Aquí, puedes añadir código CSS en los campos proporcionados para el encabezado y el cuerpo del sitio.

 

Divi > opciones del constructor Divi > generales:

  1. En las “Opciones del Constructor Divi”, dentro de “Generales”, puedes encontrar un campo llamado “Campo CSS personalizado”.
  2. Este campo te permite agregar código CSS que se aplicará en todo el Constructor Divi.

 

Personalizar > CSS adicional:

  1. En el Personalizador de WordPress, puedes ir a “Personalizar” y luego encontrar una sección llamada “CSS Adicional”.
  2. Aquí, puedes agregar código CSS que se aplicará a todo el sitio.

 

Plugins de CSS personalizado:

  1. Puedes utilizar plugins específicos de WordPress que te permiten añadir código CSS personalizado. Algunos plugins populares incluyen “Simple Custom CSS” y “SiteOrigin CSS”.

 

Recuerda seguir mejores prácticas al añadir código CSS, como realizar cambios de manera cautelosa, documentar tus ajustes y respaldar tu sitio antes de realizar cambios significativos.

Además, considera la optimización para dispositivos móviles al aplicar personalizaciones.

26.- Añadir efectos de scroll en Divi 4

Añadir efectos de scroll en Divi 4 puede mejorar la interactividad y el atractivo visual de tu sitio web. Divi facilita la incorporación de efectos de scroll mediante su constructor intuitivo.

Aquí tienes algunas opciones que puedes explorar:

Efectos de desplazamiento en módulos:

  1. Al editar un módulo en el Constructor Divi, puedes ir a la pestaña “Diseño” y luego “Avanzado”.
  2. Dentro de la pestaña “Avanzado”, busca la sección “Desplazamiento”.
  3. Aquí encontrarás opciones para añadir efectos de desplazamiento, como desvanecimiento, rotación, escalado, etc.

 

Añadir clases de animación:

  1. En la pestaña “Avanzado” de cualquier módulo, puedes añadir clases CSS personalizadas en la sección “Avanzado” y luego “Opciones de Animación”.
  2. Luego, puedes añadir código CSS personalizado utilizando estas clases para aplicar efectos de scroll específicos.

 

Uso de scripts de javaScript personalizados:

  1. Puedes utilizar scripts de JavaScript personalizados para crear efectos de scroll más avanzados.
  2. Añade tu script personalizado a través de la sección “Integración” en las “Opciones del Tema” de Divi o utilizando un plugin específico para añadir scripts personalizados.

 

Uso de plugins de desplazamiento:

  1. Hay plugins de WordPress que permiten añadir efectos de scroll fácilmente. Uno de ellos es “Divi Scroll Effects” que proporciona opciones adicionales para animaciones de scroll.
  2. Ejemplo de Efecto de Scroll con CSS y JavaScript:
  3. Si deseas crear un efecto de scroll personalizado utilizando CSS y JavaScript, puedes seguir estos pasos:

 

Añade una clase CSS a un módulo:

  1. En el módulo al que deseas aplicar el efecto de scroll, ve a la pestaña “Avanzado” y añade una clase personalizada, por ejemplo, “mi-movimiento-scroll”.

 

Añade el CSS para la animación:

  1. En “Opciones de Tema” > “Personalizador” > “CSS Adicional”, puedes añadir el siguiente código CSS:

curso-sobre-divi-codigo-css

 

Añade el JavaScript para el efecto de scroll:

  1. Añade el siguiente script JavaScript al área de “Integración” > “Código en el Cuerpo” en las “Opciones del Tema”:

 

Ajusta las Clases CSS y JavaScript según tus necesidades:

  1. Personaliza las clases, propiedades CSS y configuraciones JavaScript según el efecto específico que deseas lograr.

 

Estos son solo ejemplos generales, y puedes ajustarlos según tus necesidades específicas. Recuerda siempre probar en diferentes dispositivos para garantizar una experiencia de usuario coherente

27.- Cómo utilizar las posiciones fijas en Divi 4

Utilizar posiciones fijas en Divi 4 es una excelente manera de crear elementos que permanecen en una ubicación específica de la página incluso cuando el usuario hace scroll.

Aquí te explico cómo puedes lograr esto:

Aplicar posición fija a un módulo:

  1. Al editar un módulo en el Constructor Divi, ve a la pestaña “Avanzado”.
  2. En la sección “Ubicación”, puedes establecer la posición del módulo como “Fijo”.

 

Configurar propiedades de posición fija:

  1. Después de seleccionar la posición fija, se abrirán opciones adicionales.
  2. Puedes establecer la posición (arriba, abajo, izquierda, derecha) y la distancia desde el borde de la ventana del navegador.

 

Añadir CSS personalizado para ajustes adicionales:

  1. Si necesitas realizar ajustes más detallados, puedes añadir CSS personalizado. Ve a la sección “Avanzado” del módulo y busca la opción “CSS Personalizado”.
  2. Aquí puedes añadir reglas CSS específicas para la posición fija, como z-index, anchura máxima, etc.
  3. Ejemplo de Uso de Posición Fija:
  4. Supongamos que deseas tener un botón de “Volver al Principio” que permanece fijo en la esquina inferior derecha de la página mientras haces scroll.
  5. Añade un módulo de botón: Añade un módulo de botón al área donde deseas que aparezca el botón.
  6. Configura la posición fija: En la pestaña “Avanzado” del módulo de botón, encuentra la sección “Ubicación”. Selecciona “Fijo” y ajusta la posición según tu preferencia. Por ejemplo, puedes establecerlo en la esquina inferior derecha.
  7. Ajusta propiedades adicionales si es necesario: Si necesitas ajustar más propiedades, como el color de fondo o el tamaño del botón, puedes hacerlo en las opciones del módulo o añadiendo CSS personalizado.
  8. Guarda y publica: Después de realizar los cambios, guarda y publica para que los ajustes se apliquen.
  9. Prueba el efecto de posición fija: Visualiza la página y haz scroll para asegurarte de que el botón permanezca fijo en su posición.

 

Este es solo un ejemplo, y puedes aplicar posiciones fijas a varios elementos según tus necesidades de diseño. Experimenta con las opciones disponibles en Divi y ajusta según tus preferencias.