Qué son y para qué sirven los maquetadores visuales

Qué es y para qué sirve un maquetador visual wordpress

En inglés se conocen como Page Builders y en castellano podríamos traducirlo por Constructores de Páginas, pero haciendo caso a su funcionalidad a mí me gusta denominarlos Maquetadores Visuales (quien tenga una traducción más apropiada que la deje en los comentarios si quiere).

Se llamen como se llamen, su uso se ha popularizado de tal forma que hoy en día no hay blogger asentado en el mundillo que no utilice uno (o lo haya intentado). Pero, ¿porqué surgen estos plugins?

Una necesidad palpable

Qué son los maquetadores visuales

Las últimas cifras relacionadas con el uso de WordPress que encabezan este otro post ponen de manifiesto algo que los diseñadores ya veníamos sospechando desde hacía tiempo: la popularidad de este CMS hace que hasta los usuarios más reticentes se animen a usarlo.

Que WordPress sea tan popular se debe, entre otras cosas, a su relativa simplicidad. A la rápida curva de aprendizaje de la que puede presumir y de lo amigable que convierte la ardua tarea de la actualización de contenidos web por parte del cliente.

Esto ha provocado que existan bloggers con escaso o nulo conocimiento de lenguajes de programación que pueden desarrollar con normalidad su actividad sin sentir la necesidad de aprenderlos.

Debido a esto, el editor visual que trae WordPress por defecto se había quedado un poco desfasado. Con él tenemos muy limitada la maquetación de nuestros textos, pudiendo únicamente añadir encabezados, imágenes, colores y formateados (negrita, cursiva) con un clic.

Las plantillas premium para WordPress estaban empezando a incluir cada vez más sliders y efectos jQuery, y los contenidos de los artículos se estaban quedando demasiado sosos en comparación con las demás páginas.

Todo esto fue el caldo de cultivo perfecto para el origen de los maquetadores visuales.

Qué es y para qué sirve un maquetador visual

Qué es un maquetador visual WordPress

Un maquetador visual es un plugin que se instala y activa en tu WordPress para ampliar las funcionalidades del editor visual de WordPress. Se trata de un extra que ayuda al usuario a convertir sus contenidos en un material mucho más atractivo visualmente: con él te animarás a añadir secciones de color, iconos, gráficos, animaciones, botones… Y a jugar con la estructura del texto dentro del post, probando la colocación del contenido en varias columnas.

Y esto no se queda solo aquí, sino que las últimas actualizaciones de los maquetadores visuales han traído una novedad sorprendente: la posibilidad de editar un post “en directo”. Lo habitual es diseñar desde las entrañas de WordPress, sin ver los resultados en tiempo real. Pero ya puedes cambiar esto y maquetar de una forma mucho más cómoda, como si de un programa de maquetación editorial profesional se tratase.

Un maquetador visual bien utilizado puede mejorar las estadísticas de experiencia de usuario de un sitio web: porcentaje de rebote, tiempo de permanencia, interacción con el contenido…

Tipos de maquetadores visuales

Tipos de maquetadores visuales

Se pueden hacer dos claras diferencias en cuanto a los maquetadores visuales disponibles en el mercado en función de su precio:

  • Maquetadores Visuales gratuitos: el único que conozco es el veterano es Page Builder, creado por los chicos de Site Origin. Está instalado actualmente en más de 700.000 webs, y dice que una de sus principales virtudes es que se puede usar con cualquier tema para WordPress. [ACTUALIZO: ha salido un nuevo maquetador gratuito con muy buena pinta llamado Elementor que espero probar dentro de poco.]
  • Maquetadores Visuales de pago: los más conocidos son Visual Composer (uno de los primeros), Divi Builder (que está dentro del tema Divi) o Thrive Content Builder (el que está de moda).

Lo que tienes que tener en cuenta con los maquetadores visuales

eliminar-codigos-shortcode

Estos plugins se sirven de los shortcodes para hacer llamadas al código que realmente ejecuta eso tan bonito que estamos viendo en pantalla. Y ya se sabe lo que sucede al utilizar los shortcodes: que mientras los estás usando todo va bien, pero tan pronto como quieras o te veas obligado a cambiar de plugin… ¡Todo se rompe!

Esto lo tienes que tener muy presente: cada maquetador visual que usas se sirve de muchos shortcodes que únicamente él puede interpretar.

Por ejemplo: imaginemos que quieres probar Page Builder Visual Composer para poder decidir si realmente te gusta esto de la maquetación y de si te valdrá la pena comprar algún plugin premium. Lo instalas, lo empiezas a usar y quedas contento con el resultado. Como sabes que los premium ofrecen funcionalidades ampliadas, decides entonces eliminar Page Builder Visual Composer para comprar e instalar Visual Composer Thrive Content Builder

¡Menudo desastre! TODO el contenido que has maquetado durante horas, aparece plagado de trozos de código impronunciables. Estas son las sorpresas de los shortcodes (esperemos que en un futuro esto no suceda y se eliminen automáticamente). Mientras tanto, no te viene nada mal tener a mano este post en el que expliqué tres métodos diferentes para eliminarlos para siempre.

[EDITO: ahora Page Builder ya no trabaja con shortcodes, por lo que no deja código disperso por nuestra página una vez lo desinstalamos. ¡GENIAL!]

Recapitulando:

  • Los maquetadores visuales resuelven una clara demanda de los bloggers.
  • Ayudan a mejorar las estadísticas de tu blog y hacen el contenido más atractivo.
  • Existen maquetadores visuales gratuitos y de pago.
  • Al cambiar de maquetador visual pierdes todo el diseño anterior.

¿Utilizas algún maquetador visual? ¿Quieres compartir tu experiencia?

4 Comentarios

Hola Lúa.

Solo comentarte que el maquetador de SiteOrigin, no usa shortcodes (es el que yo tengo). Lo sé, porque cuando he desactivado la opción de maquetar con él, todo el texto se veía bien aunque sin maquetacion alguna, no había shortcodes por ningún sitio.

Beaver Builder, tampoco hace uso de shortcodes, según Oscar (creativolandia).

No se puede decir lo mismo de los que citas: Visual composer, Thrive content builder, Divi. Oscar hizo la prueba y encontró dicho defecto, en los citados.

Saludos.

AUTOR

¡Hola Joan! Qué alegría saber de nuevo de ti.
Pues acabo de comprobarlo ahora mismo y es cierto, Page Builder ha dejado de utilizar shortcodes para hacer uso de clases y estilos inline. Sin duda, mucha mejor solución que la que nos daban los maquetadores visuales hasta ahora.

No he probado Beaver Builder, pero tengo ganas de experimentar con Elementor, que ha llegado con mucha fuerza.

Sin duda el campo de los maquetadores visuales está creciendo a un ritmo muy alto y no podemos perdernos ninguna novedad.

¡Saludos y gracias por tu aportación! Ahora mismo corrijo el post.

Hola Lúa.

Pues la verdad es que en abril hice un uso exhaustivo del PageBuilder de SiteOrigin (aunque aún me faltan cosas por usar) y trasteando con las opciones de clonar páginas es que me tope con la opción de volver al editor normal, y ahí lo comprobé. La maquetación desaparece y si queremos volver a PageBuilder, todo tu contenido se recopilaba en una sola fila, como si lo hubiéramos hecho con el editor propio del maquetador.

Yo no he probado más maquetador que éste de SiteOrigin, aunque estuve tentado de probar Beaver Builder. En lo relacionado con Elementor, hace poco que me enteré de su existencia y sí que viene pegando fuerte. De hecho, Bill Erickson (EE.UU.), es un reputado desarrollador en WordPress (me gustan sus etapas de creación/testeo) y hace mención en su sitio web a este último maquetador web, el cual combina con framework Genesis.

Y dicho esto, por fin me entero que es un framework (sí, no me pegues) y he investigado los últimos días sobre ello, topándome en el codex de WordPress, de varios recomendados y gratuitos. Uno de los que más me ha impactado, ha sido Gantry 5 (junto con Unyson). Pero no encuentro nada de información con respecto a si usa shortcodes, y es que tiene cierto parecido (exterior) con Divi.

Si podrías echarle un vistazo te agradecería (al menos en relación a que no use shortcodes como Divi). Parece ser que funciona también con Joomla.

Por de pronto, mi Pinterest se está convirtiendo en mi propia biblioteca particular, entre temas y plugins WordPress (y otras tantas cosas), pero claro viniendo del mundo HTML y CSS, me gustaría crear algo desde 0, como hacia antes y Gantry 5 tiene pintaza.

Saludos Lúa, pasa felices fiestas y próspero año 2017 🙂

AUTOR

Ahora mismo al coexistir varios maquetadores visuales en el mercado los avances que hacen unos pronto son adaptados a los demás, y esto permite que vayan evolucionando y que fallos y defectos que tenían antes pasen a estar solucionados en el tiempo. Por eso es una tarea bastante compleja intentar tener posts actualizados constantemente sobre todos ellos… Pero no imposible.

Si estás interesado en conocer el mundo de los maquetadores visuales, te recomiendo que te hagas una instalación en local para hacer tus propias pruebas y que empieces a utilizar otros plugins distintos a Page Builder. Vas a ver muchas diferencias, ya no solo en la interfaz y experiencia del usuario utilizándolos, sino distintas velocidades de carga a la hora de trabajar con ellos. Es un ejercicio interesante, desde luego.

En cuanto a lo que comentas sobre Gantry 5, voy a echarle un ojo durante estos días. Pero ya te adelanto de que no tiene nada que ver con Génesis.

Yo también venía del HTML y del CSS y aquí me tienes. Si estás interesado en empezar a desarrollar temas desde 0 te recomiendo que busques información sobre los Starter Themes (el más utilizado y conocido es Underscores). Vas a descubrir cosas muy interesantes… 🙂

¡Saludos y felices fiestas a ti también!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *





Lúa Louro te informa que los datos de carácter personal que proporciones cubriendo este formulario serán tratados por Lúa Louro González como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud. Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Raiola (mi proveedor de hosting) dentro de la UE. Ver la política de privacidad de Raiola. Legitimación: Consentimiento del interesado. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@lualouro.com así como el derecho a presentar una reclamación ante una autoridad de control.Puedes consultar la información adicional y detallada sobre Protección de Datos en https://lualouro.com, así como consultar mi política de privacidad.