Tutorial de Elementor: Cómo usar el constructor de páginas Elementor de WordPress

complete elementor guide banner

¿Le interesa crear un sitio web sorprendente?

Buenas noticias... ¡Ahora es más fácil que nunca! No es necesario codificar a mano cada página desde cero ni contratar a un equipo de profesionales.

Hoy en día, todo lo que necesitas es un plugin llamado Elementor. Es uno de los creadores de páginas de WordPress más versátiles y accesibles del mercado.

Y lo que es mejor, ¡empezar es totalmente gratis!

En este tutorial de Elementor, vamos a ver cómo utilizar Elementor paso a paso y repasar algunas de sus mejores funciones.

Al final, deberías tener todo lo que necesitas para crear un sitio web con WordPress que impresiona, ¡en un santiamén!

1. Instalación de Elementor en WordPress

Elementor es un constructor de páginas popular que combina bien con temas de WordPress ligeros como Astra. Este constructor de páginas le permite controlar todos los aspectos de la apariencia y el diseño de las páginas y entradas de su sitio web, con docenas de widgets que añaden funcionalidad a través de una interfaz limpia de arrastrar y soltar.

Para saber por qué el Elementor es tan famoso, consulte nuestro revisión en profundidad del Elementor.

Ahora, tenga en cuenta, Elementor sí mismo es no un tema de WordPress - es estrictamente un plugin. Esto es importante porque aún tendrás que elegir un tema dedicado para manejar otros aspectos de tu sitio web.

Una vez que instalado WordPress y un tema elegido para su sitioPara instalar el constructor de páginas Elementor, puede seguir varios caminos:

Método 1: Página web de Elementor.

Visite el Elementor y obtenga la versión gratuita de Elementor. En la parte superior de la página de inicio aparece un botón de descarga.

Una vez que introduzca su correo electrónico, su navegador descargará automáticamente el archivo ZIP.

Elementor using process

A continuación, vaya a la página Plugins en la parte posterior de su sitio web WordPress, haga clic en "Añadir nuevoy cargue el archivo .ZIP en su sitio web a través del enlace "Subir Plugin" en la parte superior.

Upload plugin

Una vez instalado, basta con pulsar "Activar" y ¡listo!

Método 2: Panel de WordPress

Inicie sesión en el backend de su sitio web WordPress y prepárese para instalar el plugin pulsando el botón "Añadir nuevo" de la pestaña Plugins.

Para encontrar Elementor, basta con escribir la palabra "Elementor" en la barra de búsqueda del plugin.

El Elementor Page Builder debería aparecer como la primera opción de plugin a instalar.

Install Elementor plugin

Haga clic en "Instale" y luego "Activar"una vez descargado.

Sea cual sea el método que elijas para instalar Elementor, a partir de ahora podrás encontrarlo en tu lista de plugins instalados", y también tendrá su propia entrada en el menú lateral.

Desde esa zona, podrás ajustar la configuración del plugin.

Elementor Settings

Sin embargo, a diferencia de muchos plugins, la mayor funcionalidad de Elementor se encuentra en las propias páginas.

Esto significa que pasarás la mayor parte del tiempo utilizando Elementor cuando estés creando o editando páginas y entradas.

2. Explorar las opciones del Elementor

En breve veremos cómo crear nuestras propias páginas y plantillas con Elementor, pero antes echemos un vistazo a las opciones de las que dispones con Elementor.

Una de las características más importantes de cualquier constructor de páginas es la facilidad de uso. Tienes que ser capaz de saltar y hacer realidad tu visión sin un montón de rascarse la cabeza y frenéticas búsquedas en YouTube.

Afortunadamente, Elementor es uno de los creadores de páginas más sencillos que hemos utilizado. Es un editor front-end, lo que significa que puedes ver exactamente cómo va a quedar la página mientras trabajas en ella.

Una vez que te acostumbres al flujo de trabajo de arrastrar widgets a la página y ajustar las propiedades en la barra lateral, te darás cuenta de que es de lo más intuitivo que puede haber.

La mayoría de las opciones de personalización que encontrarás en Elementor se basan en los widgets que vienen con el plugin.

Elementor Ajustes

