Elementor Page Builder + GeneratePress: el fucking combo definitivo para crear tu web [MEGAGUÍA CON VIDEOS]

Elementor Page Builder es un plugin que funciona como un editor visual para WordPress.

¿Pero esto qué significa exactamente?

Pues que con este plugin llamado Elementor puedes maquetar tus contenidos en WordPress, ya sean páginas o entradas, de una forma muy sencilla y visual sin las necesidad de tener que tocar nada de código.

Quizá te suenen otros editores visuales como Thrive Architect, la función es muy similar.

En este caso vamos a ver desplegada la potencia de este plugin combinándolo con un compañero de viaje con el que se entiende a la perfección: el theme GeneratePress.

Y más concretamente, vamos a verlo de la mano de Jessica Berlar, freelance y diseñadora web especializada en WordPress.

Vamos sin más con esta Guía completa sobre Elementor y GeneratePress.

Elementor-GeneratePress-Guia

Qué vamos a ver en este artículo:

Como ya sabrás a estas alturas y con la evolución tecnológica que tenemos gracias a Internet, para tener mayor visibilidad es necesario tener una página web si nos planteamos crear un proyecto de emprendimiento.

Si además sumamos la competencia que existe en muchos sectores, hoy día tener un blog es indispensable como estrategia de marketing de contenidos para posicionar tu negocio online.

Si además lo haces a través de WordPress, tendrás mucho adelantado, ya que este Gestor de Contenidos te proporciona muchas facilidades para crearlo, y tiene una curva de aprendizaje muy rápida.

Y si me permites, déjame preguntarte…

¿Estos son algunos de los motivos que te han animado a diseñar tu propio blog?:

  1. Quieres trabajar en algo que conoces y te apasiona, siendo tu propio jefe.
  2. Quieres tener libertad para hacer lo que quieras en tu día a día: disfrutar más tiempo de tu familia, viajar, sentirte útil aportando valor y haciendo algo distinto…
  3. Quieres aumentar tus ingresos sin depender de nadie, creando tus propios productos y servicios para ayudar a una comunidad.

Si ya tienes claro que vas a crear un negocio online, sabes la temática de tu proyecto digital y has hecho los deberes previos a lanzar tu proyecto digital, ahora te tocará diseñar la web para plasmar ahí todo tu potencial como emprendedor.

Si te has decidido por el método “Juan Palomo”, quiero aportar mi granito de arena y me gustaría ayudarte a crear tu blog mínimo viable en WordPress, pero antes voy a ponerme en situación contigo.

Déjame adivinar…

  • Has comprado un dominio y has contratado el hosting donde vas alojar tu web. Si todavía no lo has hecho y te surgen dudas que servicio contratar, te recomiendo le eches un vistazo a este artículo de Omar.
  • Has empezado a tantear WordPress y estas probando algunas plantillas; se ven todas muy chulas en sus versiones demo, pero cuando empiezas a replicar algunos de estos temas, te das cuenta que necesitas tocar código para dejar la web tal y como viene en el ejemplo.
  • Esto te frustra y empiezas agobiarte; te saturas y no sabes que plantilla elegir finalmente, te das cuenta que hay que saber código para dejarla como la demostración, y la verdad es que tampoco te apetece mucho aprender de cero HTML, CSS…
  • Aquí es cuando empiezas a pensar donde te has metido, que esto te supera y decides mandarlo todo al garete.

como crear un blog minimo viable en WordPress con Generatepress y Elementor

Pues bien, déjame decirte que yo estuve en esa misma situación, y si te soy sincera, la verdad es que se necesita tiempo para adquirir los conocimientos necesarios para crear tu propia web.

Así que para que no pases por esto, quiero ayudarte a crear tu blog gracias a las dos herramientas gratuitas que te voy a presentar.

¿Te apetece conocerlas? 🙂

1.- Elige una Plantilla para tu proyecto (aquí veremos el theme GeneratePress)

Como ya sabes, una vez tengas instalado WordPress en tu dominio, necesitarás un theme para empezar a definir la parte estética de tu blog.

Antes te dije que actualmente existen infinidad de plantillas, tanto gratuitas como de pago, y esto puede acabar saturandote si no sabes por cual decantarte.

Así que en este post quiero presentarte la primera herramienta que te comentaba, una de las mejores opciones por las que puedes optar a día de hoy: el Framework de GeneratePress.

como crear blog con generatepress y elementor gratis

Este tema ha sido creado por Tom Usborne, y créeme que ha facilitado mucho la vida tanto a usuarios como a diseñadores profesionales.

Actualmente cuenta con más de 1.200.000 descargas de su plantilla gratuita.

¡Que pasada!

Pero espera, ¿que es lo que diferencia esta plantilla de muchas otras?

¿Por qué elegir una plantilla como GeneratePress?

Porque es ideal para personas que están empezando a crear su propia web desde cero y no tienen conocimientos de programación.

GeneratePress cuenta con un editor de personalización intuitivo y muy fácil de utilizar, por lo que si quieres implementar una estructura específica para tu web y quieres personalizarla con unos estilos concretos, esta herramienta te permite hacerlo de forma visual, sin tener que recurrir al código, y todo a golpe de clic.

como crear blog con generatepress y elementor gratis

Además de todo esto, esta plantilla tiene la posibilidad de utilizar un tema hijo por si quieres hacer modificaciones como usuario avanzado, de forma que si las haces sobre éste, cuando el autor del theme lance actualizaciones, los cambios se producirán sobre el tema original (el padre) y no afectarán a todo lo que hayas hecho sobre el tema hijo.

Pero por si fuera poco lo que te cuento, GeneratePress tiene estas otras características:

  • Tiene un código limpio y optimizado para el SEO que va favorecer el posicionamiento de tu blog.
  • Como te dicho es un tema intuitivo, rápido, responsive, y muy fácil de utilizar, ya verás.
  • Es Freemium, es decir puedes probar su versión gratuita hasta un límite, y cuenta con una versión premium (los famosos “addons” que te explicaré más adelante), bastante más económica que otros temas del mercado.
  • Es perfecto para emprendedores que están empezando a diseñar su propia web y no tienen conocimientos de programación.

Conozcamos a fondo las opciones de esta plantilla:

El primer paso es instalar nuestro tema.

Para ello nos vamos al Escritorio de WordPress, y dentro de “Apariencia>>>Temas>>>Añadir Nuevo“, vamos a poner el nombre “GeneratePress” en el buscador que tienes a la derecha.

Localizamos la plantilla del autor Tom Usborne y le damos al botón de “Instalar“, posteriormente pulsamos “Activar“, y ya podemos empezar a trabajar con nuestra plantilla.

como crear blog con generatepress y elementor gratis

NOTA: Si quieres descargarte el tema hijo de GeneratePress, puedes hacerlo a través de este enlace. Lo descargas, lo subes en el mismo apartado de “Apariencia>>>Temas>>>Subir Tema“, lo activas y listo.

Después, cuando te dirijas a la página de inicio de tu blog, por ejemplo “www.miblog.com”, te aparecerá una barra superior con una opción de “Personalizar“, que te dará acceso al editor de GeneratePress.

También puedes entrar desde “Apariencia>>>Personalizar” en el propio escritorio de WordPress; o dentro de “Apariencia>>>GeneratePress” donde encontrarás un botón azul a la derecha que pone “Personalizar”.

como crear blog con generatepress y elementor gratis

Vamos a ver un poco de teoría sobre como funcionan cada uno de los apartados gratuitos del editor de personalización de GeneratePress:

como crear blog con generatepress y elementor gratis

1.- Identidad del Sitio

En este apartado tienes que indicar el nombre y el subtitulo de tu blog. También puedes añadir un logo y favicon que hayas creado previamente y ocultar los títulos anteriores si quisieras.

como crear blog con generatepress y elementor gratis

2.- Diseño de Pantalla

Aquí tienes los ajustes para personalizar las dimensiones de la estructura de la plantilla para tu blog, así como el tamaño de la parte del contenido. Podrás editar la cabecera, el contenedor, la navegación principal, las barras laterales y el pie de página, y todo a golpe de clic.

como crear blog con generatepress y elementor gratis

3.- Colores

Modifica los colores de fondo, del texto y enlaces de tu blog.

como crear blog con generatepress y elementor gratis

4.- Tipografía

