Cómo usar Elementor: Guía definitiva para principiantes

Publicado: 2022-03-08

Si miramos hacia atrás en la última década, crear un sitio web, sin ofender a nadie, fue una pesadilla. Para construir un sitio web, las personas tenían que aprender al menos un lenguaje de programación, un marco, un sistema de administración de bases de datos y otras cosas técnicas. Además, la tarea de creación de sitios web estaba disponible solo para desarrolladores con altas habilidades de codificación.

¡Aquellos días se han ido! Después de la disponibilidad de WordPress y sus populares creadores de páginas como Elementor, la creación de un sitio web se ha convertido, sin duda, en una tarea de todos. Ahora incluso usted puede crear un sitio web usando WordPress y Elementor, sin importar si es abogado, maestro, estudiante o empresario sin conocimientos de codificación.

Todo lo que necesitas es pura determinación, perseverancia y la mentalidad de crear algo asombroso. Ahora la pregunta del millón es: ¿sabes cómo usar Elementor en WordPress?

¡No me des esa mirada! Si no lo sabe, comencemos juntos a partir de ahora buscando pautas de este artículo. Como es un artículo sobre Elementor que toca cada sección y configuración de Elementors. ¡Entonces empecemos!

Tabla de contenido

  • Familiarízate con Elementor
  • Qué hace que Elementor sea el creador de páginas más popular para WordPress
  • Presentamos el Panel de Elementor
  • Cómo usar Elementor con WordPress
  • Cómo usar las funciones avanzadas de Elementor
  • Pros y contras de usar Elementor Page Builder en su sitio de WordPress
  • Los mejores complementos de Elementor de terceros para mejorar su diseño
  • Tutorial gratuito: cree su sitio web de comercio electrónico con Elementor y Happy Addons
  • Preguntas frecuentes sobre Elementor
  • A ti

Familiarízate con Elementor

Get Familiar with Elementor

Elementor tiene una gran cantidad de características y funcionalidades. Como principiante, al principio, debe saber estas cosas; de lo contrario, trabajar con Elementor puede parecerle difícil.

Conozca las características básicas de Elementor

Elementor le permite crear cualquier cosa, desde sitios web completos hasta páginas de destino específicas. Puede diseñar páginas de ventas, páginas promocionales e incluso formularios personalizados. Si puedes imaginarlo, esta plataforma puede ayudarte a diseñarlo.

Para permitirte hacer esto, Elementor viene con;

  • Generador de temas: el generador de temas lo ayuda a diseñar cada una de las partes de su sitio, como encabezado, pie de página, página del producto y más, directamente desde el Editor.
  • Popup Builder: lo ayuda a crear ventanas emergentes que se destacan y son completamente consistentes con el resto del diseño de su sitio.
  • Más de 80 widgets: cada widget en Elementor ofrece una personalización de diseño avanzada para que no necesite instalar complementos adicionales para realizar su diseño.
  • Más de 100 plantillas prediseñadas y más de 300 bloques: puede elegir entre más de 100 plantillas de WordPress de página completa y 300 bloques para enriquecer su diseño en unos momentos.

Elementor Gratis vs Elementor Pro

Es obvio que Elemento Pro ofrece más widgets, bloques prefabricados, plantillas y funciones premium. Sin embargo, solo con la versión gratuita de Elementor, es posible crear un sitio web desde cero.

Elementor Gratis Elementor Pro
El creador de sitios web de arrastrar y soltar n.º 1
Más de 40 widgets básicos
Más de 50 widgets profesionales No
Creador de temas No
Generador de ventanas emergentes No
Efectos de movimiento, incluidos efectos de ratón y paralaje No
Soporte VIP, incluido chat en vivo No
Creador de formularios visuales + Integraciones de marketing populares No
WooCommerce Builder + Más de 15 widgets de tienda No

Como principiante, nuestra recomendación es probar Elementor gratis primero, luego optar por Elementor pro si es realmente necesario para usted.

Qué hace que Elementor sea el creador de páginas más popular para WordPress

How to use Elementor in WordPress

Elementor es un generador de páginas de arrastrar y soltar para WordPress. Este complemento lo ayuda a crear hermosas páginas usando un editor visual. Este complemento de WordPress es una solución todo en uno que le permite controlar cada parte del diseño de su sitio web en una sola plataforma.

Básicamente, Elementor es inmensamente popular porque permite a las personas sin conocimientos técnicos diseñar sitios web que se ven tan hermosos como los creados por profesionales.

