---
title: "Zerif Lite: ¿Cómo reemplazar la sección de título grande con un slider?"
url: https://caribdis.net/2015/11/19/zerif-lite-como-reemplazar-la-seccion-de-titulo-grande-con-un-slider/
date: 2015-11-19
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Actualizado para la versión 1.8.5.22 - 21/05/2017 Esta semana arrancamos con una serie de tutoriales para personalizar varios aspectos del tema gratuito Zerif Lite, de ThemeIsle, tanto del diseño como..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 463
---

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

** **Actualizado para la versión 1.8.5.22 - 21/05/2017**
Esta semana arrancamos con una serie de tutoriales para personalizar varios aspectos del tema gratuito **Zerif Lite**, de [ThemeIsle](https://caribdis.link/ThemeIsle), tanto del diseño como de la funcionalidad.

En esta segunda entrega, vamos a aprender a reemplazar la sección de título grande de **Zerif** con un plugin de slider o carrusel.

Este procedimiento es sumamente fácil a partir de la versión 1.8.5.22, publicada en el repositorio de WordPress.org el 16 de mayo de 2017.

#### Paso 1:

Cualquier [plugin](https://wordpress.org/plugins/search/slider/) que genere códigos abreviados servirá. De más está decir que el plugin debe estar instalado, activado, y con al menos un slider creado. El código abreviado o *shortcode* es una pequeña porción de texto con una ID o alias que la gran mayoría de los plugins usan para poder insertar el slider dentro del contenido de una página.

Tan solo tendremos que copiar el código abreviado generado por el plugin de slider. Por ejemplo, para [Meta Slider](https://wordpress.org/plugins/ml-slider/), el código abreviado se encuentra en el panel ***Uso*** que aparece del lado derecho de la página del pase de diapositivas. Para [Soliloquy](https://wordpress.org/plugins/soliloquy-lite/), se encuentra en la columna ***Shortcode*** de la lista de sliders. Para [Crelly Slider](https://wordpress.org/plugins/crelly-slider/), se encuentra en la columna ***Shortcode*** del listado de diapositivas.

![Código abreviado de Meta Slider](https://caribdis.net/wp-content/uploads/2015/11/metaslider.png)Código abreviado generado por el plugin Meta Slider

Luego, abriremos el Personalizador y navegaremos a *Secciones de la página de inicio > Sección de título grande > Contenido principal* y en el campo *Código abreviado del slider* pegaremos el código recién copiado.

![Zerif con Meta Slider](https://caribdis.net/wp-content/uploads/2015/11/zerif-metaslider-1.png)

#### Paso 2:

Para una óptima integración, es necesario incluir unas líneas de CSS y así evitar que el slider quede debajo de la barra de navegación. Si estamos usando un tema hijo, pegaremos el siguiente código en el archivo `custom.css`. Si no, en el campo *CSS adicional* dentro del Personalizador:
@media screen and (max-width:1023px) {
.home-slider-plugin {
padding-top: 111px;
}
}
@media screen and (max-width:767px) {
.home-slider-plugin {
padding-top: 0px;
}
}
 @media screen and (min-width:768px) {
.home-slider-plugin {
padding-top: 76px;
}
}

### Algunos ejemplos con imágenes

Con [**MetaSlider**](https://wordpress.org/plugins/ml-slider/):

![Zerif Lite con MetaSlider](https://caribdis.net/wp-content/uploads/2015/11/zerif-metaslider.jpg)

Con [**Slider Revolution**](https://caribdis.link/SR):

![Código abreviado de Slider Revolution](https://caribdis.net/wp-content/uploads/2015/11/zerif-revslider-1.png)Código abreviado generado por el plugin Slider Revolution

[![Zerif Lite con Slider Revolution](//caribdis.net/wp-content/uploads/2015/11/zerif-revslider-1024x640.jpg)](https://caribdis.net/wp-content/uploads/2015/11/zerif-revslider.jpg)

## Insertar un código abreviado en una nueva sección

Por ejemplo, si necesitamos una sección nueva en la página de inicio que nos muestre una galería de fotos, podemos usar parte del [tutorial anterior](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/), y en lugar de crear un área de widgets, pegar el código abreviado de la galería (en nuestro caso, creada con [**FooGallery**](https://caribdis.net/project/foogallery-por-fooplugins-documentacion-en-espanol/)).

En el archivo `new_section.php`, donde teníamos el siguiente código:
<?php
   if ( is_active_sidebar( 'new-section-sidebar' ) ) :
   dynamic_sidebar( 'new-section-sidebar' );
   else:
echo 'Añada algunos widgets aquí.';
   endif;
?>
Pegaremos:

[![Código abreviado de FooGallery](//caribdis.net/wp-content/uploads/2015/11/shortcode-foo.jpg)](https://caribdis.net/wp-content/uploads/2015/11/shortcode-foo.jpg)
<?php echo do_shortcode('[foogallery id="1459"]'); ?>
El resultado:

[![Zerif con FooGallery](//caribdis.net/wp-content/uploads/2015/11/zerif-foo-1024x640.jpg)](https://caribdis.net/wp-content/uploads/2015/11/zerif-foo.jpg)

Tener en cuenta lo siguiente: si el plugin genera un código abreviado con comillas dobles, envolverlo en comillas simples (como el ejemplo anterior). Si el plugin genera un código abreviado con comillas simples, envolverlo en comillas dobles.