¿Quieres crear tu propio blog en una hora? »

Empieza por aquíCurso gratis TAVideotecaMegatutorialesTestimonios Desafío¡Membresías Thrive!

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

GeneratePress Mega Tutorial de esta plantilla para WordPress con estilo minimalista que lo tiene todo.

More...

GeneratePress Mega tutorial de esta plantilla para wordpress esta pensado para que puedas sacarle el máximo provecho a este tema para WordPress.org que en su versión básica es gratuita, pero puedes actualizarla a la versión GP Premium por un bajo coste.

GP Premium te permitirá agregar 12 plugins o complementos para aprovechar a fondo todo su potencial, pero te lo cuento más adelante en este mismo post.

Si estás con un presupuesto algo corto, o no quieres invertir demasiado en una plantilla, GP Premium es una buena opción.

Con un código limpio que permite una velocidad de carga increíble, además es responsive esto quiere decir que se adapta perfectamente a todos los dispositivos móviles.

Esta integrada a la web de Font Awesome donde podrás utilizar más de 600 iconos para tu diseño. ¿A qué te va gustando?

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 para luego previsualizar. Con esto ganarás mucho tiempo en la creación de tus páginas.

Dispone de 20 idiomas y creciendo día a día gracias a la comunidad de usuarios que esta detrás haciendo aportaciones permanentemente.

Es totalmente personalizable desde la cabeza a los pies y si esto fuera poco es compatible con el editor Thrive Content Builder, ¿Qué no lo conoces? Echa un vistazo a este artículo: Thrive Content Builder Parte 1: La Súper Mega Guía más completa que hayas visto 


Tu voto es muy importante para mi

¿Tienes 1 segundo?

Velocidad + estética es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial
4.9 (97.58%) 124 voto[s]


¿Cómo Instalar la versión gratuita de Generatepress?

Generatepress dispone de dos modalidades en su plantilla y es que una es gratuita o free y que podrás utilizarla sin problemas, pero no podrás sacarle su máximo potencial por la falta de los add-ons o complementos, que son 12 en total, que te permiten modificar al completo toda la plantilla y esto es un valor añadido porque podrás usar la misma plantilla para diferentes web sin tener que repetir el diseño.

Pero te lo contaré con más detalle a lo largo de este artículo. Ahora me voy a centrar a explicarte la instalación Free de este theme con imágenes para que te sea más claro, de más está decirte que el proceso es muy sencillo y que podrás utilizarlo sin los 12 plugins o complementos Premium, aunque si te gusta puedes comprarlos en cualquier momento. ¡Manos a la obra!

Voy a suponer que ya tienes un Hosting con WordPress.org instalado y configurado si no es así te recomiendo que leas este artículo antes de seguir:


generatepress mega tutorial de esta plantilla para wordpress
  • Paso 1: Debes ir hacia el menú de la derecha y bajar hasta la opción Apariencia>>Temas y hacer clic en él, de esta forma accederás a la sección de temas de tu WordPress.

generatepress mega tutorial de esta plantilla para wordpress
  • Paso 2: Una vez dentro de la sección de temas, verás un botón que dice Añadir nuevo debes hacer clic en él para habilitar la búsqueda de temas nuevos.

generatepress mega tutorial de esta plantilla para wordpress
  • Paso 3: Una vez dentro encontrarás un buscador a la derecha como muestra la imagen superior, debes escribir dentro del campo la palabra GeneratePress para que te la muestre en el catálogo de temas.

Descarga "Gratis" GeneratePress un toque minimalista para tu WordPress.

Tweetealo a tus amigos

generatepress mega tutorial de esta plantilla para wordpress
  • Paso 4: Como puedes observar en la imagen superior, en la miniatura del tema GeneratePress encontrarás un botón que dice Instalar, debes hacer clic en el botón para que se instale dentro de tu WordPress.

generatepress mega tutorial de esta plantilla para wordpress
  • Paso 5: Por último debes hacer clic en el botón Activar y listo ya tienes la plantilla GeneratePress operativa.


¿Cómo desinstalar el tema GeneratePress?

generatepress mega tutorial de esta plantilla para wordpress
  • Paso 1 y 2: Ir al menú Apariencia >> Temas para desactivar la plantilla GeneratePress antes de poder eliminarla.
  • Paso 3: Hacer clic en el botón Activar de otra plantilla diferente que tengas instalada, pueden ser las que trae por defecto WordPress.

generatepress mega tutorial de esta plantilla para wordpress
  • Paso 4: Una vez desactivada GeneratePress y activada cualquier otra plantilla debes hacer clic en Detalles del tema de la plantilla GeneratePress (que ahora esta desactivada).

generatepress mega tutorial de esta plantilla para wordpress

Paso 5: Por último, podrás ver el botón Borrar si haces clic en el la plantilla GeneratePress se borrará de tu instalación de WordPress de forma definitiva.


