Manos a la obra.

Me apetecía mucho hablar en el blog de GeneratePress, el tema que uso en esta página y en mis desarrollos web en WordPress para mis clientes.

De hecho, te diré que actualmente no utilizo otro en ningún momento.

Bajo mi punto de vista el tema GeneratePress para WordPress es un tema casi perfecto para el tipo de página web que puede necesitar un emprendedor o un proyecto digital cuyas necesidades sean una web rápida, optimizada y profesional.

Antes de llegar a GeneratePress he probado más temas, gratis y de pago.

Me he peleado con temas multipropósito con demasiadas opciones que no necesitaba, y que penalizaban la velocidad, las conversiones y el propio diseño.

Un día leí algunas recomendaciones, lo instalé y el flechazo continuó hasta hoy.

Actualmente no trabajo con ningún otro tema, y he aprendido a decir no a quien viene con proyectos basados en plantillas de Themeforest y no están dispuestos a cambiar.

En este artículo te voy a presentar las características principales y mis opiniones personales basadas en la experiencia.

¿Qué es GeneratePress?

GeneratePress es un popular tema de WordPress creado por Tom Usborne hace 5 años, que cuenta con una versión gratuita descargable desde el repositorio de WordPress y una versión Premium muy asequible, que aumenta sus funcionalidades.

El theme GeneratePress se ha conseguido hacer un hueco en el panorama de WordPress porque es un tema ligero, optimizado, rápido, con gran capacidad de configuración y que cuenta con buen soporte técnico en los foros de su página web.

No por casualidad el feedback de la comunidad es excelente.

Tiene más de 200.000 instalaciones activas y una valoración media de 5 sobre 5. Es impresionante: de 886 puntuaciones, 876 son la máxima posible.

Y, por cierto, está disponible tanto en gallego como en castellano, que nunca está de más decirlo.

Características de GeneratePress

Si en algo coincidimos las personas que utilizamos GeneratePress como tema para nuestras páginas web con WordPress es en las excepcionales características que presenta.

Es un tema rápido y está optimizado.

Te diré una cosa, para mi esto es lo mejor que tiene. La plantilla literalmente vuela.

Por una parte, no trae ninguna opción adicional que penalice los tiempos de carga, como si pasa con otros temas. Por la otra, está en tu mano activar o no diferentes funcionalidades adicionales que añaden más posibilidades a la web.

Y eso se nota.

Para ejemplo las poquísimas peticiones que hace a la base de datos y el escaso peso de la página.

Te dejo los datos en métricas reales. Y si lo comparamos con otro peso pesado como OceanWP, nos damos cuenta de lo bien optimizado que está.

Y con esto no digo que OceanWP no lo esté, que también da unos buenos resultados 😉.

Existe versión gratuita y versión Premium de GeneratePress

El tema es, como se le llama en la jerga informática, freemium.

Es decir, tiene versión gratuita y versión de pago más completa, como comenté anteriormente.

La versión de pago cuesta 50$.

Pero créeme, vale la pena y te lo demostraré a lo largo de este artículo. Además, si finalmente te decides a comprar la licencia, ahorrarás un 40% del precio en cada renovación.

Y lo puedes instalar todas las veces que quieras, ¡es una licencia ilimitada!

Es muy personalizable y flexible

Otra de las cosas que a mi me gusta mucho de este tema es la alta personalización.

Y aquí sí que te recomiendo de nuevo que te hagas con una licencia, porque las posibilidades aumentan, y mucho.

Por un lado, desde el propio personalizador de WordPress podrás tocar casi todos los aspectos necesarios para darle forma a tu web.

Por otro lado, incorpora la posibilidad de mostrar u ocultar partes de la web en cada página. Esto es muy útil si quieres que la cabecera se muestre en una página sí y en otra no, por ejemplo, o si fuera necesario ocultar la imagen principal y el título.

