Tutorial de Generatepress – Uno de los mejores Temas de WordPress

Generatepress es uno de los temas de WordPress que más utilizo cuando monto una nueva página WEB porque tiene un código limpio, es rápido y optimizado para el SEO entro otros muchos motivos.

Ventajas de utilizar el tema Generatepress en WordPress

  • Optimizado para el SEO
  • Código fuente optimizado para que las páginas WEB carguen rápido
  • Amplia versatilidad en el diseño de páginas WEB
  • Elección del número de barras laterales
  • Configuración del tamaño del principal de la página
  • Elección del número de columnas del footer
  • Podemos esconder elementos del sitio, como la cabecera o la imagen destacada entre muchos otros
  • Personalización de colores
  • Configurar el tipo de letra. Podemos usar Google Fonts si queremos.
  • Insertar un buscador de contenido
  • Configurar el favicon
  • Configurar imágenes de fondo
  • Elegir los menús que queremos mostrar en pantalla
  • Utilizar el menú como barra de navegación principal
  • Insertar código CSS personalizado
  • Vista preliminar antes de aprobar los cambios
  • Personalización individualizada de la apariencia de páginas y entradas de Wordpress
  • Compatible con Elementor
  • Adaptado a personas con discapacidad visual
  • Con la licencia Premium puedes utilizar Generatepress Premium en todos tus sitios de Wordpress sin límite
  • Generatepress está instalado en más de 200 mil páginas WEB de Wordpress
  • Disponible en versión Gratuita o Premium con más ventajas
  • 49,95$ al año con un 40% de descuento cuando lo renueves

Funcionamiento de Generatepress en Vídeo

Instalación de Generatepress

Para instalar cualquier tema en WordPress, entraremos a nuestra página de administración e iremos al menú Apariencia –> Temas –> Añadir nuevo. Si no sabes cómo hacerlo, mírate el artículo Tutorial de WordPress para configurarlo correctamente.

Una vez allí, buscaremos el nombre del tema que queremos instalar y activar.

Instalar tema de WordPress Generatepress

Versión Premium de Generatepress

Lo que acabamos de hacer con estas acciones es instalar la versión gratuita de Generatepress pero si queremos instalar la versión Premium, deberemos registrarnos en la página oficial, pagar, descargarnos el plugin de WordPress, que lo convierten en Premium e instalar la licencia que nos han proporcionado.

Descargar la version premium del tema de WordPress Generatepress

Una vez que nos hemos descargado el plugin, lo instalaremos como cualquier otro subiendo el fichero que nos han proporcionado, desde el menú Plugins –> Añadir nuevo –> Subir plugins. Si no sabes hacerlo, de nuevo, te recomiendo que le eches un vistazo al artículo Tutorial de WordPress para configurarlo correctamente.

Personalización de la Identidad del Sitio

Para comenzar a personalizar nuestra página de WordPress con Generatepress, iremos al menú Apariencia –> Personalizar.

Generatepress - Personalizar

A continuación, nos aparecerán todos los menús de personalización de Generatepress. El primero es la identidad del sitio:

Generatepress - Menu principal de personalizacion de WordPress

Como vemos, en la Identificación del sitio, podemos personalizar el título, la descripción del sitio y el favicon, algo que podemos realizar también desde las opciones de configuración por defecto de WordPress (Ajustes Generales).

Por lo tanto, Generatepress incorpora en sus propios menús otras opciones que vienen en WordPress con el objetivo de que las tengamos a mano mientras personalizamos el sitio.

Generatepress - Configurar la identidad del sitio

No quiero entrar al detalle en todas las opciones de configuración que tiene el plugin porque son muy intuitivas y el post me quedaría infinito, pero sí vamos a ir viéndolas por encima.

Diseño de la Pantalla

Aquí podemos configurar:

  • Tamaño del contenedor principal.
  • Espaciado entre las barras laterales.
  • Utilizar el menú principal como barra de navegación tanto en PCs como en móviles, como en tablets. Incluso podemos configurarla como menú flotante.
  • Tamaño y alineación del menú principal y el secundario.
  • Número de barras laterales, disposición y tamaño.
  • Mostrar u ocultar algunos campos de las entradas como la fecha, el autor, el botón «leer más», el extracto, las categorías o las etiquetas, entre otros.
  • Configuración del tamaño del pie de página y cuántos widgets podemos incluir.
Generatepress - Opciones de diseño de la pantalla
Generatepress - Diseño del contenedor de WordPress
Diseño del contenedor de WordPress con Generatepress

Colores

El nombre del menú lo dice todo. Configuraremos los colores del blog para el cuerpo, la cabecera, las barras de navegación, los menús, los botones, el contenido, los formularios y el pie de página.

Vienen unos colores por defecto y un botón para configurar el que nosotros queramos mediante el código RGB (permite hacer transparencias) o un gráfico de selección del color.

Generatepress - Personalizacion de los colores de WordPress
Generatepress - Configuracion de los colores de la navegacion primaria
Personalización de los colores de la navegación primaria (menú) con Generatepress

Tipografía

Podremos elegir el tipo de letra para cada una de las secciones del blog ya comentadas anteriormente. Vienen algunos tipos de fuente por defecto pero también tenemos la posibilidad de elegir fuentes de Google Fonts.

Generatepress - Configuracion del tipo de fuente en WordPress

Imágenes de fondo

Si lo deseamos, podemos elegir imágenes de fondo para cualquier sección de nuestro blog. Como ejemplo, os muestro las posibilidades que tenemos para el cuerpo del blog (body).

Generatepress - Configurar imagenes para el cuerpo del blog

Para el resto de secciones del blog tenemos el mismo formulario de configuración.

Por mi parte, no suelo configurar nunca imágenes en los blogs porque ralentizan su carga y, por lo tanto, perjudican al posicionamiento.

Resto de opciones

Las opciones General, menús y Widgets son configuraciones de WordPress que también podemos hacer desde Generatepress y que, seguramente, ya tendremos configuradas, por lo que no vale la pena comentarlas.

Personalmente, me gusta configurar estas opciones desde el panel de administración de WordPress y no desde el tema.

Publicar la nueva apariencia

Una vez que ya hemos configurado todas las opciones y nos ha gustado cómo ha quedado la vista preliminar tanto para PC como para móviles (hay botones para ello), le damos al botón publicar para que todo el mundo pueda visualizar el nuevo aspecto de nuestra página.

Generatepress - Publicar apariencia

Personalizar la apariencia de una entrada o página

Puede que nos interese que una de las páginas de nuestro blog tenga una apariencia diferente a las del resto. Por ejemplo, puede que todas las entradas tengan barras laterales pero en una página no queremos que se nos muestren.

Cuando estamos editando una entrada del blog, en el menú de la derecha de WordPress (con Gutemberg), tenemos estas posibilidades de elección.

Personalización de la apariencia de paginas o entradas de WordPress con Generatepress

Ocultar elementos en WordPress

Con la versión premium de Generatepress puedes ocultar casi cualquier elemento de WordPress.

A mi me gusta ocultar la cabecera para agilizar la carga de la página y hacerla más amigable para teléfonos móviles, y la imagen destacada de las entradas porque queda horrible cuando aparece una imagen solitaria antes del H1 del post y luego todo el artículo.

Para ocultar elementos, utilizaremos «Elements». Veamos un ejemplo:

Generatepress -  Acceso al menu Elements
Generatepress - Deshabilitar elementos de WordPress

Insertar código fuente (Hooks)

Con «Elements» también podemos insertar código fuente en cualquiera de nuestras páginas como, por ejemplo, podría ser un script en Javascript. Esta función la utilicé para insertar los rich snippets y de Facebook Píxel creando un nuevo Hook.

Elegir tipo de Hook de Generatepress
Insertar codigo fuente de Facebook Pixel con un Hook en Generatepress

Luego, tendremos que decidir si queremos que el Hook se vea en todas nuestras páginas WEBs o en alguna en concreto, por ejemplo.

Reglas de visibilidad de un Hook de Generatepress

También puedes utilizar los Hooks para añadir tu código de Google Analytics o los anuncios automáticos de Google Adsense pero, para esto último prefiero utilizar el plugin QuickAdsense porque puedo personalizar diferentes tipos de anuncios por párrafos, por ejemplo.

Compatibilidad con Elementor

Elementor es un plugin de WordPress muy potente, con efectos de diseño (animaciones, por ejemplo), entre otras muchas posibilidades para generar una página visualmente atractiva.

Mucha gente pregunta si es compatible utilizar Elementor con Generatepress y he de decir que sí, porque lo he utilizado en algunas WEBs.

Quiero comprar la versión Premium de Generatepress

Si te has decidido como yo por Generatepress, puedes comprarlo utilizando este enlace con mi ID de afiliado (significa que yo me llevo una pequeña comisión pero a tí no te costará más caro): Generatepress.

  • Optimizado para el SEO
  • Código fuente optimizado para que las páginas WEB carguen rápido
  • Amplia versatilidad en el diseño de páginas WEB
  • Elección del número de barras laterales
  • Configuración del tamaño del principal de la página
  • Elección del número de columnas del footer
  • Podemos esconder elementos del sitio, como la cabecera o la imagen destacada entre muchos otros
  • Personalización de colores
  • Configurar el tipo de letra. Podemos usar Google Fonts si queremos.
  • Insertar un buscador de contenido
  • Configurar el favicon
  • Configurar imágenes de fondo
  • Elegir los menús que queremos mostrar en pantalla
  • Utilizar el menú como barra de navegación principal
  • Insertar código CSS personalizado
  • Vista preliminar antes de aprobar los cambios
  • Personalización individualizada de la apariencia de páginas y entradas de Wordpress
  • Compatible con Elementor
  • Adaptado a personas con discapacidad visual
  • Con la licencia Premium puedes utilizar Generatepress Premium en todos tus sitios de Wordpress sin límite
  • Generatepress está instalado en más de 200 mil páginas WEB de Wordpress
  • Disponible en versión Gratuita o Premium con más ventajas
  • 49,95$ al año con un 40% de descuento cuando lo renueves

