Modificar la cabecera y poner una imagen para personalizar el tema Extra

La mayor personalización que podemos realizar en un sitio web es colocar nuestra marca o logo para que quien nos visite sepa a quien pertenece. Si además incluimos una imagen o fotografía de fondo que haga referencia a lo que hacemos o somos, nos aseguramos que no haya dudas. Vamos a ver cómo personalizar el tema Extra.

Personalizar el tema Extra. Cabecera e imagen de fondo

Para poder personalizar el tema Extra necesitamos conocer las opciones que tiene para combinarlas y realizar una configuración personal que sea diferente al resto de webs que podamos encontrarnos en la red. La plantilla Extra permite una serie de cambios que otros temas no tienen.

Configurar las opciones generales de la plantilla Extra

Al instalar la plantilla, se crea una nueva pestaña en el menú de administración WordPress llamada «Extra«, donde vamos a encontrar las opciones principales para empezar a modificar y personalizar nuestro sitio.

La primera opción de esta pestaña son las opciones del tema (Theme options), donde vamos a configurar la pestaña del aspecto general de la web.

1 – Logotipo y favicón

Apartado para colocar el logotipo que sustituirá al que trae por defecto la plantilla, y el favicón o imagen que se mostrará como icono en las pestañas del navegador cuando estemos navegando por nuestra web.

El logotipo debe tener un tamaño adecuado al que queremos que aparezca en la cabecera, y el favicón debe ser cuadrado y de un tamaño máximo de 512 px de lado.

2 – Color de realce general

Podemos elegir el color de realce de los cajas y ajustarlo a los colores corporativos de la empresa, negocio o personales.

3 – Menú o barra de navegación fija

Esta opción a modo de botón, nos permite mantener la barra de la cabecera, donde se encuentra el menú, fija para que se desplace junto con el resto de la web al hacer scroll, o convertirla en «pegajosa» para que esté siempre visible en la parte superior de la página.

4 – Opciones de la barra lateral

En el tema Extra, la barra lateral es un elemento dinámico, y podemos colocarla a la derecha, a la izquierda o hacerla desaparecer en las opciones generales. Woocommerce crea su propia barra lateral y, si tenemos instalado este pluging de tienda online, podemos configurar la sidebar desde este apartado.

5 – Recuento de seguidores en redes sociales

El menú desplegable nos permite configurar la frecuencia con la que se refrescan los datos de los seguidores de las distintas redes sociales.

6 – Conexión con aplicaciones externas

Siguiendo con las ventajas que trae este Tema Premium, Extra trae incorporado de serie unas opciones para conectar directamente con aplicaciones externas.

Podemos conectar con gestores de correos, concretamente Maichimp y Aweber, que permiten gestionar los correos electrónicos de los usuarios que se registren y crear campañas de mail-marketing, y la aplicación de Google, con la que necesitaremos conectar, por ejemplo, para incorporar un plano de situación en una página de contacto.

Para poder utilizar estas opciones, necesitamos estar registrados en las distintas aplicaciones. En el caso de Google, si tienes un correo electrónico, ya estás registrado, sólo tienes que generar el código API y colocarlo en su sitio. Puedes ver cómo se hace desde aquí.

7 – Configuración de las redes sociales

Podemos activar y desactivar los enlaces a las principales redes sociales. Esta configuración consta de dos pasos, la primera es activar los iconos para que aparezcan en la web, y la segunda es insertar la dirección o URL del perfil de cada una de las redes sociales en las que estemos dados de alta. Si no escribimos la dirección, el icono no aparecerá aunque lo tengamos activo.

8 – Configuración de post y productos

Dependiendo de lo que queramos que ocupe cada página, en relación con los artículos y productos que queramos que aparezcan en cada una, podemos elegir la cantidad que creamos oportuno.

De esta forma, podemos configurar el número de post que se mostrarán en la página de archivos, el número de productos que se verán en cada página (en el caso que tengamos instalado Woocommerce), el número de post en la página de categorías, en los resultados de búsqueda o en la página de etiquetas.

9 – Configuración del formato de la fecha

Esta fecha es la que aparecerá al lado de cada entrada, post, artículo o producto que coloquemos en la web. Podemos jugar con las letras que hacen referencia al mes, al día y al año para establecer el formato que nosotros queramos según se establecen las normas de fechas para WordPress.

10 – Usar extracto cuando esté definido

En las ajustes generales de WordPress, podíamos establecer que se mostrara un trozo del texto de cada artículo cuando estos aparecían uno encima del otro. Con esta plantilla podemos crear un texto personalizado que resuma todo el contenido del artículo, en vez de que aparezcan las primeras líneas del post, que puede que no digan nada si es muy largo.

Este resumen hay que escribirlo cuando realizamos el post o artículo y rellenar el apartado correspondiente al extracto.

11 – Shortcodes adaptables

Activando esta pestaña añadimos más funciones permitiendo utilizar shortcodes que crean botones, cajas u objetos adaptables a cualquier dispositivo móvil.

12 – Fuentes de Google

Además de las fuentes que trae la plantilla para personalizar el tema Extra, tenemos la opción de añadir las fuentes que Google tiene en su repositorio, ampliando, de esta forma, las posibilidades de personalización de nuestra web.

13 – Botón de subir arriba

Si necesitamos, o nos gusta tener un botón que aparezca automáticamente cuando la página es muy larga, para volver arriba, podemos personalizar el tema Extra con esta opción. Además podemos configurarlo para que el movimiento de desplazamiento sea más suave activando el Smooth Scrolling.

14 – Personalizar los estilos CSS

