Descubre o tema GeneratePress para WordPress paso a paso

Mans á obra.

Apetecíame moito falar no blogue de GeneratePress, o tema que utilizo nesta páxina e nos meus desenvolvementos web en WordPress para os meus clientes.

De feito, direi que actualmente non utilizo outro en ningún intre.

Baixo o meu punto de vista o tema GeneratePress para WordPress é un tema case perfecto para o tipo de páxina web que pode precisar un emprendedor ou un proxecto dixital cuxas necesidades sexa unha web rápida, optimizada e profesional.

Antes de chegar a GeneratePress probei máis temas, de balde e de pago.

Pelexei cos chamados temas multipropósito con demasiadas opcións que non precisaba, e que penalizaban a velocidade, as conversións e o propio deseño.

Un día lin algunhas recomendacións, instaleino e até hoxe.

Nestes intres non traballo con ningún outro tema, e aprendín a dicir non a quen vén con proxectos baseados en temas de Themeforest e non están dispostos a trocar.

Neste artigo vouche presentar as características principais e as miñas opinións persoais baseadas na experiencia.

Que é GeneratePress?

GeneratePress é un popular tema de WordPress creado por Tom Usborne hai 5 anos, que conta cunha versión de balde que se pode descargar desde o repositorio de WordPress e unha versión Premium asumible a todos os petos, que aumenta as súas funcionalidades.

O tema GeneratePress conseguiuse facer un oco no panorama de WordPress porque é un tema lixeiro, optimizado, rápido, con gran capacidade de configuración e que conta cun bo soporte técnico nos foros da súa páxina web.

Non por casualidade o feedback da comunidade é excelente.

Ten máis de 200.000 instalacións activa e unha valoración media de 5 sobre 5. É impresionante: de 886 puntuacións, 876 son a máxima posible.

E, por certo, está dispoñible en galego, que nunca está de máis dicilo.

Características de GeneratePress

Se nalgo coincidimos as persoas que utilizamos GeneratePress como tema para as nosas páxinas web con WordPress é nas excepcionais características que presenta.

É un tema rápido e está optimizado.

Vouche dicir unha cousa, para min isto é o mellor que ten. O tema literalmente voa.

Por unha parte, non trae ningunha opción adicional que penalice os tempos de carga, como si pasa con outros temas. Pola outra, está na túa man activar ou non diferentes funcionalidades adicionais que engaden máis posibilidades á web.

E iso nótase.

Para exemplo as poucas peticións que fai á base de datos e o escaso peso da páxina.

Déixoche os datos en métricas reais. E se o comparamos con outro peso pesado como OceanWP, dámonos conta do ben optimizado que está.

E con iso non digo que OceanWP non o estea, que tamén da uns bos resultados ;).

Existe unha versión de balde e unha versión Premium

O tema é, como se chama na xerga informática, freemium.

É dicir, ten versión de balde e versión de pago máis completa, como comentei anteriormente.

A versión de pago custa 50$.

Faime caso, paga a pena e demostrareino ao longo deste artigo. Ademais, se finalmente decides mercar a licencia, aforrarás un 40% do prezo en cara renovación.

E o podes instalar todas as veces que queiras, é unha licencia ilimitada!

É moi personalizable e flexible

Outra das cousas que a min me gusta moito deste tema é a alta personalización.

E aquí si que recomendo de novo que merques unha licencia, porque as posibilidades aumentan, e moito.

Por unha banda, desde o propio personalizador de WordPress poderás tocar case todos os aspectos precisos para darlle forma a túa web.

Por outra banda, incorpora a posibilidade de mostrar ou ocultar partes da web en cada páxina. Isto é moi útil se queres que a cabeceira se mostre nunha páxina si e noutra non, por exemplo, ou se fose preciso ocultar a imaxe principal e o título.

Por último, tes a posibilidade de construír cabeceiras personalizadas e inserir hooks (pequenos anacos de código que realizan algunha funcionalidade) en multitude de lugares do tema sen necesidade de editar os arquivos de código fonte.

Lévase ben con Google

A rapidez e a optimización son factores fundamentais para que Google mire a túa web con bos ollos, pero se ademais o tema ten un código limpo e implementa datos estruturados (como Schema Org) para favorecer a comunicación con Google, mellor que mellor.

Se non sabes que son os datos estruturados, pásate por aquí.

Adáptase ben a todos os dispositivos

