Qué es Elementor y 7 pasos para instalarlo en WordPress

Si eres un entusiasta del diseño web o simplemente quieres crear un sitio web impresionante sin tener conocimientos de programación, Elementor es la herramienta que estabas esperando. Con Elementor, puedes crear páginas web personalizadas de forma rápida y sencilla, sin necesidad de tocar una sola línea de código. En este artículo, te diré qué es Elementor y como instalarlo en 7 pasos en WordPress para que puedas empezar a diseñar páginas visualmente impactantes en cuestión de minutos.

En este post, además de explicarte qué es Elementor y los 7 pasos para instalarlo en WordPress, te diremos los beneficios de usarlo, sobre todos si eres alguien que esta empezando en este mundo del diseño web, esta herramienta te será de gran ayuda por las facilidad con las que puedes usarlo y editar tus web.

Como dato obvio, sigue las palabras fuertes si quieres un resumen de todo el artículo.

Índice de este artículo:

– ¿QUÉ ES ELEMENTOR?

Es un plugin que puedes utilizar desde tu WordPress, el cuál te permite diseñar páginas web sin la necesidad de tener conocimientos de códigos HTML, CSS y JavaScript. Si, puedes descargar Elementor gratis y una vez creas una nueva página desde tu WordPress puedes usar esta herramienta para su diseño, con una interfaz sencilla de utilizar, con una modalidad de seleccionar y arrastrar bloques, e incluso ir viendo las modificaciones en tiempo real.

Posee un gran número de funcionalidades o elementos que puedes utilizar en la edición de tus páginas, tales como encabezados, párrafos, imágenes, carruseles de imágenes, botones, iconos, videos, listados y otras muchas más, sin la necesidad de introducir códigos en ningún momento. Solo deberás seleccionar dichas funciones y arrastrarlos a la parte de la página donde quieras utilizarlos, incluso, podrás ver como va quedando tu trabajo en tiempo real.

Como con casi todos los plugins, existe un versión paga (Elementor pro), que incluye más funcionalidades, pero déjame decirte que con su versión gratuita ya puedes crear páginas muy atractivas y funcionales.

¿Pero que pasa con el diseño de la página cuando se visualiza en dispositivos móviles?

Pues, esta herramienta de Elementor WordPress, también nos permite editar la página tanto para PCs como para dispositivos móviles (celulares y tablets) con la misma modalidad de seleccionar y arrastrar elementos.

Solo necesitarás un poco de práctica para aprender sus mañas y trucos, pero con un poco de tiempo podrás estar haciendo todo tipos de diseños web como un profesional, tales como sitios institucionales, blogs, portafolios, landing pages o e-commerces.

– BENEFICIOS DE USAR ELEMENTOR PAGE BUILDER.

Sin lugar a dudas, existen un gran número de beneficios a la hora de usar este Elementor plugin wordpress para editar nuestras páginas web. Aquí te nombraremos las más importantes. Te aseguro que serán suficientes para convencerte de que usar esta herramienta te será de gran en tus diseños:

• Puedes crear tus páginas sin conocimientos de programación; sin la necesidad de saber sobre códigos de HTML, CSS y JavaScript. Solo con la funcionalidad de seleccionar y arrastrar puedes editar tu web.
• Puedes editar en tiempo real un diseño responsive, esto significa que a medidas que vas diseñando tus páginas puedes ir viendo al instante como va quedando, tanto en ordenadores PCs como en dispositivos móviles.
• El plugin Elementor se complementa muy bien con WordPress (el CMS más utilizado a nivel mundial para construir y administrar sitios web).
• Es compatible con una alta colección de temas, esto significa que puedes seleccionar temas y plantillas según el diseño que desees crear, como una web para servicios, un blog, una ecommerce, una web institucional, etc. Y a la vez, editar con Elementor sus bloques prediseñados para modificarlos a tu preferencia.
• Elementor versión gratuita ya es muy potente; como ya dijimos, con esta versión ya puedes diseñar páginas como un profesional, con una apariencia muy atractiva y funcional.
• Cuenta con complementos extras para Elementor como crocoblocks; cuyas herramientas felicitarán aun más la tarea de diseñar páginas como un profesional.
• Podrás crear Elementor popup con gran facilidad; estos popup son ventanas emergentes que surgen desde la navegación por tus páginas y que puedes usar con varios propósitos. Como ofrecer ofertas o promociones.
• Es compatible con un gran número de plugins; que otorgan funcionalidades extras a Elementor a la hora de diseñar tus páginas web.
• Existe un gran número de tutoriales Elementor en internet que te ayudarán a responder todas tus dudas y a aprender a usarlo como un profesional.

– ¿QUÉ ES ELEMENTOR PRO?