Elementor tiene un puñado de ajustes de alto nivel que puedes encontrar directamente en el plugin. Esto te permite hacer cosas como comprobar con qué tipos de entradas funciona Elementor, establecer la fuente y el espaciado predeterminados y ajustar la configuración de la capacidad de respuesta.

Elementor General settings

Elementor también incluye una práctica función de gestión de roles que permite clasificar los tipos de usuarios que pueden acceder al editor (nota: esta función sólo está disponible en Elementor). Elementor Pro).

¿Qué widgets se incluyen?

En general, Elementor se basa en un editor de arrastrar y soltar que da cabida a secciones, columnas y widgets.

El sistema se desglosa del siguiente modo:

  • Secciones - Contenedores para columnas y widgets.
  • Columnas - Secciones que contienen widgets.
  • Widgets - Elementos individuales de la página.
Elementor basic widgets

Estos widgets son simples categorías de contenido que le permiten personalizar su página web. En la versión gratuita de Elementor, tienes acceso a los elementos básicos.

Aquí tienes una lista rápida de varios widgets básicos que utilizarás a menudo:

  • Rúbrica
  • Imagen
  • Editor de texto
  • Vídeo
  • Botón
  • Divisor
  • Icono
  • Espaciador
  • Google Maps

Dispones de casi 30 elementos básicos que te ofrecen todo lo que necesitas para crear una página web funcional.

Basta con arrastrar una instancia de un elemento a la página principal y personalizarla según sus necesidades.

Si estos elementos básicos no son suficientes, es posible obtener widgets adicionales actualizando a Elementor Pro.

Sin embargo, diríamos que la mayor parte de lo que puedes hacer en Pro es posible en la versión gratuita, sólo que lleva más tiempo.

Tú decides si necesitas los widgets premium de la versión Pro.

Aquí tienes una muestra rápida de las docenas de widgets que encontrarás en Elementor Pro:

  • Cartera
  • Formulario
  • Caja abatible
  • Tabla de precios
  • Cita en bloque
  • Llamamiento a la acción

Estos elementos Pro ayudarán a que su sitio tenga un aspecto más elegante y profesional, y también están diseñados para apoyar los esfuerzos de comercio electrónico, incluida la integración en profundidad con WooCommerce.

Hemos creado un artículo rápido sobre crear formularios de contacto con Elementor ProCompruébelo.

Por último, el Elementor admite widgets de terceros.

Puede encontrar muchos complementos Elementor de terceros que amplían aún más los widgets disponibles, ¡o incluso desarrolla tu propio widget con los recursos de desarrollo de Elementor!

¿No está seguro de querer añadir widgets adicionales?

Aunque puede ser cómodo tener widgets para todo lo que quieras hacer en tu sitio web, no es absolutamente necesario. Existen innumerables plugins gratuitos de terceros para WordPress que funcionan bien en tándem con Elementor y tu tema de WordPress.

3. Elementor Gratuito vs. Elementor Pro

Si quieres un constructor de páginas gratuito y sofisticado que tenga más funciones que muchas opciones de pago, Elementor es una gran elección.

Dicho esto, Elementor Pro añade varias características deseables para acelerar su flujo de trabajo y darle aún más control sobre la apariencia y funcionalidad de su sitio web.

Los añadidos del constructor de temas, los widgets premium y los elementos globales son bienvenidos, pero ciertamente no los necesitas para hacer un gran sitio web.

Tabla comparativa de características del Elementor

He aquí un rápido resumen de las principales diferencias que encontrará entre Elementor Free y Elementor Pro.

Elementor LibreElementor Pro
PrecioGratisA partir de $49 al año por centro
Número de widgets25+50+
Creador de páginas
Creador de temasX
Asistencia 24/7 incluidaX
Contenido dinámicoX
Plantillas y bloques ProX
IntegracionesX

Esta es una instantánea general de las diferencias entre las dos versiones, pero puede obtener más información sobre Elementor Gratuito vs Pro.

Precios de Elementor Pro

Si está pensando en adquirir una de las versiones de pago de Elementor ProTenga en cuenta que los tres planes ofrecen exactamente las mismas prestaciones.

La única diferencia entre los planes Pro es el número de licencias que se adquieren de una sola vez.

