¿Qué es Elementor para WordPress y para qué sirve?

¿Te has preguntado alguna vez cómo los diseñadores web crean páginas llamativas y profesionales sin necesidad de programar? Elementor es la solución a todos tus males de diseño web.

Este potente plugin de WordPress ha revolucionado la manera de construir sitios web, ofreciendo herramientas intuitivas que permiten a cualquier persona, ya sea principiante o experto, dar vida a sus páginas.

En este artículo te explicaré qué es Elementor, las diferencias entre su versión gratuita y de pago, y te recomendaré los mejores addons para contar con las funcionalidades más avanzadas.

¡Vamos al lío! 🙂

¿Qué es Elementor en WordPress?

Por si has llegado aquí de casualidad y no sabes de qué estoy hablando, no te preocupes. Voy a empezar desde el principio.

Elementor es un plugin de WordPress que funciona como un completo creador de sitios web. Con solo instalarlo en tu panel de WordPress, tendrás acceso a una amplia variedad de herramientas de diseño y desarrollo, desde menús y botones hasta otros elementos necesarios para crear páginas web personalizadas.

Elementor es útil para todo tipo de proyectos, ya sea un sitio corporativo, un blog, un portafolio, una landing page o una tienda online. Por lo tanto, no tendrás excusas para comenzar tu proyecto y podrás darle la apariencia profesional que necesitas tú solo, sin contar con ningún otro colaborador.

Elementor Pro vs Elementor Free: ¿Cuál elegir?

Al trabajar con Elementor, es probable que te surjan muchas dudas ya que, como verás, cuenta con dos versiones: Elementor Pro y Elementor Free.

Y te estarás preguntando: ¿Cuál debería elegir? 🤔

Como decimos por aquí… ¡Depende! 😅

Esto dependerá del tipo de proyecto que tengas en mente y de tus necesidades. Para que no se te atragante este paso, te voy a ponerlo más fácil con una pequeña comparativa de ambas opciones que te ayudará a tomar una mejor decisión.

Elementor Free

Elementor Free es ideal para quienes buscan una herramienta básica y funcional para crear sitios web sin complicaciones. Con esta versión gratuita, tendrás acceso a un constructor visual que permite arrastrar y soltar elementos.

Aunque las herramientas son limitadas en comparación con la versión Pro, incluye widgets esenciales como encabezados, imágenes, texto y botones, lo que te permitirá crear páginas sencillas pero efectivas.

En definitiva, si no necesitas funciones avanzadas ni plantillas premium, con Elementor Free vas que chutas 🙂

Elementor Pro

Elementor Pro es mucho más completo y ofrece funcionalidades avanzadas para quienes desean llevar su diseño web al siguiente nivel (aunque, eso sí, pasando por caja). Con esta versión de pago, tendrás acceso a numerosas características premium, como una mayor variedad de widgets, plantillas personalizables y opciones de diseño más sofisticadas.

Elementor Pro también incluye funciones avanzadas, como un generador de formularios, integración con WooCommerce para crear tiendas online y herramientas de marketing, como pop-ups y animaciones.

Por tanto, podemos decir que Elementor Pro está diseñado para quienes desean añadir funcionalidades más complejas a su sitio web, lo que lo convierte en la opción ideal para proyectos más grandes.

En resumidas cuentas, si buscas flexibilidad, crear un sitio profesional, un ecommerce o incluso necesitas soporte, lo mejor es invertir un poco y comprar Elementor Pro.

Funciones clave de Elementor

Antes de avanzar y meternos en el barro con el uso de Elementor, quiero que conozcas algunas de las funciones que ofrece este constructor visual.

• Editor visual de arrastrar y soltar: Te lo mencionaba un poco más arriba. Con este tipo de editor puedes crear páginas de forma intuitiva: solo tienes que arrastrar y soltar los elementos en el lugar que desees.
• Diseños personalizables: Ofrece una amplia variedad de plantillas prediseñadas que puedes personalizar para crear páginas únicas en pocos minutos.
• Compatible con temas y plugins: Se adapta fácilmente a la mayoría de los temas y complementos de WordPress, lo que permite ampliar las funcionalidades de tu sitio web.
• Diseño adaptable: Garantiza que tu sitio web se visualice correctamente en cualquier dispositivo y ofrece opciones específicas para móviles y tablets.
• Variedad de widgets: Proporciona widgets avanzados: menús, botones, formularios de contacto, sliders…

Cómo instalar y configurar Elementor paso a paso

Ahora sí que sí, ya es el momento de enseñarte cómo usar este plugin en tu WordPress.

A continuación, te explicaré paso a paso cómo instalar Elementor y te ayudaré a familiarizarte con algunos ajustes básicos para que comiences a crear tus páginas web.

¡Vamos a ello!

Paso 1: Instala el plugin Elementor

Ve a la sección de «Plugins» y elige la opción «Añadir nuevo». En la barra de búsqueda, escribe “Elementor” e instálalo. Una vez que se complete la instalación, haz clic en «Activar» para comenzar a utilizar el plugin.

Paso 2: Configura el plugin Elementor

Luego, dirígete al menú de tu escritorio de WordPress, busca la opción «Elementor» y selecciona «Ajustes» para comenzar a configurarlo.

Allí encontrarás un panel con diferentes pestañas: General, Integraciones, Avanzado, Rendimiento y Características. Vamos a revisar cada una de ellas.

General

Desde la pestaña “General”, podrás ajustar varias opciones, como las siguientes:

• Tipos de contenido: Podrás seleccionar si deseas habilitar Elementor para Entradas, Páginas y otros formatos de contenido en tu sitio.
• Desactivar colores por defecto: Para que Elementor utilice los colores predeterminados del tema, es necesario que actives esta opción.
• Desactivar fuentes por defecto: Al seleccionar esta opción, se usarán las fuentes por defecto de tu plantilla.
• Compartir datos de uso: Si deseas ayudar a los desarrolladores de Elementor a mejorar el plugin, puedes activar esta opción para enviar datos de rendimiento de tu sitio de manera anónima.

Integraciones

En la pestaña de “Integraciones”, tendrás la posibilidad de introducir las claves de integración (API) de varias herramientas populares, como reCaptcha de Google, ActiveCampaign, WooCommerce, etc.

Avanzado

Desde la pestaña “Avanzado”, podrás realizar ajustes más complejos, como:

• Cambio de método de carga del editor: Esta función se utiliza para diagnosticar posibles conflictos de configuración con el servidor. Viene desactivada por defecto y no es necesario modificarla.
• Permitir la subida de archivos sin filtrar: Se pueden cargar archivos SVG en Elementor al activar esta opción, aunque WordPress no lo permite por defecto.

⚠️Atención: Los archivos SVG pueden contener código malicioso, ya que son imágenes con contenido en XML, por lo que es muy recomendable asegurarse de su origen y seguridad.

• Google Fonts: Puedes desactivar esta opción si deseas evitar la carga de fuentes de Google. Esta acción solo es válida cuando se utilizan fuentes de un origen diferente.
• Carga de Google Fonts: Se puede configurar cómo se cargarán las fuentes de Google Fonts en tu web.
• Cargar compatibilidad con Font Awesome 4: Para garantizar que los iconos de Font Awesome 4 que hayas utilizado anteriormente en Elementor sean compatibles con la versión Font Awesome 5.

Rendimiento

En la pestaña “Rendimiento”, puedes optimizar los tiempos de carga de tu sitio utilizando las diferentes alternativas que ofrece, como:

• Método de impresión de CSS: Permite almacenar el código CSS en un archivo externo o utilizarlo de forma ‘inline’.
• Carga de imágenes optimizada: Permite optimizar el rendimiento de las imágenes.
• Carga optimizada de Gutenberg: Puedes eliminar las cargas innecesarias que obstaculizan la visualización desactivando los scripts y estilos no utilizados del editor de bloques de Gutenberg.
• Carga diferida de imágenes de fondo: Puedes mejorar el rendimiento de la carga inicial de la página activando esta opción de carga diferida para todas las imágenes de fondo.
• Caducidad de la caché de elementos: Puedes establecer un período durante el cual los datos se mantendrán en caché.

Características

En la sección de “Características” tendrás la oportunidad de probar nuevas funciones y experimentos que el equipo de desarrollo del plugin está evaluando antes de su lanzamiento oficial en una actualización.

Ten en cuenta que algunas de estas opciones se encuentran en versión Beta, por lo que es recomendable tener precaución al activarlas en un sitio web en funcionamiento, ya que podrían causar problemas. En el caso de que las pruebes, siempre hazlo a través de un staging en WordPress.

Paso 3: Maqueta tu web con Elementor

Después de instalar y configurar Elementor, puedes comenzar a editar tus páginas y entradas. Solo necesitas crear una nueva página o entrada y empezar a editar con Elementor.

Los mejores addons para Elementor

Muchos de los addons disponibles para Elementor incluyen widgets que ya vienen integrados en el propio Elementor o Elementor PRO, lo que puede llegar a ser confuso. Por eso, es importante elegir bien los addons que utilizamos, ya que algunos ofrecen más contenido innecesario que útil.

«Pero, Carol… ¿Qué es un addon para Elementor?»

¡Muy fácil! Un addon para Elementor es una extensión o complemento adicional que amplía las funcionalidades del propio plugin de Elementor. Estos addons añaden nuevos widgets, plantillas, estilos y características que no están disponibles en la versión básica o incluso en Elementor Pro, para que así podamos personalizar aún más el diseño y las funcionalidades del sitio web.

Los addons de Elementor resultan muy útiles para quienes buscan opciones más avanzadas o específicas sin necesidad de código adicional.

Deja que te diga los que considero mejores addons para Elementor.

Ultimate Addons for Elementor

Ultimate Addons for Elementor es uno de los complementos más conocidos para el constructor de páginas Elementor. Creado por Brainstorm Force, este plugin destaca por su rapidez y ligereza y ofrece más de 50 widgets adicionales, más de 200 bloques de secciones predefinidos y un montón de opciones de diseño y personalización.

Ultimate Addons for Elementor es una excelente opción si buscas mejorar rápidamente el diseño de tu sitio web. Ofrece widgets altamente personalizables, funciones innovadoras como preajustes y copiado entre sitios, además de elementos prediseñados para WooCommerce, SEO y otros.

Con sus plantillas listas para usar, puedes crear páginas visualmente atractivas y mostrar testimonios o estadísticas de ventas de manera efectiva. Los planes comienzan desde $49 dólares al año, con opciones de paquetes y precios de por vida.

Essential Addons for Elementor

Essential Addons for Elementor es otro popular conjunto de addons para Elementor. Ofrece una colección de más de 70 elementos y extensiones exclusivas para personalizar tu sitio web.

Una de las ventajas de este complemento es que todos sus elementos son completamente personalizables, lo que te va a dar control total sobre el estilo. Además, es ligero, por lo que no afectará al rendimiento de tu sitio web.

Otra funcionalidad útil es que permite activar y desactivar elementos individuales, lo que optimiza la velocidad de carga de tus páginas al eliminar las herramientas que no estás usando.

Su precio va desde $39,97 dólares al año para una web, mientras que el plan ilimitado de por vida es de $199,98 dólares.

The Plus addons for Elementor

The Plus addons for Elementor es una extensión potente y versátil que amplía significativamente las funcionalidades de Elementor. Es ideal para diseñadores web y desarrolladores.

Permite mejorar el diseño del sitio web con funciones avanzadas como widgets de contenido dinámico, mega menús y transiciones de página. Además, incluye herramientas para optimizar el rendimiento.

The Plus Addons for Elementor incluye más de 120 widgets y extensiones, entre los que destacan herramientas como Plus Widget, Plus Listing, Plus Builder y Extras.

Además de estas funcionalidades, también ofrece una gran colección de plantillas predefinidas. ¡Merece la pena echarle un vistazo!

Premium Addons for Elementor

Premium Addons for Elementor te ofrece un montón de widgets y, además, tienes la posibilidad de activarlos o desactivarlos para optimizar el rendimiento de tu sitio.

Verás que cuenta con opciones de desplazamiento de imágenes, banners, carruseles, Google Maps, tablas de precios, contadores regresivos y doble cabecera, entre otras muchas.

La versión gratuita incluye más de 23 widgets, mientras que la versión Pro, disponible desde $39 dólares, amplía el acceso a más de 100 widgets adicionales.

Mi opinión personal sobre Elementor como herramienta de diseño

Para mí, Elementor es una herramienta imprescindible a la hora de crear una página web o una landing page. Gracias a todas las funcionalidades que ofrece, la creación de sitios web es pan comido, tanto para principiantes como para expertos.

Por eso, el plugin de Elementor es algo que nunca falta en mi WordPress.

Desde mi punto de vista, si buscas una herramienta gratuita para crear páginas en WordPress con la opción de arrastrar y soltar, sin duda alguna, Elementor es la mejor elección para empezar.

Ahora te toca a ti: ¿Sueles usar Elementor para crear tus páginas web?