Contrata un Hosting Rápido

Por último, no sólo basta con un instalar tema rápido para que tu WEB cargue con velocidad. También es necesario contratar un hosting de WordPress rápido como Profesional Hosting o un servidor VPS.

¿Te ha gustado? ¡Compártelo!

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

SUSCRÍBETE A PUERTO53

Recibe un email periódico con los artículos más interesantes de Puerto53.com

Antes de suscribirte lee los términos y condiciones. Gracias.

Contenido Relacionado

Este es un blog de informática. ¿Qué necesita un informático?

Portátiles

Rebajas
Lenovo S145-15IIL - Ordenador portátil 15.6" FullHD (Intel Core i5-1035G1, 8GB RAM, 512GB...
  • Pantalla de 15.6" FullHD 1920x1080 pixeles 220nits Anti-glare
  • Procesador Intel Core I5-1035G1, QuadCore, 1.0-3.6GHz
  • Memoria RAM de 4GB Soldered + 4GB DIMM DDR4-2666
Lenovo S145-15AST - Ordenador portátil 15.6" FullHD (AMD A9-9425, 8GB de RAM, 512GB SSD,...
  • Pantalla de 15,6"fullhd 1920x1080 pixeles
  • Procesador amd a9-9425, dualcore 3.1ghz hasta 3.7ghz, 1m
  • Memoria ram de 8gddr4, 2133mhz
Rebajas
HP 15s-eq0004ns - Ordenador portátil de 15.6" HD (AMD Ryzen 3 3200U, 8 GB RAM, 256 GB,...
  • Procesador AMD Ryzen 3 3200U (2 núcleos, 5 MB de Caché, 2.6 GHz hasta 3.5 GHz)
  • Memoria RAM de 8 GB DDR4, 2400 MT/s
  • Disco SSD de 256 GB PCIe NVMe M.2
Rebajas
Lenovo S145-15AST- Ordenador portátil 15.6" FullHD (AMD A9-9425, 8GB RAM, 256GB SSD, AMD...
  • Pantalla de 15.6" FullHD 1920x1080 pixeles 220nits Anti-glare
  • Procesador AMD A9-9425, DualCore, 3.1GHz-3.7GHz
  • Memoria RAM de 8GB DIMM DDR4, 2133Mhz

Monitores PC

HP 22w - Monitor 21.5" (Full HD, 1920 x 1080 pixeles, tiempo de respuesta de 5 ms, 1 x...
  • Regálale a tu escritorio un toque de elegancia
  • Esta pantalla IPS de 53.61 cm (21,5 pulgadas) en diagonal dispone de 178 ángulos de visualización para ofrecer una experiencia de entretenimiento...
  • Con los puertos VGA y HDMI, esta pantalla hace que conectar tu ordenador portátil o pc de sobremesa sea una tarea sencilla y fluida
Rebajas
Samsung LC24F390FHU - Monitor para PC Desktop de 24'' (1920 x 1080 pixeles, Full HD, HD...
  • Pantalla de 24 pulgadas con una resolución de 1920 x 1080 píxeles
  • Brillo de pantalla: 250 cd / m²
  • Interfaz de montaje VESA 75 x 75 mm
Rebajas
BenQ GW2470HL - Monitor para PC Desktop de 23.8" Full HD (1920x1080, VA, 16:9, 2x HDMI,...
  • Los niveles ajustables de baja luz azul eliminan la luz azul peligrosa y mantienen la luz beneficiosa para una comodidad de visualización prolongada
  • Disfruta de gráficos nítidos con una resolución de 1920 x 1080
  • Minimiza las distracciones y crea una configuración de varios paneles con monitores de bisel estrecho

NAS

Rebajas
Western Digital My Cloud Home - Almacenamiento En Red NAS de 3 TB, 1 Bahía, Blanco y...
  • Configuración sencilla y rápida desde el teléfono
  • Acceso desde cualquier lugar con la aplicación para móviles o para ordenadores de My Cloud Home, o bien desde MyCloud.com
  • Copia de seguridad automática de las fotos y los vídeos del teléfono
Synology Diskstation DS218+ - Memoría externa DS218+ NAS 2bay
  • Procesador de doble núcleo con aceleración de cifrado AES-NI
  • No lleva disco
  • Admite la transcodificación 4K en tiempo real
Synology DS218J Diskstation
  • A versatile entry-level 2-bay NAS for home and personal cloud storage
  • Over 113 MB/s reading, 112 MB/s writing
  • Dual-core CPU with hardware encryption engine
Synology diskstation ds120j.
  • Almacenamiento de 1 bahía fácil de usar en una nube personal para usuarios de nas inexpertos
  • Rendimiento secuencial más de 112 mb/s de lectura, 106 mb/s de escritura
  • Plataforma para compartir archivos y sincronización entre dispositivos

Deja un comentario

About Author