GeneratePress

Dentro de nuestro curso de cómo hacer páginas web es hora del tema de la web, vamos a preparar el tema y para ello, usaremos GeneratePress Premium para instalar nuestro theme solo deberemos seguir los siguientes pasos. Además del texto y de la imágenes, en cada parte importante hemos puesto un vídeo para que no tengas ninguna duda.

Paso 1: Instalar GeneratePress Paso a Paso

En esta serie de vídeos vamos a tratar todo lo relacionado con el tema GeneratePress, un tutorial sobre este tema de WordPress, todo lo necesario para hacer una página web desde cero. La página sobre la que trabajaremos va a ser juegosdemesa.com.es, que como sabéis es nuestro centro de pruebas. Así podréis ver paso a paso como crece la web y los cambios que le aplicamos.

Instalar GeneratePress gratis desde cero

En una instalación de WordPress, cuando está recién instalado lo primero que vamos a hacer es instalar el tema GeneratePress. Para ello nos vamos al escritorio de WordPress y seguimos la ruta.

Escritorio > Apariencia > Temas

Aquí tendremos que añadir el nuevo tema, usando “GeneratePress” el campo de búsqueda, una vez ahí, tendremos que instalarlo. Cuando finalice la instalación lo activamos haciendo click en el botón Activar. Con esto tendríamos la parte gratuita y si nos vamos a nuestra página veremos cómo ha cambiado la apariencia, todo lo que se ve lo vamos a cambiar poco a poco.

Instalar GeneratePress Premium

Ahora toca instalar la versión pro que incluye unas cuantas funciones más. Hay que destacar que la versión pro se instala como plugin, no como el tema, que es un error común a la hora de instalarlo. En el escritorio de nuestro WordPress nos tendremos que ir a plugin y pulsar en “añadir nuevo”

Aparece un botón “Subir Plugin” lo pulsamos y tendremos que seleccionar el archivo comprimido en nuestro PC, una vez seleccionado, lo instalamos con el botón de “Instalar Ahora”.

Si volvemos a Plugins en nuestro escritorio, lo vemos aquí, nos aparece como que está instalado.

Activar GeneratePress Pro

Lo activamos pulsando en activar debajo del nombre del plugin. Solamente con activarlo no se aprecia ningún cambio, es por ello que tenemos que pulsar en configurar, al lado de donde está activar. Aquí veremos los módulos que tenemos disponibles: fondos, blog, colores, menú, etc. Podremos activar a nuestro gusto los que necesitemos.

Los marcamos todos y los activamos. Con esto ya tendríamos instalado el tema y listo para empezar a configurar.

Paso 2: Configurando GeneratePress Premium

Ya tenemos nuestro tema preparado para empezar a dar forma a nuestra web. Ahora toca ir opción por opción configurando todo a nuestro gusto. En la primera parte tocaremos sobre identidad del sitio.

Identidad del sitio

Aquí podremos poner un nombre a nuestra página, una descripción y un logo. Las dimensiones de la imagen que usaremos para el logo son importantes, haz diversas pruebas con diferentes tamaños para ver el resultado final.

Diseño de pantalla

Dentro de diseño de pantalla podremos encontrar muchas opciones, desde los contenedores hasta la apariencia del blog, la cabecera y muchas más cosas. Voy a explicarlas una a una y verás que es muy sencillo. Debemos tener una idea clara de que buscamos en nuestra página, si queremos barras laterales o no. Esto podrá variar en función del tipo de página. En el vídeo podréis ver como lo configuro para un TSA básico.

Contenedores

Podremos seleccionar contenedores separados o un solo contenedor, la separación de los contenedores con respecto a la cabecera y los márgenes y la alineación del propio contenedor. Según seleccionas uno u otro, los cambios se puede ir viendo y así sabrás qué son y dónde actúan. En el vídeo lo puede ver con más claridad.

Cabecera

En cabecera podremos cambiar la posición del logo y el menú de navegación. Además, cambiar los márgenes y la separación. Seleccionamos entre cabecera alineada tanto al centro como a los lados e incluso poner una cabecera diferente para la versión móvil más pequeña y más rápida para esos dispositivos.

Navegación principal

Tendremos opciones para configurar nuestro menú de navegación, podremos poner que se ajuste al contenido o al ancho de la pantalla. Cambiar su alineación y la posición. Además podremos activar la búsqueda en la navegación.

Una opción muy interesante podría ser: mobile menu breakpoint. Que es el punto cuando el menú de navegación cambia a la versión móvil. Lo podremos definir en píxeles (px). Una buena configuración podría ser 768 px. Es decir, que en pantallas más pequeñas de 768 px se muestre la versión móvil del menú de navegación.

Navegación secundaria

Podremos activar una segunda barra de navegación, que podremos usar, por ejemplo, para el menú de registro e identificación de nuestros usuarios o para cualquier necesidades que tengamos. En un TSA simple, no necesitaremos el menú de navegación secundario.

