Han pasado 10 meses desde que lanzamos Page Builder Sandwich al público. Ahora contamos con alrededor de 6000 instalaciones activas, y eso es todo un logro para nosotros. También hemos recibido una gran cantidad de comentarios al respecto, tanto buenos como malos. El consenso, sin embargo, es que a la gente le gusta lo fácil que es crear composiciones y su contenido en comparación con otros constructores de páginas del mercado.
Gran parte de los comentarios que recibimos fueron solicitudes de funciones, y hemos añadido muchas de ellas a lo largo de los últimos meses. Pero, a medida que lo hacíamos, también comenzamos a cambiar lentamente la interfaz de usuario en el proceso. Y, en consecuencia, también estábamos cambiando la experiencia de usuario… a peor. Se llegó a un punto, no obstante, en el que necesitábamos repensar la interfaz, porque sencillamente ya no funcionaba con fluidez y las distintas funciones tampoco encajaban bien con ella.
La interfaz obsoleta
En las versiones anteriores de PBS, queríamos que todo tuviera forma de botones. ¿Por qué? Porque los botones son fáciles de usar. Solo tienes que… hacer clic en ellos. En las versiones más antiguas del inspector (la barra lateral de la imagen superior), hacer clic en un botón aumentaba un valor, y hacer Mayús+clic en un botón lo disminuía. Parece bastante fácil. Pero con la incorporación de carruseles, pestañas, mapas y otros nuevos elementos y funciones, todos esos botones se convirtieron en una mezcolanza de diferentes iconos con distintos diseños, y empezaron a parecerse más a jeroglíficos que a una interfaz atractiva. Esto no era un problema para los usuarios experimentados, pero resulta bastante intimidante a la vista si acabas de llegar a PBS.
Por otra parte, empezaron a surgir un par de problemas en el inspector. La idea original era hacer que todo fuera sencillo y estuviera disponible dentro del inspector. Y por todo, me refería a todo: desde convertir texto en encabezados hasta cambiar colores de fondo, colores de fuente, lo que se te ocurra. En su estado actual, sin embargo, el inspector ahora contiene un montón de opciones que te obligan a usar la rueda del ratón para desplazarte hacia arriba y hacia abajo constantemente. Algo bastante diferente del inspector que esperaba crear en su momento para los usuarios.
Por último, hace poco introdujimos el mapeo de shortcodes para tus plugins favoritos. Esta función nos obligó a crear campos de texto, controles deslizantes de números, casillas de verificación y nuevos tipos de opciones adicionales necesarios para que tu experiencia de edición de shortcodes fuera más agradable. Al principio fue una buena idea y, sí, facilitó la manipulación de shortcodes. Pero, una vez más, esta función se desviaba de nuestra interfaz de «solo botones». En retrospectiva, era realmente imposible utilizar únicamente botones para modificar los atributos de los shortcodes. Ahora, en la última versión, nos encontramos con dos tipos de controles: los botones y los campos de shortcode.
Hay algunas razones más que nos hicieron decidir que nuestra interfaz ya no era eficaz (o adecuada para nuestras necesidades), pero los puntos anteriores son los principales. Sin embargo, siempre tuvimos una cosa clara: sabíamos que teníamos que actualizar la interfaz.
Definir cómo debería funcionar idealmente un constructor de páginas
En lugar de lanzarnos a cambiar las cosas de inmediato, dimos cien pasos atrás para observar toda la experiencia del constructor de páginas en su conjunto. Queríamos insuflar nueva vida a la interfaz. A decir verdad, no queríamos tener que reconstruirla año tras año. Es agotador y definitivamente no aporta una ayuda significativa a la comunidad de WordPress. Esta vez, decidimos hacer las cosas despacio y con cuidado. Hemos estudiado cada rincón de Page Builder Sandwich y qué es lo que lo convierte en un buen maquetador, y finalmente hemos plasmado toda la experiencia de edición en unos pocos conceptos esenciales.
Concepto esencial n.º 1: Escribir directamente en tu contenido para editar elementos
Uno de los motivos principales para instalar un constructor de páginas es librarse de las limitaciones del editor de texto del backend de WordPress. No es que el editor del backend no sea bueno, pero al crear tus páginas web, no te muestra de inmediato cómo se vería tu página para los visitantes de tu sitio, ni te permite maquetar tu contenido más allá de un diseño de una sola columna. Solo puedes ver tu texto allí y algunas imágenes, pero nada de los elementos más elaborados (p. ej., formularios de contacto). Puedes añadir shortcodes, sí, pero no se mostrarán en su forma renderizada*.
* Hay plugins creados por terceros para solucionar esto, como Shortcake UI, pero esa no es la cuestión.
Ahí es donde entran en juego los constructores de páginas frontend. Llevan la experiencia de edición fuera del backend y la trasladan al frontend, permitiéndote editar tu sitio tal y como lo verían realmente tus visitantes. Como diría Pippin: lo que ves es lo que obtienes (WYSIWYG).
Otra ventaja de ser un editor frontend es que te permite editar el texto directamente. Escribir en los encabezados y párrafos aporta la sencillez habitual de un procesador de textos a la creación de sitios web. Los botones y las etiquetas de las pestañas también deberían poder modificarse simplemente haciendo clic sobre ellos y escribiendo.
Este es un aspecto en el que la mayoría de los demás constructores de páginas no dan la talla. La mayoría te obligan a escribir dentro de un campo de texto para editarlo todo. Una vez más, este no debería ser el caso en auténticos maquetadores frontend. Escribir y editar texto directamente ha sido un punto fuerte de Page Builder Sandwich desde la versión 2, y nos hemos asegurado de que esto se mantenga en la versión 3.
Concepto esencial n.º 2: Utilizar el ratón para realizar ajustes rápidos
El ratón es una herramienta potente que a menudo se descuida en los maquetadores de páginas. Muchas veces, los constructores de páginas lo utilizan solo para permitir a los usuarios arrastrar elementos y soltarlos en diferentes ubicaciones, o para hacer clic en botones o campos de entrada. Aunque esto está bien, se puede hacer mucho más con el ratón en la maquetación de páginas.
Por un lado, existe una fantástica respuesta visual al utilizar el ratón como herramienta de edición en la página, especialmente al ajustar propiedades visuales como márgenes, rellenos y tamaños. Ahora, retocar tus elementos se convierte en una experiencia natural.
En la versión 3 de PBS, podrás ajustar varias cosas utilizando el ratón. Podrás ajustar márgenes/espaciados entre elementos individuales, los rellenos dentro de tus columnas, así como los tamaños de imágenes, iconos y mapas. También hemos sustituido por controles deslizantes aquellos botones que te permitían cambiar valores numéricos.
Concepto esencial n.º 3: El texto debe ser fácil de estilizar
Si te alejas un poco de la pantalla, notarás que la mayor parte de lo que añades en tus páginas web es contenido textual. Sí, incluimos imágenes e iconos para acompañarlo, y últimamente solemos añadir imágenes más grandes en nuestros sitios. Pero la mayor parte del contenido importante es texto: encabezados, listas con viñetas, párrafos, citas, etc. Junto a esto está cómo damos estilo a nuestro texto para adaptarlo a nuestros diseños: cambiamos sus tamaños y colores, o lo ponemos en negrita o cursiva. Esto sirve para que nuestro contenido sea más legible, relevante y atractivo para nuestros lectores.
Dado que aplicamos estilos al texto con frecuencia, los botones que nos permiten cambiarlos deberían ser muy accesibles. No deberían estar escondidos dentro de una ventana emergente que tengamos que abrir previamente. La mayoría de los constructores de páginas sufren este mal. Con tal de que su interfaz de usuario se considere «despejada», ocultan a la vista incluso las opciones más utilizadas.
Para solucionar esto, nos fijamos en los procesadores de texto más habituales. Observamos que suelen tener una fila con un gran número de botones cerca de la parte superior de la pantalla para dar formato al texto, y copiamos esa misma disposición para la versión 3. Ahora disponemos de una fila con todos los botones de estilo de texto siempre visible en la parte superior de la pantalla. Esto hace que dar estilo sea realmente rápido y se convierta en algo prácticamente instintivo al editar texto.
Concepto esencial n.º 4: Las opciones avanzadas de estilo deben ser flexibles pero fáciles de entender
La clave de un constructor de páginas es que debe permitir a las personas crear diseños impresionantes fácilmente. Esto significa que debemos ofrecer una gran variedad de ajustes y opciones sin que ello implique una curva de aprendizaje compleja. Poder ajustar márgenes, rellenos y dar estilo al texto está muy bien, pero esas opciones tienen sus límites. Necesitarás funciones mucho más elaboradas para completar el trabajo, tales como imágenes de fondo, patrones, bordes, fondos fijos y más. Amontonar todos esos ajustes puede resultar abrumador, por lo que hemos simplificado algunos de ellos y los hemos organizado por categorías para hacer las cosas más intuitivas en la versión 3.
Concepto esencial n.º 5: Compatibilidad con shortcodes
Por último, no olvidemos que nuestro maquetador de páginas se apoya sobre WordPress. Debemos adaptarnos a la plataforma y a sus características, y no limitarlas ni alejarnos de ellas. Una funcionalidad enorme que ofrece WordPress son los shortcodes. Esto no significa que todo el contenido deba estar compuesto por shortcodes —eso sería un caos—, sino que simplemente debemos ser compatibles con ellos. Muchos plugins y temas utilizan shortcodes, y sería una gran pérdida si los ignoráramos por completo. De hecho, los shortcodes brindan a los usuarios la máxima flexibilidad a la hora de crear páginas.
Hace unas semanas introdujimos nuestro sistema de mapeo de shortcodes y, gracias a él, hemos mapeado cientos de shortcodes de cientos de plugins. Hemos dado prioridad a los plugins más populares del directorio de plugins de WordPress, por lo que es muy probable que los encuentres en tus propios sitios. Esto no ha hecho más que consolidarse en la versión 3, y continuaremos mejorándolo de cara al futuro.
Conclusión
Hemos reunido todas las propiedades esenciales descritas arriba y las hemos incorporado en la versión 3 de Page Builder Sandwich. Es el mejor constructor de páginas que hemos creado para WordPress hasta la fecha. Es más intuitivo y natural de usar, ofrece un rendimiento más rápido, es más fácil de utilizar y resulta más accesible que nunca.
Si tienes alguna sugerencia sobre alguna función que consideres imprescindible en un constructor de páginas, háznoslo saber dejándonos un comentario a continuación.