Aquí sólo podrás modificar el texto del cuerpo, tanto el tipo de letra, como el tamaño, altura y margen del mismo.

como crear blog con generatepress y elementor gratis

5.- Blog

En esta opción, GeneratePress te permite elegir que cantidad de texto mostrar a tus lectores de los post de tu blog (permitir la visualización de un pequeño fragmento o la entrada completa).

como crear blog con generatepress y elementor gratis

6.- Menús

Edición del menú principal, al igual que puedes hacer en el escritorio de tu WordPress.

como crear blog con generatepress y elementor gratis

7.- Widgets

Posibilidad de elegir los widgets que van a ir en la cabecera, barra pie de página y barra superior.

como crear blog con generatepress y elementor gratis

8.- Ajustes de portada

Aquí puedes elegir qué mostrar en la portada de tu sitio. Pueden ser entradas del blog o una página fija/estática. Para ello tienes que crear una página de Inicio que va ser la principal de tu web y otra llamada blog donde se van alojar los post que vayas creando.

como crear blog con generatepress y elementor gratis

9.- CSS Adicional

En esta sección podemos incluir código css para personalizar partes de la plantilla.

como crear blog con generatepress y elementor gratis

10.- Diseño Web Responsive

Con esta opción podrás comprobar y visualizar las versiones responsive de tu blog en modo escritorio, tablet y móvil.

como crear blog con generatepress y elementor gratis

Otras funcionalidades extra que incorpora GeneratePress y van a venirte muy bien para el diseño de tu Blog

Cuando vayas a crear las entradas y páginas de tu web, en el mismo editor de WordPress se te habilitará una caja llamada “Diseño de Pantalla“, donde podrás realizar los siguientes ajustes:

como crear blog con generatepress y elementor gratis

  1. Barras laterales: En esta sección puedes establecer la posición de la barra lateral con respecto al contenido de la página o entrada que estés creando. Bien puedes eliminarla o dejarla con distintas disposiciones: a la derecha, izquierda, etc.
  2. Widgets de pie de página: Aquí puedes desactivar o poner tantos widgets como quieras  en el footer, con un máximo de 5.
  3. Desactivar elementos: En este bloque puedes desactivar el título de la página. En la versión gratuita de GP sólo puedes desactivar el título. Esto te puede venir bien si quieres insertar una sección potente a modo de título de esa página con un maquetador visual.
  4. Contenedor del constructor de páginas: Con esta opción puedes elegir el tipo de contenedor del contenido del constructor de páginas. Con un ancho total o según el contenido.

Resumen de GP Free

Antes de pasar a presentarte la versión premium de Generatepress, quiero enseñarte como puedes instalar esta plantilla gratuita junto con su child theme, y la capacidad que tienes de diseñar tu blog con sus opciones de personalización.

  • Instalación y Activación de GeneratePress + su Child Theme:
  • Opciones de personalización de GP Free: 

Comparativa GeneratePress Free VS GeneratePress Premium

Como ves, con las opciones de personalización gratuitas que trae esta plantilla tienes una buena base para empezar a diseñar tu web.

Pero si quieres ir más allá, y aprovechar todas las posibilidades que ofrece GeneratePress, este proveedor te ofrece la oportunidad de adquirir su versión más premium: los “Addons“, que te van a permitir utilizar todas las opciones disponibles de esta plantilla.

como crear blog con generatepress y elementor gratis

Tiene un precio bastante asequible (39,95$); vamos que apenas llega a los 40 € anuales. Una vez cumplas el año, puedes ir renovando o no el paquete premium, así que tu decides.

Además, puedes instalar esta versión en todos los WordPress que tengas, ¡¡sin limites!!.

Cómo verás, a los diseñadores web profesionales nos viene de perlas este theme, ya que tiene un coste de mantenimiento muy económico, si lo comparamos con otros proveedores, donde la licencia de desarrollador puede ser más elevada.

Al adquirir la versión premium de GP, cuentas con un año de soporte técnico por parte del equipo de Tom. Posteriormente, cuando pase ese período tendrás que renovar la licencia para seguir teniendo derecho a las actualizaciones y a la asistencia técnica.

Según nos indican en su página, cuentan con más de 25.000 clientes contentos, ¿casi nada ehh? 🙂

Para que veas la capacidad que tiene este tema, voy hacerte un resumen de todos los extras que incluye esta opción sobre la versión gratuita:

 

como crear una web con generatepress y elementorcomo crear una web con gp y elementor

 1.- Site Library

En la última versión disponible de GP Premium, el equipo de Tom ha incluido dentro del panel de control de los Addons en WordPress, un apartado llamado “Site Library“, a modo de biblioteca de plantillas para que puedas insertar en cualquier momento un modelo que te guste para personalizarlo después a tu gusto. ¡Que pasada!

como crear una web con generatepress y elementor

Como puedes ver, puedes filtrar las plantillas según el maquetador visual de páginas que se haya utilizado para diseñar esas demos: con Beaver Builder, Elementor o sin necesidad de Page Builder.

Si haces clic en una de las plantillas disponibles, podrás descargarte los ajustes propios de GP de esa demo e importarla en otra web distinta; y si quieres sobre la marcha, puedes insertar esa misma personalización a golpe de clic en tu propio proyecto.

Aquí tienes un ejemplo:

2.- Colores

Como ves, ahora podemos modificar los colores de todo lo que queramos. Aquí tienes opciones de personalización para aburrirte; modificar los tonos del cuerpo, cabecera, navegación principal, subnavegación principal, navegación secundaria, subnavegación secundaria, botones, contenido, widgets, formularios y pie de página.

como crear blog con generatepress y elementor gratis

3.- Tipografías

Igual que con los colores, ahora esta versión nos permite modificar todos los textos que tengas en el blog: cuerpo, cabecera, navegación principal y secundaria, botones, headings, widgets y pie de página.

como crear blog con generatepress y elementor gratis

4.- WooCommerce

Este addon es muy potente, ya que va permitirte personalizar los estilos y las secciones de tus páginas de Tienda, Productos y Checkout, si conviertes tu página web en una tienda online gracias al plugin gratuito de WooCommerce.

como crear blog con generatepress y elementor gratis

Si tu proyecto es un ecommerce y quieres diseñarlo todo más fácilmente, te dejo una muestra de la capacidad que ofrece GP con este addon:

5.- Secciones

En este apartado vas a poder crear distintas secciones para la página que estés diseñando. Para ello tienes que activar la opción “Usar secciones” que te aparecerá arriba a la derecha cuando estés editando tu página desde el editor de WordPress y se te habilitará debajo un apartado “sección” para editar. Puedes añadir tantas secciones como quieras.

Nota: Al igual que puedes crear secciones con GeneratePress Premium para tus páginas y entradas, también podrás hacerlas con el plugin de Elementor como veremos más adelante.

como crear blog con generatepress y elementor gratis

Posteriormente sólo tienes que añadir el contenido en dicho apartado y realizar los ajustes que necesites para tu diseño: colores, efecto parallax, subir imágenes de fondo, establecer distintos tipos de recuadro y rellenos…

como crear blog con generatepress y elementor gratis

No te pierdas este vídeo para ver la capacidad que tiene este bloque de GeneratePress:

6.- Menú Plus

Aquí tienes la posibilidad de establecer distintos tipos de menú: sticky (menú fijo cuando hacemos scroll en la web) y slideout navigation (menú deslizante a la derecha o izquierda en nuestra web), tanto para las versiones de escritorio como para las versiones responsive de tablet y móvil; además de incluir el famoso menú hamburguesa. En este vídeo puedes ver la capacidad que tiene este addon:

7.- Page Header

En esta sección puedes establecer distintos estilos para las cabeceras de tus páginas y entradas.

Puedes incluir imágenes, incluir vídeos, diseños originales con espacios, rellenos y márgenes personalizados, así como estilos parallax. Es una pasada todo lo que nos permite este addon.

Se te habilitará un apartado de “Page Headers” en tu menú WP, para añadir las cabeceras y establecerlas por defecto para las páginas y entradas de tu blog. Para ello tienes que darle “Añadir nueva” y editar los campos que te aparecerán para las imágenes, contenido y vídeo.

como crear blog con generatepress y elementor gratis

