¿Has oído hablar del famoso constructor de páginas «Elementor Page Builder» para WordPress?
Por si aún no lo conoces, voy a hablarte en este Tutorial Elementor, cómo crear una web en WordPress del que, al menos para mí, es a día de hoy la mejor herramienta para diseñar una web fácilmente.
WordPress quiere poner las cosas cada vez más fáciles a sus usuarios, como así lo demuestran con el editor de bloques Gutenberg. El nuevo editor nativo desde WordPress 6.0 con el que el usuario es capaz de crear entradas en WordPress y maquetar páginas utilizando bloques de forma muy similar a como lo harían con Elementor.
La inclusión en el mercado de editores visuales de WordPress, como es el caso del plugin Elementor Page Builder, son precursores de que WordPress siga ese camino y de que la forma de diseñar páginas web haya cambiado.
El futuro de este sector es emplear maquetadores y, a pesar de algunas críticas de programadores y desarrolladores web, lo cierto es que no es fácil conseguir efectos tan visuales solo con código de manera tan rápida.
El hecho de que plugins como Elementor ofrezcan la posibilidad al usuario o cliente de maquetar y hacer sus propias creaciones o modificaciones es un acierto, ya que antes no era posible, si no tenías amplios conocimientos en código HTML o CSS.
Tabla de contenidos
¿Te animas a conocer más a fondo el plugin Elementor Page Builder?
Si es la primera vez que escuchas hablar de este Page Builder de WordPress y tienes claro que quieres hacer tu propio blog o página web, me gustaría comenzar explicándote qué es y para qué sirve exactamente este plugin para WordPress.
Seguro que así lograrás ponerte en situación y comprenderlo más fácilmente.
Si quieres aprender a manejar Elementor, te recomiendo este Curso de Elementor básico de Webempresa University para aprender desde cero y a tu ritmo.
Curso 100% GRATUITO ¡recomendado!
¿Qué es y para qué sirve Elementor Page Builder?
Elementor Website Builder es un plugin de maquetación para WordPress, que permite crear páginas webs fácilmente con su sistema de «arrastrar y soltar» (Drag&Drop) para montar contenidos con pasos sencillos y muy visuales.
Esta funcionalidad no es nueva de este plugin, ya que existen muchos maquetadores en el mercado capaces de crear webs fácilmente, moviendo elementos de un lado para otro.
Lo mejor de todo y la principal ventaja en diseño web es que, hoy día, la mayoría permiten realizar las creaciones desde el front-end, permitiendo ver los cambios en vivo.
¡Esto es realmente fabuloso!
Este plugin cuenta con una versión gratuita mejor que muchas de pago y una versión premium, (Review de Elementor PRO), capaz de sacar actualizaciones cada 10 días aproximadamente.
Haz clic en la imagen para acceder al plugin en WordPress.org
Estas actualizaciones incluyen mejoras y widgets, que facilitan no solo hacer lo que quieras, sino que además permiten ahorrar en instalar plugins, al tener dichas funcionalidades integradas.
Es, en mi opinión, el mejor maquetador en la actualidad, sin lugar a dudas.
Puedes descargar Elementor desde su web oficial. Comprobarás que su número de descargas y valoraciones en poco más de un año corroboran la buena opinión que tengo de él.
¿Por qué es importante usar Elementor para WordPress?
Seguro que has oído que los maquetadores consumen muchos recursos y son lentos, ¿verdad?
Yo creo que igual que dicen que el Email Marketing o el SEO «han muerto», son palabras que se dicen sin fundamentos o hechos comprobables.
Un web builder deja mucha suciedad, consume muchos recursos, genera mucho shortcode, etc.
Eso es lo que se escucha, cuando se critican este tipo de constructores web y lo cierto es que estas afirmaciones no son ciertas.
La realidad es que los maquetadores para WordPress son un avance en el diseño web y el futuro está en adaptarse a ellos y perfeccionarlos debe ser el objetivo, el ser un sistema de código abierto así lo permite.
La velocidad en WordPress con este plugin es impresionante y, teniendo en cuenta otros factores para mejorar la velocidad de carga, lo cierto es que si la web cuenta con otros añadidos antes de maquetar, él parte con ventaja.
Si tu sitio antes de empezar a diseñar tiene un buen tema, un buen hosting WordPress, HTTPS en WordPress, AMP y demás añadidos, una web estándar creada con Elementor debería cargar, como media, en menos de 2 segundos.
Si nos ponemos a comparar una web hecha con código y otra maquetada con un editor visual, será más o menos rápida dependiendo de las manos de quien las trabaja y de los elementos visuales que incluya.
Elementor Page Builder lo pone muy fácil, ya que WordPress cada vez piensa más en el usuario y quiere que todo el mundo sea capaz de crear su web.
Un poco más abajo vas a poder ver un vídeo, donde te hago una muestra de cómo maquetar los contenidos de una web con él.
¿Qué funcionalidades y ventajas ofrece «Elementor PRO»?
Si como digo, la versión gratuita ofrece opciones básicas, estas están realmente bien y de por sí ya te facilitan mucho el diseño web, si lo acompañas de una buena plantilla.
Algunas de las funcionalidades principales son: creación de columnas a tu gusto y tamaños, insertar botones en cualquier sitio, forma o color, encabezados, vídeos, separadores, mapas o iconos, widgets, etc. Todo ello de forma gratuita.
La versión Premium de este plugin merece mucho la pena, porque con ella vas a poder hacer el diseño que te apetezca.
En la imagen puedes ver algunos de los widgets que incluye la versión de pago.
Créeme que se puede hacer un buen diseño con su versión PRO de esta forma y sin tener que acudir al uso de CSS en WordPress personalizado.
Elementor PRO está empeñado en una cosa y, como siga así, pienso que lo va a conseguir: crear absolutamente todo a través de sus funciones.
Hasta ahora, un maquetador se ocupaba exclusivamente del contenido, y la plantilla o tema es la encargada de la cabecera y el footer.
Sin embargo, con esta versión PRO ya puedes personalizar todo, como vas a poder ver en el artículo y en el vídeo que te menciono y verás más adelante.
¿Qué widgets están incluidos en esta versión PRO?
La versión Premium del plugin incluye los siguientes widgets:
Últimos Post
Esta opción muestra cajas con los últimos post publicados en WordPress, las opciones de diseño, colores, sombras e imágenes que ofrece son espectaculares.
Portfolio
Widget con opciones muy personalizables, con las que crear un bonito porfolio.
Sliders
Si estás en contra de los slider porque crees que ralentizan la web, cambiarás de idea cuando veas esta opción, ya que consume muy pocos recursos al usar la carga asíncrona.
Las opciones que incluyen los slider de Elementor de personalización son dignas de plugins de pago.
Formularios
Un punto fuerte de Elementor, ya que podrás, a través de esta función, crear todos los campos que quieras, como opciones de desplegables, checkbox, áreas, etc.
Si te gusta el plugin de WordPress Contact Form 7, te olvidarás de él rápidamente, ya que con Elementor Page Builder puedes hacer lo mismo, pero de manera más sencilla y sin tener que personalizarlo con CSS ¡Una maravilla de opción!
Además, esto también te sirve para crear formularios de suscripción en WordPress, aunque con API solo está disponible para algunas plataformas de email marketing.
Pero editando el HTML en WordPress puedes hacer lo que quieras.
Login
¿Quieres un área privada?, en 2 clics lo tienes.
Una funcionalidad que sorprende, ya que puedes eliminar el menú de la cabecera y diseñar una personalizada a tu gusto con Elementor Pro.
Esta opción no se limita a un simple menú, puesto que puedes dar el aspecto que necesites con efectos de visualización, efectos hover, etc., si no fuera a través de código, esta opción no se podría hacer de forma tan simple como permite Elementor.
Además, si lo que quieres es crear un footer personalizado y dejar de usar el que trae la plantilla por defecto, es muy fácil crear uno propio con el plugin e insertarlo en cada página, como luego verás en el vídeo.
Elementor es personalización 100 % de tu web
Como ves, usando este plugin, tendrás por seguro que podrás personalizar cada uno de los detalles de tu sitio web. Estos son algunos de estos detalles:
Como ves, usando este plugin, tendrás por seguro que podrás personalizar cada uno de los detalles de tu sitio web. Estos son algunos de estos detalles:
- Animación headline: letras que se subrayan solas, textos que desaparecen o palabras que van cambiando es otra de las opciones que incluye y es muy atractiva.
- Listas de precios: si necesitas listas de precios puedes crearlas a tu gusto con los colores que necesites y son realmente muy atractivos.
- Flip box: una impresionante función que sorprende al mostrar una caja con un frontal y una parte de atrás, con un efecto muestra ambas caras con la posibilidad de insertar botones, textos o imágenes, las posibilidades son infinitas.
- Carrusel: si quieres carruseles visuales donde mostrar imágenes que se desplazan, Elementor ofrece otro gran widgets para hacerlo.
- Testimonios: los testimonios son importantes y con Elementor tienes varias opciones para integrarlos.
- Cuenta atrás: Cuenta regresiva muy personalizable con el que podrás mostrar logros o incluso promociones con tiempo limitado.
- Botones de compartir en redes sociales: si quieres evitar un plugin de redes sociales, puedes crear unos personalizados.
Dichos botones personalizados podrás insertarlos en cada página de tu WordPress guardando una plantilla y generando un shortcode fácilmente adaptable a cualquier parte de tu web, el resultado es muy bueno y evitarás instalar otro plugin.
- Botones de Facebook: aunque las opciones de redes sociales ralentizan el sitio, puede ser interesante mostrar cajas con los últimos comentarios, compartidos, etc.
Todo esto se puede hacer copiando el “iframe” de Facebook, pero Elementor te lo pone fácil a golpe de clic, interesante opción para quien quiera explotar al máximo las redes sociales.
- Pestañas o acordeones: insertar cajas con pestañas que se abren funciona realmente bien.
- HTML o shortcodes: importantes opciones para insertar códigos, que se mostrarán en cualquier parte de la web, a través de este widget.
- Ancla: si alguna vez has visto que haciendo clic en un botón, hace scroll hacia más abajo, es muy fácil de conseguir, usando esta opción de Elementor PRO.
Aunque esta función se puede conseguir asignando un ID por código en HTML, en un clic lo tienes muy fácil con el maquetador Elementor.
Este widget es muy práctico, si tu web es una “One Page”.
- Plantillas: puedes guardar cada elemento, que crees e insertarlo donde quieras, con esto ahorrarás mucho trabajo de diseño.
Estos son algunos de los elementos que trae este maquetador visual. Además, a través de diferentes widgets, podrás insertar más opciones todavía.
¿Cómo maquetar tus contenidos con Elementor Website Builder?
Maquetar tus páginas con este plugin es muy fácil y cada una de las opciones es personalizable al 100 %, como te he comentado anteriormente.
Vídeo sobre Elementor
En el siguiente vídeo te muestro cómo puede maquetar fácilmente contenidos de tu sitio web con Elementor.
Maquetar con Elementor
La maquetación desde Elementor se hace desde el frontal, con lo cual, podrás ver todos los cambios «en vivo» y comprobar lo que vas haciendo.
El funcionamiento es básico, ya que solo tendrás que arrastrar y soltar los elementos que necesites a cada sección.
Dentro de cada una de las secciones, podrás integrar los elementos que necesites para el diseño.
Cada una de sus opciones se puede personalizar a nivel de contenido, estilo o una configuración avanzada, donde aparte de poder dar efectos o añadir CSS, podrás contar con las opciones de padding, pudiendo poner cada elemento en el lugar que necesites.
Consigue el mejor diseño para tu «home», tu landing page o tus páginas de servicios. Además, puedes instalar el plugin de WooCommerce, con el que podrás hacer de tu web una tienda en línea.
No es recomendable usar maquetadores para crear tus artículos, pero puedes insertar elementos dentro de ellos, a través de los shortcodes generados cuando guardas una sección.
Esto es una maravilla cuando quieras insertar artículos relacionados al final del post, botones sociales o formularios de suscripción.
Elementor Page Builder en responsive
El diseño responsive es uno de los puntos fuertes de este plugin, ya que la opción de personalización móvil que incluye al maquetar sus contenidos no existe en otros maquetadores.
Llama la atención la forma tan rápida y sencilla de adaptar cada página, para que se vea correctamente en la versión móvil, es decir, que sea 100 % responsive.
Podrás cambiar los tamaños y padding, para que se ajuste correctamente, así como excluir partes que no necesites que se muestren en estos dispositivos.
Teniendo en cuenta que hoy día se ve más Internet desde el móvil que desde el escritorio, hay que darle mucha importancia a este factor diferencial.
Widgets de Elementor Website Builder gratuitos
Al igual que WordPress tiene un enorme ecosistema centrado en el desarrollo de plugins para añadir funcionalidades al CMS, el plugin Elementor goza de muchos seguidores a todos los niveles, incluidos desarrolladores, y eso permite que existan muchos sitios web desde los que obtener widgets gratuitos para Elementor, aunque naturalmente también los hay comerciales (de pago).
Te dejo una breve lista de sitios que deberías visitar para descargar estos widgets para tu web con Elementor:
- Elfsight, con más de 50 widgets gratuitos.
- Ultimate Addons for Elementor
- crocoblock, con más de 200 widgets disponibles.
- Droit Addons
- HT Mega, tiene una extensa colección de widgets.
- Move Addons, con 42 widgets gratuitos disponibles.
Apenas una pincelada de lo mucho que puedes encontrar en Internet para añadir funcionalidades extra a Elementor y maquetar contenidos de tu web como nunca antes lo has hecho.
Conclusiones
El plugin Elementor Website Builder está a otro nivel en cuanto a plugins para diseño web en WordPress y es en la actualidad el número uno de los editores visuales.
Elementor es una herramienta popular para crear páginas web porque ofrece una gran cantidad de funcionalidades y es fácil de usar con la posibilidad real de crear diseños atractivos y personalizados para tu sitio web sin tener que tener conocimientos técnicos avanzados.
Además, Elementor es compatible con una amplia variedad de temas y plugins, lo que te permite ampliar las funcionalidades de tu sitio web de manera fácil y rápida.
Si tienes en cuenta que las mejoras y añadidos que incluyen sus creadores son continuos, hay maquetador para largo. De hecho, sus más de 5 millones de instalaciones activas lo dicen todo.
Es fácil, intuitivo, rápido y editable al 100 % ¡Lo tiene todo!
En resumen, Elementor es una excelente opción si buscas una herramienta de creación de sitios web que sea fácil de usar y que te permita crear diseños potentes para tu sitio web.
¿Tú qué opinas?, ¿aún no has probado Elementor Page Builder?
También te puede interesar:
¿Te ha resultado útil este artículo?
Diseñador web, SEO y consultor de Marketing Digital | Trabajo como freenlance realizando sitios web para clientes que desean hacer crecer su negocio a través de internet | Además, enseño en mi Blog cómo crear un proyecto web absolutamente de cero | Me puedes encontrar en las redes sociales .
