Cómo usar Elementor Page Builder con WordPress

Cuando hablamos de creadores de páginas de WordPress, el más popular y el que tiene el mayor número de instalaciones activas y la comunidad más grande es definitivamente Elementor. Hasta ahora, hay alrededor de 8 millones de sitios construidos con Elementor. Es recomendado por muchos expertos por su facilidad de uso, velocidad y enormes posibilidades a la hora de crear sitios de WordPress.

Probé la versión Pro de Elementor y construí una página de destino. Viene con la funcionalidad de arrastrar y soltar y funciona con cualquier tema y puede usar todos los widgets gratuitos, profesionales y de WordPress al mismo tiempo. Leamos este artículo para saber más sobre la instalación y configuración de Elementor con WordPress.

¿Por qué elegir Elementor Page Builder?

Elementor es uno de los primeros y uno de los creadores de páginas de WordPress más avanzados del mercado en este momento. También tiene un ecosistema enorme a su alrededor y muchos autores más pequeños están creando complementos y plantillas útiles que puede usar para reducir el tiempo necesario para el resultado final.

En el caso de Elementor, el resultado final puede ser un sitio realmente impresionante, bien diseñado con todas las funcionalidades que necesita o podría necesitar. No encontrará ningún tipo de sitio de WordPress que no pueda crear utilizando Elementor. Si necesita alguna funcionalidad adicional, se puede implementar fácilmente con códigos cortos.

Características de Elementor Page Builder

La versión gratuita de Elementor viene con un número limitado de elementos, pero con la versión Pro, obtienes complementos como QI, Ultimate Add Ons, etc. Además, tendrás un montón de elementos y plantillas útiles para construir tu sitio con facilidad. .

No sería justo dejar de lado el complemento Crocoblock para Gutenberg y Elementor, que es una de las herramientas favoritas para la mayoría de los usuarios de Elementor, ya que amplía las funcionalidades nativas de Elementor.

Elementor dividió sus características en 4 categorías.

1. Widgets básicos

Los Widgets básicos vienen con la versión gratuita y son suficientes para crear un sitio web impresionante que no requiere opciones avanzadas como Tabla de contenido, Portafolio o Formulario. Además, en la versión gratuita, no puede crear un menú de encabezado / navegación y es posible que deba encontrar un tema de WordPress genial con el menú de navegación que le guste.

2. Widgets profesionales

Los widgets profesionales con Elementor Pro cubren casi todos los aspectos y todos los widgets que pueda necesitar para crear cualquier tipo de sitio web. Agregue y elija publicaciones de diferentes categorías, tipos de publicaciones o simplemente enumere las más recientes, Tablas de precios, Galería, Flip Box, Fácil inserción de redes sociales, Varios carruseles de medios, Lottie Widget y HotSpot (hablaré de esto más adelante).

3. Elementos del tema

Theme Elements también viene con Elementor Pro y son importantes para crear todas las páginas de plantilla y, por supuesto, una plantilla de publicación única. Como sabe, hay páginas que se llenan dinámicamente con contenido como Categoría, Etiqueta, Autor, etc.

Para esas páginas, debe crear una plantilla utilizando elementos de tema. Lo mismo ocurre con la publicación única, donde puede diseñar una hermosa plantilla para sus publicaciones que será utilizada por todas las publicaciones sin la necesidad de crearlas cada vez. Simplemente agregue el contenido como está acostumbrado y listo.

4. Widgets de WooCommerce

Y por último, pero no menos importante, WooCommerce Widgets. Estos widgets le permiten volver a crear de manera similar a Theme Builder, las páginas de plantilla y la plantilla de un solo producto con facilidad mediante el uso de elementos de WooCommerce.

Precios y planes de Elementor Page Builder

Elementor Pro viene con 5 planes diferentes, todos ellos contienen el mismo creador de páginas Elementor Pro y características como:

• Editor en vivo de arrastrar y soltar
• Diseño de respuesta
• Más de 90 widgets básicos y profesionales
• Más de 300 plantillas básicas y profesionales
• Constructor de temas

El plan más bajo es Essential para 1 sitio al precio de $ 49. Con este plan, obtienes Soporte Premium, lo que significa que puedes esperar una respuesta en 24 horas. El siguiente plan es Avanzado y cubre una licencia para 3 sitios al precio de $ 99 con el mismo tipo de soporte.

Probablemente el más popular sea Expert a $ 199 por 25 sitios. Además, obtendrá un perfil de experto de Elementor, donde puede publicar sus proyectos completados en Elementor y obtener algunos clientes nuevos.

Uno antes de la cima es Studio para 100 sitios al precio de $ 499 y allí tiene un beneficio adicional de Soporte VIP, lo que significa que tiene prioridad y sus tickets serán respondidos en 30 minutos. Lo mismo viene con el plan de Agencia más caro para 1000 sitios al precio de $ 1000.

Todos los planes son anuales y si se pregunta qué sucede con los sitios si su suscripción caduca, la respuesta es que los sitios se verán igual que antes, pero no podrá editar ni usar elementos y plantillas de Elementro Pro.

Requisitos del sistema / alojamiento de Elementor

Según la página de requisitos del sistema de Elementor, debería funcionar incluso con 128 MB de PHP, MySQL 5.6 o superior o MariaDB 10.0 o superior. Además, debería funcionar con cualquier PHP 7+. Para el propósito de la prueba, he usado VultrHF con 2GB de memoria PHP.

Por supuesto, necesitaría la última versión de WordPress y todos los demás complementos actualizados.

Instalar y configurar Elementor Page Builder

La instalación de la versión gratuita de Elementor es la misma que para cualquier otro complemento en el repositorio de complementos de WordPress. Vaya a su Panel de control de WordPress → Complementos → Agregar nuevo, busque Elementor, instale y active el complemento.

Para la versión Pro, debe comprar el plan que creará automáticamente una cuenta en Elementor. Cuando inicie sesión allí, verá el botón de descarga para descargar la última versión Pro.

Mientras aún está conectado al tablero de Elementor, inicie sesión en su Tablero de WordPress → Complementos → Agregar nuevo y seleccione Cargar, busque el archivo descargado de Elementor Pro desde su computadora, instálelo y actívelo.

Cuando haya terminado en la barra lateral izquierda de su panel de WordPress, vaya a Elementor → haga clic en Licencia → haga clic en el botón Conectar y activar.

Cuando se hace clic, se lo redirige automáticamente a su panel de control en Elementor para activarlo. Haga clic en el botón verde Activar y listo. Su Elementor Pro está conectado y activado.

Después de la activación, verá la confirmación de que su Elementor está activo. Sin embargo, si ha creado el sitio en un dominio de prueba y no desea comprar otra licencia en vivo, puede desconectar fácilmente la cuenta en la etapa de prueba y activarla en el dominio en vivo.

Es hora de comenzar a usar Elementor y construir su sitio web. Mi sugerencia es utilizar el tema Hello de Elementor creado específicamente para Elementor.

Para hacer eso, comencemos por crear una página "Página de inicio" y editarla con Elementor. Vaya a Páginas → Agregar nuevo, asígnele el nombre Página de inicio y publíquelo, luego haga clic en el botón Editar con Elementor.

En la página Editar, verá Elementos que no puede editar porque el Diseño está configurado como predeterminado. Para usar Elementor en un lienzo vacío, elija Elementor Full Width o Elementor Canvas haciendo clic en el ícono de ajustes en la esquina inferior izquierda.

Antes de comenzar a construir el sitio, asegúrese de hacer clic en el ícono de la hamburguesa en la esquina superior izquierda y establecer todas las configuraciones globales necesarias para el resto del trabajo.

La configuración del sitio es bastante similar a la configuración del tema. Aquí, puede seleccionar los colores globales, las fuentes que utilizará y la tipografía completa del sitio para cada etiqueta HTML.

Además de eso, puede configurar el estilo de botón global, encabezado, pie de página, CSS personalizado si es necesario, y todo lo que necesita para configurarlos y mantenerlo así en todo el sitio para mantener la coherencia también.

La segunda opción es Theme Builder, que le permite crear páginas de plantilla y plantillas de publicación / producto únicas, que serán utilizadas automáticamente por la página, publicación o producto específico generado dinámicamente. Como todos los temas de WordPress deben tener archivos de plantilla para mostrar todo lo anterior, Elementor le permitirá hacerlo sin escribir ni una sola línea del código.

La última opción son las preferencias del usuario, donde puede configurar su entorno de trabajo en Elementor, nada que afecte al sitio en sí, sino a su interfaz de usuario como administrador.

Para iniciar su sitio, todos los widgets disponibles se colocan en la barra lateral izquierda y todo se puede editar visualmente y arrastrando y soltando. Si desea una forma más fácil de hacerlo, puede comenzar utilizando uno de los bloques o plantillas prefabricados haciendo clic en el icono de la carpeta.

El ícono de la carpeta abrirá una ventana emergente, donde podrá ver los bloques y plantillas prefabricados, así como los que guardó antes. También puede guardar un bloque o una plantilla completa que creó y reutilizarlo en alguna otra página interna. Es bastante común usar su bloque guardado para testimonios, una llamada a la acción específica que no debería mostrarse en todas las páginas, sino en algunas.

Hay una cosa más que debes saber cuando comienzas a construir un sitio web sin ninguna experiencia previa, es fácil de usar, bastante intuitivo y sin ninguna experiencia previa en unos días, serás más que capaz de construirte un buen sitio web. , Puedo decir que incluso con un aspecto profesional.

Sin embargo, su sitio debe verse bien en todos los tamaños de dispositivos y, de la misma manera que editó la versión de escritorio, puede editar todos los demás tamaños. Tenga en cuenta que los elementos y widgets solo se pueden agregar a la versión de escritorio y luego puede engañar el aspecto en tamaños más pequeños.

Además, puede configurar fácilmente el widget o la visibilidad de la sección en diferentes dispositivos, por lo que puede tener contenido diferente en una sección similar dejando una sección visible en un escritorio pero oculta en una tableta y un dispositivo móvil. Del mismo modo, otro oculto desde un escritorio pero visible en tableta y móvil.

Para editar versiones para dispositivos móviles y tabletas, haga clic en el icono del modo de respuesta en la parte inferior de la barra lateral izquierda, se mostrará su sitio en el dispositivo móvil. Y en la parte superior, puede cambiar entre diferentes tamaños de pantalla.

Para mayor claridad, agregué dos secciones donde una está oculta en dispositivos móviles y tabletas y la otra sección está oculta en el escritorio. Vea el ejemplo a continuación.

El resultado final está en el móvil.

Y el resultado final en el escritorio tiene solo una sección pero otra diferente.

Rendimiento de Elementor Page Builder en Cloudways

Elementor funciona bastante bien y obtiene una puntuación de 100 en GTMetrix y las otras herramientas de prueba muestran un rendimiento realmente excelente. Tenga en cuenta que no he optimizado ninguna imagen para tener exactamente el mismo tamaño de página e imágenes para todas las pruebas que hicimos.

- Resultados de Elementor en GTMetrix

- Resultados de Elementor en las herramientas Pingdom

- Resultados de Elementor en WebPageTest

Resumen

Si necesita un creador de páginas intuitivo y fácil de usar, Elementor puede cubrir todos los aspectos necesarios para crear un buen sitio web. No es tan difícil crear sitios con píxeles perfectos a partir del diseño si tiene algún conocimiento de CSS.

Con la enorme comunidad y cientos de complementos y complementos externos que extienden las funcionalidades básicas de Elementor, no puedo ver ningún tipo de sitio web que no se pueda construir usando Elementor.

A menudo vemos cómo Elementor está inflado, se está cargando una gran cantidad de código innecesario, es difícil de optimizar, pero como puede ver en las pruebas, parece que Elementor funciona bastante bien en Cloudways. Probé la página de destino con 25 imágenes en el interior y 7 secciones + encabezado y pie de página, que está por encima del promedio de la página de inicio.

Otra gran ventaja de Elementor es que la curva de aprendizaje no es empinada, sino bastante ligera y, en solo unos minutos, al usar algunas plantillas o bloques prefabricados, puede tener un sitio web de aspecto moderno y muy bien diseñado.