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, 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.

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 de ThemeIsle, ya lo ha superado en popularidad 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, no solo porque la gran mayoría de las dudas ya están respondidas, sino también para poder concentrarme de lleno en 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.

Esa decisión de abandonar el tópico Zerif Lite, más las ganas de incursionar en la creación de plantillas para 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://caribdis.bid

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: 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

Paso 4: Descargar plantilla Zerif Lite para Elementor.

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

Paso 6: Clic en Añadir plantilla.

Zerif - Elementor - Añadir plantilla

Paso 7: Clic en el icono Importar plantilla.

Zerif - Elementor - Importar plantilla

Paso 8: Cargar el archivo descargado Zerif-Lite-Elementor-Caribdis.Net.zip.

Zerif - Elementor - Cargar archivo

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

No olvidar asignar la categoría de entradas, en caso de elegir mostrar la sección Últimas noticias.

Zerif - Elementor - Categoría de entradas

Una vez editada a gusto, asignar la plantilla de página ↔ Constructor de páginas – Ancho completo.

Zerif - Elementor - Plantilla de ancho completo

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://caribdis.bid/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

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

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, GeneratePress, 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.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)