Por último, te da la posibilidad de construir cabeceras personalizadas e insertar hooks (pequeños trozos de código que realizan alguna funcionalidad) en multitud de lugares del tema sin necesidad de editar los archivos de código fuente.

Se lleva bien con Google

La rapidez y la optimización son factores fundamentales para que Google te mire con buenos ojos, pero si además el tema tiene un código limpio e implementa datos estructurados (como Schema Org) para favorecer la comunicación con Google, mejor que mejor.

Si no sabes qué son los datos estructurados, pásate por aquí.

Se adapta a todos los dispositivos.

Sobra decirlo a estas alturas donde la navegación ya es más elevada en dispositivos móviles que en PC’s convencionales, pero sí, como sospechabas se adapta perfectamente a todos los dispositivos.

Es 100% responsive y desde el personalizador de WordPress podrás configurar la cabecera y el menú de manera única y diferente para que se adapte perfectamente a tablets y móviles.

Si aún tienes una web que no se adapta perfecta y milimétricamente a la pantalla de tu smartphone, ¡háblame y lo solucionamos a la de ya!

Tiene actualizaciones periódicas

Por último, algo que es muy importante en esto de los temas de WordPress, y es que GeneratePress recibe actualizaciones periódicas que mejoran funcionalidades y tapan vulnerabilidades.

Lo he comentado en este blog a la hora de elegir un buen tema para el diseño de tu web: no escojas nunca una plantilla que no esté actualizada.

Luego vienen los lloros.

¿Cómo instalamos GeneratePress?

La versión gratuita de GeneratePress se instala fácilmente desde el repositorio oficial de temas de WordPress.

En la opción Apariencia -> Temas -> Añadir Nuevo puedes ver que aparecen una serie de temas destacados, un filtro y una búsqueda para que sea muy sencillo dar con el tema que mejor se adapte a tus necesidades.

Elige GeneratePress y pulsa instalar.

Una vez instalado, actívalo y ya estás preparado para empezar a utilizarlo.

Y sí, tiene tema hijo.

Y mi recomendación es instalarlo.

Un tema hijo en WordPress es un tema que hereda el funcionamiento de otro tema, el llamado tema padre. Permiten modificar existentes o añadir nuevas funcionalidades, modificar el comportamiento del tema padre y añadir trozos de código a mayores de manera segura.

Deberías utilizar un tema hijo porque:

• Si modificas el tema padre directamente y lo actualizas en el futuro, los cambios se borrarán. El tema hijo no se actualiza, por lo tanto, los cambios no se borran.
• Es una manera segura de añadir nuevo código. Si modificas el tema padre, puede que hagas un estropicio.

El tema hijo de GeneratePress lo puedes descargar desde su página web en formato ZIP.

A continuación, sitúate en el panel de administración de WordPress y vete a la opción Apariencia -> Temas -> Añadir Temas y pulsa en Subir Tema.

Sube el ZIP que te acabas de descargar y actívalo.

Para que funcione todo correctamente debes tener instalado ambos temas y activado el tema hijo.

Funcionalidades de GeneratePress free

Si ya has instalado GeneratePress en tu WordPress y has activado el tema hijo es hora de empezar a jugar con las opciones que podamos.

Para esto entra en el Personalizador desde la opción Apariencia -> Personalizar.

Desde aquí puedes seleccionar las típicas opciones de logotipo, título del sitio, descripción, crear y seleccionar el menú o añadir CSS adicional, pero además…

Diseño de pantalla

Con estas opciones podrás modificar el aspecto visual y la estructura de tu página web.

• Personalizar el ancho de la página y los contenedores utilizados.
• Modificar algunos aspectos de la cabecera y el menú principal.
• Seleccionar dónde quieres y dónde no quieres que aparezcan las barras laterales.
• Tocar ciertas partes del pie de página y del blog.

Colores

Las opciones disponibles te permiten elegir el color de fondo de la página, del texto, de los enlaces en estado normal, de los enlaces cuando el ratón está encima (:hover), de los enlaces visitados, de los títulos del blog y de los textos.

Tipografías

GeneratePress utiliza las fuentes de Google Fonts. Iso permite poder seleccionar entre cientos de ellas.

Además, y aún en la versión gratuita del tema, podrás configurar el tamaño de la fuente, la altura de la línea, el margen entre los párrafos, el peso y transformar el texto entre mayúsculas, minúsculas o capitalizadas.

Eso sí, la posibilidad de modificación de las tipografías se reduce al texto general de la página (cuerpo) y a los encabezados H1, H2 y H3.

Widgets

En GeneratePress tienes muchos espacios disponibles para colocar widgets que sirvan para mejorar tu diseño o tus conversiones.

Un widget en WordPress no es más que un elemento (imagen, texto, formulario, botones de redes sociales, etc.) que se puede colocar en determinados espacios de la web. Un módulo que añade una funcionalidad en un lugar concreto.

Podrás colocar widgets en espacios reservados en la cabecera, en la barra lateral derecha, hasta 5 espacios en una barra de widgets que se sitúa justo por encima del pie de página, en el propio pie de página y en la barra superior.

GeneratePress Premium

Si hasta aquí te ha resultado atractivo e interesante este tema para WordPress, creo que en los siguientes párrafos acabarás por amarlo.

Si quieres adquirir GeneratePress Premium has de hacerlo mediante un pago único anual de unos 50$ en su página web.

Una vez realizado el pago, te dejará descargar un plugin (sí, el Premium de GeneratePress viene en formato plugin) y la clave para poder utilizar todas sus funcionalidades.

Además, como te he comentado, lo podrás instalar en un número de sitios ilimitado, por lo que es una licencia realmente barata.

¿Cómo instalar GeneratePress Premium?

Instalar el plugin que activa las funciones premium de GeneratePress es muy fácil.

Desde el panel de administración de WordPress sitúate en la opción Plugins -> Añadir nuevo. Haz clic en el botón Subir plugin. Búscalo en tu equipo, súbelo y actívalo.

Ahora desde la opción Apariencia -> GeneratePress podrás indicarle la clave Premium, que previamente nos hemos descargado. Escríbela en el campo que indica “License Key” y guarda los datos.

Además de tener acceso a los módulos premium, recibirás todas las actualizaciones futuras.

Y no solo eso, desde esta misma página si haces clic en el apartado “Site Library” (debes activar el módulo Site Library previamente), podrás cargar plantillas prediseñadas que te ahorrarán decenas de horas de trabajo.

Y lo que es mejor, puedes seleccionar entre las que no tienen constructor, las diseñadas con Elementor o las diseñadas con Beaver Builder.

Activar los módulos de GeneratePress Premium

En esta misma pantalla puedes activar los diferentes módulos a los que podemos acceder al instalar el plugin Premium de GeneratePress.

Puedes activarlos todos o solo los que estrictamente necesites, queda a tu elección y de ahí viene la gran versatilidad de este tema.

Son un total de 13 módulos, de los que podrás activar 12 en una instalación normal y un último si tienes instalado WooCommerce, la extensión de WordPress para crear tiendas online.

Te aseguro que las funcionalidades que incorpora son muy interesantes:

• Más posibilidades en el diseño.
• Más opciones de tipografías.
• Más combinaciones de colores.
• Un menú secundario y otro lateral.
• Opciones más completas a la hora de construir tu blog.
• Ajustes de cabecera y pie de página.
• Personalizador de WooCommerce y mucho más.

¿Te animas a echarles un vistazo?

Backgrounds

Con la activación de este módulo podrás colocar imágenes de fondo en varios lugares de tu página web.

• En el cuerpo de la página.
• En la cabecera.
• En los menús principal y secundario. En este caso se podrán configurar varias para que cambien si el ratón pasa por encima o es la opción que está seleccionada.
• En el contenedor del texto.
• En las barras laterales.
• En el pie de página, tanto en el área de widgets como en el área interior donde habitualmente se coloca el copyright y los avisos legales.

