Tutorial de Elementor de WordPress | Una guía paso a paso en 2024

Quiere comenzar con Elementor y está buscando un ¿Tutorial de Elementor de WordPress? Tu búsqueda termina aquí. En este artículo, le informaré sobre todo lo que necesita saber sobre Elementor.

Desde instalarlo hasta crear una página con mucho estilo, todas tus dudas quedarán resueltas si lees el artículo. Te lo aseguro; ¡La lectura no será en vano!

Pero necesita un complemento de creación de sitios web para darle un toque profesional a su sitio web.

¿Cómo lo conseguiste? Bueno, yo uso Elementor para eso. Elementor me facilita enormemente la creación de un sitio web profesional con la simple función de arrastrar y soltar. 

Si tienes curiosidad por saber más sobre Elementor, consulta mi artículo detallado. Revisión de Elementor.

Cómo instalar Elementor en WordPress

Bueno, hay 2 formas de instalar Elementor en WordPress. 

• A través del sitio web oficial de Elementor

Dirígete al sitio web oficial de Elementor y haz clic en el botón Descarga gratuita que se muestra en el sitio web. 

Tan pronto como haga clic en el botón Descarga gratuita, aparecerá una ventana emergente para suscribirse al sitio web de Elementor y, una vez que haga lo mismo, el complemento comenzará a descargarse automáticamente.

Encontrará un archivo zip descargado en su computadora portátil/PC. Ahora dirígete a tu panel de WordPress y haz clic en la sección Complementos > Agregar nuevo complemento > Cargar complemento

Elija el archivo Elementor y cárguelo en WordPress.

• A través del panel de WordPress

También puede instalar el complemento Elementor directamente desde el panel de WordPress. Simplemente vaya a Complemento y luego Agregar nuevo complemento

En la esquina superior derecha, encontrará una barra de búsqueda, escriba Elementor en la barra de búsqueda. El primer resultado es lo que necesitas instalar en tu WordPress. Simplemente haga clic en instalar y espere a que se instale el complemento. Active el complemento y tendrá un excelente creador de sitios web listo para implementar.

Ahora que tiene Elementor instalado en su panel de WordPress, echemos un vistazo a las funciones que ofrece.

Funciones de Elementor y su uso en la creación de una página web

La lista de características que ofrece Elementor es interminable, por lo que discutiré muchas características vitales de Elementor. Asegúrate de leerlos y luego probarlos.

Hay dos planes para Elementor The Free y The Pro. Como sugiere el nombre para el plan Pro, tendrás que jugar, pero también hay varias funciones que vienen con su plan gratuito.

Comenzaré analizando primero las funciones del plan gratuito, seguido del plan Pro.

Funciones del plan gratuito de Elementor

Características esenciales:

• Arrastrar y soltar

La función de arrastrar y soltar de Elementor es muy rápida y le ayuda a diseñar páginas web más rápido. Desde crear un diseño de página web hasta realizar ajustes, todo se puede hacer simplemente arrastrando y soltando.

No necesita cambiar de pestaña ni cambiar de página para diseñar sus encabezados y pies de página. Con Elementor, puedes hacerlo en la misma página donde está tu página web principal.

Puedes copiar y pegar, incluso duplicar el estilo o la función que deseas utilizar. Esto le ahorra tiempo para reconstruir la misma característica una y otra vez.

Con la opción de la barra de búsqueda proporcionada por Elementor, puede navegar fácilmente por el sitio web y llegar a la pestaña deseada en segundos. Esta característica es realmente útil cuando tienes que crear una página muy larga.

Hay 3 opciones para guardar su diseño, desde eliminarlo hasta obtener una copia de seguridad. Puedes rehacer/deshacer los diseños que has realizado. Esto le brinda la posibilidad de realizar una especie de prueba A/B de la página con sus observaciones. 

Puede visitar todas las revisiones en la pestaña de revisión, es decir, puede echar un vistazo a todos los tipos de diseños que ha probado hasta ahora en su página web y seleccionar también una versión anterior si no le gusta su página web actual. 

¿Quiere probar muchas funciones diferentes y ver qué funciona? No hay problema con Elementor; puede diseñar la página en modo borrador, probar todo y tomar la página más tarde, cuando esté completamente listo para publicarla.

Cómo utilizar la función Arrastrar y soltar de Elementor

Todas las funciones de arrastrar y soltar están disponibles en el lado izquierdo de la página tan pronto como crea una página.