La caja de texto para insertar código CSS para modificar el aspecto de la web, cambiando las hojas de estilo por las que pongamos aquí, sirve para no tener que modificar el archivo style.css ni entrar a través del editor de WordPress. De esta forma se consigue que los cambios realizados no se reinicien cuando actualizamos la plantilla.

Cómo modificar la cabecera para personalizar el tema Extra

Si ya hemos ajustados las configuraciones generales del apartado anterior, tendremos ya colocados el logotipo y el favicón en sus respectivos sitios. Ahora toca elegir la composición que más nos guste o se adapte a la identidad que buscamos.

Para ello debemos ir al personalizador, al cual podemos llegar desde la segunda opción de la pestaña «Extra > Theme Customizer» o desde «Apariencia > Personalizar«, ambos caminos llevan a la misma ventana.

Para modificar el aspecto de la cabecera, sólo tenemos que tocar el apartado que se muestra en la imagen.

Ocultar y modificar la barra del menú secundario del tema Extra

Las opciones que controlan esta zona son «Header Elemente Settings» y «Secundary Menu Bar Settings«.

Dentro de la opción «Header Elemente Settings» podemos mostrar u ocultar los elementos de la barra superior, que son el los iconos sociales, el buscador, y el mensaje de las últimas tendencias.

Pueden ocultarse todas las opciones para hacer desaparecer esta zona, o sólo alguna de ellas.

En la pestaña «Secundary Menu Bar Settings» controlamos el aspecto visual, podemos modificarlo por completo.

Permite modificar el color de todos los objetos, el fondo, el texto, los iconos, los enlaces… permitiendo transparencias en todas las opciones.

También podemos elegir entre un montón de tipografías de todos los estilos, elegir el tamaño de las fuentes o el espaciado que tendrá entre las letras, consiguiendo un aspecto único en relación con otras webs.

Hay una pestaña que si la marcamos, conseguimos que el contenido de esta barra ocupe el ancho total de la página, muy recomendable si tenemos muchas redes sociales activas o el texto que va apareciendo es muy largo.

Opciones la barra del menú primario del tema Extra

Aunque este sea el primario, lo he dejado en segundo lugar por estar debajo de la otra barra, pero como se suele decir, el orden de factores no altera el producto.

Para modificar este menú en el que se encuentra el logotipo, utilizaremos las pestañas «Header Formar Settings» y «Primary Menu Bar Settings«.

Con la primera opción podemos mantener el logotipo y el menú en línea o colocarlos centrados a la página uno encima del otro. También hay una pestaña que si la marcamos, el menú permanecerá oculto hasta que hagamos scroll y nos movamos hacia abajo de la página.

Con la segunda pestaña de opciones, «Primary Menu Bar Settings«, podemos modificar el tamaño de la barra del menú, el tamaño del logotipo, el color de fondo y de los textos, y cambiar de tipografía, tamaño de fuente, formato y distancia entre las letras.

Si no queremos que aparezca el logotipo, podemos marcar que se oculte. Al igual que la barra superior, podemos configurar los elementos para que ocupen el ancho total de la página.

Colocar una imagen de fondo en la cabecera del menú

Para realizar este proceso necesitamos utilizar algo de programación, pero es muy básico y no tiene ningún misterio. Debemos saber como se llama la etiqueta que contiene el menú de la página web y modificar el estilo CSS de los colores de fondo por un estilo CSS que contenga la imagen que queremos tener.

Por defecto, la etiqueta <div> que engloba la cabecera del menú se llama «#main-header», por lo que si queremos sustituir el color de fondo por una imagen, tenemos que indicar en esa etiqueta que cargue la url de la imagen.

Los pasos a seguir son estos:

1. Cargar la imagen, de un tamaño adecuado a la barra del menú, en la biblioteca de medios.
2. Copiar la dirección URL de la imagen que hemos subido.
3. Pegar el código CSS, con URL de la imagen que sustituirá al color del fondo, en la caja de los estilos CSS de las opciones generales del tema Extra (Extra > Theme Options).

El código CSS que debemos pegar en esa casilla es el siguiente, sustituyendo la dirección URL por la imagen de vuestra elección.

#main-header {
background-image: url(dirección URL de la imagen);
}

Cómo insertar una imagen de fondo  para personalizar el tema Extra

Para insertar una imagen de fondo de la web, Extra trae la opción de hacerlo sin necesidad de modificar ningún código.

Accedemos al personalizador a través de la pestaña «Extra > Theme Customizer» o desde «Apariencia > Personalizar«, y en las opciones de la izquierda localizamos «Imagen de fondo» (Background image).

Las opciones para insertar la imagen son muy sencillas, un botón para añadir la imagen y tres opciones básicas: repetición, posición y modo. La combinación de estas opciones depende de la fotografía, de los resultados que queramos y del gusto de cada uno.

Si el resultado no es el deseado porque la imagen es muy marcada, o queremos darle un tono de color diferente, podemos superponer una capa semitransparente con el color que deseemos. Sólo tenemos que ir, dentro del personalizador, a la pestaña «General Settings > Background Settings» y elegir el color que más nos guste, eligiendo una transparencia que permita ver la imagen de debajo.

El resultado de personalizar el tema Extra, comparado con el que viene por defecto, es el siguiente:

Los resultados de todas las combinaciones que se pueden realizar son infinitas, lo que hace que esta plantilla sea muy versátil para cualquier tipo de web, consiguiendo personalizar el tema Extra según las necesidades que tengamos.

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

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

Prueba a personalizar tu web y cuéntanos los resultados, los problemas que has tenido o si necesitas realizar algún cambio que no te sale. Deja un comentario con tu opinión.