---
title: "Hestia: ¿Cómo reemplazar la sección de título grande con un slider?"
url: https://caribdis.net/2018/03/11/hestia-como-reemplazar-la-seccion-de-titulo-grande-con-un-slider/
date: 2018-03-11
modified: 2024-11-07
lang: es
author: "Caribdis.Net"
description: "Actualizado para la versión 1.1.78+ – 25/06/2018 En la última entrada reanudamos los tutoriales dedicados al tema gratuito de una sola página de ThemeIsle que recomendamos con mucho entusiasmo: Hestia,..."
categories:
  - "Hestia"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2017/07/hestia-tutoriales.jpg
word_count: 514
---

# Hestia: ¿Cómo reemplazar la sección de título grande con un slider?

** **Actualizado para la versión 1.1.78+ – 25/06/2018**
En la [última entrada](https://caribdis.net/2018/02/28/hestia-mini-tutoriales/) reanudamos los tutoriales dedicados al tema gratuito de una sola página de [**ThemeIsle**](https://caribdis.link/ThemeIsle) que recomendamos con mucho entusiasmo: [**Hestia**](https://caribdis.link/Hestia), el sucesor de **Zerif Lite**, que cada vez crece más en popularidad y en características.

Antes de continuar con los tutoriales oficiales, publico este que he dejado pendiente desde hace bastante tiempo, pero no por lo complicado sino simplemente porque de tan sencillo lo había olvidado por completo. :lol:

### Paso 1: usar un hook de Hestia para insertar un código abreviado

Vamos a partir de la base de que el plugin ya está instalado y activado, y que el slider que queremos incluir ya está creado.

Cualquier plugin que genere códigos abreviados sirve. Desde **[MetaSlider](https://es.wordpress.org/plugins/ml-slider/)** hasta **[Smart Slider 3](https://es.wordpress.org/plugins/smart-slider-3/)**, pasando por **[Master Slider](https://es.wordpress.org/plugins/master-slider/)**, los premium **[Revolution](https://caribdis.link/RS)** y **[Layer](https://caribdis.link/Layer)**, y la gran mayoría de los que están disponibles en el [repositorio](https://wordpress.org/plugins/search/Responsive+Slider/).

También suponemos que el tema hijo ya está creado y activado. De no ser así, las instrucciones se encuentran en [esta entrada anterior](https://caribdis.net/2017/07/12/hestia-como-anadir-un-segundo-boton-en-la-seccion-de-titulo-grande/).

Ahora sí, en el archivo `functions.php`, a continuación del código presente, pegamos esta función:
function hestia_child_slider() {
?>
<div>
<?php echo do_shortcode('[código-plugin]'); ?>
</div>
<?php
}
add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' );
Donde `[código-plugin]` será el código corto *(shortcode)* del slider.

### Paso 2: Ocultar la sección de título grande con CSS

El código anterior no hace más que agregar el slider **debajo de la sección de título grande**. En versiones anteriores de **Hestia**, esta sección entera se "imprimía" mediante una función que se podía modificar desde el tema hijo. A partir de la versión **1.1.78** esa función ya no está presente, por lo que se debe recurrir al *hook* para añadir el código del slider y a unas líneas de CSS para ocultar la sección.

Vamos a ir primero al *Personalizador > Secciones de la página de inicio > Sección de título grande*, eliminamos la imagen de fondo y dejamos todos los campos en blanco. Publicamos los cambios.

Luego, en el archivo `style.css` del tema hijo (o en el recuadro *CSS adicional* del Personalizador) pegaremos el siguiente código:
#carousel-hestia-generic {
display: none;
}

Y para que las imágenes no queden debajo de la barra del menú en dispositivos móviles, agregaremos lo siguiente:
@media (max-width: 768px) {
.carousel-inner {
padding-top: 70px;
}
}

Eso es todo.

Veamos un ejemplo con **Smart Slider 3**, que ya incluye un slider de demo. Vamos a *Smart Slider* y le damos clic a *Sample Slider*. En la pestaña *Publicar* buscamos el código abreviado y lo copiamos.

[![Hestia - Smart Slider 3](https://caribdis.net/wp-content/uploads/2018/03/hestia-slider.png)](https://caribdis.net/wp-content/uploads/2018/03/hestia-slider.png)

Lo pegamos dentro de la función, que quedaría de la siguiente manera:
function hestia_child_slider() {
?>
<div>
<?php echo do_shortcode('[smartslider3 slider=1]'); ?>
</div>
<?php
}
add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' );

¿Qué tal se ve? Hete aquí una demo en funcionamiento: [https://demos.caribdisweb.com/hestia/](https://demos.caribdisweb.com/hestia/)

En este ejemplo, **Smart Slider** no añade comillas en el código, pero recordemos que si un plugin distinto lo genera con comillas dobles, tendremos que envolverlo en comillas simples:
<?php echo do_shortcode('[metaslider]'); ?>

Si el plugin genera un código abreviado con comillas simples, envolverlo en comillas dobles.

<?php echo do_shortcode("[whatev-slider id='77']"); ?>