Después de crear una página en WordPress y darle un título, simplemente haga clic en editar con Elementor, lo que lo llevará al editor en vivo de Elementor, que se parece a la imagen a continuación.

En la segunda imagen de arriba, puedes ver las opciones de arrastrar y soltar en el lado izquierdo de la página. Hay muchos widgets por los que sólo necesitas desplazarte hacia abajo, o también puedes buscar un widget con la ayuda de la barra de búsqueda en la parte superior.

• Plantillas de diseño

Obtienes plantillas de diseño incorporadas con Elementor. No solo 5 o 10, Elementor te ofrece más de 100 plantillas de diseño que son de uso gratuito y más cuando actualizas a la versión Pro.

Cómo seleccionar la plantilla deseada para la biblioteca de plantillas de Elementor

Cuando abra por primera vez la página del constructor Elementor, verá algo como lo que se muestra a continuación:

La imagen está tomada del sitio web de Elementor y se explica por sí misma.

Tan pronto como haga clic en la opción Carpeta, verá una ventana emergente que se muestra a continuación.

• Widgets

Los widgets de arrastrar y soltar que vienen con Elementor son innumerables. Algunos de ellos son:

• Sección Interior: Dividamos una sección en dos.
• Encabezado: coloque este campo en su página web para insertar un encabezado llamativo.
• Imagen: coloque imágenes en su página web con la ayuda de este widget
• Editor de texto: ingrese texto en su página web con la ayuda de un widget de editor de texto
• Vídeo: puede utilizar un widget de vídeo para colocar vídeos de calidad en su página. Aumentará la experiencia del usuario.
• Botón: los llamados a la acción son muy importantes para casi todo el sitio, con botones puede colocar el llamado a la acción en su página y vincularlos a la página de inicio de su producto.
• Calificación por estrellas: la calificación por estrellas es beneficiosa para cualquier sitio web de comercio electrónico para calificar varios productos diferentes que tiene para ofrecer.
• Divisor: ayuda a su página web en la sangría y genera espacios en blanco para aumentar la experiencia del usuario.
• Íconos: con el widget de íconos, puedes colocar íconos llamativos de redes sociales, así como de diferentes servicios, para que tu página se vea más atractiva.
• Contador: cree un temporizador de cuenta regresiva para sus productos o servicios adicionales limitados para crear urgencia.
• Testimonios: agregue testimonios sobre sus productos y servicios para generar confianza con los visitantes de su sitio web.

Aparte de esto, hay muchos otros widgets como carrusel de imágenes, galería básica, pestañas, códigos cortos, HTML, barra de menú, etc. Asegúrese de ver todas las funciones después de instalar el complemento en WordPress.

Eche un vistazo a algunos de los widgets que Elementor tiene a continuación en la imagen.

Cómo utilizar los widgets de Elementor

Para usar los widgets de Elementor:

Dirígete al panel de Elementor y mira en el lado izquierdo de la página. Hay una serie de widgets que puede arrastrar y soltar en su página web y comenzar a trabajar.

• Diseño y edición responsivos

Con la regla de índice móvil primero en el centro de atención, Google se asegura de que el sitio optimizado para dispositivos móviles solo tenga una clasificación más alta en Google, y lo mismo ocurre ahora con otras SERP. 

Con Elementor, no necesita preocuparse por la compatibilidad con dispositivos móviles, ya que todas las plantillas, ya sean gratuitas o de pago, responden tanto a dispositivos móviles como a tabletas y computadoras de escritorio. También puede editar qué funciones verán sus usuarios cuando accedan desde un dispositivo móvil o de escritorio. 

Puedes brindarles diferentes experiencias en ambos dispositivos, aunque esta práctica no es recomendable ya que en ocasiones puede generar confusión en la mente de tus usuarios sobre la marca.

Cómo ver la capacidad de respuesta móvil de sus páginas web

En la parte inferior del creador de páginas web, en la esquina inferior izquierda, verá tres íconos que tienen una opción para ver su página web a través de una computadora de escritorio, tableta y dispositivo móvil. El sitio se verá exactamente igual para otros usuarios después de que publique su sitio web.

Funciones del flujo de trabajo:

• Sin requisitos de codificación

No necesitas ser un experto ni siquiera saber un poco sobre codificación cuando usas Elementor. Todos los widgets mencionados anteriormente se pueden arrastrar y soltar, y con ellos puedes crear fácilmente una página web elegante y de alta gama. 

