Optimización de la imagen del logotipo de su sitio Divi con ajustes preestablecidos globales

Descargue el diseño de ajustes preestablecidos de imagen de logotipo GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para usar este diseño de imagen de logotipo en su encabezado global, primero debe importarlo a la Biblioteca Divi de la siguiente manera:

1. Ve a Biblioteca Divi»>Divi > Biblioteca Divi .
2. Haga clic en el botón importar/exportar en la parte superior de la página.
3. Seleccione la pestaña Importar en la ventana emergente de portabilidad
4. Seleccione Importar ajustes preestablecidos
5. Haga clic en el botón Importar

Luego vaya al generador de temas y edite el encabezado global. Agregue un módulo de imagen donde desee que esté el logotipo y use los ajustes preestablecidos para diseñar y colocar el logotipo en consecuencia.

Tamaños de logotipo

Antes de optimizar la imagen del logotipo con Divi, es importante considerar optimizar el tamaño de la imagen del logotipo antes de cargarla en un módulo de imagen. No desea cargar una imagen de logotipo de 1920 px por 1080 px en su sitio cuando planea mostrar ese logotipo a 100 px por 50 px. Claro, hay formas de cambiar el tamaño de la imagen del logotipo después del hecho (es decir, complementos de optimización de imágenes y srcset). Sin embargo, esta no es la mejor práctica, ya que puede conducir a tiempos de carga de página más lentos. Y, seamos realistas, su logotipo es demasiado importante para conformarse con atajos desordenados.

Aquí hay una lista de tamaños de imagen de logotipo comunes a considerar:

Para diseño horizontal:

• 250 píxeles x 150 píxeles
• 350 píxeles x 75 píxeles
• 400 píxeles x 100 píxeles

Para diseño vertical (cuadrado):

• 160 px x 160 px (grande)
• 60 px x 60 px (pequeño)

Es posible que necesite un tamaño de logotipo más grande de lo que piensa.

Es común necesitar un logotipo más pequeño en el escritorio y uno más grande en la tableta (o incluso en el teléfono). En Divi, es común que los diseños de sus columnas se apilen en un diseño de una columna en las pantallas de tabletas y teléfonos. Y dado que el ancho del navegador de la tableta normalmente tiene un ancho máximo de 980 px, que es un contenedor mucho más grande para su logotipo que quizás en el escritorio. Por lo tanto, es posible que deba elegir un tamaño de logotipo más grande y ajustar la altura o el ancho máximo según el dispositivo. Si carga un logotipo que es más pequeño de lo que necesita en la tableta, no puede aumentar el tamaño sin comprometer la claridad de la imagen. En resumen, asegúrese de que el logotipo sea tan grande como su tamaño de pantalla más grande en todos los anchos de navegador.

Optimización del tamaño y la posición del logotipo de su sitio Divi con ajustes preestablecidos globales

Edición de su logotipo de encabezado global

Para comenzar, navegue hasta Divi Theme Builder yendo a Divi > Theme Builder. Luego haga clic para crear un nuevo encabezado global dentro de la plantilla de sitio web predeterminada.

Luego seleccione la opción, «Construir desde cero».

Para este tutorial, optimizaremos el logotipo incluido con un encabezado global personalizado utilizando Divi Theme Builder. Puede usar un diseño de encabezado existente o importar una de nuestras plantillas de encabezado (y pie de página) globales prefabricadas de nuestro blog. Para simplificar las cosas, vamos a crear un diseño de encabezado realmente simple con un logotipo y un menú.

Agregar diseño de fila y columna

Dentro del Editor de diseño de encabezado global, agregue una fila de columna de un cuarto y tres cuartos.

En la columna de la derecha, agregue un módulo de imagen como marcador de posición para ayudarnos a visualizar la ubicación del logotipo en el encabezado.

Agregue el módulo de imagen para mostrar la imagen del logotipo

Agregue un módulo de imagen a la columna de la izquierda.

Uso del módulo de imagen para logotipos

Para diseños de encabezado más tradicionales, puede aprovechar el módulo de menú de Divi para mostrar su logotipo. Sin embargo, con el contenido dinámico de Divicapacidades, puede mostrar el logotipo de su sitio usando cualquier cantidad de módulos Divi. Básicamente, puede mostrar su logotipo en cualquier lugar donde pueda mostrar una imagen en Divi. Por ejemplo, puede optar por mostrar el logotipo del sitio en una imagen del módulo de publicidad o incluso como imagen de fondo si lo desea. Para este tutorial, nos concentraremos en usar el módulo de imagen para mostrar el logotipo del sitio. Esto permite que el logotipo sea un elemento completamente separado (no conectado con otros elementos en un módulo como un módulo de menú o un módulo de propaganda). Además, el módulo de imagen está diseñado para diseñar imágenes, lo que nos brinda muchas opciones de diseño adicionales para diseñar la imagen de nuestro logotipo. Vaya al final del artículo para obtener más información sobre cómo agregar un logotipo de sitio como una imagen dinámica .