Paso 3: Nuestra web toma forma

Seguimos configurando GeneratePress PRO, es turno de unas opciones muy interesantes que harán que nuestra web adquiera un aspecto un increíble y muy vistoso. Como puede ser un menú pegajoso que se fijará en la parte superior de la pantalla. Como siempre podrás verlo en el vídeo de acontinuación.

Sticky Navigation

Si activamos esta opción, la barra de navegación se fijará en la parte superior de la pantalla para que el menú esté siempre visible. De esta manera mejoramos la usabilidad de la web y mejoramos la experiencia de usuario.

Nos encontraremos las opciones para activarlo en PC, en móvil o en los dos. Además, podremos ponerle una transición que hará que aparezca el menú con un efecto, podremos elegir entre: fade, slide o sin efecto.

También podremos poner una imagen, que se llamará sticky navigation logo. Aparecerá esa imagen en la barra de navegación al desplazarse, deberá ser de pequeñas dimensiones. Usar el favicon puede ser una buena opción.

Off canvas Panel

Activa un menú móvil más útil y vistoso. Podremos activar esta opción tanto en PC como en móvil o en ambos sitios al mismo tiempo. Y aquí no tendremos más opciones, el resto las hereda de la configuración del propio menú de navegación. Sí que nos dejará cambiar la dirección del menú cuando se despliegue y colocar el botón para cerrar el menú, dentro o fuera del propio menú. Lo mejor es tocar las opciones y verlas una a una.

Barras laterales

Podremos elegir las barras laterales que deseamos mostrar en las páginas. Podremos elegir cualquier tipo de configuración disponible y mostrar barra lateral derecha e izquierda, una de ellas o ambas. Esta configuración afecta a todo el sitio, páginas y entradas.

Si tenemos la necesidad de quitar esas barras en una entrada concreta, lo podremos hacer directamente en la entrada con el menú que nos ofrece generatepress en cada entrada de ocultar elementos.

Blog

Aquí podremos cambiar cómo mostramos las páginas de archivos o de categoría, es decir, cómo se mostrarán las entradas en la parte del blog y quitar algunas opciones tanto para páginas como para entradas.

Podremos quitar la imagen destacada de las entradas, mostrar fecha, autor, tags y cómo queremos mostrarlo. Para ello pincha en las pestañas de archives, single, post y pages y cambia las opciones a tú gusto.

Pie de página

Aquí configuraremos el pie de página, como el ancho del pie y del contenido, activar el botón de: «volver arriba». Es una opción muy útil que nos pondrá un botón que nos seguirá por la página y que al pulsarlo nos llevará a la parte superior de la entrada.

Además, podremos elegir el número de widgets que serán visibles justo encima del pie de página. Podremos poner de 0 a 6. Cambiar el copyright que viene por defecto y poner uno personalizado para nuestra página será la última opción que encontraremos en esta sección.

Paso 4: La parte más visual

Nos toca cambiar los colores, tipografía, imágenes y muchas más cosas. Aquí es importante tener claro el diseño que queremos hacer. Vamos a ver las opciones que tenemos disponibles y que nos ofrece Generatepress premium para personalizar aun más nuestra web.

Colores

Aquí nos ofrecen cambiar los colores de todas y cada una de las partes de la web, que son:

1. Cabecera
2. Navegación principal
3. Navegación secundaría
4. Off canvas panel
5. Botones
6. Contenido
7. Sidebar widgets
8. Formularios
9. Footer

Debemos pinchar sobre cada una de las opciones y cambiar los colores de fondo, textos, barras, botones, etcétera. Y así lograr que nuestra página luzca a nuestro gusto.

Tipografía

Con las fuentes deberemos repetir el proceso anterior, elegimos la fuente que más nos guste y el tamaño. Tanto del texto de cada parte, como de los títulos y encabezados.

Imágenes de fondo

Podremos añadir «background images» a cualquier parte de nuestra web. No debemos abusar de esta opción ya que hará que nuestro sitio cargue más lento. Pero es cierto que usar una textura o imagen de fondo puede hacer que nuestro sitio se diferencie de los demás y aportar una personalidad extra.

General

Aquí podremos cambiar solo tres opciones, que son:

1. Combinar CSS: Hace que los archivos sean más pequeños y nuestra web cargue más rápidamente.
2. Caché CSS dinámico: Cachea el CSS generado por cada una de nuestras opciones aumentando el rendimiento.
3. Smooth scroll: Hace que cuando nos desplacemos por la página, pulsando por ejemplo el botón de volver arriba, lo haga con una animación y no de forma instantanea.

Menús

