Optimización de la imagen del logotipo de su sitio Divi con ajustes preestablecidos globales
Publicado: 2020-09-25Optimizar el logotipo de su sitio en Divi es una parte importante del diseño de su sitio web. Pero no tiene por qué ser un esfuerzo misterioso o abrumador. De hecho, Divi lo hace bastante simple con Divi Theme Builder y todas las opciones de diseño integradas disponibles.
En este tutorial, le mostraremos cómo optimizar sus logotipos con el tamaño, la posición y el estilo correctos en Divi. Luego, le mostraremos cómo guardar esos diseños como ajustes preestablecidos globales que puede usar para el desarrollo futuro.
¡Saltemos!
Descargue el diseño de ajustes preestablecidos de imagen de logotipo GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para usar este diseño de imagen de logotipo en su encabezado global, primero debe importarlo a la Biblioteca Divi de la siguiente manera:
- Vaya a Divi> Biblioteca Divi.
- Haga clic en el botón de importación / exportación en la parte superior de la página.
- Seleccione la pestaña Importar en la ventana emergente de portabilidad
- Seleccione Importar ajustes preestablecidos
- 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 del logotipo
Antes de empezar a optimizar la imagen del logotipo con Divi, es importante considerar optimizar el tamaño de la imagen del logotipo antes de subirla a 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, srcset y complementos de optimización de imagen). Sin embargo, esta no es la mejor práctica, ya que puede conducir a tiempos de carga de la página más lentos. Y, seamos sinceros, su logotipo es demasiado importante para conformarse con atajos desordenados.
A continuación, se muestra una lista de tamaños de imagen de logotipo comunes que se deben tener en cuenta:
Para disposición horizontal:
- 250 px x 150 px
- 350 px x 75 px
- 400 px x 100 px
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 cree.
Es común necesitar un logotipo más pequeño en el escritorio y un logotipo 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 los anchos de los navegadores de tabletas normalmente tienen 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áximos de acuerdo con el dispositivo. Si carga un logotipo más pequeño de lo que necesita en una 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 visualización 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. Le damos la bienvenida a un diseño de encabezado existente o importe 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 filas y columnas
Dentro del Editor de diseño de encabezado global, agregue un cuarto de tres cuartos de fila de columna.
En la columna de la derecha, agregue un módulo de imagen como un 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 encabezados más tradicionales, puede aprovechar el módulo de menú de Divi para mostrar su logotipo. Sin embargo, con las capacidades de contenido dinámico de Divi, puede mostrar el logotipo de su sitio utilizando cualquier número 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 de módulo de propaganda o incluso como una 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 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 pegar 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 construir 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 del diseño de la imagen de la siguiente manera:
- Alineación de la imagen: centro
- Ancho máximo: 60px
- Alineación del módulo (escritorio): izquierda
- Alineación del módulo (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 60px, 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 redondear el contenedor. 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 un nombre único a la imagen preestablecida del logotipo. En este caso, podemos darle el nombre “Logotipo a la izquierda (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, crearemos 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 de la izquierda y mueva el logotipo a la columna de la 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 construir un preset global de logo centrado. Dado que se trata de un logotipo centrado, podemos utilizar un logotipo más grande para nuestro ejemplo.
Primero, cambie el diseño de la columna a una estructura de 0ne-cuarto y medio cuarto para que tenga una columna más grande en el medio para el logotipo. Luego mueva el logo a la columna central
Sube 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ígnele 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, crearemos un ajuste preestablecido para un logotipo alineado a la izquierda más grande (400 px por 100 px).
Debido a que el logo va a tener 400px de ancho, queremos una estructura de columna que le dé al logo el espacio que necesita.
Regresemos a una estructura de dos columnas con el logo 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 320px, lo que significa que la imagen del logotipo no podrá extenderse a su ancho completo 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 400px.
Ahora, el logotipo es un poco más grande en la tableta, además de estar centrado.
Luego agregue un nuevo ajuste preestablecido global de los estilos actuales.
Asígnele el nombre “Logotipo a la izquierda (400 px por 100 px)” y guarde el ajuste preestablecido.
Ejemplo 5: Creación de un logotipo alineado a la izquierda con ajuste preestablecido global de efectos de desplazamiento
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 hacer 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 de “Logotipo a la izquierda (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%
- Box Shadow: 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 (flotar): 90 grados
A continuación, cree un nuevo ajuste preestablecido a partir de los estilos actuales y asígnele el nombre "Logo Left w / Hover (60px by 60px)".
Aquí está el resultado.
Agregar 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 y 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. Elimina la imagen actual y luego haz clic en el ícono 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 optimizando el tamaño de la imagen de su logotipo antes incluso de cargarlo en el tema Divi. Luego, puede usar la configuración de diseño incorporada 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 tener noticias tuyas en los comentarios.
¡Salud!