Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Genesis / Crear cabeceras distintas en cada página de WordPress en Genesis

Crear cabeceras distintas en cada página de WordPress en Genesis

septiembre 28, 2017 Por Oscar martin 2 comentarios

En este tutorial vamos a ver 3 métodos distintos para tener diferentes cabeceras o imágenes en el header de cada página.

Por ejemplo, podemos tener una imagen en la cabecera de la home y no en el resto de la web o una distinta por cada página.

Además veremos como hacerlo con 3 métodos distintos, para que elijas el que más te convenga.

Tutorial en vídeo

Suscríbete a mi canal:  

1 – Añadir diferentes cabeceras con Blox Lite

Blox Lite es gratuito y sirve para añadir de forma sencilla información en lugares muy concretos de tu plantilla Genesis.

Este plugin se puede usar mucho más allá de añadir una imagen destacada en un header, si os gusta haré más tutoriales sobre este plugin.

Una vez instalado y activado nos aparecerá en el lateral el nuevo menú “Blox Lite” –> Add New

opciones blox imagen cabecera

Le damos el nombre que queramos, en mi caso “Cabecera personalizada Home”

En tipo de contenido marco la opción “Static Image”

En tipo de imagen le digo “Custom image” y añado la imagen que quiero en la cabecera.

Tenemos más opciones para personalizar la imagen, elegimos las que más nos interesen.

Ahora tenemos que decirle donde queremos que aparezca esta imagen, para ello vamos a la pestaña Position en ella puedo elegir el lugar exacto donde quiero que aparezca la imagen. Por defecto aparece en la posición genesis_after_header pero lo puedo poner donde yo quiera.

posicion blox cabecera

Si no hacemos nada más aparecerá la imagen en la cabecera de todas las páginas de nuestra web.

Para elegir en que lugares queremos que aparezca la imagen vamos a la pestaña Location y seleccionamos en que página queremos que aparezca la imagen añadida en este bloque. Por ejemplo la página principal:

Crear cabeceras distintas en cada página de WordPress en Genesis 1

2 – Añadir diferentes cabeceras modificando el fichero functions.php

function imagen_especifica_header(){
    if(is_home())
    echo '<div class="home-header"><img src="http://ejemplo.com/imagen.png" alt="home header image" /></div>';
    elseif(is_page() )
        echo '<div class="page-header"><img src="ttp://ejemplo.com/imagen2.png" alt="page header image" /></div>';
}
add_action('genesis_header', 'imagen_especifica_header');

En el código anterior tenemos que cambiar la dirección de la imagen por la vuestra.

Lo que estamos diciendo es que si es la página de inicio aparezca la imagen deseada y si no es la página de inicio aparezca otra imagen.

3 – Añadir diferentes cabeceras modificando los estilos de nuestra plantilla

En esta ocasión vamos a modificar el fichero style.css y vamos a añadir el siguiente código:

.home .site-header {
 height: 262px;
 background: url("images/big.png") no-repeat scroll 0 0 transparent;
 }
 
 .site-header {
 max-width: 980px;
 margin: 0 auto;
 width: 100%;
 height: 149px;
 background: url("images/small.png") no-repeat scroll 0 0 transparent;
 }

La carpeta donde se añaden las imágenes es la carpeta images de dentro de nuestra plantilla.

Con el código anterior le estamos diciendo a la web que queremos una imagen de fondo en la página principal y otra en el resto de las páginas.

El ancho, alto y márgenes sólo son un ejemplo, tienes que modificarlos según el estilo de tu web.

Espero que alguno de los 3 métodos te guste y te sirva para tus propósitos 😉

Publicado en: Genesis Etiquetado como: añadir cabecera

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Comentarios

  1. Noelia dice

    febrero 27, 2018 a las 6:55 pm

    Querido Óscar, y me quedo corta con lo de querido, queridísimo Óscar, me salvas la vida cada vez que necesito resolver algo. Estuve tooooodo el día buscando esto y siempre caigo en tu web.
    Mi eterno agradecimiento para vos.
    Gracias, gracias gracias!!!!

    Tu alumna
    Noe Cristo

    Responder
    • Oscar martin dice

      febrero 28, 2018 a las 12:03 pm

      Qué alegría ver siempre un comentario tuyo!!!!

      Te agradezco infinito tus palabras.

      No sabes lo que me alegra saber que mi trabajo te es útil!!!

      Un abrazo fuerte 😉

      Responder

Deja una respuesta Cancelar la respuesta

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

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR