24 octubre 2020
A pesar de su corta edad Elementor se ha convertido en uno de los maquetadores visuales mejor valorado por los usuarios de WordPress.

Está claro que cada vez son más los usuarios que se deciden a utilizar WordPress para crear su proyecto web y para ello el tiempo es oro. Hoy te quiero hablar sobre Elementor: un constructor visual para WordPress.

Ya te hablé sobre Elementor en el episodio nº 14 de mi podcast, y te dije que su llegada había revolucionado WordPress. Hoy te quiero hablar un poco más sobre este plugin que te va a permitir construir tu página de forma totalmente visual.

¿Qué es Elementor?

Elementor es un plugin, que dispone de una versión gratuita (que puedes descargar GRATIS) y de una versión PRO a un precio muy asequible. Se encuentra encuadrado dentro de lo que se conoce como constructor visual de WordPress.

Se llama así precisamente porque te permite ir construyendo tu sitio en tiempo real, mediante la técnica de arrastrar y soltar bloques o widgets a lo largo de una página en blanco.

Este tipo de plugins permiten a usuarios inexpertos poder crear cualquier tipo de página en muy poco espacio de tiempo, pudiendo dedicar el resto a crear contenido de calidad que, a fin de cuentas es lo realmente importante.

¿Por qué Elementor?

Es cierto que existen otros constructores visuales mucho más conocidos que Elementor, con mayor trayectoria dentro de WordPress y que quizás ofrecen algunas características comunes con este plugin… sin embargo, son varias las diferencias que, a simple vista, debes tener en cuenta a la hora de elegir uno de ellos.

Aunque la que posiblemente más te llame la atención sea el precio [recordemos que Elementor es un plugin gratuito frente al alto coste que tienen los más conocidos como Visual Composer (35$), Beaver Builder (99$), Thrive Content Builder (67$), y el famoso Divi (89$/año)], existen otras diferencias que te harán amar a Elementor.

Entre las principales características de Elementor, podrían destacar:

  • Resultados en tiempo real. No necesitas esperar para ver los resultados de lo que estás haciendo, aparecen al instante.
  • De código libre. Es el primer constructor visual con open source que te permite modificar su código fuente y adaptarlo a tus necesidades.
  • Compatible con una gran variedad de plantillas. No necesitas comprar e instalar sus propias plantillas como es el caso de otros constructores visuales.
  • Puedes crear tus propias plantillas, guardarlas y reutilizarlas todas las veces que quieras
  • Exportar / Importar plantillas. Puedes utilizar las plantillas en diferentes proyectos exportando e importándolas.
  • Totalmente personalizable con multitud de widgets que puedes configurar a tu antojo y distribuir por la página.
layout
resize web
position web

Te recomiendo también que leas el artículo donde te cuento las últimas novedades para usuarios de Elementor, que seguro que te van a resultar de interés-

¿Cómo funciona Elementor?

Para conocer el funcionamiento básico del plugin, te voy a comentar los pasos en varios apartados, para que no pierdas detalle de nada.

1.- Instalación de Plugin

El primer paso, obviamente, consistirá en descargar, instalar y activar el plugin, que puedes encontrar de forma gratuita en el repositorio oficial de WordPress.

En este punto tengo que aclararte algo: Elementor cuenta con una versión GRATUITA, que es la que te explico en este artículo y una versión extendida, que tiene un coste determinado y que, además de soporte, te ofrece muchas otras opciones adicionales.

Para que funcione la versión PRO, debes tener instalada previamente la versión gratuita de Elementor.

2.- Haz que tu theme sea compatible con Elementor

Aunque, como te he comentado anteriormente, Elementor es compatible con la mayoría de themes actuales (e incluso es totalmente compatible con Genesis), es requisito imprescindible que el theme que estás usando traiga definida una o varias plantillas de ancho completo, ya que si no, no te funcionaría bien el plugin.

Solucionar este paso es muy sencillo y puedes hacerlo de alguna de estas dos formas:

3.- Añade funciones adicionales a Elementor

La versión gratuita de este plugin trae varios widgets que puedes usar sin problema, aunque en algunos casos necesitarás insertar widgets que sólo están disponibles en la versión premium.

Sin embargo, una de las ventajas de ser un plugin de código abierto, es que permite a otros desarrolladores crear addons para este plugin.

Por ejemplo, puedes descargar estos del repositorio oficial de WordPress:

4.- Crear una página con Elementor

Una vez que ya tienes los dos pasos anteriores completados, estarás listo para crear una página. Para ello tendrás que ir hasta Páginas > Añadir Nueva

Ahora verás que se te ha activado un nuevo botón que pone “Editar con Elementor”. Antes de pinchar sobre este botón es muy importante que en la barra lateral vayas hasta la caja de atributos de página y en el desplegable, cambies el tipo de plantilla y elijas una que sea “Fullwidth”.

Si te has saltado este paso, Elementor no va a funcionar, por lo que deberás volver atrás, seleccionar el tipo de página, guardar y volver a editar (en este orden).