Por último, en el apartado “Global Locations“, podrás decirle a GP donde quieres implementar esas cabeceras que has diseñado. Por ejemplo, aquí he creado una cabecera (Ejemplo 1) que sólo quiero que se muestre en las entradas y en la página de Blog:

como crear una web con generatepress y elementor

 

Aún así, por aquí te dejo también un vídeo resumen para que veas de que es capaz este bloque, que nos va ahorrar mucho tiempo en el diseño de las cabeceras de nuestro proyecto online:

8.- Blog

Opciones de personalización sobre el apartado de blog. Desde mostrar los datos de las entradas, hasta establecer el número de columnas que vas a tener en tu blog y aplicar estilos Masonry; pasando por la personalización de la situación de las imágenes que van acompañar los posts.

como crear blog con generatepress y elementor gratis

9.- Backgrounds

Apartado donde puedes poner imágenes de fondo en cualquier parte de tu blog. En el header, footer, sidebar, menús, posts…

10.- Spacing

Opciones para establecer espacios que van hacer respirar las distintas secciones de tu blog.

11.- Menús secundarios

La versión premium de GeneratePress te permite crear distintos menús secundarios con estilos únicos.

12.- Copyright

Edición del copyright que aparece en el pie de página de tu blog.

13.- Desactivar elementos

Cuando crees las páginas y las entradas de tu web, esta opción te permite anular distintos elementos para que no se muestren: títulos, widgets, barra lateral, navegación principal, pie de página.

Esto puede ser muy útil cuando crees landing page sin distracciones, con el objetivo de vender un producto o servicio a través de tu blog, ya que así la única opción que tendrá ese usuario en esa página, será la de finalizar la compra a través de un botón.

14.- Hooks

Opción avanzada de GeneratePress que te permite incluir distintos fragmentos de código en tu proyecto web para insertar determinadas funcionalidades.

Por ejemplo, a través de este bloque puedes integrar el código de Google Analytics, el pixel de Facebook ADS, un shortcode para colocar un formulario de captación de leads en determinadas partes de la web, etc.

15.- Importar/Exportar

Esta sección te va permitir guardar personalizaciones que hayas hecho y exportarlas a otras páginas.

Igualmente, tienes la opción de incorporar diseños previamente creados en otros proyectos, a través de la importación de un archivo que te proporciona esa web que hayas diseñado con GP en formato “.json”.

♦♦♦♦♦♦♦♦

Resumen de GP Premium

Si te ha gustado lo que has visto hasta ahora, puedes visitar aquí la página de GeneratePress para obtener más información y adquirir los Addons.

Pero antes de pasar al maquetador de página, te hago un pequeño resumen de todo lo que hemos visto:

  • Como Conseguir el Paquete Premium de GP y su instalación:
  • Repaso a los Addons Premium de GP:

2.- Utiliza un Maquetador de Páginas para Diseñar (aquí veremos Elementor)

Una vez tengas instalado tu WordPress y la plantilla GeneratePress con la estructura base de tu blog, ahora toca empezar a crear y diseñar las páginas que van a formar tu proyecto web.

Puedes utilizar directamente el editor propio de WordPress para diseñar las páginas, pero no hay color si utilizas la segunda herramienta que quiero presentarte: el plugin de Elementor Page Builder.

como crear blog con generatepress y elementor gratis

Los chicos del equipo de Pojo.Me están haciendo un gran trabajo con los widgets que incluye este maquetador, y a continuación te explico porqué.

¿Por Qué Elementor es el Maquetador de Páginas del Momento?

Elementor está dando la nota eso seguro, y te voy a explicar porqué:

  • En primer lugar es un plugin gratuito que puedes descargarte e instalar fácilmente en cualquier página web que tengas creada en WordPress. Si ya decides apostar luego por la versión premium, es decisión tuya (aunque yo te la recomiendo, ya te diré porqué luego :P).
  • Tiene un “sistema de arrastre y soltar elementos” tan fácil de utilizar, que te permite diseñar en vivo y en directo cualquier página de tu blog, sin necesidad de tener que picar código. Incluye un montón de widgets para personalizar el diseño de tu proyecto online.
  • Es un maquetador muy ligero si lo comparamos con otros del mercado; y por si fuera poco, no deja rastro de “shortcodes” cuando lo desinstalamos, por lo que si en un futuro tenemos que cambiar de plugin, no dejará miles de códigos en tus páginas que no vienen a cuento.
  • Encima te permite personalizar las versiones responsive de tu proyecto para ver como quedaría en móvil y tablet, ¿en serio?.
  • Y además, cuenta con una serie de plantillas gratuitas que puedes instalar en las páginas de tu blog a modo de base, por si no se te da muy bien el tema del diseño. A partir de aquí, sólo tendrás que darle tu toque de marca personal a tu proyecto, ¡chachi!.

Pero aquí no acaba esto, ya que sólo es el principio; así que toma nota, porque voy a resumirte brevemente todas las opciones gratuitas que incorpora este maquetador visual.

¡Ah!, y por cierto, después de todo esto viene la práctica, así que no te lo pierdas 😉

como crear blog con generatepress y elementor gratis

Como Usar Elementor como un Profesional:

Supongo que a estas alturas para crear tu blog mínimo viable, ya has instalado WordPress y la plantilla de GeneratePress, así que ahora vamos a instalar el plugin de Elementor.

*Paso 1: Instalar Elementor Page Builder.

Para ello, nos vamos al repositorio de WP, así que en tu escritorio dirígete a “Plugins>>>Añadir Nuevo”, y en el buscador que tienes arriba a la derecha pones “Elementor”.

como crear blog con generatepress y elementor gratis

Una vez tengas localizado el plugin, le daremos al botón “Instalar” y posteriormente “Activar”.

*Paso 2: Ajustes Básicos del Plugin.

Una vez tengamos activo el maquetador y antes de ponernos a diseñar, tenemos que realizar unos ajustes previos:

1.- General: En este apartado tendrás que indicar para que tipo de entradas quieres utilizar el plugin de Elementor. Puedes hacerlo en las páginas y en las entradas, aunque te recomiendo que te centres más en las páginas estáticas.

También personalizar que tipo de usuario puedes utilizar el maquetador. Para ello tendrás que hacer clic en que nivel permitirás usarlo: editor, autor, suscriptor, etc…

Además, si marcas las casillas que vienen a continuación “desactivar los colores y tipografías globales”, lo que conseguirás, es que cada vez que diseñes con Elementor, los colores y las tipografías que heredará esa página en cuestión, serán las propias que estableciste por defecto en la plantilla de GeneratePress.

Por último, tienes la opción de permitir a los chicos de Pojo.Me, hacerte un seguimiento para realizar mejoras en su producto, haciendo clic en el cuadro “seguimiento de datos de uso”.

como crear blog con generatepress y elementor gratis

2.- Estilo: En esta sección, puedes personalizar las fuentes genéricas predeterminadas que quieres establecer cuando insertes texto con el maquetador.

Así mismo, te permite editar el ancho del contenido de la página que vayas a diseñar en px, aunque por defecto te la establece en 1140 px.

Además, puedes establecer el espacio entre widgets, así como extender hasta ajustar una sección en concreto (por defecto, body), y ocultar si lo quieres, el título de la página rellenando el cuadro “selector del título de página”.

Por último, Elementor ha incorporado recientemente la opción de abrir todas las imágenes en una mesa de luz, que puedes habilitar.

como crear blog con generatepress y elementor gratis

3.- Integraciones (sólo para Elementor PRO) y Avanzado: En el primer bloque, el plugin de Elementor te permite hacer muchas integraciones con proveedores externos como Mailchimp, Converki y ActiveCampaign. Incluso puedes establecer un reCAPTCHA para proteger tu WordPress del spam. Esta opción está sólo habilitada para la versión premium del maquetador.

En el último apartado de Avanzado, puedes personalizar el método de impresión del código css (mejor dejar por defecto el que viene establecido) y modificar el método de carga del editor cuando tengas problemas de conflicto con el servidor.

como crear blog con generatepress y elementor gratis

4.- Gestor de Perfiles: Esta opción te permite asignar acceso al editor de Elementor según el rol de usuario definido en WordPress. Esto es muy bueno para limitar que determinados usuario no puedan acceder al maquetador de páginas.

Sólo tienes que hacer clic en el botón “Sin acceso al editor” para restringir el acceso a quien tu quieras: editor, autor, suscriptor…

 