Elementor Pro Pricing
  • Con EsencialElementor Pro para un sitio web por $49 al año.
  • Con AvanzadoElementor Pro en 3 sitios web por $99 al año.
  • Con ExpertoElementor Pro en 25 sitios web por $199 al año.
  • Con EstudioElementor Pro en 100 sitios web por $499 al año.
  • Con AgenciaElementor Pro en 1.000 sitios por $999 al año.

¿Cuál es el más adecuado para usted? Para particulares o equipos pequeños, Expert es sin duda la mejor opción, siempre que sea probable que gestiones más de un sitio web con Elementor Pro en el próximo año.

Siempre puede elegir empezar con Essential y actualizar a Advanced o Expert más adelante si decide que le gusta Elementor y quiere más licencias.

4. Cómo utilizar el constructor de páginas gratuito de Elementor

Con todo esto, ¿está listo para ver el Elementor en acción?

Este constructor de páginas funciona con tipos de entradas personalizadas y tiene un montón de plantillas listas para elegir, pero para este post, vamos a ver cómo se ve para empezar desde cero.

Paso 1. Crear una nueva entrada o página Crear nueva entrada o página

Vaya al panel de control de su sitio web WordPress y haga clic en "Añadir nuevo" en Entradas o Páginas. Para este tutorial, crearemos una nueva entrada de blog.

Paso 2. Editar con Elementor

Una vez que llegue a esta pantalla, puede elegir editar la página con el editor predeterminado de WordPress. Para utilizar Elementor, debe hacer clic en el botón "Editar con Elementor".

Edit page with elementor

Paso 3. Arrastrar elementos a la página principal Arrastrar elementos a la página principal

Esta página estará vacía inicialmente. Elija y arrastre elementos de la barra lateral Elementor.

Vamos a crear un nuevo título para la página. Todo lo que tienes que hacer es hacer clic en la casilla que dice "Rúbrica"mantenga pulsado el botón del ratón y arrástrelo hasta la zona de widgets de la página (donde dice "Arrastre el widget aquí").

Si no desea que este elemento ocupe todo el ancho de su página (como ocurre por defecto), puede hacer clic en el pequeño icono "más - +" para personalizar la estructura de esa sección de su página.

Add widget to the page

Después de pulsar el botón más, verás una opción para "Seleccione su estructura". Vamos con tres columnas iguales.

Elementor columns layout

Después de hacer clic en ese icono con las tres columnas, ahora vemos una nueva sección en la página con tres columnas, cada una con un botón más.

Edit elementor column layout

¿Y si queremos personalizar lo que vemos en esta sección? Lo has adivinado, arrastramos un widget allí.

Arrastramos un elemento de vídeo a la columna central, que viene precargada por defecto con una lista de reproducción de vídeo Elementor.

Added video in column

Paso 4. Editar configuración

Para cada sección o elemento que coloques en la página, tienes opciones para personalizarlo aún más. Solo tienes que buscar los seis puntos.

Edit Elementor section

Si seleccionamos el encabezado, por ejemplo, podemos cambiar su contenido, estilo o características avanzadas como márgenes y relleno, capacidad de respuesta, etc.

Paso 5. Publique su página

Una vez que estés satisfecho con los ajustes, es hora de comprobar el producto final.

Ya hemos visto el aspecto de esta página en el editor, pero si echamos un vistazo a la vista previa de la página real, ¡veremos que es igual!

Eso está muy bien. Significa que una vez que la página en la que estás trabajando está activa, puedes estar seguro de que tiene exactamente el mismo aspecto que tenía mientras la editabas. Esa es una de las características más importantes de Elementor.

Resumen del constructor de páginas

Obviamente, se trata de un ejemplo rápido, pero muestra lo fácil que es colocar elementos y crear un sitio web que funcione.

En resumen, no hace falta ser un experto para crear un sitio web con Elementor. Con toneladas de plantillas para elegir, nunca tendrás que empezar desde cero a menos que quieras.

Le recomendamos encarecidamente que consulte Tema Astratiene toneladas de plantillas Elementor incluidas llamado Starter Templates que puedes utilizar.

Hay otro punto importante que queremos destacar aquí:

Tanto si eliges Elementor Libre o Elementor ProPro, las tuercas y los pernos del constructor de páginas de Elementor son idénticos. Pro sólo ofrece una funcionalidad más avanzada a través de widgets premium para ayudarle a la derecha de la caja con el marketing, comercio electrónico, diseño, y las integraciones con otras herramientas comunes como MailChimp y Adobe TypeKit.

