En el menú secundario de Divi los iconos sociales están por defecto en la parte izquierda del mismo, junto a la información de contacto (teléfono, email) pero tiene más sentido que estén a la derecha ¿por qué?
Sencillo, si pones datos de contacto directos, como el correo electrónico y el teléfono, tiene sentido que sean más visibles que el resto de elementos del menú.
Por eso sería mejor mover los iconos sociales del menú secundario a la derecha, y así atraer más atención hacia los métodos de contacto más directo, menos sociales.
O sea, queremos hacer esto…
Por supuesto, es cuestión de gustos.
Mover los iconos sociales de la cabecera a la derecha con un código
El método más rápido, indoloro y gratis es añadir un poco de CSS adicional desde el Personalizador de WordPress, este:
/* Iconos sociales menú secundario Divi a la derecha */
#top-header .et-social-icons { float:right !important; }
#top-header #et-info { width: 100%; }Simplemente guarda los cambios y ya lo tienes.
Mover los iconos sociales de la cabecera a la derecha a un clic
Si prefieres un plugin, está la joya Divi Booster, que entre los cientos de personalizaciones que ofrece para Divi, también está la opción de poner los iconos a la derecha.
Simplemente activa la casilla llamada «Put contact info icons on left, and social icons on the right» de la sección «Header > Top Header» y guarda los cambios.
Hace exactamente lo mismo que el código anterior, pero a golpe de clic.
Al final, lo que conseguimos con ambos métodos es esto …
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Buenisimo! gracias y como hago para poner el mail tambien del lado derecho?
Hola! Genial. Quisiera centrar todo el contenido del menu secundario. Como podría hacerlo?
#top-header .et-social-icons { float:right !important;} #top-header #et-info { width: 100%; text-align: right !important;}