¿Cómo comprar GP-Premium? 

generatepress mega tutorial de esta plantilla para wordpress

Paso 1: Primero debes acceder a la web oficial desde este enlace: GeneratePress o si lo prefieres desde el botón azul de abajo. Una vez dentro de la web oficial de GeneratePress debes hacer clic en el botón Premium como muestra la imagen superior.


generatepress mega tutorial de esta plantilla para wordpress

Paso 2: Ahora debes hacer clic en el botón Get it now (Consíguelo ahora) para ir directo al botón de compra.


generatepress mega tutorial de esta plantilla para wordpress

Paso 3: Encontrarás un botón con el nombre de Add to Cart (Añadir al carro) como se ve en la imagen, debes hacer clic en él para ir al carro de compra.


generatepress mega tutorial de esta plantilla para wordpress

Paso 4: Como puedes observar en la imagen superior, ya está añadido el producto al carro de compras con el nombre de GP Premium. Debes elegir el método de pago, que en este caso dispone de dos PayPal y Tarjeta de crédito.

Según cual elijas deberás rellenar un formulario con tus datos personales. Es muy importante poner tu correo electróniconombre de usuario (el que quieras) y una contraseña, necesario para que se cree una cuenta en la plataforma de GeneratePress, donde deberás ingresar posteriormente para descargar el archivo GP Premium.zip a tu ordenador.

Por último, debes hacer clic en el botón Purchase (Comprar) para finalizar la compra. Recibirás unos correos en tu buzón de la compra realizada.

NOTA: Este precio puede variar considerablemente según la cotización de la divisa en cada país y la aplicación del IVA si correspondiera, por lo tanto, puedes hacer la conversión a tu moneda local desde este enlace: Conversor de monedas


También el precio de la plantilla puede variar desde el momento que se creó este artículo de GeneratePress. Puedes ver el precio actualizado en el siguiente enlace: Precio actual de GeneratePress



¿Cómo acceder a mi cuenta y descargar gp-premium.zip?

Para descargar GP Premium que acabas de comprar en el paso anterior debes ingresar a tu cuenta en GeneratePress. ¿Te acuerdas? Con el nombre de usuario y contraseña que utilizaste en el proceso de compra.

generatepress mega tutorial de esta plantilla para wordpress

Paso 1: Ingresa a tu cuenta donde encontrarás el enlace de descarga del archivo gp-premium.zip


generatepress mega tutorial de esta plantilla para wordpress

Paso 2: Una vez dentro de tu cuenta debes posar el puntero del ratón donde dice GP Premium y hacer clic el botón Download (Descargar) para guardarlo en tu ordenador, como se ve claramente en la imagen superior.


¿Cómo instalar gp-premium.zip en mi WordPress?

generatepress mega tutorial de esta plantilla para wordpress

Paso 1: Ya tienes descargado en tu ordenador el archivo gp-premium.zip, pues ahora deberás instalarlo como cualquier otro plugin desde el menú Plugins>>Añadir Nuevo como se ve en la imagen superior.



generatepress mega tutorial de esta plantilla para wordpress

Paso 2: Ya tienes descargado en tu ordenador el archivo gp-premium.zip,  ahora deberás instalarlo como cualquier otro plugin desde el menú Plugins>>Añadir Nuevo como se aprecia en la imagen superior.


generatepress mega tutorial de esta plantilla para wordpress

Paso 3: Debes buscar en tu ordenador el archivo gp-premium.zip, lo seleccionas, haces clic en el botón Instalar ahora y esperas unos segundos.


generatepress mega tutorial de esta plantilla para wordpress

Paso 4: Puedes ver en la imagen superior el proceso de instalación. Una vez que veas el mensaje Plugin instalado con éxito, debes hacer clic en el botón Activar plugin. Solo queda activar los add-ons o complementos.


GeneratePress con su estilo minimalista cautivo a todos incluso con su precio.

Tweetealo a tus amigos

¿Cómo activar los add-ons o complementos?

generatepress mega tutorial de esta plantilla para wordpress

Paso 1: Una vez que tengas Activado el plugin debes ir al menú Apariencia>>GeneratePress y clic en el, para proceder a la activación de los add-ons o complementos.


generatepress mega tutorial de esta plantilla para wordpress

Paso 2: En la imagen superior puedes ver todos los complementos desactivados todavía, puedes activar todos o los que necesites uno por uno haciendo clic en el texto Activar en cada complemento.


generatepress mega tutorial de esta plantilla para wordpress

Paso 3: En esta imagen puedes ver claramente que todos los complementos están activados.

Paso 4: Por el contrario si quieres desactivar alguno de los complementos debes hacer clic en el texto Desactivar correspondiente a cada add-ons.

generatepress mega tutorial de esta plantilla para wordpress