Fue una gran decisión configurar Elementor de esta manera porque no tienes que volver a aprender nada una vez que estás listo para dar el salto de Elementor Free a Elementor Pro.

5. Cómo utilizar el creador de temas Elementor

Normalmente, cuando algo se hace más fácil de usar, tiene que prescindir de funciones útiles. Afortunadamente, Elementor es un caso especial, fácil de usar e increíblemente versátil, gracias en gran parte a su creador de temas.

Disponible en la versión Pro de Elementor, el constructor de temas cambia las reglas del juego para cualquiera que esté familiarizado con los constructores de páginas, ya que le permite crear encabezados y pies de página personalizadosy otros contenidos dinámicos para su sitio web.

Incluso te permite anular aspectos de tu tema de WordPress, de modo que puedes conservar lo que funciona y realizar los cambios que desees.

¿Por qué necesita contenido dinámico? Bueno, a veces es posible que desee alojar una página de ventas que no tiene un encabezado tradicional y la barra lateral o puede que desee guardar un diseño personalizado de entradas de blog que puedes utilizar cada vez que añadas una nueva entrada.

Las posibilidades son infinitas.

Construir una cabecera/pie con Elementor

¿Listo para crear un encabezado o pie de página personalizado con Elementor utilizando el creador de temas? Así es como se hace

Paso 1. Haga clic en "Plantillas" en el panel de control de WordPress

Después de iniciar sesión en su panel de WordPress, vaya a "Plantillas" en Elementor en el menú lateral.

Elementor templates

Paso 2. Añadir nueva plantilla o importarla

Aquí se crea una nueva plantilla para la cabecera.

Add new Elementor template or import

Si ya has visto una cabecera que te gusta, puedes importarla para utilizarla como punto de partida. Si no, haz clic en "Añadir nuevo".

Aparecerá un cuadro de diálogo que le permitirá elegir el tipo de plantilla, cabecera en este caso, junto con el nombre de su plantilla.

Choose Elementor template type

Nota:

Elementor Free sólo incluye plantillas de sección y página. La versión Pro incluye varias categorías de plantillas adicionales, como widget global, cabecera, pie de página, única y archivo.

Hay muchas formas alternativas de editar la cabecera y el pie de página de WordPress de forma gratuita. Consulta las siguientes guías para obtener más información.

Paso 3. Edite su nueva plantilla

Si este paso te resulta familiar, es porque se trata exactamente del mismo editor que utilizamos anteriormente para crear una página completa. Ahora, se aplica para hacer un encabezado personalizado.

Puedes seguir el proceso para crear tu diseño con diferentes widgets, e incluso imágenes específicas u otros contenidos. Una vez que hayas guardado tu nueva cabecera, podrás acceder a ella fácilmente desde una nueva página.

Elementor template edit screen

Para más información, consulte nuestra guía detallada sobre personalizar la cabecera del sitio web con Elementor.

Construir Páginas WooCommerce Con Elementor

El proceso de creación de un página de producto WooCommerce personalizada es similar a cualquier otra página o sección que puedas construir. ¿Sientes un patrón?

Con su WooCommerce Builder, Elementor admite la posibilidad de crear una plantilla para una sola página de producto. Una vez que crees una nueva plantilla, verás una biblioteca de plantillas llena de bloques o páginas completas que puedes utilizar para tu página de producto WooCommerce.

Tenga en cuenta que esta plantilla WooCommerce tendrá una serie de widgets dinámicos de productos, incluyendo el título del producto, la imagen del producto y el precio del producto.

Puede configurar los detalles de los productos con WooCommerce y utilizar Elementor para mostrar información actualizada de los productos en el front-end.

Así de sencillo.

Lo que le falta al Elementor

A pesar de toda esta flexibilidad, todavía hay algunas cosas que Elementor no puede hacer. Recuerda, Elementor no es un tema - sólo utiliza su constructor de temas para anular ciertas características del tema.

Para tener un control total sobre el tema, recomendamos encarecidamente utilizar Astra Pro y Elementor. Astra le ofrece opciones integradas de encabezado y pie de página, mega menús y mucho más.

