--- title: "Zerif Lite como plantilla de Elementor" url: https://caribdis.net/2018/02/14/zerif-lite-como-plantilla-de-elementor/ date: 2018-02-14 modified: 2024-11-07 lang: es author: "Caribdis.Net" description: "Luego de unas “vacaciones” forzadas, resucito el blog con aquella que será la última entrada dedicada al tema gratuito Zerif Lite. Zerif Lite fue durante más de dos años el..." categories: - "Elementor" - "Zerif Lite" tags: - "Elementor" - "Zerif Lite" image: https://caribdis.net/wp-content/uploads/2018/02/zerif-plantilla-elementor.jpg word_count: 1202 --- # Zerif Lite como plantilla de Elementor Luego de unas “vacaciones” forzadas, resucito el blog con aquella que será la última entrada dedicada al tema gratuito **Zerif Lite**. **Zerif Lite** fue durante más de dos años el producto estrella de [**ThemeIsle**,](https://caribdis.link/ThemeIsle) desde su inclusión en el repositorio de **WordPress**, allá por agosto de 2014. No solo eso, sino que podría catalogarse como el tema gratuito (excepto los temas predeterminados de WP) más descargado y usado desde entonces, un título que ostentó hasta el famoso incidente de la [suspensión en septiembre de 2016](https://caribdis.net/2016/09/16/zerif-lite-suspendido-del-repositorio-de-temas-de-wordpress-org/). Tres años y medio después de ver la luz, **Zerif Lite** sigue siendo uno de los temas más populares, con más de 100 mil instalaciones activas. Sin embargo, dada la enorme oferta de temas y la evolución en tendencias de diseño de los últimos tiempos, ha quedado bastante rezagado en comparación con otros, tanto en términos de estética como de funcionalidad. Sin ir más lejos, **Hestia**, que [lo ha reemplazado como producto de bandera](https://www.codeinwp.com/blog/transparency-report-32/#4) de **ThemeIsle**, ya lo ha superado en [popularidad](https://wordpress.org/themes/browse/popular/) y goza desde hace varios meses de la atención principal por parte de los autores. Hace rato ya que **ThemeIsle** anunció en uno de sus boletines de noticias una versión 2.0 de **Zerif**, cuyo lanzamiento mencionó como previsto para “la primera parte de 2018”. Sea que esto se concrete o no, ya no considero necesario agregar tutoriales nuevos, ni seguir actualizando los existentes. Tomé, además, la decisión de **cerrar los comentarios** en la categoría de [**Zerif Lite**](https://caribdis.net/category/zerif-lite/), no solo porque la gran mayoría de las dudas ya están respondidas, sino también para poder concentrarme de lleno en [**Hestia**](https://caribdis.net/category/hestia/). En el caso de que salga la versión 2.0 de **Zerif**, se creará una categoría aparte para contener los nuevos tutoriales, pero hasta entonces solo habrá nuevas entradas y nuevas respuestas en [**Hestia**](https://caribdis.net/category/hestia/). Esa decisión de abandonar el tópico **Zerif Lite**, más las ganas de incursionar en la creación de plantillas para [**Elementor**](https://caribdis.link/Elementor) que tenía desde que comencé a usar activamente este excelente constructor de páginas, tienen como corolario esta entrada. ¿Por qué no crear una réplica (casi) exacta de **Zerif Lite** que sea totalmente editable? Sin necesidad de cambiar de tema ni de invertir en versiones Pro, la opción gratuita de **Elementor** es la herramienta perfecta para tener el control absoluto de los elementos de estilo y estructura. ### ¿Cómo se va a ver? No idéntica, pero muy parecida. :) Se puede ver en funcionamiento en el siguiente enlace: [https://demos.caribdisweb.com/](https://demos.caribdisweb.com/) Las principales diferencias están en la lista de habilidades (ya que la versión gratuita de **Elementor** no contiene el módulo de contadores circulares), y en el efecto de aparición de la descripción de los miembros del equipo (que no está presente). Lo demás es prácticamente igual, y hasta he incluido tres características de la versión [**PRO**](https://caribdis.link/ZerifPRO): el portfolio, la tabla de precios y el mapa. Todas las secciones son opcionales; aquella que no se necesite puede ser eliminada sin complicaciones. ### ¿Cuándo usarla? Desde el momento en que se necesiten cambios de estilo que no puedan lograrse con los ajustes del tema, deberá considerarse el uso de esta plantilla. Y si son necesarias nuevas secciones, es más que recomendable (de esta manera no habrá que lidiar con kilómetros de código adicional, temas hijos y modificaciones que **Elementor** hace posibles con un par de clics). Es cierto que se requerirá cierta curva de aprendizaje de **Elementor** (en especial, para aquellos que no lo hayan usado nunca). Sin embargo, se trata de uno de los constructores más intuitivos, y dada la abrumadora popularidad que alcanzó en el último año, sobran en la web los tutoriales, los cursos en vídeo y las entradas con trucos, información útil y consejos para aprovechar al máximo este completísimo plugin gratuito. ### Instrucciones para usar la plantilla Paso 1: Instalar y activar el plugin **Elementor**. Paso 2: Instalar y activar el plugin **OrbitFox**. Si ya estamos usando **Zerif Lite**, es más que seguro que este plugin esté instalado y activado, ya que es necesario para el correcto funcionamiento del tema. El plugin **Pirate Forms** también debe estar instalado y activado para que se muestre el formulario de la sección *Contacto.* Paso 3: En los ajustes generales de **OrbitFox,** activar los módulos **Widgets de constructor de páginas** y **Directorio de plantillas**. ![Módulos de OrbitFox](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-orbitfox.png) Paso 4: Descargar plantilla **[Zerif Lite para Elementor](https://caribdis.link/ZerifElementor)**. Paso 5: Crear una nueva página, introducir un título (en el ejemplo *Zerif Lite con Elementor*), hacer clic en el botón ***Editar con Elementor*** y asignarle la plantilla **Elementor Canvas**. Este es un paso provisorio, para trabajar con mayor comodidad en la edición de las secciones. La plantilla se puede seleccionar antes de cargar el constructor, desde el panel *Atributos de página*, o desde Elementor, con un clic en *Ajustes* (el icono del engranaje en la parte inferior izquierda del panel del constructor). ![Zerif - Plantilla de Elementor](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-canvas.png) Paso 6: Clic en **Añadir plantilla**. [![Zerif - Elementor - Añadir plantilla](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-agregar-plantilla-768x215.png)](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-agregar-plantilla.png) Paso 7: Clic en el icono **Importar plantilla**. [![Zerif - Elementor - Importar plantilla](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-importar-plantilla-768x180.png)](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-importar-plantilla.png) Paso 8: Cargar el archivo descargado `Zerif-Lite-Elementor-Caribdis.Net.zip`. [![Zerif - Elementor - Cargar archivo](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-cargar-archivo-plantilla-768x432.png)](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-cargar-archivo-plantilla.png) La importación puede llevar un tiempo, ¡paciencia! Una vez importada, aparecerá en la lista dentro de la pestaña *Mis plantillas*. Paso 9: Insertar la plantilla importada con un clic en el botón **Insertar**. [![Zerif - Elementor - Insertar plantilla](https://caribdis.net/wp-content/uploads/2018/02/zerif-insertar-plantilla-768x230.png)](https://caribdis.net/wp-content/uploads/2018/02/zerif-insertar-plantilla.png) No olvidar asignar la categoría de entradas, en caso de elegir mostrar la sección *Últimas noticias*. ![Zerif - Elementor - Categoría de entradas](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-categoria-blog.png) Una vez editada a gusto, asignar la plantilla de página **↔ Constructor de páginas - Ancho completo**. ![Zerif - Elementor - Plantilla de ancho completo](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-template.png) Por último, para usar el diseño como página de inicio, asignar la página en *Ajustes > Lectura > Tu portada muestra > Una página estática*. ### ¿Qué se puede hacer con esta plantilla? - Eliminar secciones que no se necesitan - Cambiar el orden de las secciones1 - Agregar secciones nuevas, clonar secciones existentes, y añadir contenido personalizado - Cambiar las fuentes, tamaños y colores de todos los textos de la portada - Cambiar los colores de fondo o usar imágenes / vídeos de fondo - Usar separadores irregulares de secciones - Usar códigos abreviados de otros plugins - Cambiar los nombres de los enlaces de anclaje2 - Cualquier otra cosa que la imaginación y **Elementor** nos permitan. Por ejemplo: [https://demos.caribdisweb.com/zerif-personalizado/](https://demos.caribdisweb.com/zerif-personalizado/) 1 Con un simple “arrastrar y soltar” y desplazando la página con la rueda del ratón. ![Zerif - Elementor - Cambiar el orden de las secciones](https://caribdis.net/images/Zerif-Elementor.gif) 2 Dentro del panel de **Elementor**, ir a las opciones avanzadas de la sección y editar el nombre del campo *ID de CSS* (recordar asignar el mismo nombre en los elementos del menú). [![Zerif - Elementor - ID de sección](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-ID-seccion-768x432.png)](https://caribdis.net/wp-content/uploads/2018/02/zerif-elementor-ID-seccion.png) ### Otros detalles para tener en cuenta - La plantilla está creada para ser usada con el tema **Zerif Lite**, pero funcionará correctamente con cualquier otro tema que admita páginas de ancho completo (por ejemplo, [**Twenty Seventeen**](https://caribdis.net/2017/01/15/tutorial-de-twenty-seventeen-el-nuevo-tema-predeterminado-de-wordpress/), [**GeneratePress**](https://caribdis.link/GeneratePress), [**Astra**](https://caribdis.link/Astra), etc.). - Las fuentes de textos y títulos serán las predeterminadas del tema (debe estar marcada la casilla *Desactivar fuentes por defecto* en los *Ajustes* de **Elementor**; para usar otras fuentes, será necesario editarlas por módulo). **Elementor** incluye más de 800 fuentes disponibles en la biblioteca de **Google Fonts**. Para corregir el tamaño de los títulos de entradas de la sección *Últimas noticias*, en el recuadro *CSS adicional* del Personalizador, agregar el siguiente código: .obfx-grid .obfx-grid-title, .obfx-grid .obfx-grid-title a {      font-size: 16px !important; } Para mostrar el borde y la imagen circular en los testimonios, agregar el siguiente código: #testimonials img {     border-radius: 999px;     border: 3px solid #f6f6f6; } Dudas y consultas, serán respondidas en la sección de comentarios.