Punto 5: Al activar todos los complementos podrás ver 2 nuevas opciones en el menú Apariencia>>GP Hooks y Apariencia>>Blog Page Header, más adelante en este mismo post te contare para qué sirven y cómo se utilizan.


Compatibilidad con otros plugins populares

GeneratePress es compatible con la mayoría de los plugins más populares del mercado, entre ellos los más destacados son los siguientes:


Personalizador de WordPress en tiempo real

generatepress mega tutorial de esta plantilla para wordpress

Punto 1: Una de las ventajas que más me gustan de GP Premium es que todos sus complementos se integran perfectamente en el personalizador de WordPress y esto es fabuloso porque podrás ir haciendo cambios en tu página, al mismo tiempo que los ves en tiempo real.

Esto quiere decir que no tienes la necesidad de ir guardando tu trabajo para luego hacer una previsualización y ver como va quedando, eso es cosa del pasado.

Si necesitabas un punto fuerte para decidirte, creo que este es uno muy fuerte, porque ganarás mucho tiempo en la creación y edición de páginas y ya sabes el tiempo vale oro en estos tiempos.


Widgets disponibles

generatepress mega tutorial de esta plantilla para wordpress

GeneratePress dispone de 8 zonas de widget, ya sabes que estos widget son muy útiles para añadir módulos en el header (cabecera)sidebar (barra lateral), footer (Pie de página) y otras zonas dependiendo de la plantilla que tengas instalada.

¿Qué se puede añadir en estas zonas disponibles? Bueno, en una barra lateral puedes agregar un widget de búsqueda, últimos comentarios, categorías, últimas entradas, calendario, menú, etiquetas etc.

En un pie de página o footer puedes agregar tus redes sociales, código html, imagenes etc. las posibilidades son infinitas.

Dispones de un abanico amplio de zonas para colocar tus widgets favoritos que consideres necesario, de esta forma harás vivir a tus visitantes una experiencia de usuario altamente gratificante.


GeneratePress rápida, potente, compatible con los plugin más populares.

Tweetealo a tus amigos

GP Hooks ganchos donde quieras

Una de las funciones que más me gusta es la posibilidad de usar Hooks, me hace recordar mucho a Genesis Framework que posee esta funcionalidad.

¿Qué es un hook? La traducción literal sería "Gancho" porque te permite enganchar códigos para determinada funciones en diferentes zonas de la plantilla para que luego se puedan ejecutar y visualizar como si se tratase de un widget.

La diferencia con el widget es que en el GP hook tu tendrás que escribir algunas lineas de código PHP - HTML o TEXTO para realizar determinadas funciones o mostrar solo texto; una podría ser el número de comentarios en una parte especifica de la plantilla.

Más adelante en este mismo post en la sección de complementos te explico como se utilizan los hooks, puedes ir directamente haciendo clic aquí.


Blog Page Header - Encabezado personalizado del blog

Blog Page Header te permite colocar una imagen en la cabecera de la página principal donde se muestran las últimas entradas del blog. Puedes ver más claro la configuración en la siguiente imagen. 


generatepress mega tutorial de esta plantilla para wordpress

Paso 1 y 2: Debes ir al menú Apariencia>>Blog Page Header para acceder a la configuración de esta función que es muy sencilla.

Paso 3: Con el botón add or Upload File (añadir o subir imagen) puedes cargar una imagen desde la biblioteca de medios o subir una desde tu ordenador.

Punto 4: Aquí puedes ver una previsualización de la imagen cargada, te recomiendo cargar imágenes grandes ya que ocupará todo el ancho del encabezado, una resolución ideal sería no menor de 1060 pixels. 


generatepress mega tutorial de esta plantilla para wordpress

Aquí puedes ver el resultado de forma clara, la imagen ocupa todo el ancho del encabezado. Recuerda, este ajuste es solo para la página principal del blog donde se listan las últimas entradas.



Nuevos módulos dentro del editor de entradas

Al instalar GP Premium y activar todos los complementos, el editor de WordPress contendrá nuevos módulos o cajas para activar o desactivar funciones, esto es muy útil porque podrás configurar de forma específica cada post. En la siguiente imagen te voy a describir cada modulo añadido.

generatepress mega tutorial de esta plantilla para wordpress

Punto 1: El modulo Use Sections (Usar Secciones) si lo activas (Yes) podrás incluir secciones independientes al contenido del post para poner lo que quieras en cada una de ellas, puedes ver un ejemplo en la siguiente imagen.

generatepress mega tutorial de esta plantilla para wordpress

Punto 2: El módulo Disable Elements (Desactivar elementos) es otra función muy útil ya que con ella podrás desactivar de forma independiente en cada entrada ciertos elementos que te detallo a continuación.

  • Header - Oculta o desactiva el encabezado.
  • Primary Navigation - Oculta o desactiva el menú principal.
  • Secondary Navigation - Oculta o desactiva el menú secundario.
  • Post Image / Post Header - Oculta o desactiva la imagen del post y la del encabezado.
  • Content Title - Oculta o desactiva el título del post.
  • Footer - Oculta o desactiva el pie de página.