El propio Elementor se encarga de la parte de codificación. No sólo esto, el código utilizado se optimiza y acorta para reducir el tiempo de carga de su página web, un factor muy importante para posicionarse en la cima.

• Barra de navegación

Con la ayuda de la navegación, puedes ver la estructura que has diseñado en la página web, es decir, la secuencia de tu página y el flujo. También puede cambiar, eliminar y duplicar los widgets si lo desea a través de la barra del Navegador.

Cómo utilizar la barra de navegación

Para usar el Navegador, simplemente haga clic derecho en el backend de su página web abierta con Elementor y haga clic en Navegador. Aparecerá una ventana emergente, como se muestra en la imagen a continuación.

• Teclas de acceso rápido

Las teclas de acceso rápido son teclas de acceso directo al widget principal que está presente en el panel de Elementor. Eche un vistazo a la imagen para ver algunas de las teclas de acceso rápido preestablecidas.

• Función de edición en línea

Con Elementor, no necesita escribir su contenido en otro lugar ni copiar, pegar y editar su estilo. Puede escribir directamente en el panel de WordPress con el estilo deseado y ahorrar su valioso tiempo.

Caracteristicas de diseño

• Fuentes globales

Con la ayuda de Elementor, puedes establecer un estilo de fuente particular para todo tu sitio web con solo un clic. No importa si es un título, un párrafo, una cita o incluso una llamada a la acción. 

• Colores globales

De manera similar, como está configurada la fuente Global, puede establecer el mismo color para todo el texto de su sitio web si es necesario.

• Gradientes de fondo

Con la función de color degradado, puedes iluminar el fondo que configuraste para cada bloque e incluso tu página de inicio. Estos colores degradados se aplican a todas las páginas que tenga en su sitio web.

• Videos de fondo

Puedes usar videos como fondo con Elementor. Los vídeos en segundo plano realmente podrían iluminar tu página web.

Cómo utilizar las funciones de diseño en Elementor

Todas las funciones mencionadas anteriormente se pueden encontrar fácilmente en el panel de Elementor y puede usarlas simplemente haciendo clic y probando lo que se ve bien en su página web.

• Otras características
• Aplicar superposición de fondo
• Poner presentación de diapositivas en segundo plano
• Crea un lienzo para que tu página parezca viva
• Utiliza modos de fusión
• Filtros de estilo CSS
• Divisores de forma
• Sombra de la caja
• Iconos
• Exportar iconos SVG de otros sitios web

Características de diseño

Puede cambiar el diseño de la página web y optimizarla para que se vea bien con varias funciones que Elementor proporciona, como el ancho y alto de la sección, el ancho de la columna, el espacio y su posición.

También puede ajustar los márgenes y el relleno, que es una característica muy importante en una página web. 

Características del plan Elementor Pro

Esenciales

Además de la función gratuita, Elementor Pro tiene 2 funciones más para ofrecer.

1. Creador de ventanas emergentes

Puede crear ventanas emergentes para registrarse, para una oferta por tiempo limitado y también ventanas emergentes con intención de salida para aumentar sus ventas y hacer que su página sea más atractiva.

La función, al igual que otros widgets, está presente en el panel de Elementor.

Con el generador de ventanas emergentes, puede crear las siguientes ventanas emergentes:

• Suscripción de e-mail
• Ventanas emergentes del formulario de inicio de sesión
• Ventanas emergentes de banners de promoción y ventas.
• Captura de plomo
• Bloqueo de contenido y revelación de ventanas emergentes
• Anuncios
• Intención de salida
• Ventanas emergentes tipo tapete de bienvenida
• Producto relacionado y ventas adicionales

2. Creador de temas

Con Elementor Pro, tienes control total sobre todas las funciones que utilizas en tu sitio web. Puedes diseñar las páginas 404 y dirigir a tus usuarios a la página de tu elección. 

Puede administrar el encabezado y el pie de página en la misma página en la que está diseñando. Con la poderosa integración de WooCommerce, también puede optimizar las páginas de sus productos.

Caracteristicas de diseño

1. CSS personalizado

Con cada widget que agregue, puede agregar un fragmento de CSS personalizado para que el contenido sea más personalizado y atractivo. Pero para utilizar esta función, debes tener un conocimiento decente de CSS. 

Usarlo sin ningún conocimiento previo también puede ir mal. Entonces, si no posee el conjunto de habilidades, será mejor que se mantenga alejado de la función CSS personalizado.

2. Efectos de movimiento

