Banner

El banner es la caja grande con inclinación inferior que aparece inmediatamente debajo del header del sitio.

Su estructura es la siguiente:

<div class="main-banner" id="main-banner">
  <div class="ed-container">
    <div class="ed-item l-75 to-center">
      <img class="main-banner__img" src="tu-imagen.jpg">
      <div class="main-banner__data">
        <h1>Título del banner</h1>
        <p class="subtitle"> Subtítulo del banner</p> <!-- opcional -->
        <a href="#" class="button center">Botón del banner</a> <!-- opcional -->
      </div>
    </div>
  </div>
</div>
  • El elemento <img> será usado como fondo.
  • Use las clases .main-banner--secondary, .main-banner--tertiary, .main-banner--accent y .main-banner--dark en el contenedor principal para definir el color (por defecto azul).
  • El subtítulo y el botón son opcionales. Si los añade, use las clases indicadas.

Añadir autor al banner (posts del blog u otros usos)

Para añadir un autor, inmediatamente después del titulo en el banner, añada un contenedor con la clase .main-banner__author que contenga dos hijos con las clases .main-banner__author-img y .main-banner__author-name para la imagen y el nombre respectivamente. En el banner de esta página puede ver un ejemplo de como queda.

Modelo de código:

<div class="main-banner">
  <div class="ed-container">
    <div class="ed-item l-75 to-center">
      <img class="main-banner__img" src="tu-imagen.jpg">
      <div class="main-banner__data">
        <h1>Título del banner</h1>
        <div class="main-banner__author">
          <a href="#">
            <img class="main-banner__author-img" src="author.jpg">
          </a>
          <a href="#">
            <div class="main-banner__author-name">Alexys Lozada</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Banner y título (h1)

Este banner contiene un elemento h1 por lo que evite añadir otro título del mismo nivel en las páginas que contengan un banner.