Tutorial Elementor PRO 2020 – Comparativa y como descargar GRATIS

El diseño de un sitio web con un aspecto profesional no se dio a todo el mundo, especialmente todos teníamos la impresión de que era absolutamente necesario ser un profesional en la codificación y diseño web.

Hoy en día, vemos nuevas herramientas que están surgiendo para el ecosistema de WordPress, para proporcionar una solución cada vez más simple para diseñar un sitio web y esto al alcance de los más principiantes.

En cuanto al diseño de layouts en WordPress, ya tuvimos que presentar el plugin Visual Composer que es sin duda una de las mejores herramientas en el diseño de layout.

Cabe señalar, sin embargo, que esta solución no es adecuada para todos. Esta es la razón por la que en este tutorial te presentaremos más el plugin de WordPress Elementor que es un plugin gratuito de WordPress (gratuito, pero extensible bajo suscripción).

No importa si acabas de empezar a construir tu blog o si eres un veterano – siempre es una buena idea aprender sobre las nuevas herramientas que podrían hacer el proceso más fácil, rápido e interesante.

Hay un gran conjunto de estos instrumentos en mi caja de herramientas, pero esta vez me gustaría contarles cómo usar Elementor Theme Builder.

Si estás usando WordPress para tu blog debes haber notado que personalizarlo a través del clásico panel de control administrativo no es muy conveniente, y aunque el nuevo editor de Gutenberg es genial, todavía hay muchas cosas que otros creadores de páginas pueden hacer que Gutenberg no ha hecho todavía (pero más sobre eso más adelante).

¿Qué es Elementor Page Builder?

Aquí tengo que empezar por definir qué es un creador de páginas. ¿Has jugado alguna vez con LEGO? Estoy seguro de que al menos has oído hablar de él. ¿Quién no lo ha hecho? ?

Un constructor de páginas es como una caja de piezas de LEGO que puedes usar para crear cualquier tipo de página.

Cuando usas el clásico dashboard de WordPress no puedes ver el resultado mientras estás trabajando, necesitas hacer clic en el botón «Preview» para ver cómo se ve la página. Los creadores de páginas fueron creados para superar eso – te dan la oportunidad de ver los cambios tal y como los haces.

Toda la manipulación de la apariencia del artículo se realiza con elementos de arrastrar y soltar. Para decirlo de forma sencilla, construye la página o el post a partir de elementos y luego personalízalos para crear una página de gran apariencia.

Hay muchos constructores de páginas diferentes ahora: BeaverBuilder, Novi Builder, y como se mencionó, incluso WordPress ahora tiene su propio constructor nativo llamado Gutenberg. Puedes decir: «Oye, si WordPress ya tiene un creador de páginas, ¿por qué instalar otra cosa?». Esa es una pregunta justa, y aquí está mi respuesta un tanto tendenciosa…

Me encanta usar Elementor, ¡y eso es todo!

Lo usé antes de que el equipo de WordPress lanzara Gutenberg y prefiero seguir usando el constructor de páginas Elementor en la mayoría de mis sitios. Hay docenas de complementos útiles para ello en el mercado Elementor y su instalación realmente expande las opciones disponibles. Usted, por supuesto, puede probar otros constructores, pero como yo, personalmente, soy un fan de Elementor, lo usaré como un ejemplo de las ventajas de los constructores de páginas.

Por qué me encanta Elementor sobre otros creadores de páginas

Sí, me acostumbré a Elementor, pero no es la única razón por la que me gusta. Tiene un montón de profesionales:

• Es gratis: Hay una versión de pago de Elementor Pro y tiene sus ventajas, pero el plugin principal es completamente gratuito. Puede descargarlo, instalarlo y usarlo sin necesidad de otros complementos y sigue teniendo una gran funcionalidad. Especialmente importante para los principiantes que no tienen un gran presupuesto!
• Fácil de usar: La interfaz es simple, es fácil de entender cómo utilizar los widgets, la interfaz es muy fácil de usar.
• Bien documentado: Los principiantes siempre cometen errores, es normal y si tienes algún problema puedes encontrar la solución en las instrucciones.
• Es un plugin, no un tema: Algunos creadores de páginas son en sí mismos un tema que usted puede pensar que es una ventaja en algunos aspectos
• Tiene un montón de tutoriales: Hay docenas de tutoriales en vídeo sobre cómo usar Elementor. Casi todos los widgets tienen un artículo de «cómo hacerlo». Por ejemplo, aquí hay un vídeo que describe el proceso de instalación de plantillas de Elementor:

Estas son las ventajas para los principiantes, los desarrolladores web experimentados saben que hay otros profesionales en Elementor. Si estás interesado – echa un vistazo a este artículo, hay un montón de comentarios de diferentes personas allí.

Dónde conseguir Elementor para WordPress

Estamos considerando seriamente conseguir que usted vea el potencial del plugin, y la solución gratuita le ayudará a empezar sin tener que pagar un centavo. Esta solución gratuita está disponible en WordPress.org. Al ser un plugin de WordPress, se instala como cualquier otro plugin.desde el tablero de instrumentos;

Si el plugin logra satisfacerte completamente, puedes obtener la licencia completa con todas las características de la versión premium de Elementor en su página oficial.

Características principales de Elementor

Antes de comenzar el tutorial con una presentación del plugin, primero presentaremos las características principales del plugin (versión gratuita y versión completa).

Tenga en cuenta que esta es una lista no exhaustiva de las diferentes características que ofrece el plugin. Encontrará más detalles en explorando su sitio web.

Primeros pasos en Elementor

No cubriremos todo el proceso de instalación aquí. Como se trata de un plugin de WordPress, el procedimiento de instalación ya ha sido explicado en un tutorial anterior. Sin embargo, después de la instalación, se le llevará a la página principal del plugin.

Cree su sitio web fácilmente con Elementor

Con 1.000.000 de usuarios, Elementor es la mejor herramienta de WordPress para crear hermosos sitios web fácilmente. Encuentra los mejores plugins y temas de WordPress creados con Elementor.
Si tienes esta página en tu pantalla, entonces has instalado correctamente el plugin Elementor. Actualmente estamos utilizando la versión completa para este tutorial, pero a priori la interfaz no debe ser demasiado diferente de la versión gratuita.

Antes de pasar a la interfaz de edición, le invitaré a registrar su licencia. Esto sólo es válido para aquellos que han optado por la versión completa. Si dispone de la versión gratuita, puede acceder a la siguiente sección. Para registrar su licencia, usted notará una notificación en WordPress que le pedirá que registre su licencia.

Simplemente haga clic en él para acceder a la página de registro y haga clic en Activar.

Normalmente necesitará su página de confirmación si su licencia es válida.

Si no llegas a esta página, te invito a que te pongas en contacto con los desarrolladores del plugin para tener más información asistencia sobre el problema.

Cómo usar Elementor

Elementor trabaja en páginas y artículos en WordPress. Tanto si utiliza la interfaz clásica como la nueva interfaz de Gutenberg, verá un botón que le pedirá que utilice el constructor de Elementor.

En la práctica, no siempre necesitará modificar sus elementos utilizando Elementor. Así que os invito a usar el plugin sólo en las páginas. Haciendo clic en el botón le llevará a la interfaz de diseño de Elementor que le da un aspecto de déjà vu (para aquellos que usan el Personalizador de WordPress).

Así que tienes a la izquierda los diferentes controles que ofrece el plugin y a la derecha, tienes una vista previa en vivo de tus cambios. En este tutorial, usamos el tema Veintiséis de WordPress.

Secciones Elementor

Las secciones Elementor son grupos de bloques de características que ofrece Elementor. El número de secciones depende de si se está utilizando la versión completa y de si se está utilizando WooCommerce Yoast SEO u otros plugins compatibles.

Dependiendo de estas condiciones, tendrá más o menos secciones en su interfaz. Ya que usamos la versión completa con el plugin WooCommerce habilitado, así es como se ve nuestra interfaz.

Cómo colocar un bloque Elementor

Una vez que desarrollas una sección, encontrarás los bloques Elementor, los diferentes bloques Elementor se colocan mediante»Arrastrar y Soltar» (Arrastrar y soltar) en el área resaltada con líneas discontinuas.

Cómo elegir un diseño en Elementor

Antes de añadir un bloque a Elementor, debe pensar en elegir un diseño haciendo clic en el botón»+» en la sección resaltada.

Dependiendo de sus necesidades, usted elegirá el diseño que mejor se adapte a sus necesidades. Una vez que haya seleccionado un diseño, tendrá una representación de esa sección en la misma área resaltada. Esta sección mostrará el mismo número de columnas correspondientes a su elección. En mi caso, elegí una columna con 3 columnas.

Los diferentes bloques con un signo»+» en su interior son las áreas que pueden aceptar bloques Elementor. Si se añade un bloque Elementor sin seleccionar primero una estructura, se seleccionará por defecto la estructura de columnas única.

Las secciones de Elementor se pueden reordenar entre ellas, siguiendo el mismo principio de»arrastrar y soltar». También puede borrar una sección si ya no desea utilizarla.

He aquí un ejemplo de una sección que contiene 2 bloques, a saber, el bloque de título y el bloque de texto.

Cómo utilizar otras herramientas de diseño

Una vez que haya terminado su diseño, una de las cosas que querrá hacer es guardar su trabajo. Encontrará esta opción en la parte inferior de la sección que muestra las diferentes secciones de Elementor.

Puede elegir entre grabación directa (Publicar), guardar como borrador o como plantilla. Exploraremos estos puntos más adelante.

Durante el diseño, también puede previsualizar los cambios sin la interfaz adicional de Elementor. Todo lo que tienes que hacer es hacer clic en el icono del ojo.

A veces, durante el diseño, se produce un error (una acción no intencionada). En este caso, Elementor te ofrece una historia, que te permite navegar a través de todas tus acciones.

Esto le permitirá regresar fácilmente.

La opción»Navegador», que se encuentra justo antes del botón del historial, permite modificar más las diferentes secciones en relación con el navegador utilizado por los visitantes. Esta opción le da acceso a la modificación avanzada de estructuras de sección (ancho de columna). Aquí hay que hacer los cambios con mucho cuidado.

El botón»Configuración» permite modificar ciertas opciones específicas de la página, como el título, la imagen de la página principal o el estado, entre otras.

Eso es todo por este tutorial, exploraremos más acerca de Elementor en nuestro próximo tutorial. Siéntase libre de echar un vistazo a la sitio web oficial que ofrece ejemplos mucho más exitosos.

Elementor (Pro) 2020 – Opinión y Análisis ¿Merece la pena?

2PAuN5K

Elementor es el page builder o maquetador de sitios web más popular para WordPress en la actualidad utilizado por más de 2 millones de usuarios.

En este artículo, nos adentraremos en el popular constructor de sitios web y veremos cómo puede ayudarnos a crear cualquier tipo de diseño único sin tener que escribir ningún código.

Hubo un tiempo en el que tuvimos que atenernos a las opciones de diseño que ofrecían los temas con posibilidades de personalización muy limitadas.

Ya no..

Aunque el diseño minimalista clásico sigue siendo una opción popular, hoy en día las posibilidades de diseño son ilimitadas.

Si miras cualquier tienda o mercado popular verás que casi todos los temas de WordPress ofrecen múltiples opciones de diseño, y la mayoría de ellos están repletos de un popular constructor de sitios web para ofrecer posibilidades ilimitadas de diseño.

Recientemente hemos revisado el tema de Thrive que ofrece al popular constructor de sitios web, Thrive Architect, otra de las opciones más completas.

En cuanto a mi experiencia con el constructor de Elementor, fui uno de los primeros miembros y he visto crecer el plugin por múltiples pliegues en los últimos años.

Y hoy en día, Elementor es el constructor de sitios web preferido si lo preguntas en la comunidad de WordPress

No sólo la página de inicio, sino que puedes usar Elementor para personalizar cada rincón de tu sitio WordPress y asegurarte de que tienes un sitio por el que la gente pase.

Acerca de Elementor Builder

Iniciado en el año 2016, Elementor se convirtió rápidamente en uno de los productos de WordPress más hablados. Aparte de los usuarios de plugins directos, viene con la mayoría de los temas multipropósito de alta calidad para ofrecer opciones de diseño ilimitadas a los clientes.