Estructura básica de Elementor

La primera pantalla que vas a ver al entrar en Elementor, va a ser similar a la que tienes aquí. Si pulsas sobre cada botón redondeado, leerás una breve explicación del funcionamiento.

scaletowidth#tl 935165120219185153;'
Interfaz de Elementor

Secciones y Columnas

Las secciones son la parte básica del diseño con Elementor. También puedes llamarlo bloque si te resulta más fácil. Puedes insertar tantos bloques como quieras dentro de tu página y dentro de cada bloque puedes insertar tantos widgets como quieras.

Al pinchar sobre “Agregar nueva sección” te pedirá que elijas una estructura, donde aparecerán distintos diseños con varias columnas distribuidas en el bloque.

Una vez elegida la estructura, ya estarás listo para arrastrar y soltar los widgets del menú izquierdo dentro de cada columna, y configurarlos a tu gusto.

Configurar Elementor

elementor maquetador visual wordpress
Menú de configuración de Elementor

Una vez que tengas abierto Elementor y estés en la edición de la página, puedes pinchar sobre el icono que te aparece arriba  la izquierda, compuesto por tres líneas, y accederás al menú de configuración.

Desde este menú podrás configurar distintos parámetros como por ejemplo:

  • Colores que se aplicarán por defecto en los elementos que incluyas en tu diseño, independientemente de los que use tu theme.
  • Fuentes que se utilizarán en las cabeceras de tu diseño o en el texto del cuerpo, con independencia de las que tu theme tenga establecidas en su hoja de estilos.
  • Historial de revisiones, con lo que podrás volver a una versión anterior a alguna modificación que hayas realizado en el diseño
  • Configuración de la página, que te permitirá elegir la posibilidad de mostrar u ocultar el título, elegir el tipo de plantilla a aplicar a la página y guardarla como borrador o publicarla.
  • Eliminar todo el contenido te permitirá empezar de cero el diseño de la página.
  • Desde la opción de configuración de Elementor, accederás a la sección de ajustes del Escritorio de WordPress, desde donde podrás, por ejemplo, elegir para qué tipo de entradas quieres tener disponible el maquetador, los roles de usuario que no quieres que tengan acceso a él, consultar tu biblioteca de plantillas, importar otras, sincronizar las plantillas existentes, etc…

Aprender a usar Elementor a fondo

Si te has quedado con ganas de aprender más a fondo a usar Elementor, te recomiendo que eches un vistazo a mi Curso de Elementordonde a lo largo de 20 vídeos te explico paso a paso cómo funcionan todas las opciones del constructor visual Elementor.

Encontrarás casi 3 horas de formación guiada que te enseñarán a usar este constructor visual para WordPress.

¿Cuándo usar Elementor?

Mi recomendación es que utilices el maquetador visual únicamente para crear páginas: landing page, home, página de contacto, quién soy, etc…

En realidad no tiene mucho sentido hacerlo para las entradas o Custom Post Types, ya que son entradas con contenido dinámico que variará en función del texto que escribas.. no tendría sentido ir maquetando una por una todas las entradas, pues te quitaría mucho tiempo.

La gran diferencia de Elementor

Y si algo distingue realmente a Elementor del resto de maquetadores visuales para WordPress que existen actualmente, es que el día que decidas desinstalar el plugin o cambiar de tema, no encontrarás shortcodes esparcidos por el código fuente de las páginas.

Es decir, la mayoría de constructores visuales, además de consumir muchos más recursos, lo que hacen es insertar determinados shortcodes que el constructor tiene que “leer” para saber qué bloque tiene que mostrar y con qué aspecto.

Elementor no funciona de este modo, por lo que, además de reducir el tiempo de carga, tampoco te hará que tengas que revisar manualmente el código fuente el día que desinstales el plugin o cambies de theme para ir borrando manualmente esos códigos.

Conclusión

Elementor se presenta como la gran solución para todos los usuarios que se inician en el entorno WordPress y que no tienen conocimientos de programación.

Un plugin gratuito pensado para arrastrar y soltar bloques de contenido y crear una página en cuestión de minutos, con multitud de opciones de personalización.

Tanto si estabas buscando un maquetador visual  como si estás ya habituado a utilizar este tipo de plugins, te animo a que descargues elementor y lo pruebes gratis y, por supuesto, me dejes tu experiencia en los comentarios de este artículo para poder ayudar a otros usuarios.

Juanma Aranda

Ayudo a usuarios noveles a dar sus primeros pasos con WordPress mediante mentorías individuales.
También creo vídeotutoriales en español para desarrolladores de WordPress que quieren mejorar su servicio de ayuda a clientes.

Ver todos los artículos

20 comentarios

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