El uso de Elementor para crear sitios web hará lo siguiente:

  • Ahorre tiempo y ayúdelo a diseñar e iterar más rápidamente en sus sitios web.
  • Le permite integrar widgets de terceros para que pueda crear un sitio web más integral y completo para brindar a sus visitantes una experiencia en línea positiva.
  • Reduzca la complejidad de sus sitios web, elimine errores y cree un proceso de mantenimiento más fácil cuando se trata de actualizaciones y pruebas.
  • Ahorre dinero y simplifique los costos para que pueda determinar mejor el precio de un proyecto.

Para los desarrolladores de WordPress, sigue siendo una plataforma de primera elección con optimización de secuencias de comandos, atributos personalizados y versiones revertidas.

Para comprenderlo mejor, hemos hecho una comparación entre los principales creadores de páginas de WordPress. ¡Vamos a ver!

Elementor vs Divi vs Beaver Builder – Tabla comparativa

Además de Elementor, hay algunos creadores de páginas de WordPress populares disponibles. Entre esos creadores de páginas, Divi y Beaver son los competidores más duros para Elementor. Es por eso que hemos creado una tabla de comparación para averiguar si Elementor es mejor que esos creadores de páginas.

Elementor divide Castor
¿Versión gratuita? No
Precio inicial para Pro $49 $89 $99
¿Constructor visual?
Elementos Oficiales 53 46 31
¿Edición en línea? No
Plantillas prefabricadas 300+ 110+ 50+
Características unicas Incrustar en cualquier lugar Pruebas A/B Tema de castor
Instalaciones activas de la versión gratuita 5M+ N / A 300K+
Calificaciones de usuarios 4.8/5 (5.7k+ Calificaciones) N / A 4.8/5 (350+ Calificaciones)

Después de analizar la tabla de comparación, ¿qué creador de páginas crees que es mejor para un principiante? Es Elementor, ¡verdad! Es por eso que elegimos Elementor sobre otros creadores de páginas populares. Entonces, es hora de familiarizarse con el generador de páginas de Elementor.

Presentamos el Panel de Elementor

Elementor dashboard

Para acceder al panel de control de Elemnetor, al principio, necesitamos instalar Elementor en nuestro sitio de WordPress. Instalar Elementor es tan fácil como un pastel. Siga los pasos a continuación para instalar y activar Elementor en unos momentos.

¿Cómo instalar y activar Elementor en WordPress?

  • Paso 01: vaya a su panel de WordPress> Complementos> Agregar nuevo
Install Elementor
  • Paso 02: escriba "Elementor" en el cuadro de búsqueda y busque Elementor en el resultado de la búsqueda. Luego haga clic en el botón Instalar .
Search and install Elementor
  • Paso 03: finalmente, haga clic en el botón Activar para activar y usar Elementor.
Activate Elementor

Configuración de elementos

Después de activar el generador de páginas Elementor, se dirigirá a la interfaz que se muestra a continuación. O vaya a su tablero de WP> Elementor , para obtener esta interfaz.

Configuraciones :

Elementor settings
  • General: en la pestaña General de la configuración de Elementor, podrá seleccionar los tipos de publicaciones que planea usar, así como deshabilitar los colores y fuentes predeterminados.
  • Estilo: encontrará opciones que incluyen la configuración de fuentes genéricas predeterminadas, puntos de interrupción para tabletas y dispositivos móviles, así como una casilla de verificación para habilitar Lightbox de imagen.
  • Avanzado: Encontrará la opción para configurar el método de impresión CSS, cambiar el método de carga al solucionar problemas del servidor y habilitar la compatibilidad con SVG.

Administrador de funciones :

Role Manager
  • Diferentes tipos de usuarios pueden tener diferentes niveles de acceso a su sitio web, dependiendo de su función. Si tienes la versión Pro, también puedes limitar el acceso de los usuarios solo al contenido.

Herramientas:

Elementor tools
  • General: las herramientas generales le permitirán regenerar el CSS en su sitio web y sincronizar su biblioteca de Elementor manualmente si es necesario.
  • Reemplazar URL: la pestaña Reemplazar URL es un lugar donde puede, como su nombre indica, reemplazar las URL si cambió la dirección del sitio.
  • Modo de mantenimiento: en la pestaña Modo de mantenimiento, obtiene todos los controles sobre el modo de mantenimiento del sitio web que necesitará.
  • Font Awesome: te permite acceder a más de 1500 increíbles iconos de Font Awesome 5 y disfrutar de un rendimiento más rápido y flexibilidad de diseño.

Panel de Elementor

  • Para obtener acceso al panel de control de Elementor, vaya a Panel de control de WordPress > Páginas > Agregar nuevo .
  • Luego, ingrese un título de página y seleccione la opción Elementor Canvas en el menú desplegable de la plantilla del lado derecho.
  • Finalmente, haga clic en el botón " Editar con Elementor " y comience a trabajar con el creador de páginas más poderoso.
How to use Elementor canvas
  • Sin embargo, si desea editar una página emocionante con Elementor, vaya a Todas las páginas> Pasar el cursor sobre una página .
  • Luego aparecerá un botón “ Editar con Elementor ”. Ahora, haga clic en el botón y comience a editar su página.
Edit with Elementor

Aquí lo tienes. Nuestro tan esperado Tablero de Elementor . Vamos a dar un paseo en él.

Elementor interface

Esta es la interfaz donde puede diseñar su página con elementos de arrastrar y soltar y ver la vista previa en vivo de su sitio.

  • En la parte superior izquierda encontrará un ícono de hamburguesa para algunas configuraciones predeterminadas y globales.
  • En la parte superior derecha, encontrará un botón de marcación para volver al panel principal
  • Después de eso, aparece un cuadro de búsqueda para encontrar rápidamente los widgets enumerados y requeridos
  • Encontrará todos los módulos útiles en el panel izquierdo
  • En la parte inferior, encontrará algunos iconos útiles para la configuración de la página, la navegación rápida, el historial, el modo receptivo y la vista previa.
  • También aquí obtendrá un botón Publicar para vivir su página o guardar borrador/plantilla para usar más tarde.

Además, puede hacer que el panel del módulo desaparezca haciendo clic en el signo de flecha que aparece en el lado derecho del panel.

De esta manera, obtendrá una vista previa completa de su página.

Punto de bonificación: puede mejorar su experiencia con Elementor utilizando herramientas de terceros como HappyAddons

Happy Addons active installations

Elementor es un poderoso creador de páginas para WordPress, sin duda. Sin embargo, para hacerlo más potente y brindarle flexibilidad adicional al diseñar su sitio web, los complementos de terceros desempeñan su papel.

HappyAddons es un complemento de terceros que puede ayudarlo a crear diseños futuristas y del siguiente nivel. Con más de 200 000 instalaciones activas, HappyAddons es uno de los complementos más populares que funciona a la perfección con Elementor. viene con,

  • Más de 100 widgets
  • Más de 200 bloques prefabricados
  • Copiar y pegar entre dominios
  • Anidamiento ilimitado de secciones
  • Enmascaramiento de imagen
  • Efecto de partículas felices
  • Icono de más de 500 líneas
  • Igualdad de Altura, y muchos más

Usando HappyAddons con Elementor, puede darle a su sitio un aspecto premium en muy poco tiempo.

Déjame saber más sobre HappyAddons

Cómo usar Elementor con WordPress

Ways to use Elementor in WordPress

Como dijimos anteriormente, Elementor viene con un generador de páginas de arrastrar y soltar y un generador de temas. Entonces, ahora aprenderemos cómo usar estos dos constructores y eventualmente crearemos una plantilla usando Elementor.

  1. Cómo usar el generador de páginas de Elementor
  2. Cómo usar el generador de temas de Elementor
  3. Cómo crear una ventana emergente en Elementor

Entonces, básicamente, nuestro tutorial comenzará desde esta sección. Anteriormente conocimos Elementor, ahora vamos a trabajar con él de manera real.

Cómo usar el generador de páginas de Elementor

Para mostrarle cómo usar el generador de páginas de Elementor, ahora vamos a crear una página de inicio para un sitio web de viajes . Siga los pasos a continuación e intente diseñar su propia página de inicio en su editor para aprenderla rápidamente.

Paso 01: Crear una nueva página

  • Vaya a su tablero de WordPress> Páginas> Agregar nuevo
Create new page
  • Dale un nombre a esta página. Aquí lo nombré Página de inicio.
  • Establezca la plantilla predeterminada en " Elementor Canvas ", ya que queremos construir toda la página con Elementor. Puede elegir Elementor Full Width , que le permitirá personalizar toda la página sin el menú.
  • Después de eso, publique la página desde la barra lateral derecha. También puedes guardarlo como borrador.
  • Haga clic en " Editar con Elementor " y será redirigido al creador de páginas de Elementor.
