Por defecto, en el mundo occidental, donde escribimos de izquierda a derecha, lo que se conoce como LTR, los logotipos de las webs están siempre situados en la parte izquierda de la cabecera, da igual el tema, plantilla o patrón que elijas para tu sitio.
Esto es así debido a que en el mundo occidental, al estar acostumbrados a escribir de izquierda a derecha, por el mismo motivo, también leemos de izquierda a derecha, y en consecuencia, la imagen de marca, que suele venir definida por el logotipo de la web, siempre estará arriba a la izquierda.
La misma lógica sigue el resto del contenido, pues como es sabido que leemos de arriba a abajo y de izquierda a derecha, y cualquier mapa de calor de tu web te lo confirmará, la jerarquía visual de los elementos más importantes de tu web, los que más clics conseguirán, también siguen esta lógica: de izquierda a derecha y de arriba a abajo.
En el resto del mundo, de los países en cuyo idioma se escribe de derecha a izquierda, o RTL la costumbre y la lógica es justamente la contraria.
Si nuestro público objetivo es del mundo occidental, que escribe de izquierda a derecha, la ubicación del logotipo de una web no debe suponernos preocupación alguna, más allá de conocer esta lógica y, salvo cuestiones de estilo, aplicarla.
Ahora bien, hay muchas situaciones en las que el logotipo de una web, también por lógica, debería estar a la derecha, como por ejemplo si el público objetivo de la web es para usuarios de escritura RTL (de derecha a izquierda), o también por cuestiones de diseño y/o estilo.
Bien, tras esta breve introducción sobre LTR y RTL, que prometo ampliar con más detalles a tener en cuenta a la hora de diseñar para países con escritura RTL, vamos a la cuestión, y es cómo conseguir que el tema Divi nos permita poner el logotipo de la web a la derecha, un ajuste que no está disponible en sus múltiples opciones personalizables.
La solución es muy sencilla, pues solo tendrás que aplicar un poquito de CSS, añadido a la sección de CSS adicional del personalizador, a los ajustes de CSS de Divi, en un tema hijo o como prefieras.
El CSS a aplicar sería el siguiente:
/* Mover logo Divi a la derecha */
#et-top-navigation {
float: left;
padding-left: 0 !important;
}
.container .logo_container {
text-align: right;
}
Y el resultado es inmediato…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
