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!
Mejorar el Above the Fold
/* 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:
Estilo CSS para Bordes
dotted- Defines a dotted borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Propiedades CSS Box Shadow y Border Radius
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;
}
Selector de Color Hexadecimal
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:
Cambiar tamaño de Encabezados
/* 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 borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Tipos de Bordes CSS
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 */
}
Color de Fondo
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