Dado que vamos a probar algunos tamaños de imagen de logotipo diferentes, vamos a incluir imágenes regulares para nuestros ejemplos en lugar del logotipo dinámico del sitio.

Ejemplo 1: creación de un ajuste preestablecido global de logotipo alineado a la izquierda

Para este primer ejemplo, vamos a crear un ajuste preestablecido simple para un logotipo alineado a la izquierda de 60 px por 60 px.

Abra la configuración del módulo de imagen y cargue una imagen de logotipo de 60 px por 60 px en el módulo de imagen.

Actualice la configuración de diseño de la imagen de la siguiente manera:

• Alineación de imagen: Centro
• Ancho máximo: 60px
• Alineación del módulo (escritorio): Izquierda
• Alineación de módulos (tableta y teléfono): Centro

Aunque este es un diseño para un logotipo alineado a la izquierda, la alineación de la imagen se establece en el centro porque la alineación de la imagen es diferente de la alineación del módulo. La alineación de la imagen está centrada dentro del módulo. Y dado que el módulo tiene un ancho máximo de 60 px, la alineación de la imagen realmente no importa porque la alineación del módulo ahora dictará la alineación de la imagen del logotipo.

Esto es útil si alguna vez desea agregar una imagen de fondo al logotipo o hacer que el contenedor sea redondeado. Básicamente, esto hace que el contenedor de la imagen del logotipo tenga el mismo tamaño que la imagen del logotipo en sí.

Tenga en cuenta que la alineación del módulo se cambia para centrarse en la tableta, ya que las columnas se apilarán en el dispositivo móvil.

Crear un nuevo ajuste preestablecido a partir de los estilos actuales

Ahora que el diseño del logotipo está terminado, puede crear un ajuste preestablecido global para el módulo de imagen haciendo clic en el menú desplegable de ajustes preestablecidos y seleccionando «Crear nuevo ajuste preestablecido a partir de estilos actuales».

Asigne al preajuste de imagen del logotipo un nombre único. En este caso, podemos darle el nombre «Logotipo izquierdo (60 px por 60 px)» para que sepamos exactamente qué tamaño de imagen usar y cómo se alineará el logotipo al seleccionar usar el ajuste preestablecido.

Ejemplo 2: creación de un ajuste preestablecido global de logotipo alineado a la derecha

Para el siguiente ejemplo, vamos a crear un ajuste preestablecido global de logotipo alineado a la derecha. Esto será fácil de hacer con nuestro diseño actual y preestablecido en su lugar. Simplemente cambie el diseño de la columna a tres cuartos un cuarto, mueva el menú a la columna izquierda y mueva el logotipo a la columna derecha.

Abra la configuración del módulo de imagen que contiene el ajuste preestablecido de imagen del logotipo que acabamos de crear.

Luego actualice la configuración de diseño para cambiar la alineación del módulo a la derecha.

Suficientemente simple. Ahora haga clic en el menú desplegable de ajustes preestablecidos y cree un nuevo ajuste preestablecido a partir de los estilos actuales.

Asigne al ajuste preestablecido el nombre «Logotipo a la derecha (60 px por 60 px)».

Ejemplo 3: creación de un ajuste preestablecido global de logotipo centrado

Para el siguiente ejemplo, vamos a crear un ajuste preestablecido global de logotipo centrado. Dado que este es un logotipo centrado, podemos usar un logotipo más grande para nuestro ejemplo.

Primero, cambie el diseño de la columna a una estructura de 0 un cuarto, un medio, un cuarto para que tenga una columna más grande en el medio para el logotipo. Luego mueva el logotipo a la columna central.

Cargue una nueva imagen de logotipo de 250 px por 150 px.

En la pestaña de diseño, actualice lo siguiente:

• Ancho máximo: 250px
• Alineación del módulo: Centro

Luego agregue un nuevo ajuste preestablecido global de los estilos actuales.

Y asígnale el nombre “Logo Center (250px por 150px).