Starter Templates para Elementor

Otra gran ventaja de Astra es su colección de Starter Templates listos para importar a Elementor, que incluye tanto opciones gratuitas como de pago.

Por ejemplo, si crear un sitio web para un entrenador de fitness, puede utilizar el plantilla de sitio web de preparador físico de Astra como base sólida y personalizarlo a partir de ahí.

Astra Fitness trainer website

Importar una plantilla Astra Starter es muy fácil.

Sólo necesitas tener instalada la versión gratuita o de pago de Astra Theme, además del Plugin Starter Templates gratuito.

Una vez que haya configurado ambos, puede iniciar sesión en el panel de control de WordPress y navegar hasta Apariencia > Plantillas de inicioy seleccione el sitio web que desea importar.

A continuación, podrás realizar cambios en el sitio inicial directamente en Elementor.

Para más información, consulte este tutorial detallado de importación de plantillas Astra starter.

Ultimate Addons for Elementor

Además de estas plantillas, tenemos un plugin llamado Ultimate Addons for Elementor que ofrece funcionalidades adicionales que no se encuentran en Elementor.

Va incluso más allá que Elementor Pro al ofrecer widgets avanzados, como la alternancia de contenidos, la ventana emergente modal, la línea de tiempo de contenidos y la tabla de contenidos.

Para un control y una flexibilidad máximos, merece la pena echar un vistazo a Ultimate Addons for Elementor!

6. Cómo construir plantillas con Elementor

Puede crear plantillas para todo tipo de secciones y páginas, incluidas:

  • Página
  • Cabecera
  • Pie de página
  • Puesto único
  • Archivo del blog
  • Páginas de productos

Para este ejemplo, vamos a trabajar con la plantilla post/página.

Construir una plantilla de página con Elementor

En Elementor, tanto la página como el post están cubiertos por la "plantilla de página". Se trata de una plantilla guardada que puedes utilizar para cualquier nueva página o entrada de blog, lo que te permite mantener la coherencia, incluso con varios miembros del equipo realizando la publicación.

Aún mejor, éste está disponible para todos los usuarios de Elementor, incluso con Elementor Free.

Paso 1. Haga clic en "Plantillas" en el panel de control de WordPress

Después de iniciar sesión en su panel de WordPress, vaya a "Plantillas" en Elementor en el menú lateral.

Elementor templates

Paso 2. Añadir nueva plantilla o importarla

Aquí se crea una nueva plantilla para la cabecera.

En el cuadro de diálogo, elija el tipo de plantilla Página y asigne un nombre a la nueva plantilla.

A continuación, haga clic en "Crear plantilla" para empezar.

Paso 3. Editar la plantilla de página Editar la plantilla de página

Al igual que antes cuando creamos nuestra propia página, aquí utilizarás el mismo editor. Es tan sencillo como crear nuevas secciones, cambiar las columnas y arrastrar diferentes widgets a la página.

Una vez que hayas diseñado una página que te guste, puedes guardarla como plantilla para que sea accesible para cualquiera de tus otras páginas en adelante.

7. Cómo crear ventanas emergentes en Elementor

¿Quieres crear una ventana emergente en Elementor? ¿Tal vez para ofrecer un lead magnet gratuito, hacer un anuncio, captar leads o alguna otra cosa?

Crear una ventana emergente en Elementor es bastante sencillo. Sin embargo, tendrás que actualizar a la versión Pro para crear popups.

Tienes algunas características realmente interesantes con la versión pro, como popups de bienvenida, upsells de productos, popups de intención de salida, y más, así que vamos a seguir adelante y crear un popup simple.

Siga estos pasos para crear una ventana emergente que se active al hacer clic en un botón.

1. Diríjase a Panel de control > Plantillas > Popups > Añadir nuevo.

2. Asigne un nombre a la plantilla y haga clic en 'Crear plantilla'.

Choose Elementor template type

3. Puede optar por crear una plantilla propia o seleccionar una de la biblioteca de plantillas.

Ready made templates

4. Pulse 'Publiqueuna vez que haya terminado. A continuación, guarde y cierre.

5. Ahora, crea una nueva página en Elementor. Y arrastra un widget de botón.

6. En Diseño, seleccione Enlace > Dinámico > Acciones > Ventana emergente.