Puede agregar excelentes animaciones y darle a su sitio web un estilo de dibujos animados. Esto ayuda a atraer a un público objetivo específico y, en ocasiones, puede resultar muy beneficioso. 

Cómo utilizar la función de diseño en Elementor

Bueno, no es ciencia espacial. Al igual que otros widgets, puede desplazarse por el panel del panel y buscarlos o simplemente escribir el nombre del widget en el panel de búsqueda.

Marketing

Estas funciones son las que están ausentes en la versión gratuita de Elementor.

• Widget de formulario

Con el creador de formularios Elementor, puede realizar varios cambios y hacer que sus formularios sean interesantes y atractivos para completar.

• Elija el diseño que desee y el espaciado con bastante facilidad.
• Más de 10 campos para elegir, que desea en su formulario.
• Elija entre numerosos colores y tipografías que se adapten y combinen con el diseño y la combinación de colores de la página web.
• También puedes crear formularios dinámicos.
• Si necesita un formulario largo con el creador de formularios de Elementor, puede crearlo y dividirlo en varios pasos para que los usuarios lo completen de manera fácil.

• Widget de carrusel de testimonios

• Puede utilizar las plantillas prediseñadas que vienen con la versión Pro de Elementor y crear un impresionante carrusel de testimonios para que su empresa obtenga más conversiones.
• Alinee el contenido y el diseño del carrusel. Tenga control total sobre la apariencia y la alineación del carrusel.
• Las plantillas de personalización proporcionadas en Elementor Pro son fáciles de usar y brindan una experiencia fácil de usar tanto para quien las crea como para quien las ve.

Cómo utilizar el widget de carrusel de testimonios en Elementor Pro

• Busque el control deslizante de testimonios en la barra de búsqueda del panel. Abra el widget y podrá comenzar creando el control deslizante inmediatamente. Hay dos máscaras para elegir: la predeterminada y la burbuja. Elige el que necesites según el estilismo.
• Alinee y finalice el diseño de sus testimonios, lo que se puede hacer mediante 5 opciones Imagen en línea, imagen apilada, imagen de arriba, imagen izquierda e imagen derecha.
• Elija el estilo y el diseño según su combinación de colores y agregue contenido al control deslizante.
• Puede reproducir automáticamente las diapositivas en el control deslizante, pausarlas cuando los usuarios hagan clic en él o establecer un tiempo particular en la opción de cambio de diapositiva. Prefiero usar la pausa en la opción de interacción para mis controles deslizantes de testimonios.
• Enlaces de acción

Puede conectar su sitio web con WhatsApp, Google Calendar y muchas más aplicaciones con Elementor Pro.

Cómo usar enlaces de acción en Elementor Pro

• Visite la Elementor Panel de control y búsqueda de campos de enlace, que es uno de los widgets Pro que tiene Elementor.
• Elija la opción dinámica que está disponible en la esquina superior derecha de la ventana emergente del widget.
• Elija la URL del contacto en la opción de acción.
• Agregue todos los detalles que solicita el widget y estará listo para integrar su plataforma de contacto con su sitio web.

Característica del generador de temas

• Contenido dinámico
• Utilice una integración impecable para crear una excelente página web dinámica.
• Puede agregar colores dinámicos, imágenes, incluso logotipos de sitios web y mucho más a su página web.
• Lo mejor es que puedes guardar el diseño del contenido dinámico que creaste y usarlo en cualquier lugar del sitio web.

Cómo utilizar contenido dinámico con Elementor Pro

Mostraré el ejemplo de cómo usar un editor de texto y hacer que el contenido sea dinámico. Asegúrate de ver todos los demás widgets y pruébalos.

1. Abra un editor de texto y escriba el texto que desee en su página web. Ahora haga clic en el icono en la esquina superior derecha del editor, como se muestra en la imagen a continuación.
2. Cuando haces clic en el icono, verás una lista de opciones que aparecen a través de un menú desplegable. Estos se clasifican en publicación, archivo y sitio. Elija la opción que desee y comience su trabajo de inmediato.
3. Ahora, para editar aún más el título de su página, debe hacer clic en un ícono, que es una llave inglesa, como se muestra en la imagen a continuación.

En los cuadros que se muestran en la imagen de arriba, es decir, antes, después y alternativo, debe colocar el título antes del cambio, un título que debería estar después del cambio y contenido consistente que se mostrará en lugar del contenido dinámico. cuando no hay un antes y un después del título.

