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

por | 14 Comentarios

Temas Elegant Themes
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.

Suscríbete:

 

 

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.

Opciones generales de la plantilla. Personalizar el tema Elegant Themes

 

1 – Logotipo y favicón

Colocar logotipo y favicón. Personalizar el tema Extra

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

Color de realce. Personalizar el tema Extra

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

Menú pegajoso o fijo. Personalizar el tema Extra

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

Situación de la barra lateral. Personalizar el tema Extra

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

Número de seguidores de la redes sociales. Personalizar el tema Extra

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

Configuracion de aplicaciones externas. Personalizar el tema Extra

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

Configuracion de las redes sociales. Personalizar el tema Extra

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

Número de artículos y productos. Botón subir. Personalizar el tema Extra

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

Formato de fecha. Personalizar el tema Extra

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

Estracto de texto. Personalizar el tema Extra

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

Shorcodes adaptables. Personalizar el tema Extra

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

Activar las fuentes de google. Personalizar el tema Extra

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

Scroll suave. Personalizar el tema Extra

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

Personalizar hojas de estilo. Personalizar el tema Extra

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.

Opciones de modificación de la cabecera. Personalizar el tema Extra

 

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.

barra menu secundario. Personalizae el tema Extra

 

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.

Personalización del menú secundario.Personalizar el tema Extra

 

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.

Centrar el menú principal. Personalizar el tema Extra

 

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.

Menu principal y cambio de color de fondo

 

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.

Código css embebido. Personalizar el tema Extra

Header con imagen de fondo

 

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:

Antes y despues de personalizar el tema Extra

 

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.

 

Temas Elegant Themes

 

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.

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.

14 Comentarios

  1. Tecnocultivo

    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.

    Responder
  2. Patricio

    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

    Responder
    • Juan

      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.

      Responder
  3. Dan

    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.

    Responder
    • Juan

      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;
      }

      Responder
      • Dan

        Wow Juan perfecto, lo he podido solucionar gracias a tu respuesta. Muchas gracias!!

        Responder
      • Emili

        Hola Juan!

        Y si solo quieres que desaparezca la palabra COMPARTIR?
        ¿cómo se puede hacer?

        Gracias!

        Responder
        • Juan

          Hola Emili, con este código colocado en la pestaña CSS adicional ocultas la palabra «Compartir»

          .post-footer .share-title {
          display: none !important;
          }

          Responder
          • Emili

            Muchísimas gracias!!!

            Un saludo

            Responder
  4. Lola

    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

    Responder
    • Juan

      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.

      Responder
  5. gema.gt

    Hola Cuando voy a seleccionar #main-header {
    background-image: url();
    margin: con la url ya colocada se me borra y no puedo copiarla.

    Responder
    • Juan

      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.

      Responder

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