Velocidad + estética es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial (Parte 2)

MCD Diseño Web

Por: MCD

Tiempo de lectura minutos

  • Portada
  • /
  • Blog
  • /
  • Velocidad + estética es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial (Parte 2)

GeneratePress mega tutorial parte 2 de esta plantilla para WordPress con estilo minimalista que lo tiene todo.

More...

Como había mucha información que digerir aquí está la segunda parte del Mega Tutorial de GeneratePress, donde verás el funcionamiento de todos los add-ons (complementos) uno por uno.

También podrás ver en esta segunda parte como instalar un sitio web desde Site Library (Biblioteca de sitios) en un par de clics.

¿Tienes dudas? no te preocupes siempre las hay es por eso que he recopilado algunas de las preguntas más frecuentes al final de este artículo. ¡Manos a la obra! 

¿Todavía no viste la primera parte de este mega tutorial? aquí la tienes: Velocidad + estética es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial (Parte 1).

Complementos o add-ons

Cuando instales GP Premium dispondrás de 12 complementos o add-ons con diferentes funcionalidades que te mostraré a continuación.

Typography - Tipografía

¿Sabías que puedes personalizar las fuentes de toda la plantilla? Si, es así, porque GP Premium dispone del add-on o complemento Typography que te permite utilizar todas las fuentes de Google integradas en el personalizador de WordPress, para que puedas seleccionarlas de forma rápida y al poder ver los cambios en tiempo real de esta manera ganarás mucho tiempo en productividad.

generatepress mega tutorial parte 2
  • Punto 1: En la imagen superior puedes ver el personalizador de WordPress con el menú Typography en acción, que contiene un sub-menú con las diferentes secciones en donde puedes cambiar la tipografía, a continuación las detallo.
  • Body Typography - Tipografía del cuerpo.
  • Header Typography - Tipografía del encabezado.
  • Navigation Typography - Tipografía de la navegación.
  • Content Typography - Tipografía del contenido.
  • Widget Typography - Tipografía de los Widgets.
  • Footer Typography - Tipografía del pie de página.

tipografía

Vídeo creado por Thomas Usborne – GeneratePress

Si estás con un presupuesto algo corto, o no quieres invertir demasiado en una plantilla, GeneratePress Premium es una buena opción. ¡Mega tutorial en español!

Tweetealo a tus amigos

Colors - Colores

Otro de los add-ons o complementos importantes es el llamado Colors (Colores) que te permitirá cambiar todos los colores de la plantilla, esto te da una ventaja pues ya que puedes utilizar la plantilla en distintos sitios de por vida, no tendrás que repetir el diseño, ya que las combinaciones son infinitas.

generatepress mega tutorial parte 2
  • Punto 1: Ahora le toca el turno a la personalización de los colores de la plantilla. En la imagen superior puedes ver en acción el personalizador en el menú Colors (Colores) en acción, que contiene un sub-menú con las diferentes secciones en donde puedes cambiar todos los colores de la plantilla, a continuación las detallo.
  • Header Colors - Colores del encabezado.
  • Navigation Colors - Colores de la navegación.
  • Sub-Navigation Colors - Colores del sub-menú de navegación.
  • Content Colors - Colores del contenido.
  • Sidebar Widget Colors - Colores de los Widget de la barra lateral.
  • Footer Widget Color - Colores de los widget del pie de página.
  • Footer Colors - Colores del pie de página.
  • Form Colors - Colores de los formularios.

colores

Vídeo creado por Thomas Usborne – GeneratePress

Backgrounds - Imágenes de fondo

Seguimos ahora con el add-on Backgrounds (Imágenes de fondo) Este es un complemento interesante para darle un toque más artístico a tu diseño.

generatepress mega tutorial parte 2
  • Punto 1: Este complemento te permite agregar un imagen de fondo en diferentes secciones de la plantilla que te permitirá no repetir diseños y de esta forma reutilizar la plantilla en otras web.
  • Body - Cuerpo.
  • Header - Encabezado.
  • Navigation - Navegación.
  • Navigation Item - Elementos de navegación.
  • Navigation Item Hover - Elementos de navegación al pasar el ratón por encima.
  • Navigation Item Current - Elementos de navegación actuales.
  • Sub-Navigation Item - Sub-elementos de navegación.
  • Sub-Navigation Item Hover - Sub-elementos de navegación al pasar el ratón por encima.
  • Sub-Navigation Item Current - Sub-elementos de navegación actuales.
  • Content - Contenido.
  • Sidebar Widgets - Widgets de la barra lateral.
  • Footer Widget Area - Área de widgets de pie de página.
  • Footer Area - Área de pie de página.

Imágenes de fondo

Vídeo creado por Thomas Usborne – GeneratePress

Page Header - Encabezado de página

El complemento Page Header (encabezado de página) te permite agregar una imagen como encabezado a todas las páginas y este ajuste lo puedes hacer de forma independiente en cada página.

generatepress mega tutorial parte 2
  • Paso 1 y 2: Para utilizar esta función debes crear una página haciendo clic en el menú Páginas>>Añadir nueva o entrar en el modo de edición de cualquier página que hayas creado anteriormente.
  • Paso 3: Ahora debes hacer clic en el botón Add Image (añadir imagen) para cargar una de la biblioteca de medios de WordPress o subir una de tu ordenador.
generatepress mega tutorial parte 2
  • Paso 4: En la imagen superior puedes ver como una imagen ocupa la sección del encabezado.

Encabezado de página

