Full Divi 5 Course

Introducción a DV5

Presentación del curso

• El creador menciona que el constructor de páginas DV5 ha sido desarrollado desde cero y promete características impresionantes en el futuro.

• Se destaca que este video será un curso completo sobre cómo usar DV5, especialmente para aquellos que no han utilizado versiones anteriores como DV4.

Creación de un nuevo sitio web

• Se utiliza un servicio llamado Zip WP para crear sitios web de WordPress rápidamente.

• El presentador crea un nuevo sitio titulado "DV5 Course" y lo configura como permanente.

Instalación de DV5

Proceso de instalación

• Después de iniciar sesión, se realiza una limpieza del panel de control de WordPress para facilitar la navegación.

• Se procede a instalar DV5 subiendo el archivo correspondiente desde la carpeta de descargas.

Activación y configuración inicial

• Se activa DV5 y se recuerda que esta versión es rápida y está en fase alfa, con planes para pasar a beta pronto.

• Es necesario iniciar sesión para activar la licencia y asegurarse de tener las últimas actualizaciones disponibles.

Creación y configuración de páginas

Añadiendo nuevas páginas

• Se comienza a añadir nuevas páginas al sitio, comenzando por la página principal (homepage).

• La página se publica sin contenido inicial, utilizando el constructor D Builder.

Ajustes en la interfaz del constructor

• Se habilita la barra administrativa para facilitar la navegación entre diferentes funciones sin salir del constructor.

• Se discuten opciones adicionales como cambiar entre modos de vista (escritorio o wireframe), aunque se decide mantener el modo escritorio por ahora.

Configuraciones finales antes del diseño

Preparativos previos al diseño

• El presentador explica que WordPress establece por defecto los sitios como blogs, lo cual no es deseado en este caso.

• Se planea eliminar texto predeterminado e insertar contenido personalizado utilizando módulos dentro del constructor.

Uso eficiente del módulo

• Al agregar texto mediante módulos, se muestra cómo buscar eficientemente los elementos necesarios dentro del constructor.

Introducción a la Interfaz de Diseño

Área Principal del Lienzo

• La área principal del lienzo es donde se seleccionan todos los elementos en los que se está trabajando. Se destaca que esta interfaz es diferente a la versión anterior (dv4).

Pestañas de Contenido y Estilo

• La primera pestaña es para agregar contenido, mientras que la segunda pestaña, dedicada al diseño, permite ajustar colores, estilos de fuente y tamaños.

• En la pestaña de estilo se pueden modificar encabezados, espaciado, bordes y sombras. Es importante recordar que esta pestaña es exclusivamente para el estilizado.

Funciones Avanzadas

• La última pestaña permite agregar ID y clases CSS personalizadas. También incluye condiciones específicas para el módulo seleccionado.

• Se pueden establecer presets basados en el diseño realizado previamente en el módulo.

Biblioteca y Capas

Acceso a Diseños Predefinidos

• Al hacer clic en el botón "+" se ofrecen opciones para construir un diseño prehecho o utilizar uno guardado.

• La biblioteca contiene una amplia variedad de diseños categorizados; por ejemplo, se puede buscar específicamente por "Arte y Diseño".

Gestión de Capas

• El panel de capas proporciona una vista clara de la estructura del diseño: sección, fila, columna y texto.

• Esta función ayuda a identificar rápidamente qué elemento se está editando si hay desorden en el diseño.

Herramientas Adicionales

Vista Wireframe y Acciones Rápidas

• Aunque existe una vista wireframe para quienes usaron dv4 anteriormente, no es necesaria ya que la experiencia visual actual es más intuitiva.

• Las acciones rápidas aparecen al pasar el cursor sobre los elementos; esto incluye opciones como eliminar o duplicar filas.

Activación del Modo X-ray

• El modo X-ray muestra las líneas guía durante el diseño, facilitando ver dónde terminan los elementos en la página.

Visualización Multidispositivo

Vistas Adaptativas

• Se pueden activar diferentes vistas (tablet, móvil), lo cual permite diseñar con precisión según cada dispositivo.

Modo Dock y Exportación

• Existe un modo dock para trabajar con múltiples ventanas abiertas; sin embargo, algunos prefieren no usarlo. Además, hay opciones para exportar todo el diseño creado.