Podremos añadir elementos al menú, aunque es preferible hacerlo desde apariencia > menús y se pueden crear de manera más sencilla y visual. Aunque aquí también podremos hacerlo. Debemos crear un menú nuevo. Para ello, deberemos darle un nombre y añadir los elementos que queramos, páginas, categorías e incluso elementos personalizados.

También deberemos decirle dónde se mostrará ese menú, y tenemos tres opciones:

1. Menú principal de navegación.
2. Menú secundario
3. Off canvas Menú.

Podremos marcar una opción o las tres, esto dependerá de dónde queramos mostrar esos elementos.

Widgets

Nos dejará añadir widgets en diferentes áreas de la web. Barras laterales, cabecera, pie de página y un montón de ellos. Los widgets disponibles serán variables en función de los plugins que tengamos instalados. Podremos añadir calendarios, textos, html, etc.

Inicio

En esta sección podremos elegir si la página de inicio será:

1. Últimas entradas: Mostrará las ultimas entradas con las opciones visuales configuradas en la sección blog que hemos visto más arriba.
2. Una página estática: Tendremos que crear una página y elegirla, en esa página podremos mostrar lo que queramos y hacerlo desde cero.

Paso 5: La parte más versátil del tema

Estas opciones serán quizá, la más útiles que podremos encontrar. Vamos a verlas una por una y verás de todo lo que es capaz este tema.

Site Library

Nos ofrece unas plantillas ya creadas para importarlas a nuestro sitio. Deberemos tener en cuenta que al cargar cualquier plantilla nos sobre escribirá toda la configuración del sitio para que pueda funcionar la plantilla.

Además, nos ofrecerá plantilla hechas con constructores visuales que son mucho más visuales. Antes de que nos deje importar cada plantilla, nos dará la información de qué plugins necesitas tener instalados para que funcione correctamente.

Antes de hacer nada aquí, deberemos hacer una copia de seguridad de todo nuestro sitio por si la plantilla no nos gusta y queremos volver a cómo lo teníamos antes.

Header

Podremos añadir «cabeceras» en las entradas, páginas o todo el sitio. Podremos incluso sustituir la propia cabecera del sitio. En el vídeo lo explico más exactamente y hago un ejemplo para que quede aun más claro.

Hook

Los ganchos o hooks podremos anclar códigos, textos, sortcodes, etc para mostrarlos dónde queramos. De esta forma se puede automatizar determinadas tareas. Por ejemplo, si queremos poner contenido relacionado al final de todas nuestras entradas, no tendremos que ir entrada por entrada haciendo los cambios. Con un hook podremos poner el contenido relacionado en todas las entradas de una forma rápida y sencilla.

En el vídeo hago un ejemplo que te ayudará a entender el concepto.

Layout

Nos permite modificar las páginas de su configuración de manera predeterminada. Podremos quitar cabeceras, barras laterales de una entrada, pie de página, etc, de todas las entradas de una categoría, de una página o de cualquier contenido que tengamos en nuestra web. Es perfecto para hacer test A/B y ver que configuración gusta más a nuestros visitantes.

Paso 6: Personalizado entradas y páginas

En cada página o entrada nos mostrará en menú llamado diseño de pantalla y podremos activar, quitar o cambiar las opciones predeterminadas y afectarán solo a esa página.

Diseño de pantalla de forma individual en cada entrada

Las opciones que tenemos disponibles son:

1. Barras laterales
2. Widgets de pie de página
3. Desactivar elementos
4. Contenedor del constructor de páginas.

De esta forma podremos hacer cambios de forma individual en cada entrada para cambiar el aspecto y la disposición de la página.

Secciones

Esta opción la podremos encontrar en cada entrada o página y su utilidad está en que podremos editar cada parte de la entrada dividendo en secciones individuales con configuraciones personalizadas. Podremos añadir imágenes de fondo, cambiar la fuente, color del texto, etc. De esta forma en una misma entrada nos permitiría tener varias secciones diferenciadas unas de las otras.

Crear columnas en entradas

La última opción es un truco que no viene por defecto en el tema. Si queremos generar contenido y que se muestre en varias columnas, lo podremos hacer fácilmente con gutenberg, pero si usamos el editor clásico no será tan sencillo. Para eso os recomiendo usar el plugin: Lighweight grid columns que esta creado por el mismo autor del tema, por ello, la compatibilidad está asegurada.

En la parte final del vídeo explico como funciona para que podáis crear vuestra columnas responsives usando el editor clásico con GeneratePress.

Resumen del tutorial de GeneratePress Premium

Hasta aquí este curso de GeneratePress PRO gratuito y accesible para todo el mundo. Espero que sea de utilidad y a partir de ahora seas un experto en este gran tema. Su gran estabilidad y versatilidad que ofrece es perfecto para usarlo en un montón de sitios.

Puedes comprar GeneratePress PRO desde la web del autor pinchando aquí.

Si quieres saber cómo actualizar plugins y temas sin licencia.