Atención: Este tutorial aplica a la versión 2.0.x y anteriores a la suspensión de Zerif Lite del repositorio de WordPress.org. A partir de la revisión 1.8.5.9 las instrucciones de configuración difieren entre versiones. El tutorial para la versión del repositorio se encuentra aquí.

Hoy les traemos uno de los temas de una sola página más populares. Gratuito y súper fácil de usar, Zerif Lite por ThemeIsle es ideal para una agencia web, una empresa, un sitio personal o un portfolio. Está construido con Bootstrap y soporte Parallax, es adaptable a los distintos dispositivos móviles y mantiene un diseño minimalista, prolijo y moderno. Es compatible con WooCommerce, WPML, RTL, Retina-Ready, y está listo para la optimización en motores de búsqueda (SEO).

Descargar última versión de Zerif Lite

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)

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

Comenzar – En esta pestaña encontrará un resumen de enlaces a tutoriales de la documentación oficial de ThemeIsle, y una lista de plugins recomendados para potenciar el rendimiento de Zerif Lite.

Medidas requeridas – En esta pestaña se marcarán los pasos necesarios para el correcto funcionamiento del tema. Se sugiere la instalación del plugin Pirate Forms para el formulario de contacto.

Temas hijos – En esta pestaña encontrará una lista de temas hijos que podrá descargar del sitio de ThemeIsle o instalar directamente:  Zblackbeard, ResponsiveBoat, OnePirate, Zerius y Zifer Child.

Colaborar – En esta pestaña encontrará el enlace a Zerif Lite en Github para sumarse al proceso de desarrollo y mantenimiento del tema.

Registro de cambios – En esta pestaña encontrará la información completa de los cambios y correcciones de las distintas versiones del tema.

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.

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.

Información del tema

Esta sección contiene enlaces a la documentación, a la demo en el sitio de ThemeIsle, a una comparativa entre las versiones gratuita y de pago, y a la página de calificaciones en WordPress.org.

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.

Opciones generales > General

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.

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 funciona con WordPress”.

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.

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


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 generales > Contenido del pie de página


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

Sección de título grande > Contenido principal


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.

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

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 “Nuestro enfoque” > Contenido

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.

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

Sección “Nuestro enfoque” > Widgets de la sección “Nuestro enfoque”

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 “Quiénes somos” > Ajustes

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

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

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"

Sección “Quiénes somos” > Client title area

Aquí puede cambiar el título que aparece antes de los logos de los clientes. Solo aparecerá si hay al menos un widget de clientes añadido.

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

Aquí puede añadir los logos y enlaces a los sitios de sus clientes, mediante el widget Zerif – Widget de clientes.

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

Tutorial de Zerif Lite - Clientes

Sección “Nuestro equipo” > Contenido

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.

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

Sección “Nuestro equipo” > Widgets de la sección “Nuestro 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” > 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.

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

Sección “Testimonios” > Widgets de la sección “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.

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

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 (2)

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.

Sección “Últimas noticias”

Esta es la sección que mostrará sus últimas entradas del blog.

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.

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

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.

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.

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

Imagen de fondo

Esta será la imagen de fondo para el sitio. Haga clic en el botón Selecciona 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.

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

Página frontal muestra – Este tema soporta una página estática para mostrar como página frontal, pero para su apariencia predeterminada, debe estar seleccionada la opción Tus últimas entradas.

Ver la versión PRO

La versión PRO incluye cinco secciones nuevas: vídeo de fondo, portfolio, suscripción, tabla de precios y mapa de Google, además de la posibilidad de reordenar las existentes y añadir fácilmente contenido personalizado a la página de inicio.

Configurar la página del blog

En el administrador de WordPress, vaya a Páginas > Añadir nueva. En la siguiente pantalla, póngale el título Blog a la nueva página y desplácese hasta el panel Atributos de página. Allí haga clic en el menú desplegable Plantilla y elija alguna de las dos opciones: Blog Blog template with large images, de acuerdo al diseño que prefiera. Publique la página y podrá ver la lista de sus entradas del blog al visitar esta nueva página.

Más tutoriales para Zerif Lite

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