Guía para Personalizar Diseño en Divi

Importación y Configuración Inicial

• Para importar un diseño, se puede utilizar la opción de "next" y eliminar el diseño actual si es necesario. También se puede guardar el diseño en la biblioteca local o en DCloud.

• Al salir del editor, se pueden guardar los cambios y previsualizar el diseño. Es importante ajustar la tipografía desde el panel de personalización.

Ajustes de Tipografía

• Accede al panel de "apariencia" y selecciona "personalizar". Aquí puedes realizar cambios generales y obtener una vista previa del texto.

• Es esencial conocer con anticipación las fuentes que deseas usar. Se pueden elegir fuentes de Google para encabezados y definir colores para el texto del cuerpo y enlaces.

Uso de Guías de Estilo

• Se compartirá una guía de estilo llamada "Popins e Inter", que se puede descargar desde un enlace en la descripción del video. Esta guía facilitará la configuración inicial.

• La guía incluye dos archivos; uno es necesario para instalarlo correctamente. Se debe arrastrar este archivo a la sección correspondiente para importarlo.

Ahorro de Tiempo en Configuraciones

• Al importar configuraciones personalizadas, se ahorra tiempo al establecer todos los ajustes necesarios para las fuentes, evitando ajustes manuales posteriores.

• La guía asegura que todas las fuentes estén configuradas adecuadamente desde el principio, lo cual es especialmente útil para diseñadores novatos.

Edición Rápida y Vista Previa

• Una vez aplicados los cambios, se puede editar una página existente con Divi Builder. Los textos ya estarán ajustados sin necesidad de modificaciones adicionales.

• Al cambiar estilos a encabezados (H1, H2, H3), no será necesario ajustar tamaños manualmente gracias a la guía de estilo previamente instalada.

Creación de Páginas Adicionales

• Se sugiere crear una nueva página llamada "Guía de Estilo". Esto permite tener un documento visual que muestre cómo lucen los elementos diseñados.

• Al importar nuevamente usando Divi Builder, todos los colores globales estarán disponibles para ser modificados fácilmente a través del sitio web durante el proceso de diseño.

Cómo configurar la página de inicio y diseñar un sitio web

Configuración de la Página de Inicio

• Se necesita establecer la página principal como la página de inicio. Actualmente, al hacer clic en el logo, se redirige a una página no deseada.

• Para cambiar esto, se accede a "Ajustes" y luego a "Lectura", donde se selecciona "Página estática" y se establece como "Inicio".

Diseño del Sitio Web

• Una vez configurada la página de inicio, se habilita el constructor para comenzar a diseñar. Se pueden agregar bloques de construcción fácilmente.

• Los encabezados de ancho completo son cruciales ya que cubren el área principal del sitio web. Se puede arrastrar y soltar para organizar los elementos.

Personalización del Encabezado

• Es importante ajustar el diseño y el layout; se puede centrar o hacer pantalla completa. Esto permite añadir imágenes de fondo y más estilos.

• Al seleccionar colores globales, es esencial asegurarse de que todos los colores estén en la guía de estilo para mantener coherencia visual.

Agregar Imágenes al Diseño

• Para añadir una imagen al encabezado, se debe acceder a la biblioteca multimedia. Se seleccionan las imágenes deseadas para su uso.

• Es recomendable usar un overlay (superposición) con un color contrastante para mejorar la visibilidad del texto sobre las imágenes.

Ajuste del Tamaño y Visualización Móvil

• El tamaño del contenido debe ajustarse adecuadamente; por ejemplo, reducir el ancho al 44% mejora la presentación visual.

• Es fundamental revisar cómo se ve en diferentes dispositivos móviles; ajustes específicos deben hacerse para tabletas e iPhones.

Guardar Cambios y Continuar Diseñando

• Después de realizar ajustes satisfactorios en el diseño, es momento de guardar los cambios antes de continuar añadiendo columnas u otros elementos al diseño.

Cómo utilizar presets en diseño web

Introducción a los Presets

• Los presets son herramientas clave para acelerar el proceso de diseño de sitios web, permitiendo crear layouts rápidamente.

• Se comienza con un layout de dos columnas y se añade un "blurb", que es un elemento común en el diseño.

Ajustes Iniciales del Diseño

• Se sugiere añadir un título al "blurb" y ajustar el texto para que sea más conciso.

