Curso gratis de Thrive Ovation en la "Academia MCD" »

Velocidad + estetica 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.

alojamiento wordpress

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.

Thrive Architect curso gratis

Curso gratis de Thrive Architect para crear tu mism@ la web de tus sueños

Descarga el eBook con más de 400 páginas + 332 infografías y 125 vídeos "Gratis" ahora mismo.

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 

Y qué gano yo a cambio te preguntarás, pues como ya he dicho anteriormente, primero la satisfacción de poder ayudar a otros a concretar su sueño creando guías y tutoriales que te simplificarán todo el proceso de creación, y como de algo hay que vivir y mantener un blog tiene un coste económico, si compras esta plantilla llamada GeneratePress desde los enlaces de mi web a ti te saldrá lo mismo pero yo ganaré una pequeña comisión que me permitirá seguir creando materiales de consulta de forma gratuita para todos.


Tu voto es muy importante para mi

¿Tienes 1 segundo?

Velocidad + estetica es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial
4.9 (98.14%) 118 votos


¿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.

  • 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.

  • 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

  • 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.

Puedes llevarte el curso completo con más de 400 páginas + 332 infografías y 125 vídeos "Gratis".

¿Cómo desinstalar el tema GeneratePress?

Paso 2: Bien ya tienes instalada la versión gratuita de Generatepress, ahora debes comprar una copia de GP Premium desde la web oficial haciendo clic en el siguiente botón.



Paso 3: Una vez dentro de la web de GeneratePress casi al final de la página encontrarás un botón con el nombre de Add to Cart (Añadir al carro) como se aprecia en la imagen superior, debes hacer clic en él para iniciar el proceso de compra.


Paso 4: Como puedes observar en la imagen superior ya está añadido el producto al carro de compras que es un archivo 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.


¿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.

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


Paso 2: Una vez dentro de tu cuenta debes posar el puntero del ratón donde dice GP Premium y hacer clic con el botón derecho hasta la opción Guardar enlace como... para guardarlo en tu ordenador, se ve claramente en la imagen superior.

  • En Firefox y Chrome, debes hacer clic en la opción Guardar enlace como... o en inglés Save link as...
  • Si utilizas Internet Explorer debes hacer clic en la opción Guardar destino como... o en inglés Save target as...
  • Si usas Safari como navegador deberás hacer clic en la opción Descargar archivo como... o en inglés Download linked file as…

¿Cómo instalar gp-premium.zip en mi 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.



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.


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.


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?

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.


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.


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.

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

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 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. 


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. 


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.

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.


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.




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.

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.

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.

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.

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.

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.

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.

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.

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)


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.

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.

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/Ocultr 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

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. 


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.


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?

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.

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. 

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.

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.


¿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?


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

Tu voto es muy importante para mi

¿Tienes 1 segundo?

Velocidad + estetica es igual a GeneratePress el theme para WordPress que cautivó a todos: mega tutorial
4.9 (98.14%) 118 votos

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?

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 40 % de descuento.

alojamiento wordpress

CURSO GRATIS DE THRIVE ARCHITECT




  • En un solo eBook, el curso completo que estabas esperando...

  • Descarga el eBook con más de 400 páginas + 332 infografías y 125 vídeos "Gratis".

  • Además un súper bonus sorpresa.

  • ¿Quieres sentir la satisfacción de crear tu mism@ la web de tus sueños?


¡SÍ, QUIERO INTENTARLO!


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 enseñarte a crear la web de tus sueños en minutos con WordPress.org - Thrive Architect y GeneratePress.

  • 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!!!


  • >