Cambiar el logo en Divi es una de las preguntas más frecuentes que hacen los usuarios que están comenzando a trabajar con esta plantilla. Es importante no confundir el logo corporativo de nuestra web con el icono de favoritos o “Favicón”. Este es un artículo de nivel básico y no tocaremos por tanto código.
Pasos para para cambiar el logo en Divi
A continuación, mostraremos los pasos para establecer nuestro logo corporativo en la plantilla Divi.
Subir nuestro logo a la biblioteca de wordpress (medios)
Primero subiremos nuestro logo a la biblioteca de medios de wordpress, para ello en la barra lateral de administración vamos a medios / añadir nuevo, es importante que tenga las características adecuadas de peso, formato y tamaño.
Dar nombre amigable para SEO
El logo representa la marca o imagen de nuestro proyecto y por tanto antes de subirlo le daremos el nombre de archivo adecuado.
Ejemplo correcto: “pantalonespepito.jpg”
Ejemplo incorrecto: “mi-logo-0202.jp”
Añadir el logo a la plantilla Divi
Para cambiar el logo en Divi que viene por defecto, en la barra lateral de administración iremos a la pestaña Divi / Opciones del tema. Una vez allí buscaremos en la parte derecha la sección Logo / Subir, esto nos abrirá una nueva pestaña donde buscaremos el logo que queremos utilizar y una vez elegido le daremos el correspondiente texto alternativo (nombre amigable para SEO), aquí podemos utilizar acentos, espacios etc. Por último, guardamos y previsualizamos que nuestro logo se muestre correctamente, teneis más abajo la animación con los pasos.
Cambiar tamaño de logo en Divi
Si deseamos aumentar el tamaño del logo, podemos ir a la pestaña Divi / personalizar de temas, allí iremos a Cabecera y navegación / Menú principal y localizaremos las siguientes opciones:
Menú altura: Nos permitirá aumentar el tamaño de la altura del menú principal
Logo Max altura: Nos permitirá aumentar la altura del logo dentro del espacio de altura del menú principal
Medidas y peso
El logo que viene por defecto en la plantilla divi tiene unas medidas de 93x46px, no obstante, sería recomendable que cuando creamos nuestro logo (photoshop, illustrator…) tenga unas medidas de alrededor de 90×500, esto nos dará margen para jugar con las opciones de tamaño vistas anteriormente. Respecto al peso hay que intentar que las imágenes no pasen de 200kb, no obstante si pueden ser de menos de 100kb (aunque no es facil), sería ideal para la velocidad de carga de la página. Podemos optimizar imágenes con nuestro programa de edición favorito (Photoshop, Illustrator..) , plugins como Wp Smush, o bien herramientas rápidas online como TinyPNG
Formatos
El formato de nuestro logo vendrá determinado por las características que necesitamos (transparencia, peso o calidad del mismo) adjuntamos abajo un pequeño resumen.
GIF: Calidad baja, admite fondo transparente, máximo 256 colores, en realidad el gif pesaría muy poco, pero se vería con muy poca calidad
JPG: Es un formato compatible con todo tipo de dispositivos, buena optimización (bajo peso), no obstante, no permite fondo transparente.
PNG: Formato con buena optimización, buena calidad y permite además fondos transparente
SVG: Es un formato más reciente que mezcla lo mejor de todos los formatos es decir transparencia, optimización y calidad, no obstante, a día de hoy todavía puede dar algún problema de incompatibilidad con cierto software o dispositivos
Cambiar localización del logo
La disposición por defecto es mantener el logo en la parte izquierda y los enlaces a la derecha (además es bastante recomendable ya que la mayoría de los usuarios son diestros), no obstante, si deseamos cambiar la posición del mismo podemos ir a Divi / Personalizar de temas / Cabecera y navegación / Formato de cabecera, donde podemos elegir las siguientes opciones:
Por defecto: Logotipo en la izquierda y los enlaces a la derecha
Centrado: Aumentará el tamaño del logo y lo pondrá encima de los enlaces
Centrado en línea: Insertará el logo en medio de nuestros enlaces
Deslizar: Mantiene el logo en la izquierda, oculta los enlaces y agrega barra lateral cada vez que hacemos click sobre el menú de enlaces
Pantalla completa: Mantiene el logo a la izquierda, oculta los enlaces, y agrega pantalla completa cada vez que hacemos click en el menú de enlaces
Espero que este artículo haya resultado util, recordaros que realizamos cursos de WordPress todos los meses del año
Este sitio web utiliza cookies propias y de terceros para recopilar información que ayuda a optimizar su visita a sus páginas web.No se utilizarán las cookies para recoger información de carácter personal.Usted puede cambiar su configuración siempre que lo desee. AceptarConfigurar CookiesPolítica de cookies
Aviso Cookies
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Cookie
Duration
Description
_ga
2 years
The _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_ga_4FZ657JWKE
2 years
This cookie is installed by Google Analytics.
_ga_9G48T76EZH
2 years
This cookie is installed by Google Analytics.
_gat_gtag_UA_131014051_1
1 minute
Set by Google to distinguish users.
_gcl_au
3 months
Provided by Google Tag Manager to experiment advertisement efficiency of websites using their services.
_gid
1 day
Installed by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Cookie
Duration
Description
test_cookie
15 minutes
The test_cookie is set by doubleclick.net and is used to determine if the user's browser supports cookies.