Choose Elementor popup

7. Vaya a Ventana emergente > Abrir ventana emergente > y selecciona la ventana emergente que acabas de crear.

8. Pulse 'Publique' cuando hayas terminado y echa un vistazo a la página en vivo. Haga clic en el botón para ver su ventana emergente.

Así de sencillo es crear una ventana emergente con Elementor.

8. Cree un sitio web adaptable a dispositivos móviles con Elementor

Cada vez son más los usuarios que visitan los sitios web desde sus dispositivos móviles, por lo que es fundamental que la vista móvil de su sitio web sea perfecta. Como ya se ha indicado, más de 50% del tráfico de su sitio web procede de dispositivos móviles.

Si utiliza el constructor de páginas Elementor, le indicamos algunos pasos para asegurarse de que su sitio web es compatible con dispositivos móviles.

Si prefieres ver cómo se hace, echa un vistazo a este videotutorial sobre la capacidad de respuesta del Elementor.

Elementor te lo pone muy fácil a la hora de personalizar tu sitio web para diferentes dispositivos.

La regla general es que todas las características editables tienen una configuración específica para escritorio, móvil y tableta. Los ajustes más comunes son el tamaño del texto, el margen y el relleno.

Por ejemplo, como se muestra en la imagen siguiente, busque el icono del dispositivo junto a "Anchura". Este es el caso con casi cualquier elemento que desee personalizar.

Elementor mobile responsive options

Haga clic en el dispositivo para el que desea llevar a cabo la personalización. Una vez seleccionado, sigue adelante y juega con los ajustes en función de tus preferencias.

Por defecto, las imágenes de fondo responden automáticamente. Tienes control total sobre la personalización de las imágenes para adaptarlas a tu dispositivo, incluso hasta el punto de tener diferentes imágenes para diferentes tamaños de pantalla.

¿Sabías que puedes elegir mostrar u ocultar una sección en función del dispositivo? Por ejemplo, si hay una fila de imágenes o texto que quieres ocultar en dispositivos móviles, puedes hacerlo fácilmente.

Sólo tiene que ir a la página Editar Sección > Avanzado > Responsive ficha.

Elementor visibility options

¿Notas una serie de opciones en 'Visibilidad'? Por defecto, la sección está configurada para mostrarse en todos los dispositivos. Si quieres ocultarla, simplemente activa el botón en función de tu dispositivo.

Si bien es posible que pueda ver la sección mientras edita la página, no será visible en la interfaz una vez que publique la página.

Para cambiar la vista de toda la página web, todo lo que tienes que hacer es pulsar en el icono de modo responsive en la parte inferior de tu panel de control Elementor.

Elementor responsive mode

Por defecto, verás la vista móvil.

Choose a device to preview in

Para pasar de un dispositivo a otro, basta con hacer clic en el icono del dispositivo correspondiente en la parte superior. Y para salir de la vista responsive, basta con hacer clic en la "X" de la esquina superior derecha.

¿Fue fácil crear una vista adaptable a dispositivos móviles? ¿Fácil, verdad?

9. Por qué utilizar Elementor

Ahora que ya sabemos cómo utilizar el Elementor, vamos a abordar una pregunta bastante fuera de contexto, pero que se plantea con frecuencia. En primer lugar, ¿por qué debemos utilizar Elementor?

Antes de entrar en más detalles, echemos un vistazo a esta útil infografía que explica algunas de sus ventajas

Por mucha experiencia que se tenga, crear un sitio web puede ser todo un reto. Desde conseguir que la navegación sea perfecta hasta mantener la estética general del sitio web, requiere tiempo y esfuerzo.

Si eres autónomo o diseñador de páginas web, sabrás que con cada nuevo cliente llegan nuevos retos y requisitos específicos.

De hecho, plataformas como WordPress hacen que todo el proceso de desarrollo del sitio web mucho más fácil. Dicho esto, siempre te quedas con ganas de más.

Afortunadamente, existen creadores de páginas de arrastrar y soltar como Elementor que llevan todo el proceso de desarrollo web a un nivel completamente nuevo.

Desde el uso de una serie de widgets y elementos para construir tu página web hasta los impresionantes bloques y plantillas, hay mucho que puedes hacer con Elementor.