*Paso 3: Diferencias entre Secciones, Columnas y Plantillas.

Antes de explicarte las funcionalidades de cada uno de los widgets que incorpora gratuitamente el plugin de Elementor, necesitas conocer estos conceptos básicos:

Sección: Es un bloque principal de la página que puedes incorporar en la página que estés diseñando, donde puedes incluir columnas y elementos a personalizar.

Una única página puede tener tantas secciones como tu quieras añadir.

Con este plugin no hay limitaciones para el diseño web.

como crear blog con generatepress y elementor gratis

Elementor en concreto te permite insertar hasta 12 tipos posibles de secciones, ¿guay no?. Tranqui que luego te enseño como hacerlo 😛como crear blog con generatepress y elementor gratis

Columna: Una columna es un elemento que puedes incluir dentro de una sección, y es donde vas a insertar los distintos widgets que tienes disponible en este plugin.

Como viste anteriormente, cuando insertas una sección, puede estar compuesta por varias columnas con distintos anchos.

Además, ten en cuenta, que como mínimo, una sección siempre va tener una columna creada, y dentro puedes insertar los elementos que desees.

como crear blog con generatepress y elementor gratis

Plantillas: Esta funcionalidad que incorpora nuestro maquetador es la leche. Con la versión gratuita del plugin tendrás acceso a unas cuantas plantillas con las que podrás empezar a diseñar las páginas de tu blog.

Además puedes importar y exportar los diseños que hayas almacenado previamente a golpe de clic.

como crear blog con generatepress y elementor gratis

*Paso 4: Conociendo los Widgets Gratuitos de Elementor:

Elementos Básicos: Estos son los widgets principales y más comunes del editor de Elementor que vas a poder arrastrar en vivo y en directo para empezar a diseñar tus páginas.

como crear blog con generatepress y elementor gratis

Te los explico brevemente:

  • Columnas: Con este botón vas a poder añadir columnas dentro de una sección o incluso dentro de una columna.
  • Encabezado: Este widget es muy importante, ya que te va permitir establecer títulos para tus bloques. Herramienta muy potente para destacar textos importantes, al que puedes añadir etiquetas H1,H2, H3…
  • Imagen: Arrastrando este elemento, te permitirá insertar una imagen dentro de una sección, una columna…
  • Editor de Texto: Widget primordial para añadir textos a tus diseños. Es muy fácil de utilizar, puesto que verás que es prácticamente igual al editor propio de WordPress, así que no tendrás problemas para aprender a usarlo.
  • Vídeo: Bloque para insertar vídeos a tu página. Puedes añadirlos desde Youtube y Vimeo.
  • Botón: Elemento que te permite añadir botones con enlaces y diseños personalizados.
  • Separador: Widget a modo de línea que te sirve como separador para dar aire y espacio en secciones y los distintos elementos que conformen tu página.
  • Espaciador: Bloque en blanco que podemos incluir entre dos elementos para añadir espacios.
  • Google Maps: Widget propio de Google para indicar la localización de tu negocio.
  • Icono: Elemento que te permite añadir un icono Font Awesome. Puedes personalizarlo a tu gusto e incluso añadirle un enlace.

Elementos Generales: Estos widgets nos van permitir añadir funcionalidades específicas a nuestra página.

como crear blog con generatepress y elementor gratis

Te explico lo que hace cada uno de ellos:

  • Cuadro de imagen: Widget que te permite añadir un bloque más una imagen, que incorpora un título para el encabezado y un párrafo de texto para personalizar a tu gusto.
  • Caja de icono: Elemento parecido al cuadro de imagen, sólo que aquí añades un icono, con un encabezado principal y un párrafo.
  • Galería de imágenes: Con esta función, puedes insertar galerías de imágenes en una sección.
  • Carrusel de imágenes: ¿Quién no conoce los sliders? Transiciones de imágenes que van pasando imágenes según va transcurriendo un tiempo determinado.
  • Listado de iconos: Widget ideal para hacer añadir listas de características.
  • Contador: Con este elemento puedes incluir contadores para anunciar descuentos, ofertas o próximos lanzamientos.
  • Barra de progreso: Widget para mostrar tus habilidades o conocimientos que puedas tener sobre una materia.
  • Recomendación: Bloque para insertar testimonios en tu blog de clientes o usuarios de tu proyecto.
  • Pestañas: Bloques a modo de pestañas para mostrar distintos textos.
  • Acordeón: Este elemento es similar a la pestaña, sólo que el contenido se muestra a modo de acordeón, tal y como su nombre indica.
  • Alternar: Widget igual que el acordeón, pero la única diferencia es que el desplegable es a través de una flecha.
  • Iconos sociales: Inserta los botones de las redes sociales de tu blog con este elemento.
  • Alerta: Widget para resaltar información relevante. Puedes añadir un botón para que tus usuarios descarten este contenido que les muestras.
  • SoundCloud: Añade sonidos a tu blog gracias a este elemento. Si tienes un podcast, ¿que mejor herramienta que ésta no?
  • Shortcode: Inserta “shortcodes” fácilmente con este widget.
  • HTML: Bloque para añadir código HTML a tu página.
  • Ancla de Menú: Elemento que permite redirigir automáticamente a los usuarios de tu blog a una sección en concreto, cuando hagan clic en la zona que establezcas.
  • Barra Lateral: Bloque que te permite añadir una barra lateral donde tu quieras.

Elementos de WordPress: Por último, y no menos importante, este maquetador te permite añadir los widgets propios de WordPress que vienen por defecto, o los que te aparecen cuando instalas ciertos plugins.

como crear blog con generatepress y elementor gratis

Te describo algunos de ellos, que seguro que si estás acostumbrado a usar WP, te sonarán de algo:

  • Páginas: Bloque que te permite añadir páginas con distintas personalizaciones que hayas creado en WordPress.
  • Calendario: Incluye un calendario con este widget en cualquier lugar de tu página.
  • Archivos: Con este elemento puedes añadir listas de archivos de los posts de tu blog por meses indicando la cantidad que tengas incluso.
  • Audio: Widget similar al Soundcloud, donde puedes añadir audios en cualquier sección de tu página.
  • Imagen: Añade también a través de este medio, imágenes y fotografías. El nivel de personalización de este widget es menor que el propio de Elementor.
  • Vídeo: Al igual que las imágenes, este widget te permite añadir vídeos.
  • Meta: Añade enlaces a RSS, comentarios y muestra la opción de conectar con WordPress.org.
  • Buscar: Puedes insertar un elemento de búsqueda en tu página para ayudar a tus usuarios a localizar determinados contenidos.
  • Texto: Añade textos y personalizarlos. A diferencia del elemento básico de Elementor, este widget no te permite personalizar los estilos.
  • Categorías: Este elemento te permite insertar categorías de tus entradas del blog.
  • Entradas recientes: Añade tus últimas entradas a través de este widget. Yo te recomiendo que uses mejor el plugin de WP Show Posts del mismo Tom Usborne, el creador de GeneratePress.
  • Comentarios recientes: Con esta opción puedes mostrar a tus lectores los últimos comentarios de las entradas en el blog.
  • RSS: Añade la url de tu feed con este elemento.
  • Nube de etiquetas: Muestra una lista de palabras claves para identificar un determinado artículo.
  • Menú personalizado: Puedes insertar tu propio menú principal en cualquier sección de tu página en formato lista.
  • HTML personalizado: Con esta opción también puedes añadir código HTML.

Resumen de Elementor Free

Aquí tienes un vídeo resumen de como puedes instalar Elementor en tu WordPress, y un breve repaso de todos los widgets que incluye la versión gratuita:

¿Que te ha parecido todas las opciones que incluye el plugin en su versión free?

Pues si te parecen muchas funcionalidades para ser un maquetador gratuito, imagina los extras que añade la versión premium de Elementor...

Seguro que te lo estás preguntando ahora mismo… pues no te dejo con la intriga y te lo enseño a continuación, vas a flipar.

como crear una web con generatepress y elementor

Elementor VS Elementor PRO

Te aviso que los chicos de Elementor acaban de publicar recientemente su versión 2.0, así que esto promete.

como crear una web con generatepress y elementor

¿Qué habrán hecho? Espera un poquito, que te lo cuento más adelante 🙂

