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.
Índice del contenido
- Personalizar el tema Extra. Cabecera e imagen de fondo
- Configurar las opciones generales de la plantilla Extra
- 1 – Logotipo y favicón
- 2 – Color de realce general
- 3 – Menú o barra de navegación fija
- 4 – Opciones de la barra lateral
- 5 – Recuento de seguidores en redes sociales
- 6 – Conexión con aplicaciones externas
- 7 – Configuración de las redes sociales
- 8 – Configuración de post y productos
- 9 – Configuración del formato de la fecha
- 10 – Usar extracto cuando esté definido
- 11 – Shortcodes adaptables
- 12 – Fuentes de Google
- 13 – Botón de subir arriba
- 14 – Personalizar los estilos CSS
- Cómo modificar la cabecera para personalizar el tema Extra
- Cómo insertar una imagen de fondo para personalizar el tema Extra
- Configurar las opciones generales de la plantilla 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.
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.
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í.
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.
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.
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.
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:
- Cargar la imagen, de un tamaño adecuado a la barra del menú, en la biblioteca de medios.
- Copiar la dirección URL de la imagen que hemos subido.
- 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.
1 2 3 | #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.
Hola Juan, he seguido tus vídeos y he podido configurar mi tema perfectamente excepto por una cosa.
Resulta que me gustaría poder poner una imagen de fondo para pc y otra distinta para móviles. Con algunos otros temas, esto viene en la configuración del propio fondo, pero en este, extra, no veo que venga y me preguntaba como podría hacer eso.
Gracias.
Hola tecnocultivo,
He escrito un artículo (sin vídeo todavía, pero llegará) donde explico cómo se hace lo que tu quieres. Puedes echarlo un vistazo y preguntarme las dudas que tengas.
https://www.ingresosviaweb.com/utilizar-diferentes-fondos-en-extra/
Hola Juan!!
He utilizado tus video para realizar ajustes en mi web y esta quedando muy bien, pero en concreto con el lago tengo un problema que no puedo solucionar:
Me gustaría mover el logo un poco mas hacia la derecha porque hay mucho espacio entre este y las letras del menú.
En el modo responsive (móvil y tablet) el logo se ve minúsculo, a penas se distingue.
No se si esto es muy difícil de hacer, pero es prácticamente lo único que me falta para dejarla como a mi me gusta.
Gracias, un saludo Gran trabajo amigo
Hola Patricio,
los cambios que sugieres se pueden realizar añadiendo un código CSS en ña pestaña del personalizador «CSS adicional». Si me indicas la web puedo mirar la solución.
Hola, ¿Cómo podría quitar los de compartir y calificar que sale al final de cada entrada?
No me gusta que salgan en gris los botones de las redes sociales y las estrellas de califacar, por eso uso otros plugins para ese cometido. ¿Hay manera de quitar esa sección?
Gracias de antemano.
Hola Dan, el tema Extra está pensado principalmente como plantilla para crear publicaciones online, por lo que compartir en redes sociales y calificar una publicación son opciones integradas por defecto ya que se supone que queremos que los usuarios interactuen. Pero puede que usemos el tema para otro tipo de página web y no nos guste, en este caso hay varias opciones:
1/ Si queremos quitar las estrellas de calificación se pueden desactivar desde las propiedades del tema, en la pestaña diseño, desactivando las estrellas en todas las pestañas de esa sección.
2/ Ocultar los iconos de las redes sociales, en el mismo apartado, marcándolos para que no se muestren.
3/ Aunque no mostremos ninguna de las opciones, ni calificaciones ni iconos sociales, siempre va a estar la palabra compartir (share) y una caja vacía que no servirá para nada, por lo que si nos saltamos las dos opciones anteriores y escribimos el siguiente código en la pestaña de «CSS adicional», solucionamos el problema de golpe.
.post-footer {
display:none;
}
Wow Juan perfecto, lo he podido solucionar gracias a tu respuesta. Muchas gracias!!
Hola Juan, he estado buscando información de una cosa rara que me pasa con mi web y el tema extra, pero no la he encontrado, por eso te pregunto por aquí. Tengo puesto el tipo de letra oswald en mi web, pero esta no siempre muestra este tipo de letra, a veces sin a veces no, las veces que tengo abierto el administrador de wordpress y la web, entonces si que me muestra bien el tipo de letra, pero la mayoría de las veces me muestra otro tipo de letra, al igual que el tamaño de la letra, no me está mostrando el correcto, sabes porque puede ser? Tengo un tema hijo de extra que es el que tengo activo.
Espero puedas ayudarme.
Gracias de antemano y un saludo.
Lola
Hola Lola, siempre hay cosas que se escapan de nuestro control, las tipografías en las páginas web son una de ellas. En el tema extra suelo utilizar las fuentes que cargan por defecto y no he tenido ese problema, pero no eres la primera que lo comenta. Antiguamente (hablo de antes de WordPress), si querías una fuente diferente a la que ofrecía el sistema, había que cargarla en el servidor y activarla desde las hojas de estilo. Seguramente se pueda hacer en WordPress también.
Pero antes comprueba que tienes activada la pestaña del subconjunto de las fuentes de Google, en las opciones generales del tema Extra. Está casi al final de la página de opciones.
He entrado en la web varias veces con distintos navegadores y me carga con la tipografía correcta que tienes elegida.
Puede que necesites borrar las cookies almacenadas en el navegador.
Hola Cuando voy a seleccionar #main-header {
background-image: url();
margin: con la url ya colocada se me borra y no puedo copiarla.
Hola gema.gt
¿dónde seleccionas la imagen?
En el código del mensaje que me mandas, no se si te falta cerrar la función con una llave o me has enviado solo una parte.