Podrás configurar diferentes características de la imagen: si se repite o no, el tamaño, la posición o el movimiento.

Blog

Sin duda uno de los módulos que más vas a agradecer.

Podrás personalizar casi completamente los aspectos fundamentales de cada entrada y de la página del blog. Es, desde luego, una mejora cualitativa de mucha importancia a respecto de las opciones que trae GeneratePress free.

Este add-on permite:

• Configurar los datos que vamos a mostrar (fecha, autor, categoría, comentarios, etc.) y el botón de “leer más”.
• Mostrar la entrada entera o un resumen de la misma.
• Disponer el texto en una o en varias columnas.
• Colocar la imagen destacada en diferentes posiciones a respecto del título, configurar su tamaño y su alineación.

Colors

Otra opción que aumenta mucho las posibilidades de configuración del tema.

El avance respecto de la versión free es notable. Cada apartado de la web se trata por separado, por lo que la configuración de cada uno puede ser distinta.

Podrás indicar colores de fondo, texto y enlaces a tu gusto en:

• Cuerpo de la página web.
• Cabecera.
• Menús principal, secundario y lateral. Aquí además podrás cambiar el color cuando el ratón pasa por encima del elemento del menú y cuando ese elemento está activo.
• Botones de la página.
• Parte del contenido del texto. Encabezados, cuerpo y metas del blog.
• Widgets de la barra lateral y del pie de página.
• Formularios incluidos en la web.

Copyright

Esta es una opción muy interesante que te permite incluir contenido en la barra inferior de la web, donde habitualmente aparecen los avisos legales y otros elementos.

Podrás hacerlo mediante HTML y CSS, con lo cual las posibilidades son muchas para construir algo realmente atractivo.

Te dejo de ejemplo el código que he insertado en mi página web, utilizando HTML, CSS y Font Awesome para los iconos sociales:

<div class="iconos-footer">
Peter Llanos %copy% %current_year% · 
<a href="#" target="_blank" rel="noreferrer noopener">Aviso legal</a> · 
<a href="#" target="_blank" rel="noreferrer noopener">Política de privacidad</a> · 
<a href="#" target="_blank" rel="noreferrer noopener">Política de cookies</a><br><br>
<a href="#" target="_blank" rel="noreferrer noopener nofollow "><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" rel="noreferrer noopener nofollow "><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" rel="noreferrer noopener nofollow "><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank" rel="noreferrer noopener nofollow "><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>

.iconos-footer .fab {
    font-size: 16px;
    margin: 0 5px -10px 7px;
    background-color: #666;
    border-radius: 50%;
    padding: 9px 8px 7px 8px;
    height: 18px;
    width: 18px;
}

.iconos-footer .fab:hover {
    background-color: #ea3e23 ;
		color:#ffffff;
}

.iconos-footer a:hover {
		color: #ea3e23 ;
}

Disable Elements

Esta es una de mis opciones preferidas, y es realmente útil si estás utilizando un constructor visual de páginas como Elementor o Divi.

¿Quieres deshabilitar una parte concreta de la web en una página por razones de diseño o estrategia? Pues esto es exactamente lo que hace este módulo.

Podrás deshabilitar:

• Barra superior.
• Cabecera.
• Menús.
• Imagen destacada.
• Título de la página.
• Pie de página.

Por ejemplo, cuando diseño las páginas en Elementor no quiero que aparezcan por defecto ni la imagen destacada ni el título, porque mi intención es colocarlos donde yo quiera mediante el constructor.

E otro caso. Puede que en una página concreta quieras quitar la cabecera, pero no el pie de página. Pues seleccionando la opción, se deshabilitará la parte que tu decidas.

En este caso la configuración se hace en la edición de cada página.

Elements

Este módulo unió hace unas actualizaciones a dos funcionalidades que anteriormente estaban separadas: header y hooks, y se añadió una nueva funcionalidad: layouts.

