---
title: "Hestia: ¿Cómo personalizar los colores, tamaños de fuente y rellenos?"
url: https://caribdis.net/2020/05/20/hestia-como-personalizar-los-colores-tamanos-de-fuente-y-rellenos/
date: 2020-05-20
modified: 2020-05-20
lang: es
author: "Caribdis.Net"
description: "Retomo la serie de tutoriales para el tema de una sola página emblema de ThemeIsle, que tenía un tanto abandonados. Hestia continúa recibiendo mejoras por parte de sus creadores, y..."
categories:
  - "Hestia"
tags:
  - "español"
  - "Hestia"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2017/07/hestia-tutoriales.jpg
word_count: 1635
---

# Hestia: ¿Cómo personalizar los colores, tamaños de fuente y rellenos?

Retomo la serie de tutoriales para el tema de una sola página emblema de [**ThemeIsle**](https://caribdis.link/ThemeIsle), que tenía un tanto abandonados. [**Hestia**](https://caribdis.link/Hestia) continúa recibiendo mejoras por parte de sus creadores, y sigue siendo una excelente opción entre los temas gratuitos para **WordPress**.

Otro que ha subido escalones en popularidad a un ritmo sostenido en el último año es [**Neve**](https://caribdis.link/Neve), que presenta un nuevo modelo de creación de webs tan en boga en la actualidad: un código súper optimizado y ligero, y un diseño mínimo de base que se complementa con una biblioteca de sitios listos para importar y editar con constructores de página. Está en mis planes crear una nueva categoría que albergará los tutoriales para **Neve** en un futuro muy cercano.

Pero volvamos a **Hestia**. Como antes mencionaba, **ThemeIsle** se ha encargado de mantener vigente el tema, introduciendo nuevas características y corrigiendo errores con bastante regularidad. En los últimos meses lanzó la versión 3.0, que incluye una reestructuración del código y la actualización a la versión 5 de **Font Awesome**, entre otras novedades.

Para reflejar muchos de esos cambios, actualicé el [tutorial principal](https://caribdis.net/2017/02/05/hestia-otro-tema-de-una-sola-pagina-por-themeisle-tutorial/), el tutorial para [agregar un vídeo de fondo en la sección de título grande](https://caribdis.net/2017/08/20/hestia-como-mostrar-un-video-de-fondo-sin-plugin/), el punto de los créditos del pie de página en los [mini tutoriales](https://caribdis.net/2018/02/28/hestia-mini-tutoriales/), y en breve publicaré un segundo volumen de mini tutoriales con más trucos para personalizar **Hestia**.

En esta oportunidad es el turno de esta completa guía de estilos, que cubrirá todos los cambios de colores, tamaños de fuente y espaciados **dentro de las secciones de la página de inicio**, mediante código CSS personalizado.

Estos códigos podrán ser añadidos fácilmente desde *Apariencia > Personalizar > CSS adicional*, y no es necesario crear un tema hijo. De todas maneras, si estamos usando un tema hijo, lo más conveniente es colocar los códigos en el archivo `style.css` correspondiente.

Aquí, a modo de introducción, mostraremos las propiedades de CSS que podemos usar para personalizar las secciones del tema.

**Color de texto**

Para acceder a una herramienta de generación de códigos de color HEX, está disponible un selector en [esta búsqueda](https://www.google.com/search?q=color+picker) de nuestro amigo Google.

![](https://caribdis.net/wp-content/uploads/2020/05/hestia-css-color-titulo.png)

La propiedad de CSS para cambiar el color de texto es
color: #1990a4;
donde `#1990a4` es el valor que corresponde al código de color HEX deseado.

**Color de fondo**

![Hestia - CSS - Cambiar color de fondo](https://caribdis.net/wp-content/uploads/2020/05/hestia-css-color-fondo.jpg)

La propiedad de CSS para cambiar el color de fondo es
background-color: #c9f7ff;
donde `#c9f7ff` es el valor que corresponde al código de color HEX deseado.

**Tamaño de fuente**

![Hestia - CSS - Cambiar tamaño de fuente](https://caribdis.net/wp-content/uploads/2020/05/hestia-css-tamano-fuente.jpg)

La propiedad de CSS para cambiar el tamaño de fuente es
font-size: 20px;
donde `20px` es el valor que corresponde al tamaño en píxeles deseado para el texto.

**Relleno**

![Hestia - CSS - Cambiar relleno](https://caribdis.net/wp-content/uploads/2020/05/hestia-css-relleno.png)

Esto cambiará el espacio que se ve al comienzo y al final de cada sección.

Las propiedades de CSS para cambiar el relleno son
padding-top: 100px;
padding-bottom: 50px;

donde padding-top corresponde al relleno superior, padding-bottom al relleno inferior y los valores `100px` o `50px` corresponden al tamaño en píxeles del espaciado entre contenido y límites de la sección.

Para más información sobre CSS, pueden visitar [este sitio](https://www.w3schools.com/css/default.asp) (está en inglés, pero tiene disponible la herramienta de traducción automática).

En este tutorial enumeraremos todos los selectores de CSS que correspondan a las secciones y a los respectivos elementos que las componen.

Cuando un selector es común a más de una propiedad de CSS, no es necesario usarlo por separado. Por ejemplo:
.hestia-features {
background-color: #c9f7ff;
padding-top: 75px;
padding-bottom: 55px;
}
La siguiente es la lista de selectores para apuntar a los elementos específicos de cada sección de **Hestia**:

### Características

El selector `.hestia-features` sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:
.hestia-features {
background-color: #c9f7ff;
}

Relleno de la sección:
.hestia-features {
padding-top: 75px;
padding-bottom: 55px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:
.hestia-features .hestia-title {
color: #1990a4;
font-size: 42px !important;
}

Subítulo de la sección:
.hestia-features .description {
color: #1990a4;
font-size: 16px !important;
}

Título de la característica:
.hestia-features .hestia-features-content .feature-box .info-title {
color: #1990a4;
font-size: 24px;
}

Contenido de la característica:
.hestia-features .hestia-features-content .feature-box p {
color: #1990a4;
font-size: 20px;
}

### Equipo

El selector `.hestia-team` sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:
.hestia-team {
background-color: #c9f7ff;
}

Relleno de la sección:
.hestia-team {
padding-top: 65px;
padding-bottom: 20px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:
.hestia-team .hestia-title {
color: #1990a4;
font-size: 40px !important;
}

Subtítulo de la sección:
.hestia-team .description {
color: #1990a4;
font-size: 16px !important;
}

Título del miembro:
.hestia-team .hestia-team-content .card-profile .card-title {
color: #1990a4;
font-size: 16px;
}

Subtítulo del miembro:
.hestia-team .hestia-team-content .card-profile .category {
color: #1990a4;
font-size: 10px;
}

Contenido del miembro:
.hestia-team .hestia-team-content .card-profile .card-description {
color: #1990a4;
font-size: 16px;
}

### Testimonios

El selector `.hestia-testimonials` sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:
.hestia-testimonials {
background-color: #c9f7ff;
}

Relleno de la sección:
.hestia-testimonials {
padding-top: 65px;
padding-bottom: 20px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:
.hestia-testimonials .hestia-title {
color: #1990a4;
font-size: 40px !important;
}

Subtítulo de la sección:
.hestia-testimonials .description {
color: #1990a4;
font-size: 16px !important;
}

Título del testimonio:
.hestia-testimonials .hestia-testimonials-content .card-title {
color: #1990a4;
font-size: 18px;
}

Subtítulo del testimonio:
.hestia-testimonials .hestia-testimonials-content .category {
color: #1990a4;
font-size: 12px;
}

Contenido del testimonio:
.hestia-testimonials .hestia-testimonials-content .card-description {
color: #1990a4;
font-size: 16px;
}

### Tienda

El selector `.hestia-shop` sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:
.hestia-shop {
background-color: #c9f7ff;
}

Relleno de la sección:
.hestia-shop {
padding-top: 65px;
padding-bottom: 70px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:
.hestia-shop .hestia-title {
color: #1990a4;
font-size: 40px !important;
}

Subtítulo de la sección:
.hestia-shop .description {
color: #1990a4;
font-size: 16px !important;
}

Categoría del producto:
.hestia-shop .hestia-shop-content .shop-item .card-product .content .category {
color: #1990a4;
font-size: 14px;
}

Título del producto:
.hestia-shop .hestia-shop-content .shop-item .card-product .content .card-title {
color: #1990a4;
font-size: 20px;
}

Color de la descripción del producto:
.hestia-shop .hestia-shop-content .shop-item .card-product .content .card-description {
color: #1990a4;
}

Tamaño de fuente de la descripción del producto:
section.hestia-shop .card-description p {
font-size: 11px;
}

Precio del producto:
.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .price h4 {
color: #1990a4;
font-size: 20px;
}

Color del icono del carrito:
.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .stats {
color: #1990a4;
}

Tamaño de fuente del icono del carrito:
.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .stats i {
font-size: 30px;
}

### Precios (Hestia Pro)

El selector `.hestia-pricing` sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:
.hestia-pricing {
background-color: #c9f7ff;
}

Relleno de la sección:
.hestia-pricing {
padding-top: 100px;
padding-bottom: 70px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:
.hestia-pricing .hestia-pricing-title-area .hestia-title {
color: #1990a4;
font-size: 40px !important;
}

Subtítulo de la sección:
.hestia-pricing .hestia-pricing-title-area p.text-gray {
color: #1990a4;
font-size: 16px !important;
}

Color de fondo de tabla destacada:
.hestia-pricing .hestia-table-one .card-pricing.card-raised {
background-color: #ffffff;
}

Título de la tabla destacada:
.hestia-pricing .hestia-table-one .card-pricing.card-raised .category {
font-size: 12px;
color: #999999;
}

Precio de la tabla destacada:
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title {
font-size: 60px;
color: #2d3359;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title small {
font-size: 26px;
color: #777;
}

Contenido de la tabla destacada:
.hestia-pricing .hestia-table-one .card-pricing.card-raised ul li {
color: #999999;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised ul li b {
color: #3C4858;
}

Título de la tabla estándar:
.hestia-pricing .hestia-table-one .card-pricing.card-plain .category {
font-size: 12px;
color: #999999;
}

Precio de la tabla estándar:
.hestia-pricing .hestia-table-one .card-pricing.card-plain .card-title {
font-size: 60px;
color: #2d3359;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title small {
font-size: 26px;
color: #777;
}

Contenido de la tabla estándar:
.hestia-pricing .hestia-table-one .card-pricing.card-plain ul li {
color: #999999;
}
.hestia-pricing .hestia-table-one .card-pricing.card-plain ul li b {
color: #3C4858;
}

### Cinta

El selector `.hestia-ribbon` sirve para aplicar relleno. El color de superposición de fondo se modifica siguiendo los pasos de este tutorial.

Relleno de la sección:
.hestia-ribbon {
padding-top: 100px;
padding-botton: 100px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Texto:
.hestia-ribbon .hestia-title {
color: #1990a4;
font-size: 40px !important;
}

### Suscríbete

El selector `.hestia-subscribe` sirve para aplicar relleno. El color de superposición de fondo se modifica siguiendo los pasos de este tutorial.

Relleno de la sección:
.hestia-subscribe {
padding-top: 65px;
padding-botto: 65px;
}

Título de la sección:
.hestia-subscribe .title {
color: #1990a4 !important;
font-size: 40px !important;
}

Subtítulo de la sección:
.hestia-subscribe .subscribe-description {
color: #1990a4;
font-size: 20px !important;
}

### Blog

El selector `.hestia-blogs` sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:
.hestia-blogs {
background-color: #c9f7ff;
}

Relleno de la sección:
.hestia-blogs {
padding-top: 65px;
padding-bottom: 70px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:
.hestia-blogs .hestia-blogs-title-area .hestia-title {
color: #1990a4;
font-size: 40px;
}

Subtítulo de la sección:
.hestia-blogs .hestia-blogs-title-area .description {
color: #1990a4;
font-size: 20px;
}

Categoría de la entrada:
.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .category {
color: #1990a4;
font-size: 10px;
}

Título de la entrada:
.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .card-title a {
color: #1990a4;
font-size: 20px;
}

Extracto de la entrada:
.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .card-description {
color: #1990a4;
font-size: 16px;
}

### Contacto

Relleno de la sección:
.hestia-contact {
padding-top: 50px;
padding-bottom: 30px;
}

Título de la sección:
.hestia-contact .hestia-title {
color: #1990a4;
font-size: 40px !important;
}

Subtítulo de la sección:
.hestia-contact h5.description {
color: #1990a4;
font-size: 40px !important;
}

Título del formulario:
.hestia-contact .card-title {
color: #000000 !important;
font-size: 30px !important;
}

### Páginas internas

Color de fondo y color de texto en páginas:
.page .main {
background-color: #000;
color: #fff;
}

Color de fondo y color de texto en entradas del blog:
.post .main {
background-color: #000;
color: #fff;
}

Este tutorial fue adaptado de la versión en inglés de la [documentación oficial](https://docs.themeisle.com/article/1248-how-to-customize-colors-font-size-and-padding-in-hestia).