Elementor Pro es una versión paga de esta herramienta que nos permite tener muchas mas funcionalidades a la hora de crear las páginas web como un profesional.

Como dijimos anteriormente Elementor trabaja con una modalidad de seleccionar y arrastrar sus diferentes funcionalidad o elementos a la parte de la página que quieras incorporar dichas funcionalidades. Con esta versión paga, podremos contar con 100+ pro widgets Elementor y 300+ plantillas Elementor Pro que podrás usar para tus diseños.

También, con Elementor pro versión paga podrás suplantar funciones que muchas veces aplicamos con la utilización de otros plugins; como contar con un constructor de formulario o modificar secciones que con su versión Elementor gratis no, por ejemplo; si estas creando una tienda online, también puedes utilizar Elementor Woocommerce Builder para personalizar páginas y archivos de productos, la página de pago, etc.

El hecho que el plugin Elementor Pro nos permita sustituir funciones que muchas veces usamos con la utilización de otro plugins, nos permite reducir peso a nuestro sitio web, que al final se traduce en una mayor velocidad al abrir una página (lo cual también es beneficioso para el posicionamiento SEO).

A continuación te dejamos una imagen con detalles de Elementor precios y algunas de las funcionalidades que nos ofrecen en su versión de pago.

Como vemos en la imagen, con $59 dólares americanos al año podremos editar un solo sitio web. Con $199 podremos editar hasta 25 sitios web al año, mientras que con $399 dólares americanos podremos editar hasta $1000 sitios web.

– 7 PASOS PARA INSTALAR ELEMENTOR EN WORDPRESS.

En este punto damos por hecho que ya tienes un WordPress instalado bajo un dominio, caso contrario puedes seguir estos pasos para crear una página web desde cero.

Una vez que estés en el panel de control de tu WordPress, puedes seguir estos pasos para descargar Elementor:

1. Instalamos un tema compatible con elementor:

Como primer paso instalamos un tema compatible con el plugin Elementor para asegurarnos que WordPress nos de la opción de instalar este plugin directamente desde su panel de control.

Para esta instalación seguimos estos pasos:

1. Desde el panel de control de WordPress, nos dirigimos a «Apariencia» > «Temas».
2. Ahora nos dirigimos a «Añadir nuevo», y luego, a la derecha arriba nos da la opción de escribir el nombre del tema que deseamos seleccionar (cuadro rojo más pequeño, arriba a la derecha en la imagen de abajo).
3. En este caso, optamos por la opción del tema «Hello elementor», que se caracteriza por ser una opción ligera, debido a que literalmente no cuenta con ningún diseño preestablecido. Pero no te preocupes, para eso nos ayudaremos con este editor de Elementor (explicaremos más adelante).
4. Ahora hacemos clic en «Instalar» > «Activar» y listo, puedes seguir con los siguientes pasos.

Algunas de las mejores plantillas Elementor gratis son:

• Astra theme.
• GeneratePress.
• OceanWp.
• Neve.
• Elementor Helle Theme.

2. Desde el apartado «plugin», instalamos Elementor:

Ahora si, desde el panel de control de WordPress, seguimos estos pasos:

• Nos dirigimos a «Plugins» > «Añadir nuevo» (cuadro rojo de la imagen de abajo), y escribimos «Elementor» desde la opción «Buscar plugins» (cuadro azul arriba a la derecha).
• Ahora, seleccionamos la primera opción de «Elementor Website Biilder» (cuadro verde), y hacemos clic en «Instalar ahora» y después en «Activar».

Una vez realizamos estos pasos, automáticamente nos dirigiremos al sitio web de Elementor, donde nos pedirá registrarnos y añadir algunos datos para corroborar que efectivamente tenemos un sitio web instalado bajo un dominio y estamos usando WordPress.

3. Creamos una cuenta desde la web de Elementor:

Como dijimos, una vez realizamos los pasos anteriores, nos redirigiremos a la página web de Elementor, donde deberemos crear una cuenta e introducir los datos necesarios para corroborar que tenemos un WordPress instalado bajo un dominio, y así finalizar con la instalación.

Como podremos ver en la imagen de abajo, simplemente hacemos clic en «Crear nueva cuenta», e introducimos los datos necesarios como una cuenta de Gmail. Y una vez finalizados estos pasos podremos continuar con la instalación de este plugin wp Elementor.

4. Introducimos la URL de nuestro sitio web:

Introducimos la dirección URL en el cuadro rojo como visualizamos en la imagen de abajo. Recuerda que la URL es la dirección de nuestra web, la cuál podremos visualizar desde la barra de direcciones que se encuentra en la parte superior de la pantalla.

En este caso, deberemos introducir la URL desde el protocolo «https://», para encontrar dicha dirección simplemente puedes abrir tu página web desde una nueva ventana y copias y pegas la dirección URL tal cual aparece en la barra de direcciones de arriba (con el protocolo «https://»).

5. Introducir el logo de tu sitio web:

Ahora, nos dará la opción de colocar el logo que tendrá nuestro sitio web, es opcional y de todas maneras se puede modificar más adelante en el momento que lo desees.

Como recomendación; que dicho logo tenga unas dimensiones de 100x100px, y puedes utilizar la herramienta de «Canvas» para dicha tarea. Ésta es una web que nos permite realizar todo tipo de diseños gratuitamente, muy potente y fácil de utilizar. Gracias a la combinación de Elementor más Canvas podremos hacer diseños de webs a nivel de profesionales.

6. Selección de plantilla:

En esta oportunidad, optamos por elegir alguna de las plantillas que nos ofrece este plugin Elementor. En nuestro caso de ejemplo, seleccionamos la opción de «editar un lienzo en blanco» (círculo rojo de la imagen de abajo), de todas maneras en los siguientes puntos te explicamos como puedes empezar a editar y diseñar tus páginas con la elección de una plantilla que nos ayude en nuestro proceso.

7. Listo, ahora editamos nuestras páginas:

Una vez finalizamos este proceso de instalación que es requerido desde la web de Elementor, nos redirigirá nuevamente a nuestro WordPress, directamente a la página para que empecemos con su edición y diseño.

Igualmente, para ingresar a la página web que deseas editar con tu editor de Elementor desde tu WordPress, puedes seguir estos pasos:

• Desde tu panel de control de WordPress, nos dirigimos a «Páginas» y luego seleccionamos «Editar con Elementor» (cuadro rojo imagen de abajo). Y nos llevara directamente a la interfaz para que puedas editar dicha página.
• En caso que desees crear una nueva página, seleccionas «Añadir nueva» (cuadro azul), y nos redirigirá a una nueva página para que sea editada desde el editor por defecto de WordPress (Gutenberg).
• En este últimos caso, podemos seleccionar la opción de «Editar con Elementor» directamente desde esta página para redirigirnos a la interfaz del editor de Elementor.

Una vez que nos encontramos en la interfaz del editor de Elementor, encontraremos una página prácticamente en blanco (recuerda que habíamos seleccionado la opción de «Editar un lienzo en blanco»).

Ahora bien, podemos editar toda la página por nuestra cuenta usando las herramientas y funciones que nos ofrece el editor de Elementor.

¿Y cómo trabaja éste page builder elementor?

Así es como trabaja este editor….basándose en «secciones» y dentro de dichas secciones introducimos bloques o también llamadas columnas (puedes incluir los bloques que desees dentro de una sección), y dentro de dichos bloques introducimos los elementos (funciones) que nos ofrece este plugin y que podemos visualizar en la parte izquierda de la pantalla.

Si estamos arrancando con el uso de dicho editor de Elementor, este truco de seguro te servirá….si hacemos clic derecho en la página que estamos editando, y hacemos clic en «navegador», ésta herramienta nos ayudará a encontrar las secciones o columnas que queramos editar en la edición de la página.

¿Y si quiero introducir una plantilla con un diseño preestablecido?

Pues bien, si aún no eres un experto en el uso de este editor, podemos seleccionar una plantilla con un diseño preestablecido que nos facilite la tarea, una vez introducida solo deberemos modificar dicho diseño a nuestro gusto.

Cuenta con un gran número de plantillas con prediseños para seleccionar, solo debemos seguir estos pasos:

• Hacemos clic en la carpeta envuelta por el circulo rojo de la imagen inferior.

• Ahora desde la opción de «páginas» seleccionamos la que mas adapte a nuestros gustos. En nuestro ejemplo seleccionamos la que envuelve el círculo rojo.

• En la siguiente imagen inferior podemos visualizar como se vería en tiempo real (recuerda que dijimos que con el editor de Elementor podemos hacer un diseño en tiempo real).

• Ahora solo vamos seleccionando los bloques o columnas que se encuentran dentro de cada sección para ir cambiando o modificando los elementos que ya se encuentran preestablecidos segun tus preferencias.
• Recuerda que los elementos que nos ofrece este editor (son los que se encuentra en el rectángulo rojo de la imagen superior) deben ser introducidos dentro de un bloque o columna, y que estas columnas van dentro de una sección

Ahora solo debes empezar a probar el uso de dicha herramienta para adquirir la destreza necesaria y lograr el diseño de página deseado. Es una tarea atrapante y que pondrá tu imaginación a trabajar incesantemente!!!

Éxitos infinitos!!