Mientras tanto, voy a enseñarte todos los Widgets de Elementor PRO que incluye la versión premium si la comparamos con la gratuita.

Ya es a tu libre elección si te decantas por la versión premium de este maquetador, pero yo te la recomiendo muchísimoooo, ya verás porqué 😛

Actualmente uso la versión PRO en mi propia web y en la de mis clientes, y la verdad es que se consiguen unos resultados muy profesionales gracias a esta potente herramienta.

Además, con la versión de pago te vas ahorrar unos cuantos plugins a instalar aparte en tu WordPress.

Hay que destacar también, que comprando la versión premium de Elementor, podrás acceder a todas las plantillas prediseñadas que antes no podías utilizar para tus páginas.

Resumiendo… por sólo 49$, lo tienes todo integrado en un sólo plugin: actualizaciones durante un año, una biblioteca de plantillas profesionales, más el soporte de los chicos de Elementor. 

Encima no paran de sacar novedades cada poco tiempo, ¿qué más se puede pedir?.

También disponen de una versión intermedia, donde puedes adquirir la licencia para instalar el maquetador en 3 sitios web por 99 $ y una superior enfocada a los desarrolladores web, que permite instalar este plugin en todos los proyectos de forma ilimitada para los clientes (199$).

Los Widgets Más Premium de Elementor PRO:

como crear blog con generatepress y elementor gratis

Empieza la magia:

Posts

  • Con esta opción podemos incluir un mini plugin que nos permite publicar los últimos artículos de nuestro blog en cualquier sitio. Además incluye una personalización de estilos muy profesional, donde podremos incluir también la foto del autor del post que mostremos, esto es lo que se llama el diseño”Cards“. Podrás organizar tus artículos por columnas, incluir el botón de “Leer Más” y añadir una paginación de los artículos que se muestren.

Portfolio

  • Si tienes una web del sector creativo, con este widget podrás mostrar tus trabajos a través de la creación de tu propio portfolio.

Sliders

  • Con este elemento, podrás incluir los famosos “Sliders”, es decir, esas animaciones donde puedes pasar varias imágenes a través de un pequeño sistema de puntero o flecha; donde podremos añadir fotos en nuestra página que transmitan un mensaje con un botón personalizado. Un widget más profesional que el que podemos encontrar en la versión por defecto.

Forms

  • Este widget viene fenomenal para incluir formularios de contacto. Puedes utilizar este formulario de contacto para ahorrarte el famoso plugin de “Contact Form 7”, y además, te da la opción de vincular el formulario para tu estrategia de email marketing con Mailchimp. Las opciones de personalización y diseño que incluye este bloque son infinitas.

Tabla de Precios

  • Aquí al igual que la lista anterior, los precios de los servicios los vamos a mostrar con una tabla completa y muy profesional. El diseño es bastante bueno y viene muy bien a todos aquellos que tienen productizados los servicios.

Cuenta Atrás

  • Pon una cuenta atrás de tiempo para avisar de la publicación de un evento que vayas a realizar en tu web. Tendrás que establecer una fecha y hora límite para que se active la cuenta atrás. Podrás editar los estilos de las tipografías y los colores de la boxes y del contenido.

Lista de Precios

  • Con este widget puedes mostrar los precios de tu tienda en formato lista. Por ejemplo, si tienes una carta de prestación de servicios, te vendrá muy bien este formato para hacerlo de forma más cómoda. Podrás establecer el precio, la descripción del producto, incluso la imagen que quieras.

Flip Box

  • Con este widget podrás crear una caja con un efecto visual para mostrar un contenido con un icono en la parte delantera, y en la parte frontal, un texto más un botón para acceder a la información. Esto viene muy bien si quieres mostrar interés por ciertos servicios o productos que ofrezcas en tu página web.

Woo-Elements

  • Si vas a tener una tienda online, con este widget podrás situar diferentes elementos propios del plugin WooCommerce donde tu quieras en tu página. Por ejemplo: Página del carrito, página de pago, de producto, entre otros.

Woo-Productos

  • Te permite organizar los productos que hayas creado en woocommerce en listas según las columnas que dispongas y añadir filtros para mostrarlos.

Woo-Categorías

  • Es igual que el widget de productos, pero utiliza las categorías que hayas creado en la tienda.

Woo-Add to Cart

  • Widget para incluir en tu página el botón de añadir al carrito de la compra con un producto de tu tienda. Aquí cuando el usuario haga clic en comprar, directamente se incluirá el producto que tu hayas establecido en la pasarela del carrito.

Share Buttons

  • Como su nombre lo indica, podrás incluir un elemento para que tus usuarios puedan compartir tus artículos o páginas de la web en las redes sociales. Con este widget te puedes ahorrar otro plugin más a la lista, como puede ser el que uso actualmente “Social Warfare”.

Templates

Aquí puedes usar tus diseños previamente guardados en la biblioteca cuando quieras y donde quieras a modo de widget. Además puedes insertar las plantillas más premium de este plugin.

Login

  • Si necesitas que tus usuarios accedan a tu contenido, ya sea a través de un curso o una membresía, este widget te puede ser de mucha utilidad, ya que podrás ubicarlo en cualquier parte que quieras de tu página.

Animated headline

  • Con esta funcionalidad podrás crear títulos llamativos para resaltar las partes más importantes de tu mensaje de forma clara y efectiva. Puedes ver algunos ejemplos en este vídeo: https://youtu.be/kRkly6-c-qw

Blockquote

  • Este widget te va permitir añadir el botón “Click to Tweet”, donde podrás insertar frases para que tus lectores las compartan en Twitter.

Facebook Embed

  • Con este plugin podrás agregar una publicación embebida de Facebook a tu página web. Puedes incluir una publicación normal, un vídeo e incluso un comentario.

Facebook Comments

  • Con este widget podrán dejarte comentarios de Facebook en la sección que tu indiques de tu página web. Eso sí, la persona en cuestión tendrá que estar previamente logueada para que pueda comentarte.

Facebook Button

  • Incluye el tradicional botón de Facebook donde tu quieras. Puedes arrastrarlo y personalizar el botón a tu gusto. Puedes elegir el botón de Like, Recomendar o Seguir.

Facebook Page

  • Gracias a este widget, podrás incrustar tu página de Facebook en cualquier sección de tu web para que tus visitantes acudan a tu perfil social, donde aparecerá un resumen de tu “Fan Page”.

Nav Menú

  • Con esta funcionalidad podrás incluir menús magníficos para tu web. Tendrás 3 tipos: verticales, horizontales y droptdown (a modo de acordeón). También puedes incluir punteros y animaciones al pasar el ratón por el menú. En este vídeo puedes ver algunos ejemplos: https://youtu.be/Woviq5bXxYM

Media Carousel

  • Esta opción te permite incluir carrousel de imágenes y vídeos de manera original e interactiva. Podrás añadir efectos de desvanecimiento, cubo en 3D, etc. Aquí tienes una pequeña muestra: https://youtu.be/WY3HqKWgqKg

Testimonial Carousel

  • Por último, puedes incluir un carrousel de testimonios de tus clientes para dar más confianza con tu página web. Puedes elegir entre 5 distintos tipos de diseño. Aquí puedes ver de lo que te hablo: https://youtu.be/uwe1GxIc_XY

Resumen Elementor PRO

Aquí tienes un video tutorial donde hacemos un repaso a los Widgets Pro del maquetador de páginas del momento:

Versión 2.0 Elementor PRO

Con la última actualización del plugin en su versión más premium, ahora puedes diseñar prácticamente todo lo que quieras de tu web.

No hay límites.

como crear una web con generatepress y elementor

Novedades Destacadas

Veamos cuales son estas nuevas funcionalidades que incorpora esta nueva versión de Elementor PRO:

  • Antes, con la versión gratuita sólo podías personalizar la parte estática de las páginas, mientras que ahora puedes diseñar todo el contenido dinámico, como son los artículos del blog y la página de “archive”, donde encontramos la lista de los posts.
  • Otra novedad, es que ahora con Elementor también vas a poder diseñar el Header, el Footer, las páginas de archivo de los posts y las páginas de publicaciones únicas de tu blog, cosa que antes no estaba disponible en el maquetador, ya que lo único que podíamos diseñar era el cuerpo de las páginas.
  • Por último, con el nuevo sistema de “Condicionales” que han incorporado, cuando vayamos a maquetar, podremos indicarle a Elementor donde queremos que aparezcan exactamente todas aquellas secciones o partes de la web que hemos personalizado previamente. Por ejemplo, quiero mostrar un footer concreto en la página de inicio y uno más genérico en todas las páginas de nuestra web, una cabecera para la lista de los posts (archive), etc.

¿Significa esto que vamos a tener que prescindir de los temas para diseñar nuestra web? Para nada, ya que para seguir usando el maquetador de Elementor tendrás que tener instalada obligatoriamente una plantilla en tu WordPress.

En mi caso, yo seguiré usando la combinación de GeneratePress  + Elementor, pero que sepas que a partir de esta última versión 2.0 de Elementor PRO, podrás usar la plantilla que quieras en tu proyecto, puesto que en teoría es compatible con cualquier otra.

También han incorporado el muy esperado “Custom Fonts” dentro de los mismos ajustes de Elementor en WordPress, que te van a permitir añadir fuentes personalizadas para que aparezcan en la configuración de tipografía de los widgets propios del maquetador. Aquí tienes un pequeño tutorial para ver como funciona.

como crear una web con generatepress y elementor

Otra novedad extra que han incorporado estos chicos en su versión PRO, es que ahora en el “Gestor de Perfiles“, no sólo podrás delimitar el acceso al maquetador, sino que si quieres, podrás darle opción a que puedan entrar a diseñar única y exclusivamente el contenido que ya hay dentro del propio editor.

Es decir, el usuario va poder modificar los textos, imágenes, botones y demás elementos de la página, pero el diseño en sí de la estructura no podrá alterarlos, por tanto no podrá insertar o eliminar widgets, sólo tendrá opción a modificar el contenido que haya previamente insertado por el administrador.

En este vídeo puedes ver de lo que te hablo:

♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦

Bueno, ahora que has visto lo que incluye esta nueva versión, voy a enseñarte el nuevo Sistema de Bloques de Elementor PRO, donde vas a poder crear una página desde cero con las distintas secciones que incorpora su opción de “Mis plantillas“:

como crear una web con generatepress y elementor

Como verás, si le das al botón “Añadir Nueva”, vas a poder seleccionar cada una de las partes de la web que quieres empezar a diseñar (Página, Sección, Header, Footer, Single Post, Archive), para publicarlas luego donde tu le indiques con los condicionales; y que por supuesto, quedarán bien guardadas en la biblioteca por si tuvieras que exportarlas o usarlas posteriormente.

como crear una web con generatepress y elementor

Y por si fuera poco, si seleccionas una de las plantillas disponibles para trabajar, puedes elegir desde la biblioteca un modelo base sobre el que trabajar, por lo que estos chicos te facilitan más todavía la tarea 😛

como crear una web con generatepress y elementor

 

Una vez has retocado la plantilla que has elegido para darle forma a tu página según tu estilo y tus contenidos, es hora de aplicar los Condicionales, es decir, donde quieres que se muestre lo que acabas de personalizar en tu web.

Puedes decirle que se muestre en toda la web, o en una página en concreta, o en todas las entradas o categorías, páginas, etc.

como crear una web con generatepress y elementor

 

Elementos del Tema en Elementor PRO

Además, con la última actualización del plugin en su versión PRO, el maquetador ha incluido nuevos widgets en su apartado “Theme Elements”:

como crear una web con generatepress y elementor

  • Post Title: Para mostrar el título actual de una publicación.
  • Post Excerpt: Con este widget puedes mostrar un extracto de ese post.
  • Post content: Muestra el contenido del post.
  • Featured Image: Coloca la imagen destacada que hayas especificado en ese artículo.
  • Archive Title: Insertar el título de la página de listado de post “archive”.
  • Archive Posts: Para mostrar el archivo de los posts.
  • Site Title: Con este widget puedes insertar el título de tu web en cualquier sitio, tal y como se muestra en el personalizador del tema.
  • Site Logo: Al igual que puedes insertar el título de la web, también puedes hacerlo con el Logo.
  • Search Form: Para incrustar una barra de búsqueda en cualquier sitio de tu web.
  • Author Box: Puedes insertar una caja de autor en las páginas de tu sitio. Es muy útil colocar este elemento al final de cada post que hayas creado para tu blog.
  • Post Comments: Para que los lectores puedan hacer comentarios destacados en los artículos del blog.
  • Post Navigation: Para que tus usuarios puedan navegar por los anteriores o siguientes artículos de tu blog. Lo ideal es colocarlo al final de los posts.
  • Post Info: Con este widget puedes mostrar la información o metadatos del post (autor, fecha, hora y comentarios).

Botón Contenido Dinámico

Por último, hay que añadir, que a partir de ahora vas a encontrarte un botón llamado “Dinamico” en estos widgets del maquetador (encabezado, imagen, editor de texto, vídeo, botón, Google Maps e Icono), que te van a permitir insertar contenido dinámico cuando estés diseñando una parte específica de tu web:

como crear una web con generatepress y elementor

Las etiquetas de contenido dinámico que puedes elegir van a mostrar lo siguiente:

  • Publicaciones: Custom Field, Fecha, Extracto, ID, Términos, Hora, Título.
  • Archivo: Descripción, Meta, Título.
  • Sitio: Título, Tagline, Fecha y Hora.
  • Comentarios: Número de comentarios.
  • Autor: Nombre,Meta, Info.

Vista Previa del Contenido Dinámico

Con esta opción que puedes habilitar en el apartado de “Ajustes” (abajo a la izquierda dentro del mismo maquetador), puedes ir viendo el resultado final de tu plantilla obteniendo una vista previa.

En mi ejemplo para diseñar una plantilla Footer, ahora podrás seleccionar la opción “Preview Settings” que más te convenga, para conseguir una visualización previa del contenido dinámico y ver como va quedando tu diseño.

como crear una web con generatepress y elementor

Aquí puedes ver otro ejemplo de esta misma opción cuando creas una publicación única:

Ejemplo práctico

Vamos a crear un Footer para nuestra web y vamos a ver como usar los condicionales, para que veas la capacidad que tiene ahora mismo Elementor:

Resumiendo…

A partir de ahora, con la versión 2.0 de Elementor PRO, el proceso para crear nuestro sitio web sería así:

  1. Elige primero la plantilla: Selecciona el bloque a diseñar: el encabezado, pie de página, página de publicación única o página de archivo. ¡¡Ojo!!>>> Si ya tienes personalizada la cabecera y el footer con GeneratePress no hace falta que lo hagas de nuevo con Elementor; a no ser que quieras darle un estilo que no puedas hacer directamente con la plantilla.
  2. Datos dinámicos : Utiliza las opciones del contenido dinámico para crear las entradas únicas, el listado de posts…
  3. Condicionales: Incluye condiciones para especificar donde van aplicarse estas plantillas creadas por tí de cada bloque: en toda la web, en una página específica, en los posts,..

Aquí tienes un pequeño vídeo tutorial de todo lo que puedes hacer con las novedades de Elementor:

3.- Después de la Teoría, Viene la Práctica

Ahora que has podido ver lo que nos permiten estas dos herramientas en sus versiones gratuitas, nos toca pasar a la parte práctica, que es como mejor se aprende, ¿no?.

¡¡Vamos allá!! 🙂

como crear blog con generatepress y elementor gratis

Cómo Diseñar tu Página de Inicio con Elementor y GeneratePress Gratis

En este vídeo quiero enseñarte a replicar una de las páginas de inicio de una de mis plantillas. Como verás todo se ha hecho con las dos herramientas en sus versiones gratuitas. Espero que te ayude para diseñar tu blog mínimo viable 🙂

Te hago un pequeño resumen de todo lo que hemos incorporado en esta página:

  • Sección 1: Hemos establecido una imagen a tamaño completo y con una sombra de caja.
  • Sección 2: Añadimos un encabezado h2 centrado de color negro con una tipografía Roboto de tamaño 35. Luego incluimos un icono debajo “arrow-down” centrado de color verde. Por último, integramos un widget de editor de texto de color gris oscuro, centrado y con la tipografía Roboto a tamaño 22.
  • Sección 3: Hemos establecido un encabezado H2, más un separador justo debajo. Posteriormente añadimos debajo dos columnas con un cuadro de imagen más un botón.
  • Sección 4: Añadimos dos columnas para el apartado de sobre mí. En la primera columna integramos un encabezado más un separador y un texto. En la segunda columna una imagen que vaya alineada con la primera.
  • Sección 5: En esta última sección hemos añadido un encabeza más un separador y el widget de shortcode para integrar el código que nos genera el plugin de WP Show Posts para integrar los últimos post del blog.

NOTA IMPORTANTE: Si te das cuenta, cada vez que añades un widget arrastrándolo y soltándolo en tu diseño, automáticamente Elementor te va crear una sección y una columna, donde va estar alojado ese elemento que has insertado.

Consejo: Por último, no te olvides de revisar como queda tu diseño con las distintas versiones responsive para tablet y móvil, ya que además puedes editarla de forma independiente a la de escritorio.

como crear una web con generatepress y elementor

Consejo extra: Una vez termines el diseño de tu página y de tu web en general, haz un repaso para comprobar que todo funciona correctamente: enlaces, botones, formularios de contacto…  Si lo ves necesario, pide a otros que también hagan pruebas para revisarlo todo.

Cómo Diseñar tu Página de Inicio con Elementor PRO y GeneratePress

Ahora en este segundo ejemplo vamos a ver como quedaría una homepage si utilizamos algunos widgets de la versión pro de Elementor.

¿Te apuntas? 🙂

Resumiendo todo lo que he incorporado en esta página:

  • Sección 1: Hemos establecido una imagen de fondo en la sección, más un capa de fondo gris oscuro. Dentro hemos insertado dos columnas, una para el encabezado, el texto y el formulario de suscripción; y la otra no ponemos nada. El formulario de suscripción puedes vincularlo a través de Zapier con Elementor, o como opción alternativa, puedes diseñar el formulario de captación de leads con Thrive Leads>>> Aquí tienes un pedazo de tutorial para crearlo con esta potente herramienta.
  • Sección 2: En este segundo bloque vamos a diseñar un apartado para ofrecer los servicios de la web. Para ello creamos un encabezado, más un icono debajo, y a continuación, insertamos 3 columnas con el widget pro de “Call to Action“. Una vez creemos uno, sólo tendremos que duplicar la columna primera para terminar de personalizar los otros 2 servicios de nuestro proyecto, y así ahorraremos tiempo.
  • Sección 3: Ahora vamos a insertar un carrousel de testimonios para dar confianza a través de nuestra web, después de crear un encabezado con un color de fondo en la sección. Para ello vamos a utilizar el widget pro de “Testimonial Carousel“.
  • Sección 4: En este bloque vamos a crear una sección con 2 columnas a ancho completo, para insertar en la primera una imagen y en la segunda, un encabezado + separador + texto + botón con un enlace que nos va dirigir al apartado sobre mí.
  • Sección 5: Por último, creamos una sección con una imagen más un capa de fondo de color negro, que va incorporar un título dentro para llevar a continuación a un icono + texto + formulario de contacto (utilizamos el widget pro de “Forms“), con el objetivo de que el usuario nos escriba para preguntar por nuestros servicios. Otra opción es usar el formulario del plugin de Contact Form 7, que tendrías que insertar con el widget de “Shortcode” y pegar el código que te facilite el formulario que creaste previamente en WordPress.

¿Por qué esta combinación GeneratePress + Elementor es perfecta?

Personalmente opino que la principal ventaja que tiene esta combinación de herramientas con respecto a otras que hay en el mercado, es que es un método perfecto para personas que no saben programar, quieren crearse su propio blog de forma autodidacta sin invertir mucho presupuesto y quieren personalizarla a su gusto de forma accesible.

Lógicamente si tienes conocimientos de código podrás hacer personalizaciones más avanzadas, pero si eres novato con WordPress, créeme que este atajo te vendrá de perlas.

Otra ventaja a señalar, es que para los profesionales del diseño web, esta combinación brinda enormes posibilidades en cuanto a servicios, ya que podrán ofrecer diferentes modelos y plantillas a sus clientes.

Por no decir, que una vez haces entrega al cliente del proyecto web diseñado con estas herramientas, les facilita mucho la vida cuando él mismo sea el que tenga que gestionarla, ya que no tendrá que editar su web tocando código.

De ahí que sea una combinación tan buena para los nuevos emprendedores online que deciden hacer su web por sus propios medios.

Tanto la plantilla de GeneratePress como el maquetador de Elementor están muy bien optimizados en código, por lo que pesan poco, y eso es un gran punto extra; ya que como te comentaba antes, esto va favorecer la velocidad de carga de tu web y va ir muy bien para el SEO.

Ambas herramientas tienen formato Freemium, es decir, tienen un apartado gratuito para que pruebas sus posibilidades (hasta un límite), y que te puedo asegurar de antemano, que se pueden hacer webs muy chulas.

Si encima contratas ambas versiones de pago, te aseguro que te vas ahorrar la instalación de unos cuantos plugins de más en tu WordPress, por lo que creo que merece mucho la pena invertir un poco en ambas herramientas.

Si tuviera que mejorar algún aspecto de estas herramientas sería…

Con respecto a Elementor, mejoraría los aspectos de personalización para WooCommerce en su versión PRO, para las tienda online ya que a veces se quedan un poco corto, aunque me consta que están trabajando en ello para lanzar nuevas funcionalidades próximamente. Además la gente espera como agua de mayo que inserten los famosos formularios de captación de suscriptores para vincular con los proveedores de email marketing. Se pueden hacer algunos formularios para esto y vincularlos con algunas plataformas como Zapier, pero todavía les queda trabajo pendiente, aunque también es verdad que próximamente van a sorprendernos con sus futuras novedades que ya están anunciando en redes.

Y en cuanto a GeneratePress, el bloque de personalización del “Page Headers” en la versión premium, se puede volver un tanto difuso para que se habilite la sección de contenido. Por ejemplo, si quieres editar tu página de Blog donde van a ir las entradas, tendrás que hacerlo a través de la opción “Global Locations“. Puedes acceder a más información en esta página. Nota: Si tienes Elementor en su versión PRO, podrás hacerlo directamente con la nueva versión 2.0 😉

Por lo demás, chapó tanto por el equipo de Tom Usborne como para los de Pojo.Me, ya que han habilitado al mundo una forma de hacer páginas webs intuitivas y fáciles de diseñar.

Estoy segura que muchos de los emprendedores online que no sepan por donde tirar para crear sus propios blogs, van agradecer enormemente esta gran combinación de herramientas, sobre todo si están iniciándose en el mundo de WordPress.

IR A LA PÁGINA OFICIAL DE GENERATEPRESS

IR A LA PÁGINA OFICIAL DE ELEMENTOR 2.0

♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦

Nada más, quiero agradecerte el ratito que has pasado conmigo y espero haberte podido ayudar con esta guía y las herramientas que te he dado a conocer, para que así puedas empezar a crear tu blog mínimo viable en WordPress.

Te deseo el mayor de los éxitos con tu proyecto digital.

Cualquier duda con las herramientas u opinión sobre el post, nos vemos en los comentarios.

¡A por ello! 😉

como crear una web con generatepress y elementor

sombra


Jessica Berlar
Soy Diseñadora Web especializada en WordPress, GeneratePress y Elementor. Ayudo a emprendedores a crear su web profesional para DIFERENCIARSE y obtener VISIBILIDAD en Internet para que puedan vivir de su PASIÓN, creando el estilo de vida que desean y siendo su propio jefe. Puedes descargarte mi Curso GRATUITO para ayudarte a conseguirlo.

Elementor Page Builder + GeneratePress: el fucking combo definitivo para crear tu web [MEGAGUÍA CON VIDEOS]
4.4 (87.62%) 21 votes

Compártelo si te ha resultado útil, ¡gracias!

Facebook
Twitter

¿Necesitas algo en concreto?

Por favor, no te vayas sin dejar un comentario.

16 comentarios en “Elementor Page Builder + GeneratePress: el fucking combo definitivo para crear tu web [MEGAGUÍA CON VIDEOS]”

  1. Hola he visto tu post muy bueno super interesante y muy intenso en cuanto a contenido. En mi caso quiero incorporar audio para unos podcast que estoy haciendo en un video vi un plugin incorporado en ELEMENTOR pero no hay forma de encontrarlo ni en ELEMENTOR PRO que ya tengo contratada la licencia. Es muy interesante para mi poner este plugin de elementor.

    saludos

    Javier

  2. Muy buenas Jessica!

    Pedaaaaaazo post que te has currado. te lo habran dicho montones de veces, pero gracias!

    Tengo una duda, soy nuevo en esto (nunca he creado nada) el otro dia probando plantillas recomendadas me toque con generate press, enseguida note que su sencillez y trabajo intuitivo (al ser tan visual) la hacian mucho mas accesible para mi que otras

    Ahora leyendo al respecto y formandome encuentro que la comunidad esta muy deacuerdo con lo que tu dices para los nuevos como yo generate press + elementor

    Mi duda es la siguiente, tengo claro que las cosas que ofrece elementor pro (de pago) las quiero/necesito, pero tu comentas que con los nuevos añadidos de la ultima version ya ni siquiera hace falta la plantilla de generate press. No se como interpretar esto. Te refieres a que ya da igual usar cualquier plantilla porque todo se puede editar desde libremente desde elementor pro? en ese caso.. intuyo que no me merece la pena o que ya no hay motivos para adquirir generatePrees de pago? (o ninguna otra?)

    Gracias!

  3. Extremadamente buena esta entrada, que gran trabajo, ha buscado mucha información y ninguna le llega ni a un 10% de esta.

    1. Jessica Berlar

      Hola Brigzen!!

      Muchas gracias por tus palabras, animan mucho para seguir aportando valor 😉

      Un abrazo!!

  4. Hola Jessica, hace unos días me suscribí a tu blog, no esperaba encontrarte por aquí también, he llegado para ver si me faltaban piezas del rompecabezas a mis conocimientos en esta combinación, pero no ha sido algo significativo. Lo que sí quiero aprovechar de preguntarte es ¿qué es exactamente un framework? ya que he visto que usaste ese término para GeneratePress y además le tengo curiosidad a otro llamado Genesis, y otro llamado Laravel que tengo entendido es otro gestor o algo así, pero no se exactamente lo que es un framework como tal, ¿podrías explicarme? no importa si usas terminología técnica, te lo agradeceré.

    1. Hola Tiger Fénix!!

      Encantada de saludarte y gracias por suscribirte al blog 😉

      A tu pregunta, podríamos definir un Framework como un entorno de trabajo que se crea con un código base para posteriormente diseñar una página web, una aplicación o para el desarrollo de videojuegos.

      La principal ventaja de usar un Framework es que tienes una “plantilla base” ya creada por otra persona; lo que te va permitir ahorrar tiempo para el diseño, ya que si no contarás con ello, tendrías que hacer todo código inicial desde cero; por lo que vas a poder dedicarte a mejorar esa plantilla que tienes de partida con la implementación de funciones extras: CSS, instalación de plugins, etc…

      En el caso de WordPress, hay muchos Framework que pueden utilizarse para este CMS: Genesis, Bootstrap, GeneratePress…

      Con respecto a Laravel no te puedo decir exactamente, porque nunca lo he utilizado, pero según he leído es un framework para desarrollar aplicaciones y servicios web con PHP 5 y PHP 7.

      Espero haberte ayudado 🙂

      Un abrazo!!

  5. Gustavo Lachica

    Hola Jessica
    Muchísimas gracias por publicar tan excelente trabajo. Me ha servido muchísimo para decidirme por Elementor como mi maquetador visual.
    Para el diseño de mi web hasta aquí he instalado el framework GeneratePress en su versión gratuita, junto con su child theme. Entonces la pregunta que deseo hacerte es si crees necesario utilizar (comprar) su versión premium. La duda se me presenta cuando veo todas las aplicaciones y versatilidad que ofrece Elementor.
    En concreto, ¿la versión Premium de GP brinda mayor potencialidad a lo que Elementor ya viene ofreciendo sobre la versión standard de GP?
    Muchas gracias de antemano.
    Gustavo

    1. Hola Gustavo!!

      Muchas gracias por tu comentario y me alegro mucho de que te sirva el post 🙂

      La verdad es que desde la última versión 2.0 de Elementor PRO puedes trabajar casi cualquier parte de la web, incluyendo el footer y el header, cosa que antes no te lo permitía el maquetador (ojo!! la versión gratuita del plugin no incorpora estas funciones).

      En mi opinión y te hablo desde mi propia experiencia, estas partes de la página a día de hoy sigo trabajándolas con los addons premium, ya que las opciones de personalización de GP en mi caso me facilitan mucho el proceso; por lo que, yo lo recomiendo, ya que a mí me sirve y me acostumbré a esta herramienta 🙂

      Así que si vas a trabajar con la opción de Elementor free, sin duda te recomendaría que adquieras la versión premium de GeneratePress, para trabajar esas secciones de la web y demás.

      Ahora, si decides comprar la versión PRO de Elementor, puedes ir probando con GP en su versión inicial y ya luego decides si optar por los addons, si lo ves necesario.

      Espero que te ayude.

      Un abrazo!!

  6. Hola Jessica,

    Enhorabuena por el pedazo de artículo que te has currado, madre mía!!!

    Ya instale la plantilla y estoy trasteando con ella, Elementor lo dejo para más adelante.

    Tengo una consulta, ¿cómo puedo dejar la imagen destacada definida, pero que no me aparezca arriba de todo en las páginas?.

    Muchas gracias por tu tiempo.

    Un saludo

    1. Hola David,

      Muchas gracias, me alegro que te sirva la guía 🙂

      Con respecto a la imagen destacada, me temo que en la versión gratuita de GP, con las opciones de personalización por defecto no puedes modificar la posición de ésta en las páginas.

      En la versión premium de GP, tienes la opción de modificar la imagen destacada del listado de posts del Blog, de los propios artículos y de las páginas. Para ello tendrías que entrar al personalizador en el apartado “Diseño de Pantalla>>>Blog”.

      Te dejo por aquí más info sobre esto: https://docs.generatepress.com/article/adjusting-the-featured-images/

      La otra opción que tienes para poner imágenes donde tu quieras dentro de una página es utilizar el maquetador de Elementor, pero no hablaríamos de imágenes destacadas propiamente dichas del editor de WP.

      Espero haberte podido ayudar.

      Un abrazo!

  7. Hola Jessica

    Impresionante, no creo que se te olvidara ningún punto, desde luego con esta mega guía el que no se entere como funcionan estas dos herramientas es por que no quiere.

    Apoyo lo que comenta Anibal, con toda esta información te podrías montar un buen ebook.

    Mis felicitaciones y un saludo.

    1. Hola Alberto,

      ¡Y que lo digas! Más contenido creo que no puede haber en el post sobre GP y Elementor jeje

      Si la gente que se anime a crear un proyecto digital ya tiene unos conocimientos básicos de WordPress, esta guía es un buen comienzo para diseñar su propia web.

      Eso sí, como bien dices, hay que dedicarle tiempo y practicar 😉

      Muchas gracias por tu comentario.

      Un abrazo!!

  8. Jesica, que post !!!
    Lei un poco porque esto es gigante, es un manual completo!
    Con toda esta info podrias hacer un ebook y venderlo tranquilamente.

    Voy a guardarmelo para leerlo mas tarde cuando termine de escribir un post que estoy haciendo para mi blog.

    te felicito nuevamente por tremendo articulo

    1. Hola Anibal!!

      Si, la verdad es que he intentado no dejar nada en el tintero 😆

      Quiero ayudar todo lo posible a esas personas que están empezando a crear su propia web y no saben por donde tirar; o simplemente no saben de código y han utilizado otras plantillas o herramientas, que les han sido más complejas.

      Espero que te guste el post cuando lo leas tranquilamente 😊

      Gracias por tu comentario y tu consejo jeje

      Un abrazo!!

  9. Pedazo de guía! Enhorabunea por el artículo Jessica.

    Para mi elementor es sin duda el mejor maquetador visual del momento y cada día va a más, sin duda la mejor opción a la hora de crear webs.

    1. Hola Borja!! Gracias por tu feedback 😉

      Y que lo digas, estos chicos de Elementor no paran de sorprendernos. Si siguen así van a revolucionar el mundo del diseño web con WordPress.

      Sin duda es una de las mejores opciones tanto para profesionales como para usuarios.

      Un abrazo y gracias por pasarte 😊

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.