Otras funciones del creador de temas en Elementor Pro

• Condición de visualización: puede decidir qué mostrar y dónde mostrar
• Encabezado y pie de página: con solo arrastrar y soltar, puede personalizar el encabezado y pie de página de su página web.
• Encabezado fijo: agregue un encabezado fijo a páginas específicas o para todo su sitio web a nivel mundial.
• Página 404: diseñe una página 404 personalizada y redirija a sus usuarios y audiencia a la página que desee.

Contenido del tema

• Widget de la barra de menú de navegación

• Hay muchas opciones de estilo entre las que puede elegir para su barra de navegación.
• Estos estilos responden a todos los dispositivos y puede verlos en la versión móvil y realizar los cambios necesarios si es necesario.
• Puedes animar tu barra de navegación con animación y efectos de desplazamiento. Realmente ilumina tu página.
• Puede elegir cómo colocar el menú, es decir, horizontalmente, verticalmente, verlo en pantalla completa o tal vez probar la opción de hamburguesa.

Cómo utilizar el widget de la barra de menú de navegación

1. Dirígete al panel y busca la barra de menú.
2. Puede configurar su menú en horizontal, vertical o desplegable según el estilo que se vea bien con su sitio web.
3. También puede agregar líneas simples y dobles debajo de cada contenido del menú para resaltar e incluso cambiar el color del texto a través del tablero.

• Widget de búsqueda

El widget de búsqueda viene con tres máscaras: el widget de búsqueda predeterminado, mínimo y de pantalla completa.

Puede modificar el diseño de la barra de búsqueda y el botón para que coincidan con el estilo de su página web.

Cómo usar la barra de búsqueda con Elementor Pro

Dirígete al panel de Elementor y busca el widget de la barra de búsqueda, elige el estilo que desees, predeterminado, pantalla completa o mínimo, y cambia la tipografía y los colores de la barra de búsqueda para que coincidan con tu tema de color.

• Otras funciones de contenido del tema que obtienes con Elementor Pro

• Widget de publicación: modifique el aspecto de la barra lateral colocando allí sus publicaciones recientes.
• Widget de comentarios de WordPress: con este widget, los lectores pueden comentar sobre la publicación que has escrito.
• Widget de cartera: si tiene muchas carteras para mostrar, utilice este widget de cartera para mostrarlas con un estilo innovador y atractivo.

Todas estas funciones están disponibles en el panel principal de Elementor, similar a otros widgets. Asegúrate de echar un vistazo a todas estas funciones.

Precios de Elementor Pro

Comentario de usuario 

Quick Links:

• Tutorial de Elementor Pro
• MEJORES COMPLEMENTOS DE ELEMENTOR
• Ancla del menú de Elementor
• Duda y Elementor

Preguntas frecuentes sobre el tutorial de WordPress Elementor

Además, lea:

• Castor constructor vs Divi
• Constructor de castores contra Elementor

Conclusión: Tutorial de WordPress Elementor 2024

Uno de los principales software de diseño de páginas web, Elementor, es una plataforma confiable y vívida para crear su sitio web. Desde crear una página de blog básica hasta crear una página de inicio de producto elegante e impresionante, todo se puede hacer con Elementor.

La versión Pro de Elementor tiene infinitas funciones con las que trabajar y llevar su sitio web a un nuevo nivel. También le brinda la libertad de tener control total de su sitio web.

No es necesario ser codificador para utilizar Elementor. Usar Elementor es tan simple como aprender a hacer clic, arrastrar y soltar funciones.

Sí, lleva un poco de tiempo ver todas las funciones y saber qué funciones son útiles para su sitio web, pero el tiempo que dedique a Elementor valdrá la pena, se lo puedo asegurar.

Entonces, prueba Elementor y cuéntame tu experiencia comentando a continuación. 

Elementor Vídeos populares

Elementor en las redes sociales

Cumbre de creadores de páginas 2021 (@cumbre_camp) comienza mañana! Obtenga su entrada GRATUITA y hable con más de 35 expertos de la industria, incluidos @bpines1 . Emocionado de patrocinar este gran evento. ¡Te veo allí! 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elementntor) 9 de mayo de 2021

Hazte a un lado y dale la bienvenida a nuestro escaparate de abril de 2021. 🏆🌷 Este mes aplaudimos a 10 agencias de diseño de todo el mundo. Esta colección diversa representa el talento de creación web de Elementor en todo el mundo. 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elementntor) 19 de mayo de 2021