Edit with elementor

Paso 02: elija una plantilla adecuada para la página de inicio de su sitio web de viajes

Elementor viene con muchas plantillas prefabricadas gratuitas y profesionales, ni siquiera necesita crear las páginas desde cero. Simplemente puede elegir una plantilla existente para iniciar su viaje.

  • Haga clic en el botón Agregar plantilla.
Add template
  • Obtendrá un montón de plantillas prefabricadas desde donde puede elegir cualquiera de las plantillas y personalizarlas según sus necesidades.
  • Después de decidir cuál desea usar, haga clic en la opción Insertar .
Insert template

Paso 03: agregue un encabezado a su página de inicio

Después de insertar las plantillas, la página estará lista y podrá personalizarla para usarla en su sitio web de viajes.

  • Comenzaremos agregando un encabezado a la página, que mostrará el nombre y el eslogan de nuestro sitio web. Así es como puede hacerlo simplemente arrastrando y soltando y un poco de estilo.
Add header

El encabezado ayuda a mostrar la identidad de su marca al instante una vez que sus visitantes ingresan a su sitio web. Después de personalizar el encabezado, ahora personalizaremos el cuerpo de la página de inicio.

Paso 04: Resalte las instalaciones de su hotel

Una vez que haya terminado con el encabezado, es hora de diseñar la parte principal de la página de inicio. Esas son las instalaciones del hotel como las que está ofreciendo en su hotel si alguien quiere quedarse en su hotel.

  • Puede cargar cualquier imagen desde su almacenamiento local o puede reemplazar la imagen existente con imágenes ya cargadas desde la sección de medios. Siga el siguiente archivo gif para hacer eso.
  • Puede ajustar la altura, el ancho, la opacidad, el margen, el relleno y todo desde las opciones de edición.
  • Agregar botón, texto, descripción, todo es posible desde la opción de edición.
Add hotel description

Paso 05: agregue un video y un testimonio

  • Puede agregar un video para mostrar cómo es su entorno y cómo las personas disfrutan de su resort cuando están aquí.
  • Añadir un testimonio es una sabia decisión para que la gente sepa cuál es la opinión de tus clientes sobre ti.
Add a video

Paso 06: Agregar un formulario de contacto

  • Agregue un formulario de contacto para que su visitante pueda contactarlo. Establezca sus números de contacto como número de teléfono, correo electrónico o número de Whatsapp en la página de contacto que ayudará a su visitante a llamarlo si tiene alguna pregunta que hacer.
  • También puedes agregar un mapa de Google para que las personas puedan encontrarte de dónde eres.
Add a contact form

Paso 07: Hágalo receptivo en todas las plataformas

  • Asegúrese de que su página responda completamente y se vea correctamente en todos los dispositivos. Para hacerlo, haga clic en la opción Modo de respuesta .
  • Una vez realizada la personalización, haga clic en el botón Actualizar .
Responsive options

Descripción general de nuestra página de inicio

Esta es la vista final de nuestra página de inicio que acabamos de crear. Y así es como puede usar el generador de páginas de Elementor para crear cualquier página, incluida la página de inicio, la página de contacto, la página de características o cualquier otra página al instante.

Homepage

Cómo usar el generador de temas de Elementor

Top Elementor features you should have a look now

El generador de temas de Elementor cambia las reglas del juego para cualquiera que esté familiarizado con los creadores de páginas porque le permite crear encabezados, pies de página y otro contenido dinámico personalizados para su sitio web. ¡Incluso le permite anular aspectos de su tema de WordPress, para que pueda mantener lo que funciona y simplemente hacer los cambios que desea!

En esta sección, le mostraremos cómo puede crear hermosos encabezados con el generador de temas de Elementor.

Nota: el generador de temas de Elementor está disponible para su versión pro. La versión gratuita viene con una función muy limitada.

Paso 01: elige un tipo de plantilla

  • Ve a tu panel de WordPress > Plantillas > Generador de temas .
  • Luego haga clic en el botón Agregar nuevo , o si ya vio un encabezado que le gustó, puede importarlo para usarlo como punto de partida.
Add a template
  • Después de hacer clic en el botón Agregar nuevo, aparecerá una pantalla emergente frente a usted. Allí verá un menú desplegable para elegir un tipo de plantilla.
  • Elija un tipo de templo, aquí estamos eligiendo Encabezado.
  • Entonces ponle un nombre.
  • Y finalmente, haga clic en la opción Crear plantilla .
Choose a templte type

Nota: Elementor Free solo incluye plantillas de sección y página. La versión Pro incluye varias categorías de plantillas adicionales, que incluyen widget global, encabezado, pie de página, único y archivo.

Paso 02: personaliza tu encabezado en Elementor

Puede elegir diseñar su propio encabezado o puede elegir cualquiera de los prefabricados de la biblioteca de plantillas de Elementor.

  • Haga clic en la opción Agregar plantilla para cargar un encabezado prefabricado en su editor.
Elementor theme builder editor

Si este paso le parece familiar, es porque es exactamente el mismo editor que usamos para hacer una página completa anteriormente. Ahora, use esa experiencia aquí para crear un encabezado para su sitio web.

Después de personalizar su encabezado y hacer clic en el botón ' Publicar ', si lo desea, puede establecer las condiciones en las que desea que se muestre su encabezado.

Nota: También puede seguir estos mismos pasos para crear pies de página para su sitio web. Solo asegúrese de elegir 'Pie de página' como su Tipo de plantilla cuando esté diseñando su pie de página usando Elementor Theme Builder.

Cómo crear una ventana emergente en Elementor

Crear una ventana emergente con Elementor es muy fácil. Puede diseñar su ventana emergente con la interfaz visual de Elementor, donde todo es arrastrar y soltar. Su trabajo es cada vez más fácil ya que Elementor también ofrece plantillas emergentes prefabricadas. Simplemente puede seleccionar una plantilla, publicarla y configurar el activador. ¡Eso es todo!

Nota: El generador de temas de Elementor solo está disponible para su versión pro.

Paso 01: Agregar un nuevo archivo

  • Ve a tu panel de WordPress > Plantillas > Ventanas emergentes. Luego haga clic en el botón Agregar nuevo en la parte superior.
Add new popup
  • Asigne un nombre a su ventana emergente y haga clic en el botón CREAR PLANTILLA .
Give popup a name
  • Seleccione una plantilla emergente que desee utilizar. Pase el mouse sobre él y haga clic en el botón Insertar para llevarlo al editor de Elementor.
Choose a popup

Nota: si prefiere crear la ventana emergente desde cero, simplemente puede cerrar la biblioteca de plantillas para abrir el editor de Elementor.

Paso 02: personaliza la ventana emergente

Después de insertar una ventana emergente prediseñada en su editor, es hora de personalizar esa ventana emergente. En el editor de Elementor, puede personalizar la ventana emergente. Puede reemplazar el contenido predeterminado con su propio contenido.

Ya le mostramos cómo personalizar una plantilla de Elementor prediseñada.

Una vez que haya terminado, haga clic en el botón PUBLICAR .

Paso 03: Establecer condiciones de visualización y disparadores

En el siguiente paso, se le pedirá que configure las condiciones de visualización y los disparadores. También hay una opción para establecer reglas avanzadas.

  • Condiciones de visualización: determine en qué páginas aparece la ventana emergente en su sitio web. Puede configurar la ventana emergente para que aparezca en todo el sitio web, páginas específicas, publicaciones específicas, categorías específicas, etc.
  • Disparadores: un disparador es una acción para mostrar la ventana emergente. Elementor admite 6 tipos de disparadores: en la carga de la página, en el desplazamiento, en el desplazamiento al elemento, al hacer clic, después de la inactividad, intento de salida en la página.
  • Reglas avanzadas: se deben cumplir los requisitos para que aparezca la ventana emergente. Por ejemplo, puede configurar la ventana emergente para que aparezca si un visitante llega a su sitio web a través de un motor de búsqueda o cierta UR. Elementor Popup Builder tiene 7 opciones de reglas avanzadas entre las que puede elegir.

Si desea mostrar la ventana emergente cuando un usuario hace clic en un botón , abra la pestaña Activadores y active la opción Al hacer clic . Luego haga clic en Guardar y CERRAR .

Popup condition

Paso 04: vincula la ventana emergente a una página

Cree una nueva página/publicación y edítela con Elementor (también puede editar una existente).

  • Agregue un widget de botón arrastrándolo desde el panel izquierdo al área del lienzo. O bien, si está editando una página existente que ya contiene un botón, haga clic en el widget Botón para convertirlo en un modo de edición.
  • En la opción Botón en la pestaña Contenido , establezca el enlace en Emergente . Para hacerlo, puede hacer clic en Dinámico en la sección Enlace .
