Atención: Este tutorial aplica a la versión 1.8.5.9 y superiores del repositorio de WordPress.org. El tutorial para la versión 2.0 se encuentra aquí.

Después de cinco meses de suspensión, Zerif Lite de ThemeIsle volvió a estar disponible para descarga desde el repositorio de temas de WordPress, y para instalación vía administrador desde Apariencia > Temas.

Con el objetivo de aprobar las directrices exigidas por el equipo de revisión de temas, ThemeIsle ha tenido que hacer algunos grandes cambios en el código de Zerif Lite, principalmente para trasladar los widgets específicos de cada sección de la portada a un plugin separado.

En el medio, como muchos saben e informamos oportunamente, ThemeIsle continuó ofreciendo acceso a Zerif Lite desde su propia web, mientras efectuaba los ajustes necesarios para adecuar el código a las normas provistas por el TRT (equipo de revisión de temas).

Luego de muchas idas y venidas, desde fines de febrero Zerif Lite está de vuelta en WordPress.org, al parecer, para quedarse. Y debido  a esos grandes cambios, el tutorial original ya no corresponde a esta nueva versión. Por eso, en esta entrada lo actualizaré con las instrucciones pertinentes a Zerif Lite 1.8.5.x que se obtiene del repositorio.

Descargar archivos de traducción

(Zerif Lite ya incluye los archivos de traducción, pero podrían no estar actualizados)

Descargar archivos de traducción del plugin Pirate Forms

(Pirate Forms ya incluye los archivos de traducción, pero podrían no estar actualizados)

Instalar el tema

Zerif Lite se instala como cualquier tema del repositorio de WordPress, buscándolo en Apariencia > Temas > Añadir tema.

Zerif Lite - Instalar tema

Una vez instalado y activado Zerif Lite aparecerá un aviso para instalar los plugins necesarios: ThemeIsle Companion y Pirate Forms.

Zerif Lite - Plugins necesarios

Zerif Lite - Instalar plugins necesarios

Una vez que las instalaciones se hayan completado, hacer clic en el enlace Volver al instalador de plugins necesarios. Activar los plugins.

Zerif Lite - Activar plugins necesarios

Se agregará un nuevo elemento en el menú Apariencia, denominado Sobre Zerif Lite, que es una página de bienvenida con cinco o seis pestañas que revelarán información importante sobre el tema y su desarrollo:

Zerif Lite - Página de bienvenida

Comenzar – En esta pestaña encontrará un enlace a las medidas recomendadas (por ejemplo, si aún no se han instalado y/o activado los plugins necesarios, aparecerá una cruz junto al enlace y una pestaña adicional), el enlace a la documentación oficial de ThemeIsle, y un botón para abrir el Personalizador de WordPress para comenzar a configurar la apariencia del tema.

Zerif Lite - Medidas recomendadas

Medidas recomendadas – En esta pestaña se marcarán los pasos necesarios para el correcto funcionamiento del tema. Se sugiere la instalación y activación del plugin Pirate Forms para el formulario de contacto, y es estrictamente necesaria la instalación y activación del plugin ThemeIsle Companion para tener acceso a los widgets de las secciones. Esta pestaña no se mostrará si ambos plugins ya se encuentran instalados y activados.

Plugins útiles – En esta pestaña se muestra una lista de plugins útiles que son totalmente compatibles con Zerif Lite y enriquecerán su funcionalidad. La instalación es opcional.

Temas hijos – En esta pestaña encontrará una lista de temas hijos que podrá descargar o acceder a una vista previa: ResponsiveBoat, Zblackbeard, OnePirate, Zerius y Zifer Child.

Soporte – En esta pestaña encontrará enlaces al soporte de ThemeIsle, a la documentación del tema, y a varios tutoriales para potenciar el rendimiento y ampliar funcionalidades de Zerif Lite.

Gratis vs. PRO – En esta pestaña encontrará un cuadro comparativo de las características de la versión gratuita frente a la versión PRO.

Configuración de página frontal

En primer lugar, deberá crear una página nueva. Puede nombrarla, por ejemplo, Inicio, y no es necesario asignarle ninguna plantilla ni añadir contenido.

Luego vaya a Ajustes > Lectura y seleccione la página que ha creado en la opción Página frontal muestra > Una página estática.

Zerif Lite - Configurar la página de inicio

Ya estará listo para ir a Apariencia > Personalizar y empezar a personalizar el contenido de su página de inicio.

Instrucciones para personalizar el tema

Toda la personalización de Zerif Lite se lleva a cabo desde el Personalizador integrado de WordPress. Haga clic en Apariencia > Personalizar y verá todas las opciones disponibles, junto con la vista previa en vivo.

Zerif Lite - Personalizador

Ver la versión PRO

Aquí podrá ver una lista de características que incluye la versión premium de Zerif:

  • Orden de secciones
  • Vídeo de fondo
  • Portfolio
  • Colores adicionales
  • Sección de Paquetes
  • Sección de Suscripción
  • Sección de mapa de Google
  • Soporte

Identidad del sitio

Aquí puede añadir un logo para que aparezca en la cabecera de la página, del lado izquierdo. El tamaño recomendado para este tema es de 109 x 32 píxeles. Haga clic en el botón Selecciona imagen, busque la imagen en la Biblioteca multimedia o suba una nueva y haga clic en Guardar.

Además, podrá configurar el título del sitio, la descripción y el icono del sitio (favicon) tal como lo haría con cualquier otro tema de WordPress.

Secciones de la página de inicio

Aquí tendrá acceso a todas las secciones que podrá editar.

Sección de título grande > Contenido principal


Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección de título grande?

Título – Escriba aquí un título para el encabezado.

Etiqueta del botón rojo – Escriba aquí el texto para el botón de la izquierda, que aparecerá debajo del encabezado.

Enlace del botón rojo – Escriba aquí el enlace donde apunta el botón de la izquierda.

Etiqueta del botón verde – Escriba aquí el texto para el botón de la derecha, que aparecerá debajo del encabezado, junto al botón rojo.

Enlace del botón verde – Escriba aquí el enlace donde apunta el botón de la derecha.

Puede elegir no mostrar ningún botón, dejando todos los campos en blanco, o mostrar uno u otro individualmente, completando los campos correspondientes.

Sección de título grande > Efecto Parallax

Esta opción que antes solo estaba disponible en la versión PRO de Zerif, sirve para reemplazar la imagen fija de fondo con un efecto de superposición de dos imágenes, que tendrán un leve movimiento al desplazar el puntero del ratón.

¿Usar efecto Parallax? – Seleccione esta casilla si desea usar las imágenes predeterminadas, o subir las imágenes desde su equipo o de la Biblioteca multimedia.

Imagen 1 – Seleccione aquí la imagen que aparecerá como fondo.

Imagen 2 – Seleccione aquí la imagen que se superpondrá, la cual deberá estar en formato PNG transparente.

Sección “Quiénes somos” > Contenido principal

Zerif Lite - Contenido de la sección "Quiénes somos"

Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección “Quiénes somos”?

Título – Escriba aquí un título para esta sección.

Subtítulo – Escriba aquí una descripción breve de esta sección, o deje el campo en blanco para no mostrar un subtítulo.

Título grande del lado izquierdo – Escriba aquí un título para las características.

Texto – Escriba aquí una descripción de las características.

Sección “Quiénes somos” > Característica 1

Aquí puede añadir la primera de las cuatro características o habilidades con un medidor circular de porcentaje, un título y una breve descripción. El medidor circular se mostrará de color rojo.

Sección “Quiénes somos” > Característica 2

Aquí puede añadir la segunda de las cuatro características o habilidades con un medidor circular de porcentaje, un título y una breve descripción. El medidor circular se mostrará de color verde.

Sección “Quiénes somos” > Característica 3

Aquí puede añadir la tercera de las cuatro características o habilidades con un medidor circular de porcentaje, un título y una breve descripción. El medidor circular se mostrará de color azul.

Sección “Quiénes somos” > Característica 4

Aquí puede añadir la última de las cuatro características o habilidades con un medidor circular de porcentaje, un título y una breve descripción. El medidor circular se mostrará de color amarillo.

Para no mostrar una o más características, debe dejar los campos correspondientes en blanco.

Tutorial de Zerif Lite - "Quiénes somos"

Secciones de Llamado a la acción > Con botón inferior

Zerrif Lite - Llamado a la acción (Botón inferior)

Esta es una franja que aparecerá debajo de la sección “Nuestro enfoque” con un color verde de fondo superpuesto, texto en color blanco y un botón inferior al cual se puede asignar un enlace.

Puede elegir no mostrar esta sección, dejando los tres campos en blanco.

Secciones de Llamado a la acción > Con botón a la derecha

Zerrif Lite - Llamado a la acción (Botón a la derecha)

Esta es una franja que aparecerá debajo de la sección “Testimonios” con un color de fondo rojo, un texto en color blanco y un botón a la derecha al cual se puede asignar un enlace.

Puede elegir no mostrar esta sección, dejando los tres campos en blanco.

Área de clientes

Zerif Lite - Área de clientes

Aquí puede añadir los logos y enlaces a los sitios de sus clientes, mediante el widget Zerif – Widget de clientes, además de cambiar el título de la sección. Solo aparecerá si hay al menos un widget de clientes añadido.

El tamaño recomendado para los logos es de 130×50 píxeles.

Zerif Lite - Widget de logos de clientes

Sección “Nuestro enfoque”

Zerif Lite - Sección Nuestro enfoque

Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección “Nuestro enfoque”?

Título – Escriba aquí un título para sus servicios o productos.

Subtítulo de “Nuestro enfoque” – Escriba aquí una descripción breve de sus servicios o productos.

Los distintos servicios o productos se pueden añadir por medio de widgets. Haga clic en el botón Añadir un widget y seleccione Zerif – Widget de Nuestro enfoque de la lista. Una vez añadido el widget, puede escribir el título, el texto, subir una imagen y asignarle un enlace.

El tamaño recomendado para las imágenes es de 150×150 píxeles.

Sección “Nuestro equipo”

Zerif Llite - Sección Nuestro equipo

Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección “Nuestro equipo”?

Título – Escriba aquí un título para presentar a su equipo.

Subtítulo de “Nuestro equipo” – Escriba aquí una descripción breve de su equipo.

Los distintos miembros del equipo se pueden añadir por medio de widgets. Haga clic en el botón Añadir un widget y seleccione Zerif – Widget de Miembro de equipo de la lista. Una vez añadido el widget, puede escribir el nombre, el puesto, la descripción, los enlaces a redes sociales, y subir una imagen.

El tamaño recomendado para las imágenes es de 174×174 píxeles.

Sección “Testimonios”

Zerif Lite - Sección "Testimonios"

Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección “Testimonios”?

¿Usar diseño de Pinterest? – Seleccione esta casilla para mostrar los testimonios con un diseño similar al de Pinterest.

Título – Escriba aquí un título para los testimonios.

Subtítulo de “Testimonios” – Escriba aquí una descripción breve para los testimonios.

Los distintos testimonios se pueden añadir por medio de widgets. Haga clic en el botón Añadir un widget y seleccione Zerif – Widget de Testimonios de la lista. Una vez añadido el widget, puede escribir el nombre del autor, el enlace, los detalles del autor, el texto del testimonio y subir una imagen.

El tamaño recomendado para las imágenes es de 73×73 píxeles.

Sección “Últimas noticias”

Zerif Lite - Sección "Últimas noticias"

Esta es la sección que mostrará sus últimas entradas del blog. Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección “Últimas noticias”?

Título de “Últimas noticias” – Escriba aquí un título para esta sección.

Subtítulo de “Últimas noticias” – Escriba aquí una descripción breve para esta sección.

Sección “Contáctenos”

Zerif Lite - Sección "Contáctenos"

Esta es la sección que mostrará el formulario de contacto. Deberá instalar el plugin Pirate Forms para una experiencia óptima. Puede elegir no mostrar esta sección, seleccionando la casilla ¿Ocultar sección “Contáctenos”?

Título de sección “Contáctenos” – Escriba aquí un título para esta sección.

Subtítulo de sección “Contáctenos” – Escriba aquí una descripción breve para esta sección.

Correo electrónico – Escriba aquí la dirección donde recibirá los mensajes enviados desde el formulario.

Etiqueta del botón – Escriba aquí el texto que desea que aparezca en el botón Enviar.

¿Ocultar reCaptcha? – La opción de reCaptcha funcionará únicamente si proporciona los datos de la API generados en su cuenta de Google.

Clave del sitio – Cree una cuenta en Google para obtener la clave del sitio para reCaptcha.

Clave secreta – Cree una cuenta en Google para obtener la clave secreta para reCaptcha.

Opciones del pie de página > Iconos de redes sociales del pie de página

Zerif Lite - Iconos de redes sociales

Aquí puede añadir las cuentas de las redes sociales más importantes (Facebook, Twitter, LinkedIn, Bēhance, Dribbble e Instagram). Los enlaces a las redes sociales se mostrarán en el pie de página. Para no mostrar el icono de determinada red social, deje el campo correspondiente en blanco.

Opciones del pie de página > Contenido del pie de página

Zerif Lite - Datos del pie de página

Copyright del pie de página – Aquí puede añadir un texto de copyright que aparecerá en el pie de página, justo debajo de los iconos de redes sociales y arriba de la leyenda “Zerif Lite desarrollado por ThemeIsle”.

Podrá también añadir su dirección de correo electrónico, número de teléfono y dirección, así como también usar iconos personalizados. Estos datos se mostrarán en el pie de página.

Menús > Ubicaciones de menús

Este tema soporta un único menú. Selecciónelo del menú desplegable. Puede editar el contenido del menú desde el administrador de WordPress Apariencia > Menús.

Configurar el menú

Para enlazar a las distintas secciones de la página de inicio, deberá añadir Enlaces personalizados y usar los anclajes correspondientes:

Anclaje de enlaces para la página de inicio – La página principal de Zerif tiene una serie de secciones personalizadas a las cuales puede apuntar desde el menú de navegación. Para esto, debe añadir los siguientes anclajes a la URL de cada elemento del menú:

#focus para la sección “Nuestro enfoque”

#aboutus para la sección “Quiénes somos”

#team para la sección “Nuestro equipo”

#testimonials para la sección “Testimonios”

#latestnews para la sección “Últimas noticias”

#contact para la sección “Contáctenos”

Widgets

Con las últimas versiones de Zerif Lite se añadieron tres áreas de widgets al pie de página. Aquí puede incluir cualquier widget que desee.

Portada estática

Zerif Lite - Portada estática

Página frontal muestra – Aquí deberá asignar las páginas para que se muestre correctamente el tema: una página estática para inicio y una página estática para el blog. Ambas páginas deben crearse previamente, sin contenido.

Opciones avanzadas > Opciones generales

Zerif Lite - Opciones generales
Use safe font? – La fuente principal de Zerif Lite es Montserrat, que tiene soporte únicamente para la configuración en latín. Si se usa otro conjunto de caracteres, como el cirílico o griego, deberá seleccionar esta casilla para activar las fuentes seguras y obtener una mejor compatibilidad.

¿Desactivar carga previa? – La carga previa es el elemento circular de progreso que aparece en el sitio en primer lugar. Cuando la animación finaliza el progreso de carga, todos los elementos de la página serán revelados. La carga previa se usa de manera creativa para que la espera no le resulte tan aburrida al visitante. Al seleccionar esta casilla, la carga previa será desactivada.

¿Desactivar desplazamiento suave? – El desplazamiento suave puede ser muy útil si se trata de una página muy extensa. Por lo general, cuando se hace clic en la flecha abajo de la barra de desplazamiento, la vista hace un salto directo de una página. Con el desplazamiento suave se desliza hacia abajo más lentamente, para que se pueda ver el contenido a medida que se baja. Esto facilita la lectura para continuar desde el sector donde se encontraba antes. Al seleccionar esta casilla, el desplazamiento suave será desactivado.

¿Activar accesibilidad? – La accesibilidad web significa que las personas con discapacidades pueden usar un sitio web. Más específicamente, significa que las personas con discapacidades pueden percibir, entender, navegar e interactuar con la web, y que pueden contribuir con ella. La accesibilidad web también beneficia a otros, incluyendo a personas mayores con dificultades propias de la edad. Al seleccionar esta casilla, activará esta opción en el sitio.

Change the template to Full width for all the pages? – Si selecciona esta casilla, se desactivará la barra lateral en las páginas y se mostrarán en ancho completo de manera predeterminada.

¿Mantener la antigua plantilla de página de inicio estática? – Si selecciona esta casilla, la página de inicio mostrará el contenido estático de la página que haya seleccionado en Ajustes > Lectura > Página frontal muestra > Una página estática.

Opciones avanzadas > Colores

Zerif Lite - Colores

Aquí podrá seleccionar un color de fondo para la página de inicio, en caso de no usar una imagen de fondo.

Opciones avanzadas > Imagen de fondo

Esta será la imagen de fondo para la página de inicio y la cabecera del blog. Haga clic en el botón Cambiar imagen para subir una nueva imagen o buscar una en la Biblioteca multimedia. El tamaño recomendado para este tema es de 2048 x 1365 píxeles.

Si no selecciona ninguna imagen, se usará la predeterminada del tema. Si la elimina, se mostrará el color de fondo blanco (predeterminado), o el que haya seleccionado desde Opciones avanzadas > Colores.

Opciones avanzadas > Opciones de cabecera del blog

Zerif Lite - Opciones de cabecera del blog

Aquí podrá escribir un título y un subtítulo para la página que muestra las entradas del blog. Si se dejan los dos campos en blanco, no se mostrará la cabecera (que toma la imagen de fondo asignada en Opciones avanzadas > Imagen de fondo).

Zerif Lite - Cabecera del blog

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