Non fai falla dicilo a estas alturas onde a navegación xa é máis numerosa en dispositivos móbiles que en PC’s convencionais, pero si, como sospeitabas adáptase perfectamente a todos os dispositivos.

É 100% responsive e desde o personalizador de WordPress poderás configurar a cabeceira e o menú de xeito único e diferente para que se adapte perfectamente a tablets e móbiles.

Se aínda tes unha web que non se adapta perfecta e milimétricamente á pantalla do teu smartphone, fálame e o solucionamos á de xa!

Ten actualizacións periódicas

Por último, algo que é moi importante nisto dos temas de WordPress, e é que GeneratePress recibe actualizacións periódicas que melloran funcionalidades e tapan vulnerabilidades.

Xa falei diso neste bloque á hora de elixir un bo tema para o deseño da túa web: non escollas nunca un tema que non estea actualizado.

Logo veñen as bágoas.

Como instalamos GeneratePress?

A versión de balde de GeneratePress instálase de xeito sinxelo desde o repositorio oficial de temas de WordPress.

Na opción Aparencia -> Temas -> Engadir Novo podes ver que aparecen unha serie de temas destacados, un filtro e unha busca para que sexa moi sinxelo dar co tema que mellor se adapte ás túas necesidades.

Elixe GeneratePress e pulsa instalar.

Unha vez instalado, actívao e xa estás preparado para comezar a utilizalo.

E si, ten tema fillo

E a miña recomendación é instalalo.

Un tema fillo en WordPress é un tema que herda o funcionamento doutro tema, o chamado tema pai. Permiten modificar existentes ou engadir novas funcionalidades, modificar o comportamento do tema pai e engadir anacos de código a maiores de xeito seguro.

Deberías utilizar un tema fillo porque:

• Se modificas o tema pai directamente e o actualizas no futuro, os trocos borraranse. O tema fillo non se actualiza, polo tanto, os trocos nunca se borran.
• É un xeito seguro de engadir novo código. Se modificas o tema pai, pode que fagas unha trangallada.

O tema fillo de GeneratePress pódelo descargar desde a súa páxina web en formato ZIP.

A continuación, sitúate no panel de administración de WordPress e vai á opción Aparencia -> Temas -> Engadir Temas e pulsa Subir Tema.

Sube o ZIP que vés de descargar e actívao.

Para que funcione todo correctamente debes ter instalado ambos temas e activado o tema fillo.

Funcionalidades de GeneratePress free

Se xa instalaches GeneratePress no teu WordPress e instalaches o seu tema fillo, é hora de comezar a xogar coas opcións que podamos.

Para isto entra no personalizador desde a opción Aparencia -> Personalizar.

Desde aquí podes seleccionar as típicas opcións de logotipo, título do sitio, descrición, crear e seleccionar o menú e engadir CSS adicional, pero ademais…

Deseño de pantalla

Con estas opcións poderás modificar o aspecto visual e a estrutura da túa páxina web.

• Personalizar o ancho da páxina e os contentores utilizados.
• Modificar algúns aspectos da cabeceira e o menú principal.
• Seleccionar onde queres e onde non queres que aparezan as barras laterais.
• Tocar certas partes do pé de páxina e do blogue.

Cores

As opcións dispoñibles permiten elixir a cor de fondo da páxina, do texto, das ligazóns en estado normal, das ligazóns cando o rato está enriba (:hover), das ligazóns visitadas, dos títulos do blogue e dos textos.

Tipografías

GeneratePress utiliza as fontes de Google Fonts. Iso permite poder seleccionar entre centos delas.

Ademais, e aínda na versión de balde do tema, poderás configurar o tamaño da fonte, a altura da liña, a marxe entre os parágrafos, o peso e transformar o texto entre maiúsculas, minúsculas ou capitalizadas.

Iso si, a posibilidade de modificación das tipografías redúcese ao texto xeral da páxina (corpo) e aos encabezados H1, H2 e H3.

Widgets

En GeneratePress tes moitos espazos dispoñibles para colocar widgets, que serven para mellorar o teu deseño ou as túas conversións.

Un widget en WordPress non é máis que un elemento (imaxe, texto, formulario, botóns de redes sociais, etc.) que se pode colocar en determinados espazos da web. Un módulo que engade unha funcionalidade nun lugar concreto.

Poderás colocar widgets en espazos reservados na cabeceira, na barra lateral da dereita, até 5 espazos nunha barra de widgets que se sitúa xusto por enriba do pé de páxina, no propio pé de páxina e na barra superior.

GeneratePress Premium