Button popup
  • Haga clic en el icono de llave inglesa en el campo Ventana emergente y seleccione la ventana emergente que acaba de crear. Escriba el nombre de la ventana emergente para encontrar su ventana emergente.
Link popup

Haga clic en Publicar/Actualizar una vez que haya terminado de editar la página.

Antes de hacer clic en el botón Publicar/Actualizar , primero puede obtener una vista previa de su página para ver si la ventana emergente ya funciona.

Cómo usar las funciones avanzadas de Elementor

How to Use Advanced Features in Elementor

En esta sección, nos centraremos principalmente en dos temas diferentes. Ellos son,

  • Cómo personalizar la página de productos de WooCommerce en Elementor
  • Cómo importar una plantilla de Elementor desde un archivo JSON

Así que pongamos la pelota en marcha.

Cómo personalizar la página de productos de WooCommerce en Elementor

Antes de que pueda personalizar la página de su producto WooCommerce, deberá instalar y activar WooCommerce en su panel de control de WordPress. También deberá agregar algunos productos a su sitio web. Para hacerlo, puede buscar ayuda en esta guía de configuración de WooCommerce (paso a paso).

Después de la configuración, puede diseñar la página de su producto. Sigue estos pasos.

Paso 1: Cree la plantilla de producto único

  • En su tablero de WordPress, vaya a Elementor > Mis plantillas .
  • Haga clic en el botón Agregar nuevo .
  • Elija Producto único como su tipo de plantilla y haga clic en Crear plantilla .
Create a single product template

Paso 2: elija una plantilla de página de producto prediseñada o cree una desde cero

  • Se cargará la biblioteca de Elementor.
  • A continuación, elija una plantilla de página de producto prediseñada o cree una desde cero.
  • Si elige una plantilla de página de producto prefabricada, personalícela según sus habilidades de diseño (ahora tiene la experiencia para personalizar un diseño, ya que le mostramos cómo personalizar una página justo antes de esta sección).
Choose a Pre-Designed Product Page Template

Paso 03: agregue diferentes widgets de productos para personalizar su página

  • Ahora es el momento de construir los elementos que conformarán la página de tu producto. Siga la siguiente captura de pantalla para diseñar la página de su producto. Puede agregar o eliminar cualquier widget que necesite.
Add widgets

Paso 04: Publicar la página

  • Cuando esté listo para obtener una vista previa de su página, haga clic en el ícono del ojo en el panel inferior izquierdo.
  • Haga clic en Configuración y luego elija el producto que desea mostrar.
  • Para publicar su página, haga clic en el botón verde Publicar en el panel inferior izquierdo.

Podría parecerse a la imagen de abajo.

WooCommerce page

Cómo importar una plantilla de Elementor desde un archivo JSON

Elementor le permite importar una plantilla desde un archivo JSON. Para permitirle hacer esto, hay dos formas disponibles por ahí. ¡Aprendamos cómo funcionan!

1. A través de la biblioteca de plantillas

  • Haga clic en el botón Agregar plantilla .
Add template
  • Haga clic en el icono de flecha – Importar plantilla .
  • Ahora, haga clic en el botón SELECCIONAR ARCHIVO para seleccionar el archivo JSON que desea importar.
Upload JSON file
  • Puede encontrar la plantilla que acaba de importar en la pestaña Mis plantillas en la biblioteca de plantillas.
Uploaded JSON file

Vuelva a cargar la plantilla haciendo clic en el icono de recarga si la plantilla que acaba de importar no aparece. Pase el mouse sobre una plantilla y haga clic en el botón Insertar para cargarlo en el lienzo de Elementor.

2. A través del Administrador de plantillas

  • Desde su tablero de WordPress, vaya a Plantillas > Plantillas guardadas .
  • Haga clic en el botón Importar plantillas .
  • Luego haga clic en el botón Elegir archivo para seleccionar el archivo JSON.
  • Finalmente, haga clic en el botón Importar ahora para importarlo.
Import template

Estas son las dos formas de importar una plantilla de Elementor desde un archivo JSON. Puede elegir cualquiera de las formas de hacer su trabajo.

Pros y contras de usar Elementor Page Builder en su sitio de WordPress

Pros and cons of Elementor

Es obvio que todo tiene su lado oscuro también. Pero en términos de Elementor, en realidad no es el lado oscuro. En cambio, podemos decir que tiene algunas limitaciones que podrían mejorarse con el tiempo. ¿Que son esos?

Bueno, antes de eso, veamos sus ventajas de un vistazo.

Ventajas de usar Elementor en WordPress

  • ¡Es un complemento gratuito! La mayoría de los usuarios pueden desarrollar completamente sus sitios sin tener que actualizar a la versión pro.
  • Para ser un complemento gratuito, tiene una amplia gama de características. El conjunto de funciones de la versión gratuita rivaliza con muchos complementos pagos.
  • El editor en tiempo real le permite realizar cambios en su sitio y ver lo que sucede en tiempo real, para que no tenga que ir y venir entre varias pantallas.
  • Puede editar y ver múltiples versiones de su sitio, computadora de escritorio, dispositivo móvil y tableta, y realizar cambios únicos en cada una de estas versiones.

Contras de usar Elementor en WordPress

  • Elementor es un editor poderoso, pero con toda la flexibilidad y las opciones de personalización, puede ser difícil hacerlo todo bien.
  • A veces, sus páginas pueden tener capas de diferentes superposiciones de contenido y puede ser difícil y llevar mucho tiempo encontrar el área que desea editar.
  • Si crea su sitio con Elementor, deberá mantener el complemento instalado; de lo contrario, perderá todos los diseños y personalizaciones que haya realizado.

Los mejores complementos de Elementor de terceros para mejorar su diseño

Top 3rd Party Elementor Addons to Enhance Your Design

Los complementos de terceros son la potencia de Elementor. A pesar de que Elementor ofrece más de 80 elementos fantásticos, es muy posible que desee algo aún más avanzado y único. Esta es exactamente la razón por la que los desarrolladores externos han decidido expandir las funcionalidades de Elementor y desarrollar sus propios complementos de Elementor.

Aparte de eso, obtendrá muchos elementos de propósito especial con los complementos, por ejemplo, precios avanzados, equipo, elementos sociales, elementos creativos, elementos de estilo de formulario, cuenta regresiva, etc.

Como resultado, Elementor ahora los reconoce oficialmente como su colaborador al presentarlos en la página oficial de Elementor. Entre ellos, aquí hay una lista de los principales complementos de Elementor de terceros que puede usar mientras diseña su sitio web de WordPress.

  1. Complementos felices: viene con más de 100 widgets y más de 200 bloques para que pueda obtener total libertad para diseñar su sitio web en menos tiempo y con menos presupuesto.
  2. Complementos premium para Elementor: ofrece más de 55 complementos y widgets esenciales de Elementor altamente personalizables, más de 300 plantillas de Elementor prefabricadas que lo ayudan a diseñar un sitio web en menos tiempo con facilidad.
  3. Complementos exclusivos para Elementor: una colección de más de 700 bloques prefabricados y más de 10 plantillas utilizables lo ayudarán a crear sus sitios web en menos tiempo y sin codificación.
  4. PowerPack para Elementor: ofrece más de 60 widgets y extensiones creativos de Elementor para mejorar su experiencia con Elementor.

Estos complementos le brindan la oportunidad de fortalecer el diseño de su sitio web con sus increíbles características y diseños. Además, puedes crear un ambiente especial usando las extensiones de Elementor.

Tutorial gratuito: cree su sitio web de comercio electrónico con Elementor y Happy Addons

Happy Addons for Elementor

Crear un sitio web de comercio electrónico con Elementor es muy fácil. Y al combinar HappyAddons con Elementor, es más divertido diseñar un sitio web. Es algo así como la flexibilidad ilimitada para diseñar según nuestros requisitos. Veamos cómo podemos diseñar nuestro sitio web de comercio electrónico utilizando Elementor y HappyAddons con facilidad.

Estos son los requisitos previos para crear su sitio de comercio electrónico:

  1. Elija su nombre de dominio y plan de alojamiento web
  2. Instalar WordPress y WooCommerce
  3. Instalar Elementor
  4. Finalmente Instale HappyAddons (Gratis + Pro)

05: Elija una plantilla de comercio electrónico

  • Vaya a su tablero de WordPress> Páginas> Agregar nuevo
  • Dale un nombre a esta página.
  • Establezca la plantilla predeterminada en " Elementor Canvas ", ya que queremos construir toda la página con Elementor. Puede elegir Elementor Full Width , que le permitirá personalizar toda la página sin el menú.
  • Después de eso, publique la página desde la barra lateral derecha. También puedes guardarlo como borrador.
  • Haga clic en " Editar con Elementor " y será redirigido al creador de páginas de Elementor.
Create a page for eCommerce site
  • Haga clic en el letrero HappyAddons para agregar una plantilla prediseñada para su sitio de comercio electrónico.
HappyAddons premade design
  • Elija una plantilla prediseñada y haga clic en la opción Insertar .
Choose a pre-designed template

06: Personaliza la plantilla

Customize the premade design

Todo el proceso de personalización es el mismo que se muestra en la sección anterior: Cómo usar Elementor Page Builder. Siga los mismos pasos para realizar su diseño.

Puede cambiar el logotipo, el esquema de colores, los enlaces de navegación, la copia del sitio web y cualquier otra característica que desee. También puede usar los widgets de Elementor y Happy Addons para agregar funcionalidades específicas a su sitio web.

Paso 07: Publicar la página

Una vez que esté completamente satisfecho con el diseño, la interfaz y la funcionalidad de su sitio web, es hora de publicarlo en vivo.

  • Para obtener una vista previa del sitio, haga clic en el icono.
  • Si está satisfecho con el resultado, continúe y haga clic en el botón Publicar/Actualizar.
  • Haga clic en 'Echar un vistazo' para ver la página publicada.
Publish the page

Preguntas frecuentes sobre Elementor

1. ¿Es gratuito Elementor para WordPress?

Sí, Elementor para WordPress se puede descargar y usar de forma gratuita. Y al mismo tiempo, Elementor también tiene su versión pro. Si desea obtener más funciones, widgets, bloques prefabricados y plantillas, deberá comprar su versión pro.

2. ¿Elementor ralentiza su sitio?

Elementor ralentiza su sitio web si elige un mal alojamiento, utiliza archivos multimedia grandes, scripts externos y complementos adicionales. De lo contrario, Elementor no ralentizará su sitio web de WordPress.

3. ¿Elementor funciona con todos los temas?

Sí, Elementor funciona con todos los temas que respetan los estándares de codificación de WordPress establecidos por su Codex.

4. ¿Elementor funciona con otros complementos de WordPress?

Sí, Elementor funciona con todos los demás complementos, incluidos los gratuitos y los profesionales, sin problemas.

5. ¿Cuánto cuesta Elementor Pro?

Elementor Pro viene en 3 planes de suscripción diferentes. Como Personal, Plus y Experto. Le cuesta solo $ 99 si desea una licencia de tres sitios web y $ 199 para una licencia de sitio web ilimitada.

6. ¿Elementor es compatible con SEO?

Elementor es el creador de páginas más compatible con SEO para WordPress. Fue construido con los estándares de código más estrictos y ofrece el mejor rendimiento al crear diseños de página.

7. ¿Quién es el propietario de Elementor?

Yoni Luksenberg. Es el CEO y cofundador de Elementor.

8. ¿Qué sucede cuando expira Elementor Pro?

No podrá crear ninguna página nueva con funciones profesionales si su licencia profesional está vencida. Pero todos sus proyectos existentes permanecerán intactos y las funciones Pro que utilizó en sus diseños anteriores seguirán funcionando como antes.

9. ¿Puedo editar la página de mi blog con Elementor WordPress?

Sí, puedes editar la página de tu blog con Elementor. Necesitarás Theme Builder para editarlo.

10. ¿Puedo crear mi propio tema con Elementor?

Puede diseñar cada parte de su tema individualmente usando las plantillas de Elementor Pro, pero no puede importar y exportar un tema completo que combine todas las partes del tema. Sin embargo, puede importar y exportar cada parte del tema por separado.

A ti

En realidad, usar Elementor en WordPress no es tan complicado. Podría ser más divertido si tiene una guía completa como este tutorial paso a paso.

Simplemente siga esta guía, siga practicando para mejorar y prepare una configuración mental de que será el maestro de Elementor. Eso es todo lo que necesita para usar Elementor y crear un sitio web de WordPress en unos momentos.

Si tiene alguna complicación al usar Elementor, o si tiene alguna sugerencia con respecto a esta guía sobre cómo usar Elementor en WordPress, háganoslo saber a través del cuadro de comentarios a continuación. ¡Buena suerte!

HappyAddons Pro Banner 970X90