Punto 3: Disposición de la barra lateral, aquí también puedes hacer varios ajustes para mostrar la barra en diferentes posiciones de forma independiente en cada post y son los siguientes:

  • Contenido / Barra lateral.
  • Barra lateral / Contenido.
  • Contenido / Sin barras laterales.
  • Barra lateral / Contenido / Barra lateral.
  • Barra lateral / Barra lateral / Contenido.
  • Contenido / Barra lateral / Barra lateral.

Punto 4: Widgets de pie de página, es otra opción interesante para mostrar estos módulos en el footer o no mostrarlos para nada y se puede hacer de forma independiente en cada entrada:

  • 0 Widgets - No muestra ninguna caja o módulo en el footer.
  • 1 Widgets - Muestra 1 caja o modulo en el footer.
  • 2 Widgets - Muestra 2 cajas o módulos en el footer.
  • 3 Widgets - Muestra 3 cajas o módulos en el footer.
  • 4 Widgets - Muestra 4 cajas o módulos en el footer.
  • 5 Widgets - Muestra 5 cajas o módulos en el footer.

Punto 5: Page Header (Encabezado de página) te permite insertar una imagen como encabezado del post de forma específica para cada entrada.

Punto 6: Integración con Page Builder, básicamente esta función lo que hace es ocupar todo el ancho del contenido del post. En las siguientes imágenes puedes apreciar la diferencia más claramente.

generatepress mega tutorial de esta plantilla para wordpress

generatepress mega tutorial de esta plantilla para wordpress


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 de esta plantilla para wordpress

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.

Aquí puedes ver el complemento Typography en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


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 de esta plantilla para wordpress

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.

Vídeo del complemento Colors en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


Facilidad, con estilo, potente GP Premium un peso pesado.

Tweetealo a tus amigos

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 de esta plantilla para wordpress

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.

Vídeo del complemento Backgrounds en acción

play-circle-o

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 de esta plantilla para wordpress

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 de esta plantilla para wordpress

Paso 4: En la imagen superior puedes ver como una imagen ocupa la sección del encabezado.

Vídeo del complemento Page Header en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


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 de esta plantilla para wordpress

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.

Punto 1: Aquí puedes ver claramente la primera sección creada con el nombre de GeneratePress.

Punto 2: Aquí está la segunda sección creada con el nombre de GP Premium.

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. 

Punto 4: Con el botón Remove Sections (eliminar secciones) puedes ir quitando secciones que no te interesen.

generatepress mega tutorial de esta plantilla para wordpress

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.

Vídeo del complemento Sections en acción

play-circle-o

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 de esta plantilla para wordpress

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 y 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 de esta plantilla para wordpress

Paso 5: En la imagen superior puedes ver el Copyright terminado, debajo de los Widgets de pie de página. Ademas podrías poner unos botones de redes sociales o un menú en html. En fin, las posibilidades son muchas ¡vuela con tu imaginación!

Vídeo del complemento Copyright en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


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 modulo o caja en el editor de WordPress.

generatepress mega tutorial de esta plantilla para wordpress

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

Vídeo del complemento Disable Elements en acción

play-circle-o

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.

generatepress mega tutorial de esta plantilla para wordpress

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
  • Masonry loading text - Texto de cargando...

Post Image - Imagen de la entrada

  • Show/hide - Mostrar/Ocultar
  • Position - Posición
  • Alignment - Alineación
  • Width - Anchura
  • Height - Altura

Vídeo del complemento Blog en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress



Hooks - Ganchos

GeneratePress dispone de una funcionalidad muy interesante y es la de poder poner códigos personalizados en PHP, HTML o texto plano donde quieras.

Para poder realizar esto, GP Premium dispone de GP Hook con 18 zonas o espacios dentro de la plantilla para insertar tus códigos que son los siguientes:

  • wp_head - Encabezado
  • Before Header - Antes del encabezado
  • Before Header Content - Antes del contenido del encabezado
  • After Header Content - Después del contenido del encabezado
  • After Header - Después del encabezado
  • Inside Content Container - Dentro del contenedor de contednido
  • Before Content - Antes del contenido
  • After Entry Title - Después del título de la entrada
  • After Content - Después del contenido
  • Before Right Sidebar Content - Antes del contenido de la barra lateral derecha
  • After Right Sidebar Content - Después del contenido de la barra lateral derecha
  • Before Left Sidebar Content - Antes del contenido de la barra lateral izquierda
  • After Left Sidebar Content - Después del contenido de la barra lateral izquierda
  • Before Footer - Antes del pie de página
  • After Footer Widgets -  Después de los widgets de pie de página
  • Before Footer Content - Antes de los contenidos de pie de página
  • After Footer Content - Después de los contenidos de pie de página