Se até aquí che resultou atractivo e interesante este tema para WordPress, creo que nos vindeiros parágrafos acabarás amándoo.

Se queres adquirir GeneratePress Premium debes facelo mediante un pago único anual duns 50$ na súa páxina web.

Unha vez realizado o pago, poderás descargar o plugin (si, o Premium de GeneratePress vén en formato plugin) e a chave para poder utilizar todas as súas funcionalidades.

Ademais, como xa che comentei, poderalo instalar nun número de sitios ilimitado, polo que é unha licencia realmente barata.

Como instalar GeneratePress Premium?

Instalar o plugin que activa as funcións premium de GeneratePress é moi sinxelo.

Desde o panel de administración de WordPress sitúate na opción Plugins -> Engadir novo. Fai clic no botón Subir plugin. Búscao no teu equipo, súbeo e actívao.

Agora desde a opción Aparencia -> GeneratePress poderás indicarlle a chave Premium, que previamente  descargamos. Escríbea no campo que di “License Key” e garda os datos.

Ademais de ter acceso aos módulos premium, recibirás todas as actualizacións futuras.

E non só iso, desde a mesma páxina se fas clic no apartado “Site Library” (debes activar o módulo Site Library previamente), poderás cargar plantillas predeseñadas coas que aforrarás decenas de horas de traballo.

E o que é mellor, podes seleccionar entre as que non teñen construtor, as deseñadas con Elementor ou as deseñadas con Beaber Builder.

Activar os módulos de GeneratePress Premium

Nesta mesma pantalla podes activar os diferentes módulos aos que podemos acceder ao instalar o plugin Premium de GeneratePress.

Podes activalos todos ou só os que estritamente precises, queda a túa elección e de aí vén a gran versatilidade deste tema.

Son un total de 13 módulos, dos que poderás activar 12 nunha instalación normal e un último se tes instalado WooCommerce, a extensión de WordPress para crear tendas online.

Asegúroche que as funcionalidades que incorpora son moi interesantes:

• Máis posibilidades de deseño.
• Máis posibilidades de tipografías.
• Máis combinacións de cores.
• Un menú secundario e outro lateral.
• Opcións máis completas á hora de construír o teu blogue.
• Axustes de cabeceira e pé de páxina.
• Personalizador de WooCommerce e moito máis.

Anímaste a botar unha ollada?

Background

Coa activación deste módulo poderás colocar imaxes de fondo en varios lugares da túa páxina web.

• No corpo da páxina.
• Na cabeceira.
• Nos menús principal e secundario. Neste caso poderanse configurar varias para que cambien se o rato pasa por enriba ou é a opción que está seleccionada.
• No contentor de texto.
• Nas barras laterais.
• No pé de páxina, tanto na área de widgets como na área interior onde habitualmente vai o copyright e os avisos legais.

Poderás configurar diferentes características na imaxe: se se repite ou non, o tamaño, a posición ou o movemento.

Blog

Sen dúbida un dos módulos que máis vas agradecer.

Poderás personalizar case por completo os aspectos fundamentais de cada entrada e da páxina do blogue. É, desde logo, unha mellora cualitativa de moita importancia a respecto das opcións que trae GeneratePress free.

Este add-on permite:

• Configura os datos que imos mostrar (data, autor, categoría, comentarios, etc.) e o botón de “ler máis”.
• Mostrar a entrada enteira ou un resumo da mesma.
• Dispoñer o texto nunha ou en varias columnas.
• Colocar a imaxe destacada en diferentes posicións a respecto do título, configurar o seu tamaño e a súa aliñación.

Colors

Outra opción que aumenta moito as posibilidades de configuración do tema.

O avance respecto da versión free é notable. Cada apartado da web trátase por separado, polo que a configuración de cada un pode ser distinta.

Poderás indicar cores de fondo, textos e ligazóns ao teu gusto en:

• Corpo da páxina web.
• Cabeceira,
• Menú principal, secundario e lateral. Aquí ademais poderás cambiar a cor cando o rato pasa por enriba do elemento do menú e cando ese elemento está activo.
• Botóns da páxina.
• Parte do contido do texto. Títulos, corpo e metas do blogue.
• Widgets da barra lateral e do pé de páxina.
• Formularios incluídos na web.

Copyright

Esta é unha opción moi interesante que permite incluír contido na barra inferior da web, onde habitualmente aparecen os avisos legais e outros elementos.

Poderás facelo mediante HTML e CSS, polo que as posibilidades son moitas para construír algo realmente atractivo.

