Elementor Website Builder: Tutorial para principiantes de la versión gratuita

Elementor es un plugin de WordPress que nos permite diseñar y maquetar un sitio web mediante la técnica de soltar y arrastrar.

Por si eres principiante, un plugin es una extensión que se instala en WordPress para añadir nuevas funcionalidades a las que ya lleva "de fábrica".

Es una de las características que hacen a WordPress tan potente y una de las principales razones de su enorme popularidad.

En este caso, vamos a repasar la version gratuita de este plugin (tiene también una versión de pago, un versión "premium"). Veremos sus principales características y cómo crear una página web con WordPress con esta versión gratuita de Elementor.

¿Qué es Elementor y cómo funciona?

Como te decía en la introducción, Elementor es un plugin de WordPress con el que podemos diseñar y maquetar un sitio web.

WordPress tiene un editor propio, llamado Gutenberg, que permite maquetar una página web.

Aunque en los últimos años ha mejorado mucho, este editor todavía no ha alcanzado la calidad y el desarrollo necesario para poder maquetar como con Elementor, y por eso hoy en día, junto con Divi, descargarnos este plugin es la mejor solución.

Elementor se ha convertido en uno de los mejores plugins de diseño de WordPress, y es que permite que todo el mundo pueda crear una página web sin tener conocimientos de programación.

De hecho, podríamos compararlo con PowerPoint. En Elementor podemos diseñar nuestro sitio web con la técnica de "soltar y arrastrar", además de poder usar plantillas como la que estás viendo en el ejemplo.

Para hacerlo, primero debemos instalar y activar este plugin, después crear una nueva página en WordPress y luego ponernos manos a la obra con el diseño.

En este post nos vamos a centrar en qué es Elementor, que son los elementos y plantillas y cómo utilizarlo, además de varios consejos sobre qué hacer para para ponernos “manos a la obra”, así que si quieres ver cómo se descarga y activa Elementor te dejo este vídeo:

Características del plugin Elementor

Son muchos los sitios webs están creados con este plugin, y a continuación te contamos por qué es uno de los mejores constructores de páginas webs:

Las plantillas de Elementor te salvarán la vida

En Elementor tienes una galería de plantillas, que son secciones prediseñadas de páginas webs, como la que estás viendo en este ejemplo:

Lo más habitual es que busques una que te guste y se ajuste a lo que quieres, que la actives y luego personalices a tu gusto.

Tiene una versión completamente gratuita

Si, Elementor es gratis. Aunque parezca mentira que una herramienta tan potente sea completamente gratuita, es cierto, y podemos diseñar nuestro sitio web con ella.

Es verdad que existe una versión de pago, que para la creación de un sitio web son aproximadamente 50 dólares y que aumenta mucho tanto la facilidad como las posibilidades de creación.

De hecho, la principal ventaja de Elementor Pro son la cantidad de plantillas avanzadas que puedes utilizar.

En el último apartado del post veremos las principales diferencias entre las dos versiones de Elementor.

Recuerda también que cuando hablamos de Elementor, estamos hablando siempre de la versión de WordPress que requiere hosting: WordPress.org.

Diseño adaptable a todos dispositivos

Cuando creas un sitio web debes tener en cuenta que se va a visualizar tanto en ordenador, como tablets y móviles, y por eso tu web tiene que estar preparada para verse correctamente en cada uno de estos dispositivos.

Con Elementor lo podemos hacer de forma completamente visual y sin tener que saber nada de programación.

SEO con Elementor y WordPress

El SEO es un conjunto de técnicas que van a permitir, o ayudar, a que nuestro sitio web se posicione en las búsquedas de Google.

Básicamente, es una manera de “hacer las cosas” enfocadas a que nuestra página sea la primera cuando la gente busque en Google las palabras que identifican a nuestro negocio o marca.

Es un sector muy amplio y que en este post solo puedo describir, pero ten en cuenta que Elementor te ayudará con ello:

Es un tema esencial si quieres que tu sitio web crezca, y por eso te recomiendo que eches un vistazo a nuestra sección de SEO del blog, además de que te suscribas a nuestra Newsletter.

Acerca el desarrollo web a todos

Precisamente por las características que acabamos de ver, Elementor ayuda a que cualquier persona que quiera iniciar un proyecto pueda desarrollar su sitio web él mismo.

No todos somos desarrolladores de webs, y el resultado no va a ser el mismo, pero si no tenemos presupuesto para contratar los servicios de un tercero, o queremos hacerlo nosotros mismos, Elementor nos lo permite.

Tutorial Elementor Page Builder

El nombre de este plugin representa muy bien cómo funciona: añadiendo y modificando elementos (además de las famosas plantillas).

En este apartado vamos a ver qué son y cómo utilizar cada una de estas herramientas.