generatepress mega tutorial de esta plantilla para wordpress

Paso 1: Para utilizar los hook debes ir al menú Apariencia>>Gp Hook, voy a tomar como ejemplo el primer hook de la lista que esta vacío todavía.

Punto 2: Aquí puede ver el nombre del hook que en este caso se llama wp_head y es el primero de la lista que te permitirá insertar códigos en el área del encabezado.

Punto 3: La casilla de verificación Execute PHP (ejecutar código PHP) te permite, si está marcada, ejecutar cualquier código PHP que hayas escrito.

Punto 4: La casilla de verificación Disable Hook (desactivar Hook) te permite desactivar en cualquier momento cualquier hook que tengas activado, con esto te evitas tener que eliminar el contenido del hook y tenerlo guardado pero deshabilitado para utilizarlo en otro momento.

Punto 5: Todo el recuadro en blanco está disponible para que puedas escribir código PHP - HTML o simple TEXTO según tus necesidades. Pero si utilizas código PHP deberás activar siempre la casilla Execute PHP (ejecutar PHP) para que el código se procese. 


generatepress mega tutorial de esta plantilla para wordpress

Punto 1: Aquí tienes un ejemplo de puro html que sirve para colocar en este caso un banner en el Hook After Entry Title (después del título de la entrada) habrás notado que no hace falta seleccionar la casilla PHP, pues solo es código HTML. En la siguiente imagen puedes ver el resultado de esta acción.


generatepress mega tutorial de esta plantilla para wordpress

Punto 2: Este es el resultado final, he colocado un banner o anuncio debajo del título del post.


Vídeo del complemento Hooks en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


GeneratePress una vez que lo pruebas, te lo quedas!!!

Tweetealo a tus amigos

Spacing - Espacios

Con el complemento Spacing tienes control absoluto de todos los espacios ya sea en la cabecera, menú de navegación, widget de la barra lateral, y pie de página y todo integrado en el personalizador de WordPress que te muestra los cambios en tiempo real. ¿A qué mola?

generatepress mega tutorial de esta plantilla para wordpress

Punto 1: En esta imagen se ve perfectamente como el complemento spacing está integrado al personalizador de WordPress. Dispone de 9 secciones editables que te paso a contar.

  • Header - Encabezado
  • Content - Contenido
  • Separating Space - Espacio de separación
  • Primary Menu Items - Elementos del menú principal
  • Sub-Menu Item Height - Altura de los elementos del sub-menú
  • Sidebar Widget - Widget de la barra lateral
  • Footer Widget Area - Área de Widget del pie de página
  • Footer - Pie de Página
  • Sidebar Widths - Ancho de la barra lateral

Debajo te dejo una listado de todos los cambios que puedes hacer con el complemento Spacing, como verás, puedes modificar todos los espacios a voluntad.

Header - Encabezado

  • Top padding - Relleno arriba
  • Right padding - Relleno a la derecha
  • Bottom padding - Relleno abajo
  • Left padding - Relleno a la izquierda

Content - Contenido

  • Separating space - Espacio de separación
  • Top padding - Relleno arriba
  • Right padding - Relleno a la derecha
  • Bottom padding - Relleno abajo
  • Left padding - Relleno a la izquierda

Primary + secondary menu - Menú primario y secundario

  • Menu item width - Ancho de los elementos del menú
  • Menu item height - Altura de los elementos del menú
  • Sub-menu item height - Altura de los elementos del sub-menú

Sidebar - Barra lateral

  • Top padding - Relleno arriba
  • Right padding - Relleno a la derecha
  • Bottom padding - Relleno abajo
  • Left padding - Relleno a la izquierda
  • Left sidebar width - Ancho barra lateral izquierda
  • Right sidebar width - Ancho barra lateral derecha

Footer widget area - Área de Widget del pie de página

  • Top padding - Relleno arriba
  • Right padding - Relleno a la derecha
  • Bottom padding - Relleno abajo
  • Left padding - Relleno a la izquierda

Footer - Pie de página

  • Top padding - Relleno arriba
  • Right padding - Relleno a la derecha
  • Bottom padding - Relleno abajo
  • Left padding - Relleno a la izquierda

Vídeo del complemento Spacing en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress



Secondary Nav - Navegación secundaria

Si quieres tener un menú de navegación secundario en la barra lateral este complemento te vendrá de maravillas, ya que podrás replicar el menú principal en un menú secundario en vertical u horizontal con unos simples clics.

generatepress mega tutorial de esta plantilla para wordpress

Punto 1: El complemento Secondary Navigation es otro de los complementos que te ayudará a crear un menú secundario con los mismos elementos que el menú principal en diferentes posiciones de la plantilla y consta de seis secciones que te muestro a continuación.

  • Secondary Navigation - Navegación secundaria
  • Secondary Navigation Tipography - Navegación secundaria tipografía
  • Secundary Sub-Navigations Colors - Sub-menú secundario colores
  • Secundary Navigation Spacing - Navegación secundaria espacios
  • Secondary Navigation Backgrounds Images - Navegación secundaria con imágenes de fondo

Aquí te muestro todas las opciones disponibles de la navegación secundaria y como es costumbre también están integradas en el personalizador de WordPress.

Layout - Diseño

  • Mobile menu label - Etiqueta del menú de móvil
  • Navigation layout - Diseño de navegación
  • Navigation position - Posición de la navegación
  • Navigation alignment - Alineación de la navegación

Spacing - Espacios

  • Menu item width - Ancho del elemento del menú
  • Menu item height - Altura del elemento del menú
  • Sub-menu item height - Altura de los elementos del sub-menú

Colors - Colores

  • Background - Fondo
  • Text - Texto
  • Background on hover - Fondos encima
  • Text on hover - Textos encima
  • Background when currently on page - Fondo actualmente en la página
  • Text when currently on page - texto actualmente en la página

Tipography - Tipografía

  • Font Family - Familia de fuentes
  • Font weight - valor o grosor de la fuente
  • Text transform - Transformación del texto
  • Font size - Tamaño de la fuente

Background images - Imagen de fondo

  • Menu background image - Imagen de fondo en el menú
  • Menu repeat - Repetición del menú
  • Menu item background - Fondo en los elementos del menú
  • Menu item repeat - Repetición de elementos de menú
  • Menu item hover + current background - Elemento del menú encima + repetición actual
  • Menu item hover + current repeat - Elemento del menú encima + repetición actual

Vídeo del complemento Secondary Nav en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


Menú Plus

Si alguna vez te preguntaste cómo se hacían los menús que se deslizan de costado, con efectos de transición que quedan muy bien, pues con el complemento Menú Plus lo tienes muy fácil y ya sabes, se integra con el personalizador de WordPress como siempre. Consta de seis secciones que te cuento ahora. 

generatepress mega tutorial de esta plantilla para wordpress

Punto 1: Como puedes ver en la imagen superior del personalizador de WordPress, están las opciones del complemento Menu Plus divididas en seis secciones.

  • Mobile Menu Label - Etiqueta del menú móvil
  • Sticky Menu - Menú con estilo sticky
  • Sticky Menu Effect - Efectos del menú sticky
  • Menu Logo - Logo del menú
  • Menu Logo Position - Posición del logo del menú

En el siguiente listado puedes ver más en detalle todas las posibilidades de configuración del Menu Plus.

Mobile Header - Encabezado en la vista móvil

  • Logo
  • Sticky

Sticky navigation - Navegación con estilo sticky

  • Mobile only - Móvil solamente
  • Desktop only - Escritorio solamente
  • Mobile + desktop - Móvil + escritorio
  • Disable - Desactivado

Navigation logo - Logo en el menú de navegación

  • Sticky navigation - Navegación sticky
  • Static navigation - Navegación estática
  • Sticky + static navigation - Navegación estática + sticky
  • Font size - Tamaño de la tipografía

Slideout Navigation - Navegación deslizable

  • Mobile - Móvil
  • Desktop - Escritorio
  • Mobile + desktop - Móvil + Escritorio
  • Disable - Desactivado

Vídeo del complemento Menu Plus en acción

play-circle-o

Vídeo creado por Thomas Usborne – GeneratePress


Import / Export - Importar / Exportar

La función de importar y de exportar puede serte muy útil para mantener un resguardo de tantas horas de maquetación en un archivo. Ya sea  para recuperarlo posteriormente como para pasar toda la configuración a otra web, te vendrá de maravillas.

generatepress mega tutorial de esta plantilla para wordpress

Punto 1: Como puedes ver en la imagen superior, puedes exportar tu trabajo desde ocho secciones diferentes haciendo clic en los diferentes botones que ahora vamos a repasar.

  • Export Default Customizer Settings - Exportar configuración por defecto del personalizador
  • Export Backgrounds Customizer Settings - Exportar configuración de fondos del personalizador
  • Export Blog Customizer Settings - Exportar la configuración del Blog del personalizador
  • Export GP Hooks - Exportar los GP Hooks (ganchos de códigos personalizados)
  • Export Page Header Customizer Settings - Exportar configuración del encabezado de la página del personalizador
  • Export Secondary Navigation Customizer Settings - Exportar configuración de la navegación secundaria del personalizador
  • Export Spacing Customizer Settings - Exportar configuración de espacios del personalizador
  • Export Menu Plus Customizer Settings - Exportar configuración del complemento Menu Plus del personalizador

Punto 2: Si lo que quieres es importar un archivo previamente guardado solo tienes que hacer clic en el botón seleccionar archivo y buscar en tu ordenador la copia de seguridad.

Punto 3: Acto seguido debes hacer clic en el botón Import settings (Importar configuración) en ese momento comenzara la restauración de la configuración. Eso es todo.