Ejemplo 4: creación de un ajuste preestablecido global de logotipo grande alineado a la izquierda

Para el siguiente ejemplo, vamos a crear un ajuste preestablecido para un logotipo alineado a la izquierda más grande (400 px por 100 px).

Debido a que el logotipo tendrá un ancho de 400 px, queremos una estructura de columnas que le dé al logotipo el espacio que necesita.

Volvamos a una estructura de dos columnas con el logotipo a la izquierda y el menú a la derecha. Sin embargo, cambiemos la estructura a un tercio dos tercios.

Esto nos dará una columna de aproximadamente 320 px de ancho si mantenemos el ancho máximo de fila predeterminado de 1080 px.

Abra la configuración del módulo de imagen y agregue una imagen de logotipo de 400 px por 100 px.

En la pestaña de diseño, actualice lo siguiente:

• Ancho máximo: 400px
• Alineación del módulo (escritorio): izquierda
• Alineación del módulo (tableta): centro

Como mencioné, la columna tiene un ancho máximo de 320 px, lo que significa que la imagen del logotipo no podrá abarcar todo su ancho en el escritorio. Sin embargo, podrá hacerlo en la tableta una vez que las columnas estén apiladas. Por esta razón, queremos establecer el ancho máximo de la imagen en 400 px.

Ahora el logotipo es un poco más grande en la tableta y también está centrado.

Luego agregue un nuevo ajuste preestablecido global de los estilos actuales.

Asígnele el nombre «Logotipo izquierdo (400 px por 100 px)» y guarde el ajuste preestablecido.

Ejemplo 5: creación de un logotipo alineado a la izquierda con el ajuste preestablecido global Hover Effects

Para este ejemplo final, agregaremos algunos efectos de desplazamiento a un logotipo alineado a la izquierda y lo guardaremos como un nuevo ajuste preestablecido global.

Normalmente, las personas vinculan su logotipo a la página de inicio. Agregar un efecto de desplazamiento puede mejorar la UX al hacer que su capacidad de clic sea más obvia.

Para este ejemplo, vamos a utilizar la imagen del logotipo de 60 px por 60 px con el ajuste preestablecido «Logotipo izquierdo (60 px por 60 px)». Abra la configuración de imagen y seleccione el ajuste preestablecido de la lista.

Ahora podemos modificar el ajuste preestablecido con algunos estilos de efectos de desplazamiento antes de guardarlo como un nuevo ajuste preestablecido.

Actualice lo siguiente:

• Esquinas redondeadas: 50%

• Sombra de caja: ver captura de pantalla
• Posición horizontal de la sombra del cuadro: 0px
• Posición vertical de la sombra del cuadro: 0px (escritorio) 5px (desplazamiento)
• Color de sombra: #ac3cf7

Luego agregue la siguiente rotación de transformación al pasar el mouse:

• Transformar Girar eje Z (desplazamiento): 90 grados

A continuación, cree un nuevo ajuste preestablecido a partir de los estilos actuales y asígnele el nombre «Logotipo a la izquierda con desplazamiento (60 px por 60 px)».

Aquí está el resultado.

Adición de un logotipo de sitio dinámico al módulo de imagen

Para agregar el logotipo de su sitio dinámicamente al módulo de imagen, primero debe asegurarse de cargar el logotipo del sitio en Opciones de tema Divi .

Tenga en cuenta el tamaño del logotipo que está seleccionando.

Luego vaya al módulo de imagen que tiene su preajuste global y abra la configuración. Elimine la imagen actual y luego haga clic en el icono de contenido dinámico. En el menú desplegable, seleccione Logotipo del sitio.

Ahora su módulo de imagen extraerá el logotipo de su sitio de forma dinámica.

No olvide agregar un enlace de página de inicio dinámico al logotipo también.

Pensamientos finales

Con suerte, este tutorial ayudará a agilizar el proceso de agregar logotipos a sus encabezados Divi. Comienza con la optimización del tamaño de la imagen de tu logotipo incluso antes de subirlo al tema Divi. Luego, puede usar la configuración de diseño integrada de Divi para ajustar el tamaño y la posición de la imagen para diferentes diseños de columnas y diferentes dispositivos.

Por supuesto, cada sitio web requerirá su propio estilo único, algunos de los cuales se saldrán de las pautas establecidas en estos ejemplos. ¡Pero estoy seguro de que con algunos ajustes, puede crear nuevos ajustes preestablecidos para cualquier diseño único con facilidad!

Espero escuchar de usted en los comentarios.

¡Salud!