• La elección entre usar una imagen o un ícono es crucial; se opta por una imagen para iniciar el diseño.

Personalización del Estilo

• Es recomendable usar colores claros como fondo (ej. F9F9F9) y ajustar los márgenes (padding) para dar espacio visual.

• Se puede agregar un borde sutil al "blurb" para mejorar la estética general del diseño.

Creación y Uso de Presets

• Una vez satisfecho con el diseño, se puede guardar como preset seleccionando "crear nuevo preset desde estilos actuales".

• Es importante nombrar adecuadamente los presets, lo que facilita su identificación futura.

Duplicación y Eficiencia en el Diseño

• Para diseños similares, se puede duplicar elementos existentes, lo cual ahorra tiempo en la creación de nuevos componentes.

• Asegurarse de que las imágenes tengan tamaños uniformes evita espacios no deseados entre ellas.

Interactividad en Elementos

• Para hacer clicables los elementos diseñados, se debe añadir un enlace a cada módulo correspondiente.

• Al actualizar la vista previa después de agregar enlaces, se verifica que los elementos sean interactivos correctamente.

Añadiendo Nuevas Secciones

• Para continuar con el diseño, se utiliza el botón "+" para agregar nuevas secciones; aquí también se recomienda usar fondos claros.

• La adición rápida de módulos como imágenes y textos mejora la eficiencia del proceso creativo.

Cómo diseñar botones y efectos de hover en Dy

Diseño de texto y botones

• Se muestra cómo seleccionar texto que comienza con "t" o contiene "T", facilitando el diseño sin necesidad de ajustar tamaños manualmente, lo que ahorra tiempo.

• Se establece un encabezado principal (heading three) y se menciona la adición de un botón como llamada a la acción, destacando la selección del estilo del botón.

• Se selecciona un nuevo estilo para el botón, utilizando colores globales para definir el color de fondo y el texto del botón.

Personalización del botón

• El color del texto del botón se cambia a blanco para mejorar la visibilidad; también se puede agregar un ícono si es necesario.

• Se ajustan los márgenes (espaciado superior e inferior a 12px, izquierdo y derecho a 28px) para hacer el botón más grande.

• Se elimina el borde no deseado del botón y se decide si mantener o quitar un ícono.

Efectos de hover

• Activación del modo hover para añadir efectos visuales al pasar el cursor sobre elementos; se selecciona un color de fondo oscuro para este efecto.

• Los colores del texto deben ser más claros al aplicar el efecto hover, asegurando una buena legibilidad sobre fondos oscuros.

• Guardar cambios permite verificar si los ajustes funcionan correctamente antes de continuar con otros elementos.

Actualización de estilos

• Es necesario actualizar los presets después de realizar cambios en los estilos para asegurar que todos los elementos nuevos adopten las configuraciones correctas.

• Al refrescar la página, se observa que los nuevos efectos hover funcionan correctamente en todos los elementos diseñados hasta ahora.

Navegación avanzada en Dy

• La interfaz es intuitiva y facilita encontrar controles; sin embargo, se busca crear encabezados personalizados debido a la falta de uno por defecto en el diseño actual.

• Para construir encabezados o pies de página personalizados, es necesario salir del modo actual y acceder al Theme Builder dentro de Dy.

Creación de un Encabezado Global

Diseño del Encabezado

• Se inicia el proceso de diseño del encabezado seleccionando bloques de construcción que son similares a los elementos del frontend del sitio web.

• Es crucial agregar el logo del sitio; se debe seleccionar la opción "logo del sitio" para asegurarse de que se reemplace correctamente.

• Ajustar el tamaño del logo es importante; se recomienda reducir el ancho hasta un 16% o según las necesidades específicas.

Configuración y Estilo

• Se establece un fondo claro para facilitar la visualización durante el diseño, lo cual ayuda a ver mejor los cambios realizados.

• Se ajusta el espaciado y padding al 1% para evitar que el encabezado sea demasiado grande, mejorando así su apariencia general.

Personalización Final

• La transparencia en el fondo se aplica para dar un efecto más limpio al encabezado, permitiendo que tome forma adecuada.

• Se realizan ajustes en la tipografía, haciendo que el texto sea semi-negrita y alineándolo a la derecha para una presentación más clara.