Instalar un sitio web completo desde Site Library (Biblioteca de Sitios) 

generatepress

¿Sabías qué GeneratePress dispone de una biblioteca de sitios completos pre-diseñados para que no tengas que empezar desde cero a maquetar? Claro que la tiene y es una opción de mucho valor porque te permitirá instalar un blog completo con un par de clics y luego solo te quedaría reemplazar los contenidos demos por los propios.

Seguro que te ha pasado alguna vez, comprar una plantilla muy bonita en la demo y luego de instalarla te ha venido la gran decepción porque no se parece en nada a lo que habías comprado. ¡¿A que sí?!

Pues GeneratePress te soluciona este inconveniente con su catálogo de sitios pre-diseñados que se instalan en unos cuantos clic de ratón para hacerte la vida más fácil, pero para que lo veas más claro, a continuación te mostraré el proceso de instalar un sitio completo y operativo en menos de un minuto. ¡Allá vamos!

Vídeo de Site Library (Biblioteca de sitios pre-diseñados) en acción

play-circle-o


¿Es compatible con el editor Thrive Architect?

Sí, se integra de maravillas con el mejor constructor de contenidos de la historia Thrive Content Builder que ahora se llama Thrive Architect y hacen la pareja perfecta. Te recomiendo los siguientes enlaces que te dejarán con la boca abierta.



Conclusión

Como habéis visto hasta ahora GeneratePress es una plantilla gratuita sin los complementos, esto te da una ventaja de poder probarla primero y te darás cuenta que vale la pena actualizarla a GP Premium y completarla con los 12 complementos.

Su aspecto minimalista me hace recordar mucho a Genesis, además es muy ligera a la hora de cargar las páginas y al estar integrados todos sus complementos en el personalizador de WordPress es sumamente sencillo maquetar la web que siempre soñaste, porque podrás ver cada cambio en tiempo real sin necesidad de grabar y previsualizar. Con esto ganarás mucho tiempo en la creación de tus sitios.

Si dispones de un presupuesto algo corto, no te preocupes, GP Premium es para ti porque está a la altura de los grandes a un precio más que económico.

En fin, GeneratePress me sorprendió gratamente por su facilidad de uso y las posibilidades de poder utilizarla en todas las webs que quieras ya sean de tu propiedad o las de tus clientes si los tuvieras y eso es un valor añadido ya que en otras plantillas tendrías que pagar una membresía aparte para utilizarla con tus clientes.

El precio de esta plantilla me parece muy barato por todo lo que ofrece y por la calidad de la misma. En mi opinión tendría que tener un precio mayor porque no le envidia nada a sus competidores del mismo rango. 

No lo dudes, es una buena inversión, no te arrepentirás te lo aseguro. Además si no te gustara (cosa que dudo), tiene garantía de 30 días para devolución del dinero sin preguntas ni nada.

Soy afiliado de GeneratePress y nunca recomiendo un producto que no haya probado en profundidad, es por eso que realizo estas guías en español para que conozcas de primera mano todo su potencial.



FAQs - Preguntas frecuentes

¿En cuántos sitios puedo utilizar GP?

¿Qué ocurre después que se termina el 1º año de actualizaciones y soporte?

¿Qué pasa si después del año no renuevo la licencia?, ¿Mi web se verá perjudicada?

¿Qué tipo de soporte voy a recibir?

¿Qué incluyen las actualizaciones?

¿Cuál es la política de reembolso?

¿La clave de mi licencia se renueva automáticamente?

¿Cómo cargar una plantilla prediseñada en GeneratePress?


Foro de consultas

¿Necesitas más ayuda para tomar una decisión?

¿Tienes alguna duda? Visita el foro de GeneratePress en este mismo blog y plantea tu problema. Entre todos llegaremos a una solución.

¿Necesitas más ayuda para tomar una decisión?


¿Te ha gustado GeneratePress? Te espero en los comentarios...

Tu voto es muy importante para mi

¿Tienes 1 segundo?

Velocidad + estética es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial
4.9 (97.58%) 124 voto[s]

smile-o

¿Te gustaría ayudar a otras personas? sí, entonces lo tienes fácil compártelo en la redes sociales. Eso me haría muy feliz.


¿Necesitas un hosting de calidad?

webempresa

Soy afiliado de Webempresa una empresa de hosting española que utilizo en mis proyectos y en los de mis clientes. Estoy muy contento con ellos y es por eso que os la recomiendo, pero antes que tomes una decisión te contaré porqué deberías elegir a Webempresa como tu hosting de cabecera. Aprovecha el cupón del 20 % de descuento.