Elementor por números

Usuarios

Instalaciones activas

Plantillas listas

Diseños listos

Widgets listos

Elementos de diseño

Revisión

2,500

Reseña de cinco estrellas

El constructor básico de sitios web de Elementor se puede descargar gratuitamente desde el repositorio de WordPress.

En esta revisión del constructor de páginas de Elementor, intentaremos repasar el plugin en detalle y ver cómo funciona.

La ventaja de usar Elementor

• Funciona con cualquier tema de WordPress
• No te quedas bloqueado con un tema ya que la mayoría de los aspectos de tu diseño serán gestionados por Elementor
• Rápido y fácil de usar
• Una gran cantidad de tutoriales y ayuda disponible para el apoyo
• Muchas plantillas y complementos de terceros están disponibles
• Impresionante interfaz visual de arrastrar y soltar
• Evolución constante y nuevas características añadidas
• Todos los elementos de diseño importantes para crear un diseño hermoso
• Personalice cada sección de su sitio web

Cree un hermoso diseño sin ningún tipo de codificación

Revisión de Elementor Builder

Instalación del plugin Elementor

Si el tema de WordPress que está utilizando para su sitio recomienda Elementor como el constructor de sitios web preferido, puede echar un vistazo a los documentos de su tema y empezar en consecuencia.

O bien, puedes instalar el plugin Elementor como cualquier otro plugin gratuito de WordPress.

Vaya al panel de administración de WordPress >> plugins >> añada nuevos y encuentre Elementor. Puede instalar el plugin y activarlo.

Ahora, si miras alrededor del plugin principal verás un número de plugins adicionales para Elementor que extenderán las funcionalidades del plugin por defecto con un número de características increíbles.

Hemos creado una lista de algunos de los mejores complementos de Elementor aquí.

Puedes usar Elementor para crear una página de WordPress así como para presentar tu contenido en un diseño único.

Parametrizaciones estándar

Puede empezar con los ajustes por defecto para los módulos Elementor. Puedes ir a la configuración desde las opciones de configuración de Elementor en el panel de administración de WordPress o puedes elegirla cuando estés creando cualquier página o mensaje.

Puede configurar los ajustes globales una vez y empezar. Puede elegir rápidamente la fuente por defecto para Elementor, la opción de color, etc.

Haga clic en el icono en la esquina superior izquierda del panel Elementor, que le llevará a la configuración predeterminada.

Parametrizaciones estándar

En el siguiente panel, tendrá las opciones para configurar el color, la fuente, etc.

Ajustes predeterminados de Elementor

Biblioteca de plantillas Elementor

Elementor contiene más de 100 plantillas de diseño de demostración listas para usar que están disponibles en la biblioteca. A medida que navegue por la colección, seguramente encontrará una plantilla adecuada para cualquier tipo de sitio web que desee crear.

Si usted es un usuario completamente nuevo, la librería de plantillas será de gran ayuda.

Tienes dos opciones cuando empiezas una nueva página.

1. Comience desde cero añadiendo módulos a sus páginas
2. Comience con una plantilla de diseño lista

Haga clic en la opción de añadir plantilla para seleccionar entre las opciones de plantilla disponibles.

Agregar Plantilla

Al hacer clic en la opción de añadir plantilla, se le mostrarán todas las plantillas disponibles. Puede elegir uno que se ajuste a sus necesidades.

Biblioteca de plantillas

Hemos importado una plantilla para comprobar cómo funciona. Para ello, sólo tenemos que seleccionar la plantilla y hacer clic en insertar.

Así es como se ve la página ahora.
Plantilla Demo

Editar la plantilla de demostración

La plantilla de diseño de demostración hace que el proceso sea aún más rápido. Puede agregar rápidamente cada sección del tema.

Puedes simplemente pasar el ratón por encima de cualquier sección que desees editar y empezar a editar de inmediato.

Cuando pasas el ratón por encima de cualquier sección de la página, obtienes la opción correspondiente en el panel izquierdo de configuración del sitio, también puedes añadir tu contenido en el panel de configuración.
Edición de una plantilla

Opciones de estilo de tipografía

Para cada sección o cada módulo, tiene opciones de estilo completas. Si está editando una sección de texto, ya sea un título o un párrafo, puede cambiar su estilo según sus necesidades.

Puede desplazar el ratón sobre cualquier sección de texto y cambiar el color del texto. Puede cambiar la fuente para esa sección ofreciéndole total flexibilidad en términos de selección de fuentes.
Ajustes de tipografía

Configuración avanzada de tipografía

Para cada sección, también tendrá los ajustes avanzados. Puede personalizar completamente la tipografía de su sitio utilizando la configuración avanzada.

Tienes ajustes como la animación de texto (elegir entre múltiples opciones), el fondo del texto, el borde del texto, el posicionamiento personalizado y mucho más.
Configuración avanzada de tipografía

Del mismo modo, cuando se hace clic en una imagen, se obtiene la opción de editar la imagen, fijar la alineación, seleccionar el tamaño, añadir enlaces personalizados, etc.
Edición de imágenes

Ajustes de Estilo de Imagen

Similar a la tipografía, usted obtiene una completa opción de estilo para las imágenes también.

Puede simplemente arrastrar y ajustar el tamaño de una imagen, así de fácil
Ajustes del tamaño de la imagen

Anima tu imagen como quieras
Animación de imágenes

Creación de una página desde cero con Elementor

En la sección anterior, hemos repasado cómo importar una plantilla y editarla para crear su página.

Ahora, veamos cómo crear una plantilla desde cero.

Haga clic en el signo + en la página y seleccione el diseño para la sección que está creando.

O bien, puede elegir añadir un widget directamente desde el panel Elementor.
Agregar diseño de sección

Ahora, seleccione un diseño de las opciones disponibles
Seleccionar diseño

Sin embargo, le recomendaría que agregara módulos rápidamente a sus páginas y comenzara a editarlas.

De hecho, tiene un módulo de sección que puede utilizar para crear secciones con diferentes disposiciones.
Añadir un módulo

Crear una página de destino de producto con Elementor

Elementor puede ocuparse de todo lo que usted necesite mientras crea su sitio. No importa si está creando un simple blog o una página de destino de productos de afiliados.

Vamos a crear una página de aterrizaje.

Mientras que usted puede agregar diferentes elementos para crear su página como se muestra arriba. Seleccionando una plantilla de página de destino para hacer el proceso más rápido.

Otra ventaja es que puedes previsualizar tu página de destino en una tableta, móvil y de escritorio directamente en tu panel de configuración de Elementor para asegurarte de que todo es perfecto antes de que la página esté lista para funcionar.

Recuperar el historial

Elementor te da una opción simple para ir a través de la historia de los cambios que has hecho en una página, y puedes recuperar rápidamente cualquiera de las versiones anteriores de la página en caso de que lo necesites.
Recuperar el historial

Widgets de Elementor

Los widgets de Elementor no son más que los módulos que puedes usar para crear tus páginas. Cuando pueda crear una página, necesitará Texto, Google Maps, Botones, viñetas, imágenes, galería de imágenes y módulos de tipo madre.

Tienes una larga lista de widgets que puedes usar en tus páginas. Dependiendo de su tipo de cuenta Elementor, tendrá acceso a los módulos.

Los siguientes módulos básicos de Elementor están disponibles tanto en la versión gratuita como en la versión pro del plugin.
Elementos básicos libres

Los Elementos Pro Elementor están disponibles sólo para los miembros con planes pro.
Módulos Pro Elementor

Si estás usando Elementor para crear una tienda online con el plugin WooCommerce, el creador de páginas ofrece una serie de módulos WooCommerce personalizados que puedes usar para crear tu tienda.
Módulos WooCommerce

Además de los módulos mencionados anteriormente, también verá los módulos específicos del tema, así como los módulos predeterminados de WordPress en el panel Elementor.

Guardar una plantilla

Elementor te da la opción de crear diferentes diseños y guardarlo como plantilla para que puedas usarlo en el futuro y ahorrar tiempo.

El proceso es sencillo, una vez que tu diseño esté perfecto vete al panel de Elementor y haz clic en la opción que aparece al lado para publicarlo

Haga clic en la opción de guardar plantilla

Agregar Plantilla

Seleccione el nombre de su plantilla y guárdelo
Guardar una plantilla

Diseños de archivos personalizados

Con Elementor, usted será capaz de crear un diseño de archivo personalizado y estilizarlo según sus necesidades.

Cree hermosos diseños de cuadrícula y presente su contenido en un diseño limpio.

Archivo personalizado

Constructor de Popups Elementor

Ya debes haberte encontrado con los creadores de ventanas emergentes para WordPress que puedes usar para crear tu opción de correo electrónico y por otras razones.

Si está usando el constructor de sitios web de Elementor, no tiene que buscar otro plugin caro para crear formularios emergentes, ya que ya se lo ofrece.

Elementor es un potente creador de formularios popup y opt-in por correo electrónico con opciones de diseño ilimitadas.
PopUp de generación de clientes potenciales

Mensaje personalizado de página completa

La página completa mat pupus son muy populares en estos días, es uno de los principales tipo de conversión popup, ya que se puede activar con sus ofertas personalizadas y el usuario tendrá que tomar la acción editor aceptando la oferta o cerrando la estera.

Por lo tanto, la posibilidad de conversión es muy alta en comparación con cualquier otro escaparate.
Ventana emergente de página completa

Targeting y Trigger Avanzado

Al igual que los mejores plugins de generación de leads, Elementor le ofrece una gran flexibilidad en términos de targeting y trigger para sus ofertas y opt-ins.

Usted tiene la opción de mostrar diferentes ventanas emergentes con diferentes páginas dependiendo del contenido de la página.

Puede aumentar la conversión con la segmentación por niveles de página para que la oferta de la ventana emergente se adapte perfectamente al contenido de una página, lo que la convierte en la mejor herramienta para el upselling.

Otro aspecto importante del aumento de la conversión es el momento de la aparición de la ventana emergente. Con Elementor, puede decidir cuándo desea activar la ventana emergente.

• Después de la carga completa de la página
• Después de un cierto porcentaje del desplazamiento de la página
• Después de un cierto tiempo de inactividad
• Intención de salida: cuando el usuario está a punto de salir de una página
• En el clic: deje que el usuario decida
• Desplácese hasta el elemento

Integración de Opt-In de correo electrónico

Elementor le ofrece la opción de integrar sus clientes potenciales con los proveedores de servicios de email marketing más populares como MailChimp, ActiveCampaign, ConvertKit, HubSpot y más

Ejemplos de sitios web creados con Elementor

Aquí hay algunos ejemplos de hermosos diseños que se crean usando el constructor de Elementor.

OptiMonk
Ejemplo de diseño de Elementor

Natkam
Natkam

Los Zorros

Soporte y documentación de Elementor

Encontrarás toneladas de tutoriales sobre Elementor en Internet creados por el equipo de Elementor así como por otros usuarios.

Encontrará una sección dedicada al centro de ayuda en el sitio de Elementor con Knowledge Base, FAQ, etc.
Centro de ayuda de Elementor

Precios de Elementor

Aunque el constructor básico de Elementor es libre de usar, es muy limitado en lo que se refiere a las opciones.

Te recomiendo que te decantes por la versión pro del plugin si deseas crear un sitio de siguiente nivel sin la ayuda de ningún desarrollador.

El precio tendrá sentido si usted mira lo que puede ofrecer. Aparte del constructor del sitio web, si usted va para cualquier plugin popular del popup de la generación del plomo, usted tendrá que pasar el honorario mensual en eso también.

Elementor le ofrece tres planes entre los que puede elegir en función del número de sitios web que desee utilizar.
Precios de Elementor

Palabra final

Si miras la sección de Elementor por números en la parte superior del artículo, entenderás cómo Elementor es considerado el mejor constructor de sitios web.

La ventaja de Elementor es que evoluciona constantemente e incorpora los cambios a medida que cambia la tendencia de diseño que lo mantiene fresco y la primera opción todo el tiempo.

Muchas grandes marcas están utilizando Elementor para crear su sitio web.

El diseño de su sitio web sin duda puede hacer una diferencia en sus ingresos totales, así que ¿por qué no utilizar una herramienta que hace que el proceso sea más fácil?