Qué es un maquetador visual y por qué importa el front-end

Escrito por

en

What-is-a-Page-Builder-and-Why-Front-End-MattersSi eres un bloguero empedernido en el que toda la creación de contenidos que realizas gira en torno a escribir artículos completos que contienen alguna que otra imagen complementaria, entonces tal vez el editor de contenidos TinyMCE existente sea suficiente para tus necesidades. El conjunto de herramientas actual ya contiene las herramientas necesarias para escribir artículos: dispones de las herramientas básicas de formato de texto, como negrita, cursiva, encabezados, etc. Pero eso es prácticamente todo.

Sin funciones prácticas de maquetación

Aunque puedes escribir artículos con el editor de contenido TinyMCE actual, no hay una forma decente de maquetar tu contenido más allá de tener una única columna de texto continuo. De forma predeterminada, no puedes distribuir el texto en dos o más columnas, ni puedes crear contenido dividido en secciones con un color de fondo diferente. Si quieres que otras secciones de tu sitio web, como las páginas de aterrizaje y las páginas de contacto, sean únicas, necesitarás algún tipo de capacidad básica de maquetación.

Otros han intentado eludir este problema utilizando la función de shortcodes de WordPress. En pocas palabras, los shortcodes permiten insertar fragmentos de código mediante etiquetas especiales. Existen plugins de WordPress que introducen diferentes shortcodes que puedes utilizar para crear contenido en columnas. Por ejemplo, podrías envolver tu contenido con múltiples etiquetas de columna si quieres colocarlo en un diseño de dos columnas. Aunque este método «funciona», no es visualmente intuitivo, ya que con el tiempo, a medida que añades más contenido, todo parecería un enorme desastre.

Para llenar este vacío en la maquetación, se crearon los maquetadores visuales (page builders).

Page building blocks

Los maquetadores de páginas facilitan la creación de contenido maquetado

Los maquetadores visuales te ofrecen herramientas adicionales que facilitan la organización de tu contenido en diseños únicos. Por lo general, los page builders eliminan el editor de contenido TinyMCE del back-end y lo reemplazan (o agregan) por uno nuevo que te ayuda a visualizar tu contenido. Si no has utilizado un constructor de páginas back-end antes, imagina un conjunto de bloques donde cada bloque representaría un tipo de contenido: una imagen, texto o un shortcode. Luego te permitiría arrastrar y soltar esos elementos en diferentes disposiciones y columnas.

Aparte de la maquetación, los maquetadores de páginas también facilitan la creación y colocación de shortcodes. Antes, podías ver los shortcodes en todo su esplendor en formato sin procesar. Veías los corchetes junto con todos los atributos y valores mezclados dentro de tu contenido. Los page builders suelen incorporar creadores de shortcodes: cuadros de diálogo emergentes que hacen que la selección de atributos de shortcodes sea mucho más fácil de usar que escribirlos a mano.

Los constructores de páginas front-end son el futuro

Si bien todo esto representa una mejor experiencia para los diseñadores y creadores de contenido, un maquetador de páginas de back-end tiene un gran problema inherente. Aunque puedes ver una representación visual de cómo se vería tu contenido, lo que estás viendo no es tu contenido real. Esto lleva a las personas a comprobar constantemente la vista previa de sus páginas para ver si lo que están haciendo es correcto. Al utilizar maquetadores de páginas de back-end, yo personalmente hago clic en el botón de vista previa al menos 20 veces con facilidad, solo para comprobar si mi contenido está alineado correctamente o si mis márgenes están espaciados de manera uniforme. Esto supone una molestia que consume muchísimo tiempo.

Para solucionar este inconveniente, los maquetadores de páginas deberían trasladarse al front-end. Si esto se hace, se eliminaría la parte de adivinanza en la maquetación de páginas, ya que podrás ver tus resultados de inmediato.

Por el momento, hay muchos maquetadores de páginas para el back-end y solo un puñado para el front-end. Entre ese reducido número se encuentra Page Builder Sandwich. Si quieres saber más sobre qué hace único a Page Builder Sandwich y por qué es la herramienta adecuada para ti, lee el artículo How Page Builder Sandwich Is Different from the Rest.