Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Lunes, 04 Diciembre 2017 07:00

Elementor Page Builder ¿cómo maquetar tus páginas en WordPress?

Escrito por 
CMS:  WordPress |  Versión:  Todas |  Nivel de dificultad:  Medio |  Tiempo estimado de lectura:  10 minutos


Elementor Page Builder ¿cómo maquetar tus páginas en WordPress?


¿Has oído hablar del famoso constructor de páginas "Elementor Page Builder" para WordPress?

Por si aún no lo conoces, hoy me gustaría hablarte del que, al menos para mí, es a día de hoy la mejor herramienta para diseñar una web fácilmente.

El CMS WordPress quiere poner las cosas cada vez más fáciles a sus usuarios, como así lo demuestran las pruebas que esté realizando con "Gutenberg". Este proyecto está todavía en fase de pruebas, pero la intención es clara: que el usuario sea capaz de crear entradas y maquetar páginas "a golpe de clic".

La inclusión en el mercado de maquetadores web, como es el caso del plugin Elementor Page Builder, tienen la culpa de que WordPress pretenda seguir ese camino y de que la forma de diseñar páginas web haya cambiado.

El futuro de este sector es emplear maquetadores y, a pesar de algunas críticas de programadores y desarrolladores web, lo cierto es que no es fácil conseguir efectos tan visuales sólo con código de manera tan rápida.

El hecho de que plugins como éste ofrezcan la posibilidad al usuario o cliente de maquetar y hacer sus propias creaciones o modificaciones es un acierto, ya que antes no era posible, si no tenías amplios conocimientos en código HTML o CSS.

¿Te animas a conocer más a fondo el plugin Elementor Page Builder?

Si es la primera vez que escuchas hablar de él y estás decidido a hacer tú mismo tu propio blog o página web, me gustaría comenzar explicándote qué es y para qué sirve exactamente este plugin para WordPress.

Seguro que así lograrás ponerte en situación y comprenderlo más fácilmente.

¿Qué es y para qué sirve Elementor Page Builder?


Descargar Elementor


Elementor Page Builder es un plugin maquetador para WordPress, que permite crear páginas webs fácilmente con su sistema de arrastrar y soltar (Drag&Drop).

Esta funcionalidad no es nueva de este plugin, ya que existen muchos maquetadores en el mercado capaces de crear webs fácilmente, moviendo elementos de un lado para otro.

Lo mejor de todo y la principal ventaja en diseño web es que, hoy día, la mayoría permiten realizar las creaciones desde el front-end, permitiendo ver los cambios en vivo.

¡Esto es realmente fabuloso!

Este plugin ha dado un paso más allá, ya que si hasta ahora los constructores web como Visual Composer, Divi, Beaver Builder o Live Composer ofrecían resultados fantásticos, Elementor Page Builder está rompiendo los esquemas, ofreciendo algo más.

Él cuenta con una versión gratuita mejor que muchas de pago y una versión premium, (Elementor PRO), capaz de sacar actualizaciones cada 10 días aproximadamente.

Estas actualizaciones incluyen mejoras y widgets, que facilitan no sólo hacer lo que quieras, sino además permiten ahorrar en instalaciones de plugins, al tener dichas funcionalidades integradas.

Es, en mi opinión, el mejor maquetador en la actualidad, sin lugar a dudas.

Puedes descargar Elementor desde su web oficial. Comprobarás que su número de descargas y valoraciones en poco más de un año corroboran la buena opinión que tengo de él.


Elementor Page Builder - valoraciones


¿Por qué es importante usar Elementor para WordPress?


Seguro que has oído que los maquetadores consumen muchos recursos y son lentos, ¿verdad?

Yo creo que igual que dicen que el Email Marketing o el SEO "han muerto", son palabras que se dicen sin fundamentos o hechos comprobables.

"Un web builder deja mucha suciedad, consume muchos recursos, genera mucho shortcode, etc."

Eso es lo que se escucha, cuando se critican este tipo de constructores web y lo cierto es que estas afirmaciones no son ciertas.

La realidad es que los maquetadores para WordPress son un avance en el diseño web y el futuro está en adaptarse a ellos y perfeccionarlos debe ser el objetivo, el ser un sistema de código abierto así lo permite.

La velocidad de una web diseñada en WordPress con este plugin es impresionante y, teniendo en cuenta otros factores para mejorar la velocidad de carga, lo cierto es que si la web cuenta con otros añadidos antes de maquetar, él parte con ventaja.

Si tu sitio antes de empezar a diseñar tiene un buen tema, un buen hosting, https, AMP y demás añadidos, una web estándar creada con Elementor debería cargar, como media, en menos de 2 segundos.

Si nos ponemos a comparar una web hecha con código y otra maquetada con editor visual, será más o menos rápida dependiendo de las manos de quien las trabaja y de los elementos visuales que incluya.

Elementor Page Builder lo pone muy fácil, ya que WordPress cada vez piensa más en el usuario y quiere que todo el mundo sea capaz de crear su web.

Un poco más abajo vas a poder ver un vídeo, donde te hago una muestra de cómo maquetar los contenidos de una web con él.

¿Qué funcionalidades y ventajas ofrece "Elementor PRO"?


Si como digo, la versión gratuita ofrece opciones básicas, éstas están realmente bien y de por sí ya te facilitan mucho el diseño web, si lo acompañas de una buena plantilla.

Algunas de las funcionalidades principales son: creación de columnas a tu gusto y tamaños, insertar botones en cualquier sitio, forma o color, encabezados, vídeos, separadores, mapas o iconos son widgets, etc. Todo ello de forma gratuita.

La versión Premium de este plugin merece mucho la pena, porque con ella vas a poder hacer el diseño que te apetezca.

En la imagen puedes ver algunos de los widgets que incluye la versión de pago.


Elementor PRO


Créeme que se puede hacer un buen diseño con su verisón PRO de esta forma y sin tener que acudir al CSS.

Elementor PRO está empeñado en una cosa y, como siga así, pienso que lo va a conseguir: crear absolutamente todo a través de sus funciones.

Hasta ahora, un maquetador se ocupaba exclusivamente del contenido, y la plantilla o tema es la encargada de la cabecera y el footer.

Sin embargo, con esta versión PRO ya puedes personalizar todo, como vas poder ver en el post y en el vídeo que te menciono y verás más adelante.

¿Qué widgets están incluidos en esta versión PRO?

La versión Premium del plugin incluye los siguientes widgets:

Últimos post

Esta opción muestra cajas con los últimos post publicados en WordPress, las opciones de diseño, colores, sombras e imágenes que ofrece son espectaculares.

Portfolio

Widget con opciones muy personalizables, con las que crear un bonito porfolio.

Slides

Si estás en contra de los slider porque crees que ralentizan la web, cambiarás de idea cuando veas esta opción, ya que consume muy pocos recursos al usar la carga asíncrona.

Las opciones que incluyen los slider de elementor de personalización son dignas de plugins de pago.

Formularios

Un punto fuerte de elementor, ya que podrás, a través de esta función, crear todos los campos que quieras, como opciones de desplegables, checkbox, áreas, etc.

Si te gusta el plugin de WordPress "Contact form 7", te olvidarás de él rapidamente, ya que con Elementor Page Builder puedes hacer lo mismo, pero de manera más sencilla y sin tener que personalizarlo con CSS ¡Una maravilla de opción!

Además, esto también te sirve para crear formularios de suscripción, aunque con API solo está disponible para algunas plataformas de email marketing.

Pero con html puedes hacer lo que quieras.

Login

¿Quieres un área privada? en 2 clics lo tienes.

Navegación

Una funcionalidad reciente que sorprende ya que puedes eliminar el menú de la cabecera y diseñar una personalizada a tu gusto con elementor pro,

Esta opción no se limita a un simple menú, ya que puedes dar el aspecto que necesites con efectos de visualización, efectos hover etc., si no fuera a través de código, esta opción no se podría hacer de forma tan simple como permite elementor.

Además, si lo que quieres es crear un footer personalizado y dejar de usar el que trae la plantilla por defecto, es muy fácil crear uno propio con el plugin e insertarlo en cada página, como luego verás en el vídeo.

Elementor es personalización 100% de tu web

Como ves, usando este plugin, tendrás por seguro que podrás personalizar cada uno de los detalles de tu sitio web. Estos son algunos de estos detalles:

  • Animación headline: letras que se subrayan solas, textos que desaparecen o palabras que van cambiando es otra de las opciones que incluye y es muy atractiva.
  • Listas de precios: si necesitas listas de precios puedes crearlas a tu gusto con los colores que necesites y son realmente muy atractivos.
  • Flip box: una impresionante función que sorprende al mostrar una caja con un frontal y una parte de atrás, con un efecto muestra ambas caras con la posibilidad de insertar botones, textos o imágenes, las posibilidades son infinitas.
  • Carrusel: si quieres carruseles visuales donde mostrar imágenes que se desplazan, elementor ofrece otro gran widgets para hacerlo.
  • Testimonios: los testimonios son importantes y con elementor tienes varias opciones para integrarlos.
  • Cuenta atrás: Cuenta regresiva muy personalizable con el que podrás mostrar logros o incluso promociones con tiempo limitado.
  • Botones de compartir en redes sociales: si quieres evitar un plugin de redes sociales, puedes crear unos personalizados.

Dichos botones personalizados podrás insertarlos en cada página de tu WordPress guardando una plantilla y generando un shortcode fácilmente adaptable a cualquier parte de tu web, el resultado es muy bueno y evitarás instalar otro plugin.

  • Botones de Facebook: aunque las opciones de redes sociales ralentizan el sitio, puede ser interesante mostrar cajas con los últimos comentarios, compartidos etc.

Todo esto se puede hacer copiando el "iframe" de Facebook, pero Elementor te lo pone fácil a golpe de clic, interesante opción para quien quiera explotar al máximo las redes sociales.

  • Pestañas o acordeones: inserta cajas con pestañas que se abren funciona realmente bien.
  • HTML o shortcodes: importantes opciones para insertar códigos, que se mostrarán en cualquier parte de la web, a través de este widget.
  • Ancla: si alguna vez has visto que haciendo clic en un botón, hace scroll hacia más abajo, es muy fácil de conseguir, usando esta opción de Elementor PRO.

Aunque esta función se puede conseguir asignando un id por código en HTML, en un clic lo tienes muy fácil con el maquetador elementor.

Este widget es muy práctico, si tu web es una "One Page".

  • Plantillas: puedes guardar cada elemento, que crees e insertarlo donde quieras, con esto ahorrarás mucho trabajo de diseño.

Igualmente, el plugin te permite guardar plantillas creadas.

Estos son algunos de los elementos que trae este maquetador visual. Además, a través de diferentes widgets, podrás insertar más opciones todavía.

¿Cómo maquetar tus contenidos con Elementor Page Builder?


Maquetar tus páginas con este plugin es muy fácil y cada una de las opciones es personalizable al 100%, como te he comentado anteriormente y además comprobarás en el siguiente vídeo:



La maquetación desde Elementor se hace desde el frontal, con lo cual, podrás ver todos los cambios "en vivo" y comprobar lo que vas haciendo.

El funcionamiento es básico, ya que solo tendrás que arrastrar y soltar los elementos que necesites a cada sección.

Dentro de cada una de las secciones, podrás integrar los elementos que necesites para el diseño.

Cada una de sus opciones se puede personalizar a nivel de contenido, estilo o una configuración avanzada, donde aparte de poder dar efectos o añadir CSS, podrás contar con las opciones de padding, pudiendo poner cada elemento en el lugar que necesites.

Consigue el mejor diseño para tu "home", tu landing page o tus páginas de servicios. Además, puedes instalar el plugin de Woocommerce, con el que podrás hacer de tu web una tienda online.

No es recomendable usar maquetadores para crear tus artículos, pero puedes insertar elementos dentro de ellos, a través de los shortcodes generados cuando guardas una sección.

Esto es una maravilla cuando quieras insertar artículos relacionados al final del post, botones sociales o formularios de suscripción.

Elementor Page Buider en responsive   

El diseño responsive es uno de los puntos fuertes de este plugin, ya que la opción de personalización móvil que incluye al maquetar sus contenidos no existe en otros maquetadores.

Llama la atención la forma tan rápida y sencilla de adaptar cada página, para que se vea correctamente en la versión móvil.

Podrás cambiar los tamaños y paddings, para que se ajuste al 100%, así como excluir partes que no necesites que se muestren en estos dispositivos.

Teniendo en cuenta que hoy día se ve más Internet desde el móvil que desde el escritorio, hay que darle mucha importancia a este factor diferencial.

Conclusión

El plugin Elementor Page Builder está a otro nivel en cuanto a plugins para diseño web en WordPress y es en la actualidad el número uno de los editores visuales.

Si tienes en cuenta que las mejoras y añadidos que incluyen sus creadores son continuos, hay maquetador para largo. De hecho, sus más de 300.000 instalaciones activas lo dicen todo.

Es fácil, intuitivo, rápido y editable al 100% ¡Lo tiene todo!

¿Tú qué opinas? ¿aún no has probado Elementor Page Builder?

Comparte el post en las redes sociales si crees que este plugin merece la pena.


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



José M. Peña

Diseñador web especializado en WordPress y consultor de Marketing Digital | Trabajo como freenlance realizando sitios web para clientes que desean hacer crecer su negocio a través de internet | Además, enseño en mi Blog cómo crear un proyecto web absolutamente de cero |Me puedes encontrar en las redes sociales.
Twitter | Facebook

Sitio Web: tuwebdecero.com

Plugin Optimización de Imágenes Gratuito para WordPress