Déixoche un exemplo do código que inserín na miña páxina web, utilizando HTML, CSS e Font Awesome para as iconas sociais:

<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 é unha das miñas opcións preferidas. É realmente útil se estás utilizando un construtor visual de páxinas como Elementor ou Divi.

Queres non habilitar unha parte concreta da web nunha páxina por razóns de deseño ou estratexia? Pois isto é exactamente o que fai este módulo.

Poderás non habilitar:

• Barras superior.
• Cabeceira.
• Menús.
• Imaxe destacada.
• Título da páxina.
• Pé de páxina.

Por exemplo, cando deseño as páxinas en Elementor non quero que aparezan por defecto nin a imaxe destacada nin o título, porque a miña intención é colocalos onde eu queira mediante o construtor.

E outro caso. Pode que nunha páxina concreta queiras quitar a cabeceira, pero non o pé de páxina. Pois seleccionando a opción, non se mostrará a parte que ti decidas.

Neste caso a configuración faise na edición de cada páxina.

Elements

Este módulo uniu hai unhas actualizacións a dúas funcionalidades que anteriormente estaban separadas: header e hooks, e engadiu unha nova funcionalidade: layouts.

Podes crear cabeceiras configurables e atractivas con imaxes ou vídeos de fondo.

Estas cabeceiras teñen múltiples opcións, como por exemplo que se coloque debaixo do menú ou se integre con el, e seleccionar as condicións sobre onde e cando se vai ver esa cabeceira.

Podes crear hooks, é dicir, podes engadir código personalizado en diferentes sitios da túa web e elixir onde, cando e como se mostra.

Un exemplo moi básico sería colocar o código de Google Analytics ou o código de control de Google Ads sen ter que tocar o editor ou instalar plugins.

As posibilidades son moitas e cuns coñecementos algo avanzados, podes sacarlle moito partido.

Por último, podes crear layouts (ou deseños personalizados) onde establecer regras para que se mostren ou non diferentes elementos da web.

Menú Plus

Este módulo inclúe as opcións precisas para configurar o menú da túa páxina web.

Poderás configurar por separado o xeito de mostrar  o menú en PC e en móbil, activar a opción para que o menú fique sempre visible e ancorado na parte superior do navegador (stick navigation) ou a posibilidade de configurar diferentes logos según o dispositivo.

Un básico en todo deseño minimamente profesional.

Secondary Nav

Entre outras características permíteche poñer un menú secundario a túa páxina web con todas as opcións de personalización que tamén ten o menú principal.

A verdade é que nunca me fixo falla, e é un dos módulos que deixo habitualmente sen activar, pero se o teu proxecto o precisa, aí o tes.

Sections

Se non utilizas un construtor visual como Elementor ou Divi na túa páxina web, pode que este módulo sexa de utilidade.

Permíteche construír páxinas configurando bloques sucesivos sen necesidade de maquetador, onde podes configurar fondos, textos, anchos, marxes, engadir shortcodes, etc.

Aínda que se che son sincero (opinión persoal!), creo que Gutenberg, o novo editor de bloques de WordPress, mellora a este add-on polo que adoito deixalo desactivado.

Porque ademais aínda non son compatibles, unha páxina construída con seccións non é posible editala con Gutenberg…

Site Library

Témolo falado.

Ao activar este módulo podes acceder a decenas de demos e deseños que poderás importar  sen dificultade para personalizalas ao teu gusto.

Spacing

Módulo esencial no deseño.

Grazas a el poderás controlar o espazo dos elementos (paddings) e anchos de diferentes seccións da web (como os menús ou a barra lateral).

Typography

Se queres ter o control total das tipografías da túa web, e poder configuralas ao teu gusto, debes contar con este add-on si ou si.

Poderás configurar de xeito separado as tipografías do:

• Corpo da páxina.
• Cabeceira.
• Menú principal, secundario e lateral.
• Botóns.
• Títulos.
• Widgets.
• Pé de páxina.

Tamaño, peso, tipografía, espazos… cada parte da páxina poderá ter os seus.

Esencial.

Import/export

E por último unha funcionalidade que non fai falta activar, pero que tamén é propia da parte Premium de GeneratePress.

Se configuraches diferentes partes da túa web a través do personalizador de WordPress, pódelas levar a outra web sen dificultade a través da ferramenta de exportación e importación de GeneratePress.

Ollo, non confundir coa ferramenta de exportación e importación de contidos de WordPress, que se sitúa na opción Ferramentas do menú.

Review en vídeo de GeneratePress Premium

Pero todo o que estamos a ver hai que aplicalo, polo que a miña intención é mostrar agora en víden as ferramentas e configuracións máis interesantes que ten a versión Premium de GeneratePress.

Con instalar o plugin de GeneratePress Premium terás acceso a todas as características que este tema ten. E se ademais queres recibir actualizacións, terás que activalo coa chave que podes descargar ao mercalo na súa páxina web.

Cabeceira e menú

Vas ver as opcións de personalización da cabeceira e do menú. É moi versátil, e permite configurar diferentes opcións segundo o dispositivo co que estás a acceder. E se iso non che chega, sempre podes tocar algo con CSS desde a ferramenta de personalizar de WordPress.

Contedores e widgets

Queres barra lateral á esquerda, á dereita, en ambos os lados ou en ningún? E nas barras laterais, que colocamos? Pois isto é o que repaso neste vídeo, onde verás a gran capacidade de personalización deste tema.

Cores en GeneratePress Premium

Como poderás ver, a personalización das cores é moi flexible. En cada parte da web pódense configurar por separado, o que nos ofrece unha gran versatilidade. Fondos, menú, encabezados e texto, widgets, botóns… xa verás!

Elements

Esta é unha das opcións máis potentes. Os headers permítennos construír cabeceiras de aparencia profesional e elixir en cal páxina se mostran e en cal non. Os hooks déixannos incluír anacos de código (desde HTML a executar PHP) ou shortcodes en múltiples localizacións da web.

Desactivar elementos

Pode que nalgunhas páxinas queiramos desactivar algúns elementos, como as barras laterais, o título ou a imaxe destacada, por razóns de deseño ou estratexia. Grazas a esta opción pódese facer, mantendo o estilo do resto das páxinas intacto.

Footer e copyright

Por último, tes a capacidade de configurar de xeito sinxelo algo que en moitos temas está desactivado agás unha modificación no código fonte, que é o texto e o estilo do pé de páxina.

GeneratePress con outras tecnoloxías e plugins

Direiche unha cousa, GeneratePress adáptase á perfección a unha boa cantidade de plugins e tecnoloxías que van levar a túa web ao máis alto.

Divi ou Elementor con GeneratePress

É a combinación perfecta con maquetadores visuais. De feito, a miña web está construída con GeneratePress e Elementor.

Por unha banda, porque as opcións de desactivar elementos son xeniais para facer da web (sen contar cabeceira e pé de páxina) un lenzo en branco no cal construír o teu deseño.

Por outro lado, a optimización e limpeza do tema fai que os construtores non a fagan moito máis lenta. Precisamente disto falaba David Viña en Twitter: a súa web acelerou ao cambiar o seu tema anterior a GeneratePress.

GeneratePress e WooCommerce

Se precisas deseñar unha tenda online, a combinación é xenial.

Ao instalar WooCommerce poderás activar o módulo específico que GeneratePress Premium ten preparado.

Con el poderás personalizar diferentes opcións da túa tenda online:

• Colocar avisos na tenda e opcións no checkout.
• Configurar o catálogo e as imaxes.
• Configurar o xeito de mostrar os produtos na tenda, as columnas polas que se ordenan, o número de produtos por páxina, etc.
• Configurar a páxina de produto.

Até o momento non atopei ningunha razón que me leve a pensar que a adaptación non é total, polo que recomendo que probes esta combinación a ver que tal resulta.

GeneratePress e Polylang

Se queres converter a túa web en políglota e facer que fale máis dun idioma, o plugin Polylang é o teu amigo.

E a combinación funciona perfectamente, podendo configurar as páxinas e entradas en cada idioma e colocando o conmutador no menú.

GeneratePress e sitios avanzados

Probei a combinación con plugins de membresía (como UItimate Membership Pro) ou que crean comunidades (como bbPress) e a verdade é que non tiven ningún problema.

Se o probaches con máis, non dubides en indicalo nos comentarios.

Conclusión

Se chegaches até aquí, noraboa! Liches as máis de 3.500 palabras que ten este artigo.

E téñoche que confesar que desfrutei facéndoo.

O tema, como podes ver, é moi potente.

E moi útil.

Por hoxe chega de teoría.

E estate atento, porque no seguinte pasarei da neste pasamos da teoría á practica e xogaremos un pouco cos diferentes deseños que podemos chegar a conseguir con GeneratePress Premium.

Lémonos!