Configuración de la plantilla

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Muy bien, desde aquí, en nuestro menú principal de administración puedes ver que tenemos un elemento llamado Divi.

Así que vamos a dar clic sobre él.

Aquí tenemos todas las opciones de la plantilla, no vamos a verlas o modificarlas todas.

Voy a modificar las más importantes.

En primer lugar añadiremos el logo.

Como puedes ver desde aquí puedes subir tu propio logo.

Esto abre la biblioteca multimedia de WordPress y podemos subir o seleccionar una imagen de las que ya hemos subido previamente para que sea nuestro logo.

En este caso aún no he subido la imagen, así que vamos hacia aquí y damos clic en subir.

Ahora busco la imagen y la selecciono.

Una vez que termina de subirse damos clic aquí para colocarla como logo.

Desde esta otra opción podemos añadirle también un favicon, el favicon es el ícono que sale en las pestañas del navegador cuando nuestra web se encuentra abierta.

Para subirlo hacemos el mismo proceso.

Después tenemos aquí la opción para fijar el menú en la parte superior, como ves se encuentra activado así que yo lo voy a desactivar.

Esta otra opción podemos indicar cuales son los colores que nos aparecen en el editor cuando estamos trabajando.

Esta opción es buena añadirla antes, en este tutorial la hemos añadido hasta el final, pero te recomiendo añadir esta opción desde el inicio.

Como viste siempre teníamos que estas colocándole el código del color.

Entonces si los hubiéramos tenido añadidos desde aquí hubiera sido más fácil.

Por ejemplo, puedo colocar el color verde que hemos estado utilizando mucho.

Te recomiendo añadir tus colores predeterminados aquí antes, así se te hace más fácil seleccionar los colores cuando estas editando tu web.

Muy bien, luego tenemos varias opciones adicionales para integrar nuestra web con servicios de email marketing como Mailchimp por ejemplo.

También podremos encontrar las opciones para activar o desactivar los botones de redes sociales en el píe de página.

Y desde aquí podemos añadir la URL de cada red social.

Si bajamos más podremos encontrar varias opciones para configurar como se vería WooCommerce si lo instalamos.

WooCommerce es un plugin para WordPress que nos permite añadir una tienda en nuestro sitio web.

Te dejaré un link en la descripción de este video para que veas nuestro curso de WooCommerce si quieres añadirle una tienda a tu web.

Luego tenemos varias otras opciones, pero la que vamos a modificar de todas estas opciones adicionales es la de añadir un botón para regresar hacia arriba en la página.

Muy bien, una vez que terminas de modificar estas opciones, damos clic aquí para guardar los cambios.

Los cambios se aplicaron correctamente.

Desde esta página también tenemos más opciones para la navegación de la web, de diseño, para añadir anuncios, optimización SEO, y más…

Pero lo que deseo hacer es modificar algunos colores en el menú principal.

Así que vamos a entrar en apariencia y luego en personalizador.

Ya hemos visto antes el personalizador, cuándo creamos los menús.

Desde aquí hay varias otras opciones que podemos modificar en nuestra plantilla, en este caso voy a entrar en las opciones de cabecera y navegación, ahora en barra de menú principal.

Muy bien, aquí puedes modificar el estilo de tu menú, en este caso únicamente deseo cambiar el color del menú.

Así que voy hacia abajo y cambiare el color del enlace activo hacia verde y también colocare en verde el color para los menús desplegables.

Ahora regresemos.

Desde el formato de la cabcera, podemos seleccionar otro diseño para el encabezado, contamos con 5 diseños diferentes, te invito a jugar con ellas para ver cuál te gusta mas.

Ahora vamos a regresar hasta las opciones principales.

Y voy a entrar en combinación de colores.

Desde aquí seleccionare un color principal para mi web, en este caso será verde.

Voy a colapsar desde aquí el personalizador y ahora puedes ver que nuestro menú se encuentra verde como lo deseamos.

Muy bien, abrimos nuevamente el personalizador, y ahora voy a entrar en las opciones para el píe de página.

Como posiblemente ya notaste mientras hacíamos este sitio web, aquí abajo tenemos los créditos de la plantilla, y de WordPress, pero podemos añadir nuestros propios créditos en esta zona.

Para hacerlo entramos en las opciones de la barra inferior.

Y desde aquí podemos añadir nuestro propios créditos.

Por ejemplo en este caso le colocaré: Diseño por LievanoSan.com

Si no deseas mostrar créditos en el píe de páginas, entonces podrías simplemente eliminarlos dando clic aquí.

Muy bien, ya he terminado con las modificaciones que deseaba realizar, pero desde el personalizador puedes editar muchas más áreas en tu sitio web.

Si tú eres un usuario avanzado y tienes conocimientos en CSS; entonces incluso puedes añadir tus propias reglas CSS desde el personalizador, dándote mayor libertas para diseñar tu web como lo deseas.

Desde el pre visualizador también podemos ver el sitio web en diferentes dispositivos con esta herramienta.

Así se vería la web en una Tablet que se encuentra vertical.

Y podemos cambiarlo también a la vista de teléfono.

Voy a guardar los cambios que he realizado en el personalizador desde guardar y aplicar.

Ahora salgamos del personalizador desde la x.

Muy bien, nuestro sitio web se encuentra casi completo, únicamente deseo añadir una característica adicional.

2 Comments on “Configuración de la plantilla”

  1. Agente Serrano

    Hola Sr. Lievano.
    Esta herramienta es exelente, muy intuitiva, pero deseo hacerle algunas preguntas y sobre ellas espero como siempre su honesta respuesta:
    QUe tan pesada es la plantilla DIVI? (Espacio en el servidor)
    Que tan pesadas quedan las paginas hechas con ella? (Tiempo de carga)
    Si en el futuro NO existiera DIVI seguirian funcionando (sin deterioro) las paginas?
    Como influye (positivo-negativo) la construccion de paginas con DIVI en el SEO del sitio?
    Como siempre, agradezco su tiempo en atender estos comentarios.
    Alberto.

    1. Lievanosan

      Buen día, gracias por su mensaje y por seguir nuestros tutoriales, será un gusto poder ayudarle en las consultas:

      1. La plantilla completa tiene un peso de 6.8 MB, que no se ven reflejados en el tiempo de carga, eso es únicamente el peso del paquete de instalación.
      2. El peso de las páginas creadas con Divi no puede definirse como una media, ya que mucho de ese peso depende de que tan larga es la página, la optimización de las imágenes y si se encuentra utilizando plugins adicionales. Hemos realizado una verificación con YSlow en el peso de la página de inicio, y el peso completo de todo lo que no es una imagen es de 585 KB, lo cual es un muy buen resultado, de modo que si usted optimiza las imágenes de su web, que son normalmente lo más pesado y donde fallan las personas en la carga de los sitios web, su web puede fácilmente estar abajo de 1 MB y si a eso le añade un plugin cache como WP Rocket, entonces su web quedará volando 🙂
      3. No, como en toda la plantilla, si usted crea su diseño basado en ella, entonces al utilizar una nueva plantilla debe adaptar el contenido al nuevo diseño, de modo que su contenido no se verá igual si usted cambia de plantilla
      4. Divi tiene grandes opciones al momento de optimizar el SEO de su sitio web, gracias a las actualizaciones recientes, ahora cuenta con una sección completa dentro de su configuración para el SEO del sitio web. Si usted combina las opciones de Divi y utiliza un plugin dedicado al SEO del sitio web como Yoast SEO, entonces puede resultar en un sitio web con el SEO on page muy bien optimizado 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image