¿QUIERES TENER TU PROPIO BLOG EN UNA HORA?




  • Seguramente te ha pasado por la mente esta idea; "¡Hacer una instalación de WordPress es complicado!" o "¡Esto me puede llevar mucho tiempo!" o la mejor, "¡Yo no nací para esto!"

  • En realidad todos podemos hacer lo que nos propongamos, en definitiva, es cuestión de voluntad.

  • Como dice el refrán: querer es poder. Te lo digo con conocimiento de causa, todo se puede, solo hay que tener ganas de querer hacerlo.

  • ¿Entonces quieres emocionarte creando la web de tus sueños?


SÍ, QUIERO IR AL TUTORIAL


Acerca del autor

MCD

He dedicado toda mi vida a la informática y soy un apasionado de las nuevas tecnologías además quiero compartir contigo todo lo que aprendí con WordPress.org - Thrive Architect y GeneratePress.

  • Aminadab dice:

    Me enamore de esta plantilla, siempre suelo tardar dias en encontrar una que me guste y a los dias de haberla instalado me deja de gustar al no poder dejarla igual que como se veia en el demo u otros sitios.

    Estaba a punto de comprarla sin link de afiliado hasta que vi tan completo tutorial en tu sitio, lo menos que puedo hacer es comprar la plantilla por medio de este sitio.

    Me gusto la opcion de importar/exportar ya que tengo una red de blogs asi que imaginate todo el tiempo que me tomaria configurar los sitios uno por uno.

    Me pondre manos a la obra y luego regreso con mis comentarios de mi experiencia.

    Saludos, gracias y felicitaciones por tan completo tutorial.

    • MCD dice:

      Hola, Aminadab me alegro que esta guía te haya sido de utilidad para tomar una decisión y muchas gracias por haberla comprado desde mis enlaces, gente como tú me anima a seguir escribiendo más tutoriales como este.

      Espero con ansias que compartas tus experiencia con GeneratePress en este blog.
      Saludos!!!

  • Jose maria dice:

    Hola muy interesante tengo una duda, como puedo cargra una plantilla pre diseñada de generate press en wordpress? gracias

    • MCD dice:

      Hola Jose María, si tienes instalado GeneratePress, debes acceder al menú Apariencia >> GeneratePress y luego hacer clic en el botón «Site Library». En ese momento se desplegará todo el catálogo para que elijas la plantilla prediseñada que más te guste.

      Puedes ver una imagen detallada en las preguntas frecuentes aquí: aquí.

      Saludos!!!

  • Desiree dice:

    Hola Miguel, sin duda el post mas completo que he encontrado sobre GP en español.
    Me has convencido y lo he instalado 🙂
    Pero tengo una duda, hice una landing page con content builder y quiero sacar el menú. En la vista ordenador no hay problema, Pero no sé como eliminarlo en la vista de tablet y del móvil
    http://publicaruncuento.com/6maneraspublicarcuento

    • Miguel Carreras Dutra dice:

      Hola Desiree,
      Me alegro que te haya gustado GeneratePress es sin duda una gran plantilla para WordPress, con respecto a tu duda prueba lo siguiente poniendo lo siguiente en el CSS de tu plantilla:

      /Ocultar Menú en vista móvil y tablet/
      @media (max-width: 768px)
      .main-navigation.mobile-header-navigation .menu-toggle {
      display: none;
      }

      Luego me cuentas.
      Saludos 🙂

  • Oscar dice:

    Hola Miguel, estoy probando este theme con tu tutorial y es excelente. Felicidades. Mira si puedes ayudarme con una duda que tengo, por favor. Quiero hacer una página sola que cuando clicas cada item del menú te va a una sección de la página. Necesito una web que sea sólo una página. ¿como puedo hacerlo en este theme? Saludos y gracias

    • Hola Oscar, gracias por tus palabras si tienes Thrive Architect es muy fácil, mira el siguiente enlace:

      Thrive Architect

      Además Thrive Architec dispone de landing page prediseñadas para crear una web de una sola página tipo currículum entre otras cosas.

      En Thrive Content Builder se hacia así:

      Thrive Content Builder

      Si no tienes Architect deberás crear los enlaces ancla para desplazarte dentro de la página con puro html puedes encontrar muchos ejemplos en Google buscando por enlaces ancla.

      Espero haberte ayudado.
      Saludos 🙂

  • mario dice:

    Estoy encantado con el theme, lo mejor que he usado, lo único que me ha costado mucho desactivar el main header en la pagina de la tienda woocomerce al final lo hice con un código ss, pero me sigue a pareciendo en la paginas de categorías de productos, aun desactivando la opción de encabezado, sigue apareciendo, sabes alguna forma mas fácil de eliminar el cabecera, como en el resto de las paginas

    https://opticagranviabcn.com/categoria-producto/colecciones/booth-bruce/

    de esta pagina no puedo eliminarlo

    gracias

    • Hola, Mario
      No utilizo Woocommerce pero puedes probar colocando este CSS
      .header-aligned-center .site-header {
      display: none;
      }

      Para que no te muestre la imagen del encabezado si eso es lo que quieres.

      Saludos!!!


  • >