Colocar una imagen en el menú secundario

por | 0 Comentarios

migas de pan - Temas Elegant Themes

Las opciones de la cabecera del tema Extra están limitadas a las que aparecen en el personalizador de WordPress. Como hemos visto en otros vídeos del curso, con un poco de ingenio podemos modificarlo. En este caso colocaremos una imagen en el menú secundario o barra superior.

Suscríbete:

 

Cómo poner una imagen o logotipo en la barra superior

WordPress nos ha solucionado mucho el trabajo a la hora de crear páginas webs, pero tenemos que adaptarnos a las herramientas que nos ofrecen.

Aunque sea el gestor de contenidos más utilizado en internet, tiene sus limitaciones. Cualquiera puede tener una web de aspecto profesional, pero personalizar la página con cambios puntuales ya es otra historia.

 

Añadir una imagen a través de CSS

La mejor forma de realizar modificaciones estructurales, como esta, es a través de un tema hijo donde clonamos el archivo con el código a modificar.

Pero, aunque esa sea la forma de proceder habitual, y la más recomendad, podemos realizar cambios menores a través de las hojas de estilo o CSS.

El código con el que está realizado Extra es igual que el utilizado por cualquier otra web realizada en WordPress, Y el aspecto visual lo define, en gran medida, esas hojas de estilo o código CSS.

Es este método el que vamos a utilizar para colocar encima del «Trending» una imagen, conociendo la ruta o dirección URL.

La configuración de las opciones de la cabecera os la dejo a vuestra elección, tamaño, tipografía, colores…

 

Subir la imagen a la carpeta de medios

Esto no tiene ningún misterio, abrimos la pestaña «Medios» y añadimos la nueva imagen.

Para copiar la URL de la imagen, picamos sobre ella y se abrirán las especificaciones, copiamos en el portapapeles la ruta y cerramos.

Cargar imagen en el menú secundario

 

Añadir el código CSS

Para colocar la imagen necesitamos añadir unas línea de código CSS desde el personalizador. Abrimos la pestaña «Añadir CSS» y pegamos el siguiente código.

La primera parte coloca la imagen y ajusta la anchura que necesitamos, modificando el valor de «width», podemos ajustar el logotipo al tamaño más acorde a nuestra web. Entre los paréntesis, donde pone «dirección de la imagen», lo cambiamos por la URL que hemos copiado anteriormente.

La segunda parte del código, modifica la configuración establecida por defecto en Extra, para poder mostrar el logotipo en los dispositivos móviles. Cambiando el valor de «max-width», ajustamos el tamaño a mostrar en estos dispositivos.

Código imagen en el menú secundario

 

Temas Elegant Themes

 

Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


 Personaliza tu sitio para diferenciarte de los demás. ¿Necesitas ayuda?

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido