Añadir imágenes al menú de navegación añade estilo al diseño de tu blog y proporciona un lugar para ampliar tu marca. Las imágenes de menú en un blog también pueden desempeñar un papel más funcional al añadir más contexto al título de un elemento del menú. Por ejemplo, una imagen de un avión junto a la pestaña Dónde ir ayuda a los lectores a comprender mejor adónde los lleva ese enlace.
Puede crear sus imágenes de menú en cualquier programa de edición de fotos o ilustración. La estrella mostrada aquí fue creada usando Adobe Illustrator y luego guardada como un archivo PNG con un fondo transparente. Guardar el archivo de esta manera asegura que no haya ninguna caja blanca alrededor de la estrella.
A continuación se explica cómo añadir imágenes al menú Acerca de WordPress sin sobrecargar la codificación. Antes de comenzar con los siguientes pasos, asegúrese de que su imagen esté cargada en su servidor. Puede añadir imágenes a medida que construye un nuevo menú o añadir imágenes a un menú que ya ha creado (comience con el paso 6).
- Vaya a su tablero de WordPress.
- Elija Appearance→Menus
- Para empezar a construir un menú, introduzca un nombre en el campo Nombre del menú y luego seleccione Crear menú.
- En el cuadro Ubicaciones temáticas, seleccione el nuevo menú de navegación en el menú desplegable y, a continuación, haga clic en Guardar.
- En el cuadro Páginas, coloque una marca de verificación junto a su página Acerca de mí o Acerca de mí.
- En el cuadro Área de menú, haga clic en la flecha desplegable situada junto al botón de la página Acerca de… Los campos nuevos aparecen debajo del botón de la página Acerca de… Los dos con los que debe trabajar son la Etiqueta de Navegación y el Atributo de Título.
- En el campo Etiqueta de navegación, añada el siguiente código, sustituyendo la URL de la imagen de fondo por la URL de su imagen y sustituyendo el nombre de la pestaña por el título que desea mostrar en el menú de navegación. <div style= «background-image: url(‘http://www.yourblog.com/imagelocation/image.png’); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 0 25px;»>Tab Name</div>>Tab Name
- Este atributo es el texto alternativo (alt) que un visitante ve cuando pasa el ratón por encima del elemento del menú.
- Cuando haya terminado, haga clic en el botón Guardar Menú.