Información adicional sobre protección de datos:
Responsable: Juan M. Aranda
Finalidad: Moderar los comentarios de este sitio web.
Cesión: NO se cederán a nadie, salvo obligación legal.
Derechos: acceso, rectificación, cancelación y borrado de tus datos.
Legitimación: tu consentimiento expreso.

 

  • hola, mucha sgracias por la informacion, tengo uan duda acerca del pluginy sus valores los cuales salen por ejemplo para un sitio a . de valor mesual, en el caso que yo deje de pagar se cae la pagina o deja de funcionar? no me queda claro, tampoc lo de 1 sitio, 3sitios o + de 1000 sitios, no se si me di a explicar bien.

    • Hola Claudio!
      1 sitio = 1 web = 1 dominio

      Elementor es un plugin freemium: tiene una versión gratuita y una versión ampliada, que es la que cuesta dinero, y que incluye widgets adicionales.
      Al pagar la licencia, tienes derecho a recibir todas las actualizaciones.
      En el momento que no pagues la renovación de la licencia, el contenido que hayas creado con widgets premium, no aparecerá en la pantalla del lector. Tampoco recibirás las actualizaciones desde ese momento.

      Un saludo,

      • Perfecto osea en el caso que yo haga un sitio web mediante esta modalidad y se lo entregue al cliente debo de comunicarle que mes a mes deberá seguir pagando el plugin para que su sitio siga tal cual y se pueda editar? Es una especie de.contrato finalmente que te amarra mensualmente si no te dan de baja los plugins del sitio?

  • De acuerdo a lo que he leido en tu blog me surge una inquitud para ti que plugin es mas funcional WPBakery Page Builder o Elementor

    • Hola Diego!

      Como ya expliqué en el episodio de mi podcast donde contaba qué es WPBackery, es un plugin obsoleto y lento. Sin demasiadas funcionalidades ya que sus desarrolladores lo dejaron un poco de lado para dedicarse a programar y mejorar su otro producto: Vicual Composer Website Builder.

      Por tanto, la elección entre Elementor y WPBakery está clara: Elementor, sin duda.

      Un saludo!

  • Hola BUENAS TARDES O NOCHES O DIAS mi pregunta es la siguiente : En primer lugar soy nuevo en el mundo de desarrolador SOY ESTUDIANTE: AHORA ESTY DISEÑANDO UNA PAGINA WEB PARA productos naturales en esencial o frascos Me podrian ayudar que tema podria usar y sus plugins respectivos para q pueda HACER UNA TIENDA ONLINE DELA DICHA ESENCIA O perfume Gracias Desde bolivia

  • Hola!!
    Excelente artículo! una pregunta…he intentado instalar Elementor en mi Web WordPress pero al presionar el botón “Editar con Elementor” sólo me aparece una página en blanco no los elementos para editar…sabes que puede estar pasando?

  • Hola Juanma,
    Excelente este post muchas gracias.

    Tengo 3 preguntas.

    Queria preguntarte cuál plugin usas para compartir en redes sociales.
    Y el que usas también para tu perfil social.
    Y si usas un plugin para colocar el banner del ebook para colocarlo tipo hook, o es un html?
    Saludos

    • Hola Karlos!

      La verdad es que, a día de hoy, Elementor se ha convertido en uno de los maquetadores visuales más utilizados. Tiene menos de un año de vida y ya está causando furor entre los usuarios de WordPress. Y el ritmo de crecimiento en cuanto a desarrollo también es imparable!

      En la sección de videotutoriales tienes un par de videos hablando sobre Elementor. Y en mi nueva plataforma de formación AcademiaWP.online tienes un curso completo sobre Elementor.

      Un abrazo

  • Hola!! Estoy trabajando con Elementor, pero tengo un problema la página principal, a pesar de haberla editado con Elemtor, al guardar, me sigue dando la visualización de la anterior edición con el tema de Sydney. ¿Cómo puedo hacer para eliminar ese tema en la página principal y actualizarla por la diseñada con Elementor? Mil gracias!!!

    • Hola Andrea! No entiendo muy bien la pregunta, pero imagino que el problema puede tener dos soluciones:

      – 1 Limpiar la caché. Es posible que tu WordPress esté usando un plugin de caché que impida que se guarden las modificaciones. Lo recomendable es que mientras estés editando contenido, desactives los plugins de caché.

      – 2 Si la página que creas como Elementor se guarda de forma correcta, después tendrás que decirle a WordPress que quieres que esa sea tu página inicial. Para lo cual debes ir a la sección de Ajustes del menú de Administración.

      Un saludo!

  • Hola, estoy intentando construir una pagina para reserva de boletos de autobus, pero ya me canse de buscar temas o plugins y no encuentro nada y he probado algunos y son una verdadera porquería..me ha comentado que no hay y que se tiene que programar un sistema…me puedes sugerir que solucion me conviene y no busco una gratuita…saludos

    • Hola Luis!

      En este caso, lo más recomendable es que te registres enGitHub y puedas contactar con alguien que te ayude a hacer una programación casi a medida para ese plugin en concreto que necesitas.

      Un saludo!

Cupón Descuento

Cursos Flash GRATIS

cursos wordpress gratis

Únete a nosotros

error: Contenido protegido
commodo fringilla Donec consequat. commodo libero pulvinar

Te espero en YouTube

para seguir aprendiendo más WordPress