Constructores Visuales de WordPress

Gracias a los videotutoriales de David Ibiza vamos a explicar el funcionamiento y la configuración de Divi. Puedes ver el curso entero aquí:

https://www.davidibiza.com/curso-divi-3-0-2/

Instalación de Divi Configurar Opciones Personalización constructor Módulos

Instalación del Tema:

Se instala igual que un tema de wordpress aunque lleva unas herramientas de configuración distintas como vemos en el video.

Configuración de las opciones:

Divi viene completamente cargado con sus propias opciones de tema personalizado. Aquí es donde puede controlar cosas como su logotipo, la configuración de navegación y mucho más. Se puede acceder a estas opciones en el menú del Panel de WordPress en Divi> Opciones de tema .

Configuración general

Logo

Aquí es donde puede cargar su propio archivo de logotipo para que aparezca en el encabezado de cada página de su sitio web.

Barra de navegación fija

La barra de navegación fija se refiere a la barra de navegación a medida que se fija en la parte superior de la pantalla al desplazarse hacia abajo en la página. La barra de menú también se reducirá ligeramente al desplazarse para proporcionar un espacio de pantalla más legible. Por defecto, la barra de navegación está habilitada.

Habilitar Galería Divi

El cargador de medios de WordPress contiene una función Crear galería que le permite agregar galerías de imágenes simples a sus páginas o publicaciones. Habilite esta opción si desea reemplazar el estilo predeterminado de la galería de WordPress con el estilo de la galería Divi.

Selectores de color Paleta predeterminada

Aquí es donde puede cambiar la paleta de colores predeterminada para todos los selectores de color dentro de Divi Builder y Visual Builder. Puede configurar todos los colores necesarios para personalizar su tema aquí para que estos mismos colores estén disponibles durante todo el proceso de construcción.

Toma la primera imagen de la publicación

Por defecto, las imágenes en miniatura se crean utilizando campos personalizados. Sin embargo, si prefiere usar las imágenes que ya están en su publicación para su miniatura (y omitir el uso de campos personalizados), puede activar esta opción. Una vez activadas, las imágenes en miniatura se generarán automáticamente utilizando la primera imagen en su publicación. La imagen debe estar alojada en su propio servidor.

Modo de estilo de blog

Por defecto, el tema trunca tus publicaciones en el índice / páginas de inicio automáticamente para crear vistas previas de publicaciones. Si prefiere mostrar sus publicaciones completas en páginas de índice como un blog tradicional, puede activar esta función.

Diseño de página de página y categoría de tienda para WooCommerce

Si va a utilizar la integración de WooCommerce, puede definir qué diseño desea que use su tienda en las páginas de productos y categorías de productos.

Clave API de Google

El módulo Maps utiliza la API de Google Maps y requiere una clave de API de Google válida para funcionar. Antes de usar el módulo de mapa, asegúrese de haber agregado su clave API aquí. Obtenga más información sobre cómo crear su clave de API de Google aquí .

Enqueue Google Maps Script

Deshabilite esta opción para eliminar el script API de Google Maps de sus páginas Divi Builder. Esto puede mejorar la compatibilidad con complementos de terceros que también ponen en cola este script.

Tenga en cuenta que los módulos que dependen de la API de Google Maps para funcionar correctamente, como los módulos Maps y Fullwidth Maps, seguirán estando disponibles, pero no funcionarán mientras esta opción esté desactivada (a menos que agregue manualmente la secuencia de comandos API de Google Maps).

Iconos de redes sociales

Divi coloca sus enlaces de redes sociales dentro de su pie de página. Aquí puede controlar qué iconos de redes sociales desea mostrar y dónde desea que se vinculen.

Número de productos que se muestran en las páginas de archivo de WooCommerce

Aquí puede designar cuántos productos de WooCommerce se muestran en la página de archivo. Esta opción funciona independientemente de la Configuración> Opciones de lectura en wp-admin.

Número de publicaciones por página.

Defina cuántas publicaciones desea que se muestren cuando un usuario visita una página de categoría, una página de archivo, una página de resultados de búsqueda o una página de etiquetas.

Formato de fecha

Esta opción le permite cambiar cómo se muestran sus fechas. Para obtener más información, consulte el códice de WordPress aquí: http://codex.wordpress.org/Formatting_Date_and_Time

Utilice extractos cuando se define

Esto permitirá el uso de extractos en publicaciones o páginas.

Shortcodes receptivos

Esta opción permite que los códigos cortos respondan a varios tamaños de pantalla

Subconjuntos de fuentes de Google

Esto habilitará Google Fonts para idiomas que no sean inglés.

Volver al botón superior

Esto le da la opción de mostrar un botón Volver arriba (en la parte inferior derecha de su página) mientras se desplaza.

Desplazamiento suave

Esto permitirá el desplazamiento suave con la rueda del mouse. Smooth Scrolling también es especialmente útil cuando se usan enlaces de anclaje para enlazar a áreas específicas de la página.

CSS personalizado

Aquí es donde puede ingresar cualquier CSS personalizado para personalizar su sitio. Para modificaciones extensas de CSS, recomendamos que siempre use un tema secundario.

Navegación> Páginas

Excluir páginas de la barra de navegación

Todas sus páginas existentes aparecerán en esta ventana. Cada página nueva aparecerá en su navegación por defecto. Puede desmarcar cualquier página aquí si no desea mostrar una página o páginas específicas.

Mostrar menús desplegables

Si desea eliminar los menús desplegables de la barra de navegación de la página, desactive esta función.

Mostrar enlace de inicio

De forma predeterminada, el tema crea un enlace de Inicio que, cuando se hace clic en él, conduce de nuevo a la página de inicio de su blog. Sin embargo, si está utilizando una página de inicio estática y ya ha creado una página llamada Inicio para usar, esto generará un enlace duplicado. En este caso, debe desactivar esta función para eliminar el enlace.

Ordenar páginas Enlaces

Elija cómo se deben ordenar los enlaces de la página aquí.

Ordenar enlaces de página por ascendente / descendente

Además, especifique en qué orden deben aparecer sus enlaces de página ordenados.

Número de lágrimas de suspenso mostradas

Esta opción le permite controlar cuántos niveles tiene el menú desplegable de su página. Aumentar el número permite mostrar elementos de menú adicionales.

Navegación> Categorías

Excluir categorías de la barra de navegación

Todas sus categorías existentes aparecerán en esta ventana. Cada categoría nueva aparecerá en su navegación de forma predeterminada. Puede desmarcar cualquier página de categoría aquí si no desea mostrar una categoría o categorías específicas.

Mostrar menús desplegables

Si desea eliminar los menús desplegables de la barra de navegación de categorías, desactive esta función.

Ocultar categorías vacías

Si se ha creado una categoría pero ninguna publicación la está utilizando, puede elegir si desea mostrarla o no en su navegación. Por defecto, las categorías vacías están ocultas.

Número de lágrimas de suspenso mostradas

Esta opción le permite controlar cuántos niveles tiene el menú desplegable de su página. Aumentar el número permite mostrar elementos de menú adicionales.

Ordenar enlaces de categoría

Elija cómo se deben ordenar los enlaces de categoría aquí.

Ordenar enlaces de categoría por ascendente / descendente

Además, especifique en qué orden deben aparecer los enlaces de categoría ordenados.

Navegación> General

Deshabilitar los enlaces del menú desplegable de nivel superior

En algunos casos, los usuarios querrán crear categorías o enlaces principales como marcadores de posición para mantener una lista de enlaces o categorías secundarias. En este caso, no es deseable que los enlaces principales conduzcan a ningún lado, sino que simplemente cumplen una función organizativa. Al habilitar estas opciones, se eliminarán los enlaces de todas las páginas / categorías principales para que no conduzcan a ningún lado al hacer clic.

Método alternativo de desplazamiento a anclaje

A veces, cuando se utiliza el ID de CSS de una sección para vincular directamente desde otra página, la posición de desplazamiento final de la página puede ser inexacta. Habilite esta opción para usar un método alternativo para desplazarse a los anclajes que puede ser más preciso que el método predeterminado en algunos casos.

opciones de diseño

Diseño de publicación única

Elija qué elementos mostrar en la sección de información de la publicación

Aquí puede elegir qué elementos aparecerán en la sección de información de la publicación en páginas de publicación única. Esta es el área, generalmente debajo del título de la publicación, que muestra información básica sobre su publicación. Aparecerán los elementos resaltados que se muestran a continuación.

Mostrar comentarios en publicaciones

Puede deshabilitar esta opción si desea eliminar los comentarios y el formulario de comentarios de las páginas de publicación individuales.

Colocar pulgares en las publicaciones

Por defecto, las miniaturas se colocan al comienzo de su publicación en páginas de publicación única. Si desea eliminar esta imagen en miniatura inicial para evitar la repetición, simplemente desactive esta opción.

Diseño de página única

Colocar pulgares en las páginas

Por defecto, las miniaturas no se colocan en las páginas (solo se usan en las publicaciones). Sin embargo, si quieres usar miniaturas en las publicaciones, ¡puedes hacerlo! Solo habilita esta opción.

Mostrar comentarios en páginas

De forma predeterminada, los comentarios no se colocan en las páginas, sin embargo, si desea permitir que las personas comenten en sus páginas, simplemente habilite esta opción.

Configuración general de diseño

Sección de información de publicación

Aquí puede elegir qué elementos aparecen en la sección postinfo de las páginas. Esta es el área, generalmente debajo del título de la publicación, que muestra información básica sobre su publicación. Aparecerán los elementos resaltados que se muestran a continuación.

Mostrar pulgares en las páginas de índice

Habilite esta opción para mostrar miniaturas en las páginas de índice.

Gestión de anuncios

Habilitar mensaje único 468 × 60 banner

Al habilitar esta opción, se mostrará un anuncio de banner de 468 × 60 en la parte inferior de las páginas de publicación debajo del contenido de la publicación. Si está habilitado, debe completar la imagen del banner y la URL de destino a continuación.

Entrada de imagen de banner publicitario de 468 × 60

Aquí puede proporcionar una url de imagen de banner de 468 × 60.

Ingrese la URL de destino del anuncio 468 × 60

Aquí puede proporcionar la URL de destino del banner 468 × 60.

Entrada 468 × 60 código adsense

Coloque su código de adsense aquí.

SEO> Índice de la página SEO

Habilitar URL canónicas

La canonicalización ayuda a prevenir la indexación de contenido duplicado por los motores de búsqueda y, como resultado, puede ayudar a evitar penalizaciones por contenido duplicado y degradación del pagerank. 

Algunas páginas pueden tener diferentes URL que conducen al mismo lugar. Por ejemplo, domain.com, domain.com/index.html y www.domain.com son URL diferentes que conducen a su página de inicio. Desde la perspectiva de un motor de búsqueda, estas URL duplicadas, que también ocurren a menudo debido a enlaces permanentes personalizados, pueden tratarse individualmente en lugar de como un único destino.

 La definición de una URL canónica le indica al motor de búsqueda qué URL le gustaría usar oficialmente. El tema basa sus URL canónicas en sus enlaces permanentes y el nombre de dominio definido en la pestaña de configuración de wp-admin.

Habilitar meta descripciones

Marque esta casilla si desea mostrar metadescripciones en páginas de categoría / archivo. La descripción se basa en la descripción de categoría que elija al crear / editar su categoría en wp-admin.

Elija el método de autogeneración del título

Aquí puede elegir cómo se generan sus títulos en las páginas de índice. Puede cambiar el orden en que se muestran el nombre de su blog y el título del índice, o puede eliminar el nombre del blog del título por completo.

Defina un carácter para separar BlogName y Título de publicación

Aquí puede cambiar qué carácter separa el título de su blog y el nombre de la página de índice cuando utiliza títulos de publicación autogenerados. Los valores comunes son | o –

SEO> SEO de página única

Habilitar títulos personalizados

De forma predeterminada, el tema crea títulos de publicaciones según el título de su publicación y el nombre de su blog. Si desea que su meta título sea diferente al título de su publicación real, puede definir un título personalizado para cada publicación utilizando campos personalizados. Esta opción debe estar habilitada para que funcionen los títulos personalizados, y debe elegir un nombre de campo personalizado para su título a continuación.

Habilitar descripción personalizada

Si desea agregar una meta descripción a su publicación, puede hacerlo utilizando campos personalizados. Esta opción debe estar habilitada para que las descripciones se muestren en las páginas de publicación. Puede agregar su meta descripción utilizando campos personalizados basados ​​en el nombre del campo personalizado que defina a continuación.

Habilitar palabras clave personalizadas

Si desea agregar palabras clave meta a su publicación, puede hacerlo utilizando campos personalizados. Esta opción debe estar habilitada para que las palabras clave se muestren en las páginas de publicación. Puede agregar sus palabras clave meta utilizando campos personalizados basados ​​en el nombre del campo personalizado que defina a continuación.

Habilitar URL canónicas

La canonicalización ayuda a prevenir la indexación de contenido duplicado por los motores de búsqueda y, como resultado, puede ayudar a evitar penalizaciones por contenido duplicado y degradación del pagerank.

 Algunas páginas pueden tener diferentes URL que conducen al mismo lugar. Por ejemplo, domain.com, domain.com/index.html y www.domain.com son URL diferentes que conducen a su página de inicio. Desde la perspectiva de un motor de búsqueda, estas URL duplicadas, que también ocurren a menudo debido a enlaces permanentes personalizados, pueden tratarse individualmente en lugar de como un único destino. 

La definición de una URL canónica le indica al motor de búsqueda qué URL le gustaría usar oficialmente. El tema basa sus URL canónicas en sus enlaces permanentes y el nombre de dominio definido en la pestaña de configuración de wp-admin.

Nombre de campo personalizado que se utilizará para el título

Cuando defina su título usando campos personalizados, debe usar este valor para el nombre del campo personalizado. El valor de su campo personalizado debe ser el título personalizado que le gustaría usar.

Nombre de campo personalizado que se utilizará para la descripción

Cuando defina su meta descripción usando campos personalizados, debe usar este valor para el Nombre del campo personalizado. El valor de su campo personalizado debe ser la descripción personalizada que le gustaría usar.

Nombre de campo personalizado que se utilizará para palabras clave

Cuando defina sus palabras clave utilizando campos personalizados, debe usar este valor para el nombre del campo personalizado. El valor de su campo personalizado debe ser las palabras clave meta que le gustaría usar, separadas por comas.

Si los títulos personalizados están deshabilitados, elija el método de autogeneración

Si no está utilizando títulos de publicaciones personalizados, aún puede tener control sobre cómo se generan sus títulos. Aquí puede elegir el orden en que desea que se muestre el título de su publicación y el nombre del blog, o puede eliminar el nombre del blog del título por completo.

Defina un carácter para separar BlogName y Título de publicación

Aquí puede cambiar qué carácter separa el título de su blog y el nombre de la publicación al usar títulos de publicación autogenerados. Los valores comunes son | o –

SEO> Página de inicio SEO

Habilitar título personalizado

De manera predeterminada, el tema utiliza una combinación del nombre de su blog y la descripción de su blog, tal como se definió cuando creó su blog, para crear los títulos de su página de inicio. Sin embargo, si desea crear un título personalizado, simplemente habilite esta opción y complete el campo de título personalizado a continuación.

Habilitar meta descripción

De forma predeterminada, el tema utiliza la descripción de su blog, tal como se definió cuando creó su blog, para completar el campo de metadescripción. Si desea utilizar una descripción diferente, habilite esta opción y complete el campo de descripción personalizada a continuación.

Habilitar meta palabras clave

Por defecto, el tema no agrega palabras clave a su encabezado. La mayoría de los motores de búsqueda ya no usan palabras clave para clasificar su sitio, pero algunas personas las definen de todos modos por si acaso. Si desea agregar meta palabras clave a su encabezado, habilite esta opción y complete el campo de palabras clave personalizadas a continuación.

Habilitar URL canónicas

La canonicalización ayuda a prevenir la indexación de contenido duplicado por los motores de búsqueda y, como resultado, puede ayudar a evitar penalizaciones por contenido duplicado y degradación del pagerank. Algunas páginas pueden tener diferentes URL que conducen al mismo lugar. Por ejemplo, domain.com, domain.com/index.html y www.domain.com son URL diferentes que conducen a su página de inicio. Desde la perspectiva de un motor de búsqueda, estas URL duplicadas, que también ocurren a menudo debido a enlaces permanentes personalizados, pueden tratarse individualmente en lugar de como un único destino. La definición de una URL canónica le indica al motor de búsqueda qué URL le gustaría usar oficialmente. El tema basa sus URL canónicas en sus enlaces permanentes y el nombre de dominio definido en la pestaña de configuración de wp-admin.

Título personalizado de la página de inicio (si está habilitado)

Si ha habilitado títulos personalizados, puede agregar su título personalizado aquí. Lo que escriba aquí se colocará entre las etiquetas <title> </ title> en header.php.

Meta descripción de la página de inicio (si está habilitada)

Si ha habilitado meta descripciones, puede agregar su descripción personalizada aquí.

Meta palabras clave de la página de inicio (si está habilitado)

Si ha habilitado meta palabras clave, puede agregar sus palabras clave personalizadas aquí. Las palabras clave deben estar separadas por comas. Por ejemplo: wordpress, temas, plantillas, elegantes.

Si los títulos personalizados están deshabilitados, elija el método de autogeneración

Si no está utilizando títulos de publicaciones personalizados, aún puede tener control sobre cómo se generan sus títulos. Aquí puede elegir el orden en que desea que se muestre el título de su publicación y el nombre del blog, o puede eliminar el nombre del blog del título por completo.

Defina un carácter para separar BlogName y Título de publicación

Aquí puede cambiar qué carácter separa el título de su blog y el nombre de la publicación al usar títulos de publicación autogenerados. Los valores comunes son | o –

Integración

La pestaña de integración es excelente para agregar código de terceros a ciertas áreas del tema. El código se puede agregar a la cabeza y al cuerpo de su sitio web, así como antes y después de cada publicación. Por ejemplo, si necesita agregar un código de seguimiento a su sitio web (como google analytics), pero no está seguro de qué archivo PHP editar para agregar el código al <cuerpo> de su sitio web, simplemente ingrese este código en el campo “cuerpo” de la pestaña Integración.

Para obtener más información sobre cómo aprovechar al máximo la pestaña de integración, consulte nuestra publicación de blog sobre
Formas de usar la pestaña de integración en nuestras opciones de tema de ePanel .

Habilitar código de encabezado

Deshabilitar esta opción eliminará el código de encabezado a continuación de su blog. Esto le permite eliminar el código mientras lo guarda para su uso posterior.

Habilitar código de cuerpo

Deshabilitar esta opción eliminará el código del cuerpo a continuación de su blog. Esto le permite eliminar el código mientras lo guarda para su uso posterior.

Habilitar código superior único

Deshabilitar esta opción eliminará el código superior único a continuación de su blog. Esto le permite eliminar el código mientras lo guarda para su uso posterior.

Habilitar código de fondo único

Deshabilitar esta opción eliminará el código inferior único a continuación de su blog. Esto le permite eliminar el código mientras lo guarda para su uso posterior.

Agregue código a la <cabeza> de su blog

Cualquier código que coloque aquí aparecerá en la sección principal de cada página de su blog. Esto es útil cuando necesita agregar JavaScript o CSS a todas las páginas.

Agregue código al <cuerpo> (bueno para códigos de seguimiento como google analytics)

Cualquier código que coloque aquí aparecerá en la sección del cuerpo de todas las páginas de su blog. Esto es útil si necesita ingresar un píxel de seguimiento para un contador de estado como Google Analytics.

Agrega código al principio de tus publicaciones

Cualquier código que coloque aquí se colocará en la parte superior de todas las publicaciones individuales. Esto es útil si está buscando integrar cosas como enlaces de marcadores sociales.

Agregue código al final de sus publicaciones, antes de los comentarios

Cualquier código que coloque aquí se colocará en la parte superior de todas las publicaciones individuales. Esto es útil si está buscando integrar cosas como enlaces de marcadores sociales.

Actualizaciones

Antes de que pueda recibir actualizaciones de productos, primero debe autenticar su suscripción a Elegant Themes. Para hacer esto, debe ingresar su nombre de usuario de Elegant Themes y su clave de API de Elegant Themes. Su nombre de usuario es el mismo nombre de usuario que utiliza al iniciar sesión en ElegnatThemes.com

Importación y exportación

Puede exportar o importar fácilmente la configuración de su tema Divi haciendo clic en el icono “Importar / Exportar” para abrir las opciones de portabilidad. Para exportar un archivo, seleccione la pestaña Exportar, ingrese el nombre del archivo de exportación y haga clic en el botón “Exportar opciones de tema”. Se guardará un archivo .json en su computadora para guardarlo como una copia de seguridad, usarlo para nuevas compilaciones de clientes o compartirlo con sus pares. Para importar un archivo de Opciones de tema, simplemente seleccione la pestaña Importar, elija su archivo .json y haga clic en el botón “Importar opciones de tema Divi”. También hay una opción conveniente para hacer una copia de seguridad de sus Opciones de tema actuales antes de importar.

Restaurar los valores predeterminados

Simplemente haga clic en el icono “Restaurar a los valores predeterminados” para restaurar la configuración predeterminada para las Opciones del tema Divi.

Personalización del Tema:

En esta sección podemos personalizar todos aquellos aspectos relacionados con los ajustes generales del diseño de tu web: Botones, colores, tipografías, etc

Ajustes generales

Cabecera, navegación y pie

Botones

 

Opciones

Contructor visual

Introducción 

 

Backend

Editar una plantilla

Editar secciones

Crear filar

Modulos

Acordeon, anuncios

Clase 14 – Diseñando con Divi – módulos: botón, búsqueda, conmutador y comentarios

 

Clase 15 – Diseñando con Divi – módulos: blog y barra lateral

Clase 16 – Diseñando con Divi – módulos de contadores numéricos, circulares y de barras

Clase 17 – Diseñando con Divi – módulos de control deslizante de vídeo y correo electrónico optin

Clase 18 – Diseñando con Divi – módulos: formulario de correo electrónico, código, galería de imágenes, imagen e inicio de sesión

Clase 18.1 – Módulo de imagen y texto en el nuevo builder de Divi

Clase 19 – Diseñando con Divi – módulo: llamada a la acción – CTA

Sigue aprendiendo con los cursos de la Zona Premium. Puedes darte de alta por 15€ al més aquí.
Incluye acceso a los cursos,  descargas de temas, plugins premium y soporte directo conmigo para dudas.

Clase 20 – Diseñando con Divi – módulos: mapa, navegación y persona

Clase 21 – Diseñando con Divi – módulos: pestañas, portfolio y portfolio de anchura completa

Clase 22 – Diseñando con Divi – módulos: portfolio filtrable, post slider, deslizante anchura completa

Clase 23 – Diseñando con Divi – módulos: testimonios, seguir en redes sociales y separador

Clase 24 – Diseñando con Divi – módulos: tabla precios, temporizador y texto

Clase 25 – Diseñando con Divi – módulo: tienda

Clase 26 – Diseñando con Divi – módulos: título de publicación y vídeo

 

Hasta aquí hablamos de todo lo que tiene que ver con el diseño de tu página web usando DIVI. Sin embargo antes de culminar con el curso te recomendamos prestar atención a las últimas clases que te ayudarán a proteger tu pagina y salvaguardar tus pre-configuraciones.

  Siguiente Instrucción