Puedes crear cabeceras configurables y atractivas con imágenes o vídeos de fondo.

Estas cabeceras tienen múltiples opciones, como por ejemplo que se coloque debajo del menú o se integre con él, y seleccionar las condiciones sobre dónde y cuándo se va a visualizar esa cabecera.

Puedes crear hooks, es decir, puedes añadir código personalizado en diferentes sitios de tu página web y elegir dónde, cuándo y cómo se muestra.

Un ejemplo muy básico sería colocar el código de Google Analytics o el código de control de Google Ads sin tener que tocar el editor o instalar plugins.

Las posibilidades son muchas y con unos conocimientos algo avanzados, puedes sacarle mucho partido.

Por último, puedes crear layouts (o diseños personalizados) donde establecer reglas para que se muestren o no diferentes elementos en la web.

Menu Plus

Este módulo incluye as opciones necesarias para configurar el menú de tu página web.

Podrás configurar por separado la manera de mostrar el menú en PC y en móvil, activar la opción para que el menú se quede siempre visible y anclado en la parte de arriba del navegador (sticky navigation) o la posibilidad de configurar diferentes logos según el dispositivo.

Un básico en todo diseño mínimamente profesional.

Secondary Nav

Entre otras características te permite poner un menú secundario a tu página web con todas las opciones de personalización que también tiene el menú principal.

La verdad es que nunca me ha hecho falta, y es uno de los módulos que dejo habitualmente sin activar, pero si tu proyecto lo necesita, ahí lo tienes.

Sections

Si no utilizas un constructor visual como Elementor o Divi en tu página web, puede que este módulo te sea de utilidad.

Te permite construir páginas configurando bloques sucesivos sin necesidad de maquetador, donde puedes configurar fondos, textos, anchos, márgenes, añadir shortcodes, etc.

Aún que si soy sincero (¡¡opinión personal!!), creo que Gutenberg, el nuevo editor de bloques de WordPress, sobrepasa y mejora a este add-on por lo que suelo dejarlo desactivado.

Porque además aún no son compatibles, una página construida con secciones no es editable en Gutenberg…

Site Library

Lo hemos hablado.

Al activar este módulo puedes acceder a decenas de demos y plantillas que podrás importar sin dificultad para personalizarlas a tu gusto.

Spacing

Módulo esencial en el diseño.

Gracias a él podrás controlar espaciados (paddings) y anchos de diferentes secciones de la web (como los menús o la barra lateral).

Typography

Si quieres tener en control total de las tipografías de tu web, y poder configurarlas a tu gusto, debes contar con este add-on sí o sí.

Podrás configurar de manera separada las tipografías del:

• Cuerpo de la página.
• Cabecera
• Menú principal, secundario y lateral.
• Botones.
• Encabezados.
• Widgets
• Pie de página.

Tamaño, peso, tipografía, espacios… cada parte de la página podrá tener los suyos.

Esencial.

Import/export

Y por último una funcionalidad que no hace falta activar, pero que también es propia de la parte Premium de GeneratePress.

Si has configurado diferentes partes de tu web a través del personalizador de WordPress, te las puedes llevar a otra web sin dificultad a través de la herramienta de exportación e importación de GeneratePress.

Ojo, no confundir con la herramienta de exportación e importación de contenidos de WordPress, que se sitúa en la opción Herramientas del menú.

Review en vídeo de GeneratePress Premium

Todo lo que estamos viendo hay que aplicarlo, por lo que mi intención es mostrarte ahora en vídeo las herramientas y configuraciones más interesantes que tiene la versión Premium de GeneratePress.

Con instalar el plugin de GeneratePress Premium tendrás acceso a todas las características que este tema tiene. Y si además quieres recibir actualizaciones, tendrás que activarlo con la clave que te puedes descargar al comprarlo en su página web.

Cabecera y menú

Te mostraré las opciones de personalización de la cabecera y del menú. Es muy versátil, y permite configurar diferentes opciones según el dispositivo con el que estás accediendo. Y si eso no te llega, siempre puedes tocar algo con CSS desde el personalizador de WordPress.