¿Qué son los elementos de Elementor?

Los elementos de Elementor son los componentes que forman una página web, como el texto, las imágenes o los botones.

En el margen izquierdo de la ventana de edición de páginas vemos un listado de todos los que tenemos disponibles, y que podemos añadir a nuestra página arrastrándolo hacia ésta.

Cuando estén añadidos, si haces clic sobre ellos se abre el menú de edición en el margen izquierdo. Desde aquí puedes modificar su tamaño, color o posición.

Los más utilizados son:

• Texto. Podríamos considerar el elemento más básico de todos. El mediante el que añadimos el texto a nuestra página web. Entre los ajustes está el tamaño, el color, la separación entre letras etc.
• Imagen. Otro elemento básico, con el que añadimos imágenes a nuestro sitio web. Los ajustes que encuentras son el tamaño de la foto, su posición en la página, los bordes...
• Botón. Con este elemento añadimos, lógicamente, un botón. Luego debes añadir la dirección a la que se redirige.
• Separador. Este elemento añade un espacio en blanco entre los elementos.

Hay muchos elementos que tienes disponibles. No vamos a entrar a ver cada uno de ellos porque se haría un post larguísimo, y en el apartado final de cómo hacer una landing page con Elementor entramos mucho más en detalle de los más habituales.

De momento, quédate con que los que tenemos disponibles con la versión gratuita son la sección interior, el encabezado, la imagen, el editor de texto, vídeo, botón, separador, espaciador, Google Maps e icono.

Las secciones y columnas de Elementor

Estos elementos que acabamos de ver se organizan en la página mediante las secciones y columnas.

Las primeras se definen solas, y son apartados o secciones que añadimos en una página para organizar los elementos.

A su vez, una sección puede estar compuesta por una, dos, tres o indefinidas columnas.

En este ejemplo lo podrás ver más claro, porque aparece resaltada la sección con los márgenes en azul y dentro contiene dos columnas, que a su vez contienen un elemento de texto cada una:

En Elementor puedes añadir, eliminar o modificar las secciones y columnas que tú quieras.

Plantillas de Elementor: que son y para qué sirven

Como hemos visto antes, las plantillas de Elementor son secciones de una página web prediseñadas y que puedes aplicar en tu sitio web.

En la página de edición de Elementor encuentras la galería de plantillas, donde tienes muchas diferentes.

La ventaja que nos ofrecen es que puedes aplicar las que tú quieras, combinándolas entre sí. Además, pueden servirte de inspiración o de “guía” para el diseño de tu sitio web.

Eso sí, debes tener en cuenta que muchas de las que ves en la galería son de pago, y para poder utilizarlas debes tener Elementor Pro.

De hecho, es uno de los puntos más fuertes por los que te recomiendo esta versión de pago, ya que en esta puedes elegir muchas más plantillas.

Cómo hacer una Landing Page con Elementor

Es el momento de poner en práctica lo que hemos visto hasta ahora. En este apartado vamos a ver cómo crear una Landing Page con Elementor en WordPress, y para eso vamos a ver primero unos pequeños consejos que pueden venir muy bien:

Utiliza las plantillas gratuitas de Elementor, pero personalízalas

Cómo estamos utilizando la versión gratuita, las plantillas que tenemos disponible son limitadas.

Por eso, tenemos más posibilidades de que otra gente las haya utilizado tal y como están, y para que no sea igual que otras en Internet tenemos que personalizarla.

También es muy recomendable que combines secciones de diferentes plantillas, pero ten cuidado de establecer luego el mismo formato de letra en todos.

Piensa qué plantilla se adapta mejor a lo que quieres

Todas las que tenemos en la galería son súper bonitas, pero tenemos que "ir más allá" y pensar si se adaptan a lo que nosotros necesitamos.

Por ejemplo, somos fotógrafos y queremos crear un sitio web como porfolio para mostrar nuestras fotos. La mejor opción será aquella plantilla que tenga menos texto y más medios.

Parece algo obvio, pero cuando comienzas en este mundo es normal dejarse llevar por los primeros impulsos o por aquello que nos atrae de primeras, y no siempre es lo mejor.

Haz un boceto de lo que quieres antes de empezar

Al hilo de lo que acabamos de ver, cuando empiezas a indagar entre las diferentes plantillas si no tienes claro desde un principio qué es lo que quieres vas a perder mucho el tiempo hasta que te decidas.

Para evitar esto, apunta las secciones que quieres que tenga tu Landing Page. Por ejemplo, para una web para un negocio local sería:

• Una foto/descripción corta.
• Un breve texto contando a qué nos dedicamos o quiénes somos.
• Un resumen de los servicios que ofrecemos.
• Casos de éxitos o productos que hemos hecho.
• Dónde pueden encontrarnos.

Por supuesto tómate esto como un ejemplo, ya que cada web y cada negocio tendrá las más adecuadas.

Cuando las tengas, busca qué formato quieres para cada una, y ahora sí sumérgete en todas las plantillas disponibles.

Una vez que tengas todo preparado, es momento de ponernos a diseñar nuestra Landing Page con Elementor.

Te dejo este vídeo en el que creamos una página con Elementor en 10 minutos:

Elementor vs Elementor Pro

La diferencia entre Elementor gratuito y su versión pro, a parte del precio, es que con este último vamos a ir mucho más deprisa y el resultado va a ser más profesional.

Si la pregunta es si compensa, te digo que sí.

Elementor pro tiene muchas más plantillas y elementos disponibles, y esto va a hacer que nos ahorremos mucho tiempo y esfuerzo.

De todas maneras, es un tema extenso, y por eso te dejo este post en el que analizamos estas diferencias mucho más en profundidad.

Podemos marcar la diferencia entre Elementor Pro y la versión gratuita en torno a tres factores:

• La diferencia de plantillas disponibles y su gran calidad.
• El uso de Widgets y funcionalidades Pro.
• La posibilidad de modificar el tema de WordPress.

En primer lugar, con Elementor Pro tenemos acceso a más de 300 plantillas con diseños muy bonitos y variados.

Un factor a tener mucho en cuenta es el tiempo que dispongas para diseñar tu web.

Esto es importante, porque, por un lado, si recurrimos a las plantillas gratuitas de Elementor y no las retocamos mucho, es probable que encontremos varios sitios webs como el nuestro en Internet.

Por otro lado, con las plantillas Pro y la posibilidad de combinarlas entre ellas vamos a ahorrar muchísimo tiempo de diseño.

Un "error" muy típico de principiante es pensar que podemos copiar a ojo una plantilla Pro y replicarla con la versión gratuita, y déjame decirte que es muy muy difícil.

A parte de porque si no eres un experto, a tu ojo (que no está acostumbrado a este trabajo) se le van a escapar muchos detalles, pequeños, pero que son los que marcan la diferencia, las plantillas Pro incluyen elementos Pro que no podemos replicar.

En definitiva, si no quieres comprar la versión Pro, ten cuidado con dejarte llevar con la inspiración en la galería Pro, porque vas a perder mucho tiempo.

En segundo lugar, los Widgets o elementos Pro. La mayoría de estos son elementos básicos, como títulos o cajas de texto, pero con efectos de movimiento que aportan mucha profesionalidad.

De hecho, son estos pequeños detalles los que marcan la diferencia y hacen que un sitio web se vea “algo” que le hace más profesional. Por ejemplo:

• Flipbox: este elemento es una caja que puede contener texto, imágenes o botones, pero que al pasar el cursor "se da la vuelta" y muestra otro texto, imagen o botón. De esta manera cuando el usuario navegue por la web y pase por encima de este elemento, le llamará mucho más la atención.
• Cabecera animada: este elemento pro nos permite añadir efectos de movimiento a determinados elementos de una sección, que normalmente es la Landing Page. Una Landing page es lo primero que va a ver un posible cliente al entrar en nuestro sitio web, por lo que es super importante que esta sea llamativa. Mira este ejemplo de la propia página de Elementor y fíjate en cómo cambia una Landing de otra:
• Carrusel de medios: con este Widget Pro podemos añadir fotografías, imágenes o vídeos de una forma mucho más elegante y llamativa en nuestro sitio web.

Por último, una de las grandes diferencias entre Elementor Pro y la versión de pago es el poder modificar el tema de WordPress sobre el que estás diseñando.

Esto puede ser también muy decisivo en el aspecto de tu sitio web por ciertos detalles, como la posibilidad de eliminar la barra de menú de la parte superior del sitio web y añadir el Widget Pro de Nav Menu.

Con esto lo que conseguimos es un diseño mucho más minimalista y "limpio" que con la barra de menú.

En este caso, el ejemplo que podemos ver es la web de Tesla, donde se ha hecho justamente esto.

Como conclusión, si tu web es un blog personal o pequeña web en el que no te interesa mucho el diseño o que las diferencias las podemos suplir con la instalación de algún plugin, Elementor Pro puede ser opcional.

De todas maneras, por el precio que tiene Elementor Pro y las complicaciones que pueden dar a la larga estos plugins (posibles incompatibilidades con temas o entre ellos, necesidad de actualización etc), es muy probable que sí compense.

Si lo que tienes es una web profesional, definitivamente sí te compensa y conviene pagar esta versión Pro, no solo por las facilidades que hemos ido viendo durante el artículo, sino por la profesionalidad de sus plantillas y elementos.