Profundicemos en por qué utilizar el plugin de creación de páginas Elementor.

1. Fácil de usar

Crear una página web con Elementor es tan fácil como 1-2-3. Utilizando la función de arrastrar y soltar, sólo tienes que añadir un widget o elemento de tu elección, personalizarlo como quieras y publicar la página. Más sencillo imposible. No necesitas saber codificar ni tener conocimientos de programación.

2. Edición en directo

Elementor es un editor WYSIWYG (What You See Is What You Get). Con la vista previa en tiempo real, puede ver exactamente cómo queda su página después de actualizarla, en lugar de publicarla y tener que rehacerla si no ha quedado como quería.

3. Activos potentes e impresionantes

Elementor widgets

Con más de 90 increíbles widgets (también denominados bloques) y más de 300 plantillas de diseño, podrás dar rienda suelta a tu imaginación mientras creas tus páginas web, páginas de destinowidgets, pop-ups y mucho más. Desde titulares a botones, pasando por iconos de redes sociales, galerías y carruseles, hay un widget para casi cualquier función que quieras añadir a tu sitio web.

4. Diseño receptivo

Con más de 50% de tráfico web procedentes de dispositivos móviles, es imperativo que consiga que la vista móvil de su sitio web sea perfecta.

Con Elementor, puede previsualizar y personalizar fácilmente sus páginas para dispositivos de sobremesa, móviles y tabletas. Solo tienes que cambiar la vista y ajustar cada elemento para que se vea perfecto en cualquier dispositivo.

5. Fuentes y colores globales

Defina sus opciones de fuentes y colores en todo su sitio con un solo clic. Desde los títulos, los párrafos e incluso el texto de los botones, define tu marca una sola vez y aplícala a todos los elementos de tu sitio.

6. Plantillas prefabricadas

Con el Astra plantillas de sitios web realmente no necesita otra alternativa. Hay una plantilla preparada independientemente del nicho en el que te encuentres.

Si busca más opciones, puede tener en cuenta la impresionante gama de plantillas de la que presume Elementor. Así que incluso si usted es un principiante en el diseño de páginas webAstra y Elementor tienen todo lo que necesitas.

7. Crear efectos de animación avanzados

¿Le encanta incorporar animaciones a su sitio web? Ya sabe, ¿esos efectos de paralaje, conseguir que los textos destaquen creando un efecto 3D, o incluso un efecto lottie? Elementor le permite hacerlo fácilmente.

8. Alta seguridad

Con actualizaciones periódicas, Elementor garantiza que su sitio web está en buenas manos. Cumplen totalmente las normas de seguridad de WordPress y eliminan cualquier contenido malicioso cuando es necesario.

9. Más de 50 idiomas

Con integración RTL y soporte multilingüe, Elementor está disponible en varios idiomas. Utilice la plataforma en su idioma preferido.

10. Integración perfecta con los plugins de WordPress

Que así sea WooCommerce, LearnDash, Yoast SEO, MemberPressy muchos más, Elementor es compatible con los plugins más populares de WordPress.

11. Fuente abierta

Aunque esto requerirá un poco de programación por tu parte, tienes acceso completo al código fuente de Elementor. Puedes mejorar las capacidades de Elementor añadiendo tus propias funcionalidades y CSS personalizados.

12. Historial de revisiones

Si llevas un tiempo programando o incluso utilizando Google Docs, estarás de acuerdo en que la función de deshacer y rehacer es una gran bendición. Tanto si has borrado una sola línea de código como un bloque entero de código, con deshacer puedes volver al punto de partida.

Con el historial de revisiones de Elementor, se puede seguir fácilmente todo el proceso de creación de páginas.

13. Sin Shortcodes

Aunque no vemos ninguna razón para que abandones Elementor, en caso de que desees cambiar a una alternativa, tu sitio web seguirá funcionando. Como en el caso de algunos creadores de páginas, no estás bloqueado por los shortcodes cuando utilizas Elementor.

14. Comunidad Activa

Elementor community

Con Elementor, no estás solo. Debido a la enorme popularidad del plugin Elementor, existe una comunidad cada vez mayor a la que puedes conectarte.