Contenedores y widgets

¿Quieres barra lateral a la izquierda, a la derecha, en ambos lados o en ninguno? Y en las barras laterales, ¿qué colocamos? Pues esto es lo que repaso en este vídeo, donde verás la gran capacidad de personalización de este tema.

Colores en GeneratePress Premium

Como podrás ver, la personalización de los colores es muy flexible. En cada parte de la web se pueden configurar por separado, lo que nos ofrece una gran versatilidad. Fondos, menú, encabezados y texto, widgets, botones… ¡ya verás!

Elements

Esta es una de las opciones más potentes. Los headers nos permiten construir cabeceras de apariencia profesional y elegir en cuál página se muestran y en cuál no. Los hooks nos dejan incluir trozos de código (desde HTML a ejecutar PHP) o shortcodes en múltiples localizaciones de la web.

Desactivar elementos

Puede que en algunas páginas queramos desactivar algunos elementos, como las barras laterales, el título o la imagen destacada, por razones de diseño o estrategia. Gracias a esta opción se puede hacer, manteniendo el estilo del resto de las páginas intacto.

Footer y copyright

Por último, tienes la capacidad de configurar de manera fácil algo que en muchos temas está desactivado salvo que lo modifiques en el código fuente, que es el texto y el estilo del pie de página.

GeneratePress con otras tecnologías y plugins

Te diré una cosa, GeneratePress se adapta a la perfección a una buena cantidad de plugins y tecnologías que van a llevar tu web a lo más alto.

Divi o Elementor con GeneratePress

Es la combinación perfecta con maquetadores visuales. De hecho, mi web está construida con GeneratePress y Elementor.

Por un lado, porque las opciones de desactivar elementos son geniales para hacer de la web (sin contar cabecera y pie de página) un lienzo en blanco en el cual construir tu diseño.

Por otro lado, la optimización y limpieza del tema hace que los constructores no la ralenticen demasiado. Precisamente sobre esto hablaba David Viña en Twitter: su web se aceleró al cambiar su tema anterior por GeneratePress.

GeneratePress y WooCommerce

Si necesitas diseñar una tienda online, la combinación es genial.

Al instalar WooCommerce podrás activar el módulo específico que GeneratePress Premium tiene preparado.

Con él podrás personalizar diferentes opciones de tu tienda online:

• Colocar avisos en la tienda y opciones el en checkout.
• Configurar el catálogo y las imágenes.
• Configurar la manera de mostrar los productos en la tienda, las columnas por las que se ordenan, el número de productos por página, etc.
• Configurar la página de producto.

Hasta el momento no he encontrado ninguna razón que me lleve a pensar que la adaptación no es total, por lo que recomiendo que probéis esta combinación a ver qué tal os resulta.

GeneratePress y Polylang

Si quieres convertir tu web en políglota y hacer que hable más de un idioma, el plugin Polylang es tu amigo.

Y la combinación funciona perfectamente, pudiendo configurar las páginas y entradas en cada idioma y colocando el conmutador en el menú.

GeneratePress y sitios avanzados

He probado la combinación con plugins de membresía (como Ultimate Membership Pro) o que crean comunidades (como bbPress) y la verdad es que no he tenido ningún problema.

Si lo has probado con más, no dudes en indicarlo en los comentarios.

Conclusión

Si has llegado hasta aquí, ¡enhorabuena! Te has leído las más de 3.500 palabras que tiene este artículo.

Y te tengo que confesar que me ha gustado mucho hacerlo.

El tema, como puedes ver, es muy potente.

Y muy útil.

Por hoy llega de teoría.

Y estate atento, porque en el siguiente pasaré aquí te dejo el artículo donde pasamos de la teoría a la práctica y jugaremos un poco con los diferentes diseños que podemos llegar a conseguir con GeneratePress Premium.

Te leo 😊