Saltar al contenido

Headers

Destacar los títulos y encabezados (Headers) de tu sitio es una de las mejores maneras para captar la atención de los lectores e identificar cada sección para distinguir de qué estás hablando en ella

Título: Cabecera Principal (Header 1 o H1)

Gracias a Orbital Theme el Título principal de nuestras páginas es sencillo de editar, pero se debe hacer independiente a los encabezados ya que tiene sus propias clases asignadas, te mostramos algunas formas de darle estilo y forma:

*El título de cabecera principal (H1) y encabezados secundarios (h2,h3,h4…), deben de seguir un patrón, de mayor tamaño (H1) a menor relativamente a su nivel.

Teniendo en cuenta eso y que sea legible en formato móvil, podemos ajustar éstos tamaños de manera genérica para toda nuestra web, además de dotar nuestros encabezados de estilo para darles un toque de personalización!

/* PEGAR TITULO ARRIBA Y MEJORAR TAMAÑO */
.default-header {
padding: 0.3rem 0;
padding-bottom: 4px;
}
.title {
font-size: 2.2rem!important;
text-align:center;
}
.banner {
margin: auto auto auto auto;
}

Estilo CSS Completo H1

/* ESTILIZAR HEADER 1 - COMPLETO */

.default-header {
width: 100%;
padding: 0.3rem 0;
background-color: #ffd62a;
padding-bottom: 4px;
border-bottom: #e0b706 2px solid; /* editar los px y el estilo CSS para obtener distintos efectos */
}
.title {
font-size: 2.2rem!important;
text-align:center;
}
.banner {
margin: auto auto auto auto;
}

Color de Fondo

Para cambiar el fondo del Título de la Cabecera Principal debes añadir:

/*COLOR FONDO HEADER 1 */
.default-header {
background-color: #ffd62a; /*Elegir color*/
}

Puedes elegir el color con la siguiente herramienta:

    dotted - Defines a dotted border
    dashed - Defines a dashed border
    solid - Defines a solid border
    double - Defines a double border
    groove - Defines a 3D grooved border. The effect depends on the border-color value
    ridge - Defines a 3D ridged border. The effect depends on the border-color value
    inset - Defines a 3D inset border. The effect depends on the border-color value
    outset - Defines a 3D outset border. The effect depends on the border-color value
    none - Defines no border
    hidden - Defines a hidden border

    Si quieres un sombreado exterior alrededor o inferior éste código puedes variarlo por color, tamaño y profundidad para obtener el efecto que desees:

    /* CSS para Box Shadow y redondear borde de H1*/
    .title {
    font-size: 2.2rem!important;
    text-align:center;
    box-shadow: 0 5px 1rem 1px #C1BCC1;
    border-radius: 10px;
    }
    

    Aquí tienes ésta herramienta para que puedas elegir el color que más te guste y copiarlo para cambiar el color del fondo o del borde a tu gusto

      Encabezados Secundarios (h2,h3,h4…)

      Para ir acorde con la personalización de nuestra cabecera, podemos añadir personalizaciones a nuestros encabezados, te dejamos algunas:

      *El título de cabecera principal (H1) y encabezados secundarios (h2,h3,h4…), deben de seguir un patrón, de mayor tamaño (H1) a menor relativamente a su nivel, por lo que ten en cuenta ésto:

      /* TAMAÑO ENCABEZADOS */
      h2 {
      font-size: 2rem;
      }
      h3 {
      font-size: 1.75rem;
      }
      h4 {
      font-size: 1.60rem;
      }

      Ejemplo CSS Completo Encabezados

      /* ESTILIZAR HEADER 2 y 3 - COMPLETO */
      
      h2 {
      font-size: 2rem;
      background-color: #ffdf5a ;
      text-align: center;
      padding: 5px;
      border-bottom: #e0b706 2px solid;
      margin-bottom:auto;
      }
      h3 {
      font-size: 1.65rem;
      margin-bottom: 0.25rem;
      text-align: center;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      padding: 4px;
      }

      Estilo CSS para Bordes

      dotted - Defines a dotted border
      dashed - Defines a dashed border
      solid - Defines a solid border
      double - Defines a double border
      groove - Defines a 3D grooved border. The effect depends on the border-color value
      ridge - Defines a 3D ridged border. The effect depends on the border-color value
      inset - Defines a 3D inset border. The effect depends on the border-color value
      outset - Defines a 3D outset border. The effect depends on the border-color value
      none - Defines no border
      hidden - Defines a hidden border

      Puedes personalizar qué bordes mostrar, bordes sólo arriba, abajo, laterales o completo con los siguientes:

      h2 {
      /* BORDE SUPERIOR */
      border-top: #e0b706 2px solid;
      /* BORDE INFERIOR */
      border-bottom: #e0b706 2px solid;
      /*TODOS LOS BORDES*/
      border: #e0b706 2px solid;
      /* Elegir color, grosor y estilo */
      }
      

      Para cambiar el fondo de kas cabeceras: (aplicar para cada h)

      /*COLOR FONDO HEADER 2 */
      h2 {
      background-color: #ffdf5a; /*Elegir color*/
      }

      Puedes elegir el color con la siguiente herramienta:

        • Optimizado para Gutenberg
        • Soporte ilimitado
        • Monetiza tu WEB
        • Mejora los Rankings en Google
        • Actualizaciones de por vida

        Últimas Novedades de nuestro Blog

        Mira los artículos de nuestro Blog con los mejores consejos tras la experiencia de uso del Tema Orbital enfocado a SEO y posicionamiento

        Página creada por FernanTEC - ¿Quieres saber más?