Vídeo creado por Thomas Usborne – GeneratePress

GeneratePress integra todos sus complementos con el personalizador de WordPress, de esta forma puedes ir viendo los cambios que hagas en tiempo real sin tener que guardar el trabajo. ¡Mega tutorial! No te lo pierdas es increíble.

Tweetealo a tus amigos

Sections - Secciones

Este es otro de los complementos, de mi lista de favoritos porque te permite crear secciones o divisiones en una página para colocar diferentes contenidos. Lo puedes utilizar para crear landing page (páginas de aterrizaje o de destino) o crear la portada de tu web entre otras cosas las posibilidades son muchas y depende de tu imaginación.

generatepress mega tutorial parte 2

Para crear secciones debes crear una página en el menú Páginas>>Añadir nueva o editar una que tengas ya creada y activar el selector Use Sections (usar secciones). Debe quedar en YES, como se muestra en la imagen superior.

  1. 1
    Punto 1: Aquí puedes ver claramente la primera sección creada con el nombre de GeneratePress.
  2. 2
    Punto 2: Aquí está la segunda sección creada con el nombre de GP Premium.
  3. 3
    Punto 3: Con el botón Add Section (añadir sección) puedes seguir agregando todas las secciones que quieras, configurándolas cada una de forma independiente. 
  4. 4
    Punto 4: Con el botón Remove Sections (eliminar secciones) puedes ir quitando secciones que no te interesen.
generatepress mega tutorial parte 2

Aquí puedes ver las secciones creadas en el paso anterior, en este caso son dos pero podrían ser las que quieras, no hay limite, solo tu imaginación.

Secciones

Vídeo creado por Thomas Usborne – GeneratePress

Copyright - Derechos de autor

El complemento Copyright (derechos de autor) te permite colocar debajo del Footer (Pie de página) el nombre de tu empresa y el año para que se visualice en todas las páginas de tu sitio.

generatepress mega tutorial parte 2
  • Paso 1 y 2: Primero debes ir al menú Apariencia>>GeneratePress y hacer clic en este último para entrar al panel de configuración de GeneratePress.
  • Paso 3: Aquí debes poner el texto con las variables que se muestran en la imagen superior, la variable %copy% representa el símbolo de copyright y la variable %current_year% representa el año actual. También puedes utilizar código Html Shortcodes (códigos cortos).
  • Paso 4: Una vez finalizado debes hacer clic en el botón Save Copyright (guardar derechos de autor)
generatepress mega tutorial parte 2
  • Paso 5: En la imagen superior puedes ver el Copyright terminado, debajo de los Widgets de pie de página. Además podrías poner unos botones de redes sociales o un menú en html. En fin, las posibilidades son muchas ¡vuela con tu imaginación!

Derechos de autor

Vídeo creado por Thomas Usborne – GeneratePress

GeneratePress es totalmente personalizable desde la cabeza a los pies y si esto fuera poco es compatible con el editor Thrive Architect. ¡No te pierdas este mega tutorial te va a emocionar!

Tweetealo a tus amigos

Disable Elements - Desactivar elementos

Este elemento te va a encantar porque te permite desactivar elementos específicos dentro de las páginas, post, cabecera, menú, título y pie de página desde un módulo o caja en el editor de WordPress.

generatepress mega tutorial parte 2
  • Punto 1: En la imagen superior puedes apreciar el módulo o caja que te permite seleccionar distintos elementos para desactivarlos, por consecuencia no se muestran en una página o entrada específica. A continuación puedes ver todos los elementos que se pueden desactivar:
  • Header - Encabezado
  • Primary Navigation - Menú principal
  • Secondary Navigation - Menú secundario
  • Post Image / Page Header
  • Content Title - Título del contenido
  • Footer - Pie de página

Desactivar elementos

Vídeo creado por Thomas Usborne – GeneratePress

Blog

El elemento Blog dispone de muchas funciones, por ejemplo, mostrar tus últimas entradas en columnas como una revista, mostrar un extracto o resumen en cada post, ocultar la fecha, categorías, autor, entre otras cosas.

  • Punto 1: Aquí puedes ver que el complemento Blog está integrado al personalizador de WordPress como los demás add-ons. Dispone de cuatro secciones para hacer modificaciones en la vista Blog de tu web.
  • Blog Content - Contenidos del blog
  • Columns - Columnas
  • Masonry - Diseño al estilo Pinterest
  • Post Image - Imagen de la entrada

Debajo tienes una lista de todos los cambios que puedes hacer con el complemento Blog, de esta forma tienes el control absoluto para no repetir el diseño en otras web que quieras utilizar la plantilla. ¡Es impresionante!

Content - Contenido

  • Full post or excerpt + excerpt length - Entrada completa o resumen + longitud del resumen
  • Read more label - Etiqueta de Leer más...
  • Show/hide date - Mostrar/Ocultar fecha
  • Show/hide author - Mostrar/Ocultar autor
  • Show/hide categories - Mostrar/Ocultar categorías
  • Show/hide tags - Mostrar/Ocultar etiquetas
  • Show/hide comments link - Mostrar/Ocultar enlaces de comentarios

Columns - Columnas

  • Enable/disable - Activar/desactivar columnas
  • Number of columns - Número de columnas
  • Featured column - Columna destacada

Masonry - Diseño al estilo Pinterest

  • Enable/disable - Activar/Desactivar
  • Masonry block width - Ancho del bloque
  • Masonry most recent width - Ancho de los más recientes
  • Masonry load more text - Texto de cargar más