Guardar Cambios y Visualización

Revisión del Encabezado

• Después de realizar todos los ajustes necesarios, se guarda y se sale de la configuración. Al refrescar la página, se observa cómo aparece el nuevo encabezado global.

Problemas Potenciales

• A veces puede ser necesario ingresar manualmente el logo si no aparece automáticamente; esto no representa un gran inconveniente.

Personalización Tipográfica

Cambios en Tipografía

• Para cambiar las fuentes utilizadas en los encabezados, es necesario ir a "apariencia" y luego a "personalizar", donde se pueden ajustar configuraciones generales como tipografía.

Creación de un Pie de Página Global

Diseño Inicial del Pie de Página

• Comienza la creación del pie de página global seleccionando entre opciones claras o oscuras; generalmente se prefiere un fondo oscuro.

Agregar Elementos al Pie de Página

• Se añade un módulo de texto rápidamente sin necesidad de escribir mucho, facilitando así la inclusión rápida de enlaces relevantes.

• Los enlaces añadidos representan diferentes páginas dentro del sitio web; cada enlace debe ser configurado adecuadamente para asegurar su funcionalidad.

Cómo personalizar el pie de página en DV5

Personalización de enlaces y colores

• Se menciona la importancia de los enlaces en el pie de página, sugiriendo que son una forma rápida de conectar con otras páginas.

• Se puede cambiar el color del texto de los enlaces para mejorar su visibilidad; se recomienda usar un color negro para que sean claramente identificables como enlaces.

• A veces, después de guardar cambios, es necesario salir y volver a cargar la página para ver las actualizaciones en el pie de página.

Solución a problemas y duplicación

• Se identifica un posible error en DV5 donde los elementos no resaltan correctamente al pasar el cursor sobre ellos, pero se asegura que los enlaces funcionan adecuadamente.

• Para acelerar el desarrollo del pie de página, se sugiere duplicar configuraciones existentes varias veces y ajustar según sea necesario.

Uso de texto dinámico

• Se introduce cómo utilizar texto dinámico al agregar un título; se establece como "encabezado tres" para mantener la jerarquía adecuada.

• El pie de página comienza a tomar forma con opciones adicionales como agregar un inicio de sesión o incluir el año actual.

Configuración del encabezado fijo

• Para hacer que un encabezado sea "fijo", se debe acceder a la configuración avanzada y activar la opción correspondiente.

• Al refrescar la página después de realizar estos cambios, se observa que el encabezado ahora permanece en la parte superior al desplazarse hacia abajo.

Implementación SEO en tu sitio web

Instalación del plugin SEO

• Para optimizar SEO, es necesario instalar un plugin; se recomienda "SEO Press" por sus múltiples características útiles.

• Es importante salir del constructor antes de añadir información SEO para poder acceder a todas las configuraciones necesarias.

Añadiendo títulos y descripciones

• En la sección principal, se debe establecer un título claro (ej. "Curso completo DV") que aparecerá en Google como parte del snippet.

• La descripción meta también debe ser coherente con el título; cada página necesita tener tanto título como descripción para una correcta indexación.

Análisis y optimización continua

• El plugin analizará automáticamente elementos como encabezados y etiquetas meta para asegurar que todo esté optimizado correctamente.

• Se enfatiza la importancia de ingresar palabras clave objetivo adecuadas para mejorar aún más la visibilidad en motores de búsqueda.

¿Cómo mejorar el análisis de tu sitio web en DV?

Mejora del Análisis

• Al revisar el análisis, se indica que hay varias áreas que necesitan mejoras, como los encabezados. Específicamente, no se encuentran palabras clave en el encabezado tres y se requiere trabajo adicional para optimizarlo.

• Se menciona la importancia de no estar en el constructor real al implementar cambios en DV, ya que esto puede afectar la visualización de las modificaciones.

Funcionalidades Adicionales

• Además de lo cubierto sobre la interfaz y los efectos hover, se sugiere considerar agregar funcionalidades adicionales a tu sitio web DV, como seguridad y formularios mediante plugins.

Recursos Adicionales

• Se ofrece una guía de estilo gratuita para descargar y utilizar inmediatamente. También se invita a los espectadores a seguir más tutoriales sobre DV5 en D university.com y a unirse a la comunidad gratuita para diseñadores de DV.