Tienes la oportunidad de aprender constantemente y conocer nuevas herramientas, ideas de diseño y mucho más. Por no mencionar que la comunidad está ahí para apoyarte si necesitas ayuda, sugerencias e ideas para crear un sitio web increíble.

15. Gratis

Por último, pero no por ello menos importante, puedes empezar a utilizar Elementor de forma totalmente gratuita. Si bien hay una versión profesional, como se mencionó anteriormente en el artículo, la versión gratuita debe hacer muy bien.

10. Ventajas e inconvenientes de utilizar Elementor Page Builder

Como todo, el Elementor tiene sus pros y sus contras. Aunque los pros superan a los contras, los hemos enumerado aquí para ti.

Ventajas de Elementor Page BuilderDesventajas de Elementor Page Builder
Interfaz sencilla e intuitivaNecesitas actualizar a la versión Pro para obtener asistencia
Constructor de páginas de arrastrar y soltarSin opción de precio de por vida
Personalice fácilmente las páginas para distintos dispositivos (ordenadores de sobremesa, móviles, tabletas)Casos de carga lenta de páginas
Previsualizaciones en vivo y en tiempo real durante la edición
Más de 90 widgets, más de 300 plantillas y varios bloques para elegir
Perfecta integración con herramientas de terceros
Seguro con actualizaciones periódicas
Cree temas personalizados, atractivas ventanas emergentes y animaciones
Compatible con todos los temas
Se integra perfectamente con WooCommerce
La versión gratuita funciona muy bien

Reflexiones finales

Hemos cubierto mucho terreno con este tutorial de WordPress Elementor.

En cuanto a las principales conclusiones, espero que entiendan por qué Elementor es un fantástico constructor de páginas que elimina muchas de las conjeturas del diseño web. Consigue un equilibrio ideal entre facilidad de uso y funcionalidad, por lo que es uno de los constructores de páginas más accesibles disponibles para WordPress.

También espero que se acuerden de dar Astra un vistazo como su tema de WordPress para emparejar con Elementor. Astra es ligero, rápido e increíblemente flexible, y añade funciones complementarias a Elementor para que puedas crear cualquier cosa que tu mente sueñe.

Gracias por leernos. Esperemos que este post le ha dado un gran punto de partida para el éxito con Elementor. Si tienes alguna pregunta o comentario, ¡compártelo con nosotros a continuación!

Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.

6 comentarios
  1. Celeste Profile Pic

    Hola, novato en WP pregunta. Estoy usando Astra y Elementor. Cuando estoy en mi tablero de instrumentos y haga clic en personalizar su sitio se abre el sitio en Astra sin darme la opción de utilizar Elementor. He visto en algunos vídeos de YT que algunas personas tienen la opción "Personalizar con Elementor" en la parte superior de su panel de control. ¿Hay algún lugar en el que tenga que seleccionar eso en el salpicadero para que sea visible? En este momento la forma en que estoy abriendo Elementor es por el desplazamiento hacia abajo en mi tablero de instrumentos a la Elementor Visión general y haga clic en mi última versión que se guardó. Gracias por cualquier sugerencia.

    1. Team Astra Profile Pic

      Hola Celeste,

      Probablemente este problema se deba a que no se ha habilitado el posttype de las páginas en la configuración del Elementor.

      Compruebe esto Tema de apoyo o esto artículo de Elementor.

      Espero que te sirva de ayuda. No dude en ponerse en contacto con el equipo Elementor si tiene alguna preocupación específica durante el uso de Elementor 🙂.

  2. Linda Profile Pic

    Estoy construyendo mi primer sitio web con versiones gratuitas de Astra (usando una plantilla) y Elementor. Sigo teniendo problemas con las fuentes que cambian en medio de un párrafo, por ejemplo, si intento cambiar el tamaño, sólo cambia una parte. Luego no puedo volver a cambiarla para que el párrafo sea uniforme.
    ¿Podría haber un conflicto entre la plantilla (Online Coach) y Elementor? Gracias.

  3. Gopika Profile Pic

    Sin darme cuenta importé el mismo diseño dos veces. Ahora en mi sección de cabecera tengo todo duplicado. ¡¡¡¡No sé cómo quitar las cosas de más y volver a la normalidad!!!! ¡Realmente desconcertado.....!

Deja un comentario

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

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

La descarga está a un solo clic

Download Checklist

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio