Constructores Visuales de WordPress
Lección 28 de 100. Módulo de Diseño Web/Configuración
El diseño es el embajador silencioso de tu marca.
Paul Brand
ÍNDICE
Contenido
Esta lección es una de las pocas instrucciones que no es imprescindible seguir y la podemos saltar aunque es la que dará ese toque de distinción a nuestro proyecto.
¿Alguna vez has montado un mueble prefabricado? Te habrás dado cuenta que hay algunos embecelledores que no sabes muy bien para que sirven y que muchas veces no los incluyes por acabar pronto, sin embargo si los pones le dan ese punto diferente a tu montaje, pues eso es Divi o algún otro constructor visual como Elementor o Gutenberg de WordPress.
DEFINICIONES
La optimización de la experiencia del usuario y la seguridad es crítica porque puede aumentar la retención. A medida que mejora la aplicación y la satisfacción del usuario, evitará perder usuarios debido a la mala experiencia del usuario.
La “experiencia del usuario (UX)”, “se enfoca en tener una comprensión profunda de los usuarios, lo que necesitan, lo que valoran, sus habilidades y también sus limitaciones. También tiene en cuenta las metas y objetivos comerciales del grupo que gestiona el proyecto “.
En resumen, se trata de cómo podemos hacer que la experiencia de los visitantes sea lo más significativa y valiosa posible.
PLANTILLAS PARA DISEÑAR TU WEB
Descárgate las plantillas necesarias para elaborar tu página Web y comienza a trabajar en tu proyecto con garantía de éxito.
MONTAJE
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