Cómo usar Elementor: Una guía de configuración de principio a fin

Elementor: Tu guía completa para el constructor de páginas WordPress

Elementor es uno de los constructores de páginas o «page builder» más populares de WordPress. Por una buena razón: Elementor está repleto de funciones que hacen que la creación de sitios web personalizados sea más fácil que nunca. En este artículo, aprenderás todo lo que necesitas saber sobre Elementor.

Si tienes curiosidad sobre cómo utilizar Elementor, has llegado al lugar adecuado. Hoy la cosa va de Elementor, incluyendo consejos de instalación y los mejores themes & add-ons. Porque, sobre todo al principio, el uso de Elementor puede resultar confuso. Vamos a analizar los siguientes temas:

  • Elementor: Qué es Elementor y cómo funciona este page builder
  • Ventajas de utilizar Elementor como WordPress Page Builder
  • Diferencias entre Elementor y Elementor Pro
  • Cómo instalar el constructor de páginas Elementor en WordPress
  • Cómo utilizar Elementor paso a paso
  • Los mejores themes con Elementor y cómo utilizarlos
  • Add-ons recomendados para Elementor
  • Conclusión: Cómo utilizar Elementor, la guía completa

Elementor: Qué es y cómo funciona

¿Qué es un contructor de páginas o «Page Builder»?

Un constructor de páginas es comparable a un «kit de construcción» para el contenido de tu sitio web en el que puedes arrastrar y soltar los elementos individuales a los lugares deseados y llenarlos con tu propio contenido. En nuestro artículo aprenderás las ventajas y desventajas más importantes de estos Page Builders.

Elementor es un plugin constructor de sitios web diseñado para WordPress. Elementor añade toda una serie de funciones de arrastre. De este modo, incluso los novatos pueden crear sitios web impresionantes con un aspecto profesional.

La mayor ventaja de Elementor es que se obtiene una vista completa en vivo de tu sitio web mientras se realizan los cambios.

Elementor crea una experiencia de diseño intuitiva, especialmente para principiantes. Para ello, este plugin utiliza decenas de widgets, una completa biblioteca de plantillas y un historial de cambios. 

El plugin del core Elementor es gratis y está equipado con muchos elementos básicos. Si necesitas funciones más avanzadas, tienes a tu disposición Elementor Pro. Esta versión premium de Elementor tiene varios niveles de precios, desde 49 dólares al año para un sitio web hasta 999 dólares al año para mil sitios web.

Ventajas de utilizar Elementor como WordPress Page Builder

Como habrás adivinado, Elementor presenta algunas ventajas. Exploremos algunos antes de entrar en el tutorial de Elementor. Algunas de las más importantes son: 

  • Fácil de usar. La edición visual del frontend combinada con los widgets hace que trabajar con Elementor Page Builder sea increíblemente fácil, incluso para los/as más novatos/as. 
  • Flexible y extensible para desarrolladores/as. Una robusta biblioteca de plantillas, un editor de bloques y un control total sobre la salida significa que incluso los/as desarrolladores/as más experimentados/as pueden aprender a usar y trabajar con el constructor de themes Elementor. 
  • Toneladas de opciones para el styling. Puedes utilizar el panel de editor con controles deslizantes para ajustar la configuración del diseño dentro de un marco de edición cómodo.  
  • Global Widgets que ahorran tiempo. Cambia, personaliza, guarda y utiliza los widgets en varios sitios web. 
  • Creación de themes con función «drag and drop». Crea un theme con Elementor desde cero con los widgets incorporados, o utiliza las plantillas de Elementor Pro como base. 
  • Integración e-commerce. Utiliza el panel de widgets para crear una tienda online con todo el control responsivo al que estás acostumbrado/a de otros constructores con compatibilidad WooCommerce.
  • Herramientas de marketing integradas. Especialmente a la hora de empezar con Elementor, notarás lo siguiente de inmediato: puedes personalizar los estilos de los formularios, crear una página de aterrizaje en Elementor y utilizar los plugin widgets para construir tu presencia web y estrategia de marketing al mismo tiempo. 
  • Gran comunidad y mercado de terceros. Una gran ventaja de Elementor es la gran comunidad de desarrolladores/as que la respalda. Puedes pasarte horas navegando por todas las plantillas de páginas de Elementor, themes WordPress y add-ons que amplían las funciones principales de Elementor. 

Los 16 WordPress Page Builders más populares en comparación

Hay más de WordPress Page Builder. Te presentaremos 16 diferentes plugins para ayudarte a avanzar más rápido con WordPress. Conoce los mejores WordPress Page Builder del mercado actual.

Diferencias entre Elementor y Elementor Pro

Antes de continuar, es importante mencionar que existe una versión Pro de Elementor. Con la versión gratuita ya alcanzas bastante, pero si buscas aún más funciones, deberías tener en cuenta Elementor Pro

La versión gratuita de Elementor incluye todo lo necesario para crear un sitio web, incluidas las funciones de construcción:

  • Encabezados 
  • Cajas o cuadros de texto 
  • Widgets de imágenes 
  • Widgets de vídeos 
  • Widgets de la Galería
  • Testimonios 
  • Widgets divisores 
  • Widgets de Acordeón 

Elementor Pro añade varias funciones dirigidas a empresas, entre ellas:

  • Formularios 
  • Diapositivas 
  • Portafolios 
  • Tablas de precios 
  • Carruseles de imágenes 
  • Widgets para contadores 
  • Ventanas emergentes («pop ups») 
  • Widgets para redes sociales
  • Constructor de pies de página y cabeceras personalizadas 
  • Call to Action

También puedes añadir fuentes y puntos de ruptura («breakpoints») personalizados y utilizar muchos widgets premium. Aquí encontrarás una comparación entre la versión gratuita de Elementor y Elementor Pro: 

Diferencias entre Elementor  y Elementor  Pro
Infografía con comparación de las características de Elementor y Elementor Pro

Cómo instalar Elementor Page Builder en WordPress

Parainstalar Elementor, necesitas un WordPress instalado con unplan de alojamiento y unnombre de dominio . Cuando hayas iniciado sesión en el sitio web Dashboard tus WordPress, ve a Plugins > Añadir nuevo

Cómo instalar el constructor de páginas Elementor  en WordPress
Plugins WordPress: pantalla de búsqueda en el panel de control

Busca Elementor e instálalo. A continuación, haz clic en Activar

Cómo instalar el Elementor  plugin
Instalación y activación del plugin Elementor en WordPress Dashboard

Si te decantas por Elementor Pro (o quieres actualizar la versión básica de Elementor), dirígete en el sitio web de Elementor a Mi cuenta y haz clic en el botón de descargar plugin. Esto guardará un archivo ZIP en tu ordenador. 

Elementor  vista de la cuenta
Elementor: vista de la cuenta, acceso al menú de descargas

A continuación, inicia sesión en tu panel de control de WordPress y navega hasta Plugins > Añadir nuevo. Carga el archivo ZIP que acabas de guardar, haz clic en Instalar y luego en Activar. Debes tener la versión gratuita del plugin Elementor instalada y activada para que esto funcione. 

Añadiendo plugins a WordPress
Añadir plugins a WordPress

A partir de ahí, hay que activar tu licencia. Para ello, ve a Elementor > Licencia y luego haz clic en Conectar y activar

Activación de la licencia de Elementor  Pro en WordPress  panel de control  .]
Activar la licencia de Elementor Pro en el dashboard WordPress

En la siguiente pantalla, haz clic en Conectar y luego inicia sesión en la cuenta de tu Elementor. 

Conexión de la licencia Elementor  con su sitio web WordPress
Conexión de la licencia Elementor con tu sitio WordPress

Serás redirigido/a de nuevo al panel de control. El mensaje que aparece en la parte superior de la pantalla pidiéndote que actives tu licencia debería haber desaparecido. 

Cómo utilizar Elementor paso a paso

Ahora que la instalación está completa, es hora de ponerse a trabajar en cómo utilizar Elementor en la práctica. Elementor recomienda la instalación del plugin Envato Elements que te proporcionará una selección de plantillas de páginas Elementor en el panel de control. Asegúrate de que tienes instalado y activado el theme WordPress por defecto. 

Descargando el Envato Elements plugin en el WordPress  panel de control
Descarga del plugin Envato Element en el panel de control de WordPress

Para empezar, ve a Elements en el dashboard WordPress. Puedes elegir entre kits de plantillas gratuitas y premium. Decide qué prefieres. A continuación, elige la plantilla (template) que mejor te convenga.

Una lista de kits de plantillas gratuitas de Envato Elements en WordPress
Una lista de kits de plantillas gratuitas de Envato Elements en WordPress

Desplázate por el menú de plantillas y selecciona el tema de la página de inicio que desees importar. Repite esto para cada nueva plantilla de página específica. Mucha gente opta por utilizarlo para crear páginas como «Acerca de nosotros», «Servicio» y «Contacto», pero esto depende de ti.

Una lista de kits de plantillas gratuitas de Envato Elements en WordPress
Opciones de plantillas de página de inicio en el kit de plantillas de CoWorking Space

Una vez hayas creado tus páginas, podrás editarlas utilizando Elementor. Para ello, ve a Páginas > Todas, pasa el ratón por encima del sitio que desees editar y haz clic en Editar con Elementor

Una vez cargado el sitio, deberías ver el editor Elementor en acción. A la izquierda de la pantalla verás activado el modo del editor. Y a la derecha la vista previa de este. Básicamente, se trata de una vista en vivo de tu sitio web que podrás reorganizar, reformatear y editar directamente. 

Elementor: Tu guía completa para el constructor de páginas WordPress
Editar una página de inicio en Elementor

El contenido se divide en secciones en el modo de edición. Al pasar el ratón por encima de las secciones, estas deberían aparecer resaltadas en azul claro. 

Al hacer clic en una sección, puedes editar directamente el contenido de la misma. Si haces clic con el botón derecho del ratón, se abre el panel de control de la sección. Aquí podrás ver cómo, después de hacer clic en una imagen de la plantilla, el panel de control de la imagen aparece a la izquierda: 

Editar imágenes en Elementor
Editar imágenes en Elementor

Trabajar con widgets es un proceso similar: si ya está presente en la plantilla, basta con hacer clic en el icono del lápiz gris para abrir el modo de edición de ese widget en particular. Después verás que aparecerá a la izquierda.

Si quieres hacer cambios en un widget de carrusel de imágenes, puedes hacer clic en él en la plantilla prediseñada y luego hacer cambios en la configuración ajustando el tamaño, el texto asociado y las imágenes. 

Añadir un widget de carrusel de imágenes en Elementor
Añadir un widget de carrusel de imágenes en Elementor

A medida que aprendes a utilizar las plantillas de Elementor y a diseñar la web a tu gusto, podrás empezar a pensar en el estilo. Puedes personalizar los colores ajustándolos a nivel global (para todo el sitio web si utilizas la versión Pro) y también a nivel de widget. 

Cambiar el color de texto de los encabezados o títulos es pan comido

Cambiar el color, la fuente y el estilo del texto en Elementor
Cambiar el color, la fuente y el estilo del texto en Elementor

Puedes ajustar los estilos y tamaños de las fuentes, si el texto tiene o no una sombra (y su opacidad), y otros ajustes de estilo para el espaciado, los márgenes y los bordes. Incluso puedes ajustar el tamaño y el patrón de las líneas del widget divisor. 

Puedes insertar iconos de redes sociales, personalizar su color y tamaño y determinar su ubicación. También puedes cambiar su forma, añadir columnas y cambiar su orientación. 

Añadir iconos de redes sociales con Elementor
Añadir iconos de redes sociales con Elementor

Todo el flujo de trabajo con Elementor es fácil de usar. Si cometes un error, es fácil de solucionar porque siempre puedes ver el historial de revisiones y volver a una versión anterior de tu sitio web con un solo clic. 

Las vistas del historial de revisiones y del navegador en Elementor
Las vistas del historial de revisiones y del navegador en Elementor

Asimismo, el navegador facilita la visualización de todas las secciones, zonas interiores y widgets a la vez, de modo que no hay que desplazarse hacia arriba o hacia abajo sin parar. La manipulación de cualquier parte del sitio web es similar en Elementor. Selecciona una sección o widget, realiza los cambios y guarda el trabajo. Cuando esté listo, podrás publicar tu sitio web. 

Si quieres añadir más funciones o quieres una página de inicio del starter theme más solída, puedes utilizar themes y add-ons de Elementor, que es exactamente lo que vamos a tratar a continuación. Ahora que entiendes los fundamentos del uso de Elementor, echémosle un vistazo a algunos de los themes más populares disponibles para la plataforma. 

Los mejores themes con Elementor

  • Hello: Hello es un theme gratuito y fácil de usar, diseñado para Elementor. Hello es un verdadero theme ideal para empezar con Elementor. No contiene ningún styling o script, pero viene con los principales Plugins WordPress compatible. 
  • Layers: Elementor ha adoptado Layers para que sea compatible con el plugin y ofrezca opciones de diseño adecuadas para expertos, completamente gratuito. 
  • Astra: el theme WordPress más popular de todos los tiempos. Astra es ligero, rápido y fácil de personalizar a través de Elementor. La versión gratuita es muy rica en funciones, pero también hay una versión Pro que ofrece una mayor selección de widgets preestablecidos y opciones de personalización. El precio es a partir de 47 dólares al año.
  • Hestia: Hestia es otro theme compatible con Elementor. Te ofrece un diseño gratuito moderno. No obstante, también puedes actualizar a la versión Pro para obtener más opciones de widgets y mejorar la compatibilidad con Elementor. Su precio es a partir de 69 dólares al año.
  • GeneratePress: este theme WordPress gratuito y de código abierto es una opción sólida para crear cualquier tipo de sitio web. También hay una versión Pro con más funciones por un mínimo de 44 dólares al año. 
  • OceanWP: este theme WordPress premium ofrece compatibilidad total con Elementor, incluyendo múltiples demos, extensiones y widgets, a partir de 39 dólares al año. 
  • Customify: este theme es gratis. Gracias a la integración con Elementor y al constructor del header y footer (Header & Footer Builder), te provee con toneladas de opciones de personalización. También se puede actualizar a la versión Pro, disponible a partir de 59 dólares al año, para obtener módulos adicionales, actualizaciones y soporte técnico.
  • Neve: este theme tiene un diseño tipo «Mobile First Design» que funciona con Elementor y se puede utilizar gratis. Hay una versión Pro con aún más funciones disponible a partir de 59 dólares al año.
  • Phlox Pro: theme premium disponible en ThemeForest por 49 dólares e incluye más de 150 plantillas de Elementor. 
  • Zakra: este theme está diseñado para la velocidad y el SEO e incluye más de 65 plantillas de inicio. La versión Pro incluye demos premium y un conjunto más amplio de funciones, a partir de 59 dólares al año. 

Add-ons recomendados para Elementor 

Elementor está repleto de funciones. Ahora ya sabes cómo utilizar themes con Elementor. No obstante, también deberías considerar los diversos add-ons populares para ampliar aún más la funcionalidad. 

Mientras aprendes a utilizar Elementor, no dudes en echarle un vistazo a los siguientes add-ons:

  • Ultimate Addons: amplía Elementor con más add-ons o complementos, widgets y bloques, a partir de 55 dólares. 
  • Essential Addons for Elementor : esta es la biblioteca más popular de Elementor para Elementor y viene con más de 70 opciones, a partir de 39,97 dólares para un solo sitio. 
  • Elementor Pack: este pack está repleto de widgets y complementos gratuitos de Elementor. La versión Pro ofrece aún más widgets, así como soporte y actualizaciones, a partir de 29 dólares al año.
  • Prime Slider: con este add-on podrás crear un slider en la cabecera y en la zona top de tu web Elementor. Puedes descargar el plugin gratis u optar por la versión Pro que incluye soporte y actualizaciones; a partir de 7,92 dólares al año.
  • ToolKit para Elementor: el objetivo de ToolKit es simplificar la creación de sitios web Elementor gracias a las mejoras de rendimiento y a las herramientas de administración más intuitivas. Puedes empezar con hasta tres sitios web con este add-on por 49 dólares al año.
  • Happy Addons: por último, pero no menos importante, está Happy Addons. El complemento añade nuevos widgets, secciones y preajustes a Elementor. Hay una versión gratuita y una versión Pro. Esta última viene con características adicionales como Live Copy, soporte 24/7 y actualizaciones. El precio es a partir de 29 dólares al año. 

Conclusión sobre el Page Builder Elementor

Elementor es a menudo aclamado como el mejor plugin WordPress del tipo page builder. Hay una buena razón para ello: un diseño rico en funciones, una sólida community y la disponibilidad de themes y add-ons. Elementor presenta así una forma flexible y accesible de crear un sitio web. 

Si quieres aprender a usar Elementor, necesitas empezar con un plan de hosting sólido. En Raidboxes ofrecenhosting específico para WordPress que cubre una amplia gama de necesidades. Si tienes alguna pregunta sobre nuestros planes, no dudes en ponerte en contacto con nuestro equipo.

Tus dudas sobre Elementor

¿Qué preguntas tienes para Maddy? Esperamos tus comentarios. ¿Te interesa WordPress y el diseño web? Entonces sigue a Raidboxes en Twitter, Facebook, LinkedIn o a través de nuestra newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

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