187 | Errores a evitar cuando usas un page builder

En el episodio 187 de WordPress Semanal repasamos 6 detalles importantes a tener en cuenta cuando diseñas tus páginas con un Page Builder como Elementor, Divi o similar. Vamos allá. Hola hola, Soy Gonzalo de Gonzalonabarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de crear y gestionar tu propia web con WordPress. Y hoy te voy a hablar dentro de la gran tendencia que vemos, que cada vez es algo más habitual, y es valerte de un constructor visual, de un Page Builder para hacer realidad los diseños que tengas en mente o los diseños que te hayan pasado si es que trabajas con un diseñador. Pues bien, cada vez es, como digo, más habitual el uso de constructores visuales y más allá de la guerra de Page Builder. Sí, Page Builder no es algo que está para quedarse y que hay tanto usuarios finales que lo van a utilizar y que les es muy útil, como implementadores, como incluso desarrolladores, porque aunque se desarrolle una base, después puede llegar a ser muy cómodo y muy útil utilizar un Page Builder para determinados diseños. Pero todo esto no quiere decir que por el mero hecho de utilizar una herramienta que te facilita la vida, no haya unas buenas prácticas para usarla. Y y como veremos a lo largo del episodio, esas buenas prácticas van a coincidir en muchos casos con las que seguiríamos o las que yo entiendo que se deben seguir, se use o no un constructor visual. Pero bueno, no me quiero adelantar. Vamos a ver ahora, como digo, seis consejos o seis errores a evitar, dependiendo de cómo lo quieras enfocar. Pero antes de entrar de lleno en ello, vamos a ver las novedades qué está pasando en Gonzalo Navarro es esta semana. Y tenemos por un lado la novedad que sale todos los martes, que no es ni más ni menos que un nuevo vídeo de la zona código donde os enseño a eliminar menús de la barra de admin de WordPress. Un suscriptor estaba haciendo alguno de los vídeos de la zona código en los que enseño cómo añadir un logo a la parte del dashboard, la parte de administración. También enseño cómo cambiar el texto del footer. Esto de hecho con WordPress tal, tal, tal. Hay otros vídeos de la zona código donde enseño a modificarlo. Incluso también enseño a modificar el logo de la página de inicio. ¿En fin, he cubierto varias cosas a este respecto en cómo se puede personalizar, digamos la parte interna, la parte de administración, pero me habéis dejado algo por el camino y uno de los suscriptores me preguntó oye Gonzalo, me has enseñado todo esto, pero cómo hago si quiero, por ejemplo, eliminar esos menús que aparecen en la barra de administración? Por ejemplo, si ahora mismo vas a tu panel de WordPress, verás que a la izquierda del todo, en la esquina superior izquierda, tienes o el logo de WordPress o un logo personalizado, si es que has usado el código que te enseñé hace ya bastantes vídeos en la zona código, concretamente el vídeo 24. Pues si te pones encima de ese menú, ya estés en la parte frontal de la web o en la parte de administración, la parte de atrás, vas a ver una serie de enlaces acerca de WordPress, un enlace WordPress, otra documentación de WordPress, otra soporte, otras sugerencias. Pues bien, esos menús, esos enlaces, puedes desactivarlo, puedes hacer que directamente no aparezcan, pero también puedes desactivar el menú que lleva a la parte frontal, el menú que te permite añadir algo nuevo, una página nueva, un usuario nuevo. Aquí depende de lo que tengas incluido, pues te aparecerán unas cosas u otras. En definitiva, podemos controlar qué menús se muestran en la conocida como toolbar o barra de administración de WordPress, La Barra Negra que aparece arriba, y de esa forma tenerla pues totalmente a medida, ¿De acuerdo? Eso es lo que vemos en este vídeo de la zona código, que es el 138 y al que podéis ir si vais a Gonzalo Navarro es códigos 138. Fantástico. Más cositas en cuanto a cursos, pues este mes ya os comenté que he renovado de principio a fin el curso de WooCommerce, he visto que muchos lo estáis rehaciendo y también he notado nuevos suscriptores que se han apuntado, así que genial. Bueno, WooCommerce, pues ya sabéis que es el plugin más importante para crear tiendas online. Si necesitáis crear una y queréis una guía paso a paso sobre cómo crearla, con los ajustes concretos, con cómo poner la configuración de los impuestos, cómo configurar el tema de los envíos y por supuesto cómo crear productos y el resto de detalles, pues ahí tenéis, como digo, el curso que está incluido con la suscripción a mi web, que simplemente si no estáis apuntados Gonzalo es cursos y ahí tenéis todo lo que incluye y la forma de apuntaros. Fantástico. Recordad que en esta parte de enlaces también pongo algunas recomendaciones. Por ejemplo, en este episodio, como voy a hablar de Page Builders y de pues digamos, themes que también vayan bien con los Page Builders, pues tenéis el curso de Elementor, el curso de GeneratePress y el curso de Divi. Os dejo enlaces a todos ellos, podéis ir directamente a verlos en la web si vais a GonzaloNabarro es 187. Genial. Una vez vistas las novedades, nos vamos con el plugin de la semana, que es para hacer que tus páginas vuelen. Ya os recomendé hace algunos episodios un sistema que a su vez trae un plugin para WordPress que hace que los enlaces que tengan en tu web carguen más rápido. Y básicamente el proceso es que te pones encima de un enlace y a través de un código JavaScript se empieza a generar o a cargar la página por detrás, de forma que cuando se haga clic en el enlace en cuestión, la impresión del usuario es que tu web carga súper rápido. Y el plugin que os recomendé en ese momento se llama Instant Page, pero hace poco di con un desarrollador que ha creado un plugin que se llama Flying Pages y que él promete conseguir lo mismo pero utilizando un método mejor, porque no sólo precarga la página cuando pones el ratón por encima, sino que también la precarga si hay enlaces que se están viendo en la pantalla. Por ejemplo, detecta que. Imagínate, mi página web detecta que tengo los enlaces del menú principal. Si yo tuviese enlaces debajo, es decir, si hago scroll y ahí también hay enlaces, eso no me los precarga. De esta forma se evitan sobrecargas y además tiene un límite sobre cuántos enlaces puede cargar por segundo. Es decir, digamos que coge lo mejor de Instant Pages y lo mejor de otro sistema del que ahora mismo no recuerdo el nombre, pero hay como dos sistemas, el de Instant y otro más, y uno pues detecta los enlaces que hay, como digo, en el viewport, es decir, en lo que se ve en el navegador y otros simplemente los empieza a cargar cuando pones el ratón por encima. Este combina lo mejor de los dos mundos y además pone límites para que no haya sobrecargas. Así que podéis echarle un vistazo de nuevo se llama Flying Pages, tenéis en enlace en las notas del programa, recordad que este es el episodio 187. Y ahora ya sí, nos vamos con el tema central, seis buenas prácticas en el uso de un constructor visual. Y el primero de mis consejos es que partas de una buena base si vas a utilizar un Page Builder, sobre todo, digamos de una forma bastante habitual, si la mayoría de tus páginas se van a basar en diseños que hagas con un Page Builder, ya sea Divi o ya sea Elementor o Bibel Builder o el que uses, pues en ese caso lo ideal es que uses un Theme compatible con tu Page Builder, o yo ya publiqué un episodio al respecto que se llama Mejores Themes para implementadores y ahí hablo de themes como GeneratePress, como Astra, como Ocean WordPress, que están pensados para utilizar un Page Builder encima. Y hay otros, de hecho, por ejemplo, después si te vas a constructores específicos, por ejemplo Divi ya sabemos que tiene su propio Theme, y en el caso de Elementor también tienen un Theme que lo sacaron, se llama Hello Theme, que aún no lo he probado, me gustaría probarlo y quizás haga un curso en el uso de Hello Theme en combinación con Elementor, que básicamente la gracia de esto es que te da mucho control. Si además quieres diseñar partes estructurales como pueden ser el menú, el footer y ese tipo de cosas, sería digamos como construir tu tema entero, el aspecto entero de la web y no solo páginas concretas. Entonces, esto es importante, dependiendo del uso que le vayas a dar a tu Page Builder, quizás necesites un thing muy concreto, muy específico, que no te ponga restricciones por ejemplo en el ancho de las páginas, por porque si no, a lo mejor alguna vez lo has probado, instalas alguno de los themes de estos típicos que vienen con WordPress, te pones a diseñar una página y resulta que no te queda como en la demo a lo mejor que te ofrece Elementor, sino que te queda como la página entera y luego el diseño pues ahí como pegado encima, pero se ve mucho espacio por arriba, por abajo, por los lados. Entonces si tienes un thing que te dé ese control, que te permita empezar a diseñar con una plantilla en blanco, digamos, pues será mucho más fácil, ¿De acuerdo? Ese es el primer punto y que creo que es casi el único que sería específico o que simplemente vale para cuando usas un Page Builder. Creo que el resto de consejos que te voy a dar se podrían aplicar a cualquier diseño que hagas en WordPress o a cualquier momento en el que te pongas digamos a crear o a mejorar tu página web hecha con WordPress. El segundo consejo es que desactives los cachés cuando estás diseñando, cuando estás haciendo grandes cambios es muy frustrante que te pongas a cambiar el aspecto de una página, que hagas un montón de modificaciones y que después cuando vayas a verlo no se reflejen los cambios y tú no sepas si es que has hecho algo mal. No funciona el plugin que estés usando, no funciona si has puesto algo de código, el código que hayas puesto. Entonces para esto es importante que cuando estés en ese proceso que desactives los cachés. Primero tienes el caché del navegador que estés usando, que aquí ya he recomendado alguna vez un plugin que se llama Prevent Browser Caching, os dejo un enlace. Esto si estáis trabajando digamos en la versión en vivo de vuestra web, pues puede ser muy útil para que no se cargue o no se quede guardado el caché en el navegador y así veas los cambios al instante. Pero después a nivel de servidor puede que también tengas caché, por ejemplo en SiteGround lo tienes, tienes la opción, pues puedes desactivarlo momentáneamente mientras estás trabajando en los cambios de tu web y aparte si tienes un plugin de caché, pues lo mismo, o lo desactivas momentáneamente o si tienes alguna opción de pausarlo dependiendo del plugin, pues lo haces y ya cuando ya tengas todo listo, cuando tus cambios estén correctos, vuelve a activar los servicios de caché que estés utilizando porque al final es una buena medida que va a mejorar la experiencia de uso de tus visitantes. ¿De acuerdo? Ese es el segundo consejo. Nos vamos con el tercero, que este es uno de productividad que me encanta y básicamente es establecer la paleta de colores de antemano y los Page Builders te facilitan esto, suelen hacerlo, suelen traer una opción para que puedas definir tus colores de antemano, tanto a nivel general como si estás en una página concreta. Por ejemplo en Elementor tienes una opción para definir tu paleta de colores en los ajustes generales, que tú siempre tengas tus colores, pero después si quieres en una página concreta, si no lo sé, va a ser una landing page especial o va a ser un diseño diferente al resto de tu web, puedes establecer una paleta de colores para ese mismo documento antes de empezar a trabajar esta vez tus colores y así es mucho más fácil ponerte a diseñar sin estar, sin tener que estar cambiando los colores todo el rato buscando el color que querías y vas a perder un montón de tiempo. Aunque tengas que dedicar ese tiempo al principio, establecerlo, pues luego ganarás muchísimo en productividad y en consistencia. Y este es uno de esos consejos que vale para cuando estés usando un Page Builder o cuando no. De hecho hay un plugin, bueno hay varios, pero te voy a recomendar uno de ellos que te permite guardar tu paleta de colores en el editor de WordPress normal, ya sea en Gutenberg o en el clásico, el que utilices e incluso a lo largo de toda la web, incluido Elementor y ese tipo de cosas. Porque sabes que cuando por ejemplo estás publicando una entrada y quieres poner algún color concreto y abres, pues la paleta de colores que te pueda ofrecer WordPress, por ejemplo, para cambiar el color de un trocito de texto, pues te trae los que vienen por defecto. Y por supuesto tú puedes poner un color personalizado. ¿Cuál es el problema? Que no lo puedes guardar. Cuando vuelvas a crear otra entrada y quieras poner ese mismo color, tendrás que ponerlo manualmente de nuevo, pero no se quedará guardado en tu paleta. Pues bien, con el plugin que os dejo el enlace se llama Central Color Palette, pero hay más, este yo lo he usado y va bien, como digo, pones tu color personalizado, ya se te queda guardado ese o más, los que quieras. Así que esto como digo es algo a tener en cuenta no solo cuando usas un constructor, sino en líneas generales y ya más específico en el uso de un Page Builder. El consejo número 4 es que evites las columnas y las barras espaciadoras para posicionar elementos. ¿Esto qué quiere decir? Bueno, al final, aunque uses un Page Builder es recomendable seguir buenas prácticas, no por usarlo vale todo, es decir, no porque hayas decidido utilizar un constructor visual y traiga opciones, pues no lo sé, de poner contenido en columnas, de poner disposiciones extrañas. También hay que seguir una buena práctica porque hay una cosa que he visto mucho y que es bastante habitual y es por ejemplo coger y poner pues columnas a lo loco, filas a lo loco. ¿Y algo como digo súper habitual es que si quieres centrar un elemento hay gente que lo que hace es que pone una fila con tres columnas y el elemento que quiere centrar lo pone en la columna del centro y aquí al final estás creando una disposición de una forma muy poco óptima, sobre todo cuando el Page Builder que utilices, si no lo trae, debería de traer opciones como son el margin y el padding que están pensadas para esto y no hay que hacer inventos ni trucos de crear columnas para poner un elemento en el centro, sino que simplemente utilizando el margen, que ya sabéis que es el espacio alrededor del elemento, y el padding, que ya sabéis que es el espacio interior, pues puedes disponer cualquier elemento de la forma que quieras y más con un Page Builder que es súper sencillo, sí? Así que aprovecha esto, no tienes por qué usar columnas vacías ni barras espaciadoras, que también lo hay. Por ejemplo en Elementor vi un vídeo hace poco donde los mismos creadores te dicen que eso se creó en un principio y que les gustaría quitarlo, el widget de la barra espaciadora, porque la gente lo utiliza mal, lo utiliza para crear espacios, cuando para eso se puede utilizar el margin, como digo, o el padding y que en un futuro les gustaría quitarlo porque realmente no supone una buena práctica estar utilizando barras espaciadoras para, como digo, posicionar elementos en la página o dar espacios o lo que sea, ¿De acuerdo? ¿Al final eso no hará otra cosa que añadir código extra y puede llegar a mermar el rendimiento de tu web, dificultar el mantenimiento, porque luego si vas a editar la página y dices pero aquí por qué hay tres columnas y solo quiero poner una cosa centrada? Incluso después en la parte responsive puede que te queden los espacios de esas columnas arriba y abajo. En fin, seguir los principios del diseño aunque estés utilizando una opción como sea un constructor visual. Genial. Nos vamos con el consejo número 5 y va 1 poco en la línea de esto y mi recomendación es que simplifiques el uso de secciones y columnas, porque hay veces en las que no hace falta que insertes columnas dentro de columnas y después otra y así hasta el infinito, sino que puedes dividir tu contenido en secciones. Ahora estoy hablando un poco en términos de Elementor, pero se podría cambiar la nomenclatura dependiendo del constructor que se use, pero básicamente, normalmente se puede crear un área de sección, una sección grande y luego dentro de esa sección se pueden incluir o columnas o directamente elementos. Entonces yo recomiendo diseñar por secciones, es decir, piensas a lo grande o desde un punto de vista más general y dices mi página va a estar dividida en cuatro secciones. En esta primera sección voy a poner una explicación general de mi servicio, en esta siguiente sección voy a poner una parte de preguntas frecuentes, en la siguiente sección voy a explicar las características de mi servicio y en la última sección voy a poner una llamada a la acción o un formulario o lo que sea. Recomiendo pensar así en secciones de la página y a nivel de implementación hacer lo mismo. Si tu Page Builder trae la opción de añadir una sección o depende del tipo de Page Builder, pero digamos lo más general que tengas, pues lo pones después dentro de esa sección, pues sí venga, lo voy a dividir en dos columnas porque voy a poner una imagen y aquí una descripción y una llamada a la acción, pues para la siguiente sección crea una nueva sección, no sigas metiendo contenido ahí dentro de la misma sección, más que nada porque te va a dificultar a ti después la edición, va a ser más complejo y siempre que todo tenga un poquito de sentido también desde el punto de vista de esa estructura pues mejor. A ver, este es un consejo que te doy, no es tan importante como el anterior porque al final anterior creo que es un mal uso de una herramienta, pero en este pues depende un poco, a lo mejor pues una página solo necesitas una sección y luego vas a dividir en varias columnas y es un poco más subjetivo, pero sí que tener esa mentalidad de una estructura limpia, una estructura sencilla que después también te facilite el diseño y el orden y que seas más productivo en ese aspecto. ¿De acuerdo? Bien, y el último consejo es que uses imágenes escaladas y optimizadas. Si cuando usas el editor normal de WordPress subes imágenes en un tamaño óptimo, haz lo mismo con un Page Builder. Es lo que me refería antes de que no por utilizar un constructor visual se nos pueden olvidar ciertas buenas prácticas como es la optimización de las imágenes. Y más allá de que tengas un sistema automático de optimización de imágenes, que te dejo un enlace, lo vemos en el curso de WPO por ejemplo, y creo que lo he cubierto también en otros cursos y en otros vídeos, hay distintos sistemas dependiendo de lo más cómodo para ti. Básicamente hay plugins que te permiten que cuando tú subas una foto o una imagen se optimiza automáticamente, incluso hay otros que te la redimensionan que es precisamente lo que te quiero comentar, que es una buena práctica que te acostumbres a subir la imagen en el tamaño máximo que la vayas a usar. Si tienes una imagen, la típica que te descargas de Unsplash o de alguna página de estas de, pues no lo sé, 5.000 píxeles o 3.000 píxeles de ancho y lo máximo que lo vas a utilizar, el ancho a lo mejor máximo de tu web es de 900, pues ya me dirás el sentido que tiene tenerla tan grande, ¿No? Pues acostúmbrate a redimensionarla antes de subirla, porque además el editor normal de WordPress, por ejemplo, hace el escalado automático por CSS, pero hay algunos Page Builders que no lo hacen. Por eso muchas veces cuando haces un análisis de estos que puedes hacer en GTmetrix o en Google Page Speed y demás, te suelen dar avisos de que la imagen es demasiado grande. Y esto muchas veces ocurre porque a lo mejor el Page Builder que uses no ha hecho la redimensión, mientras que a lo mejor en una entrada de WordPress sí que se hace. ¿Entonces, para evitarte todo esto y que estés seguro de que vas a tener tener un tamaño más o menos óptimo, es mejor que siempre subas, como digo, las imágenes del tamaño máximo al que se van a utilizar, sí? Pues estos son mis seis consejos. Recuerda que no debes descuidar las buenas prácticas aunque uses un constructor visual, incluso diría que debes ser más riguroso en la preparación y en la ejecución para no sobrecargar tus páginas ni hacerlas difíciles de mantener o de replicar en el futuro. Porque claro, al final los Page Builders ¿Qué hacen? Nos facilitan la vida, nos hacen que diseñar una página pues pueda llegar a ser súper rápido, pero podemos perdernos en esa facilidad y hay más riesgo de dejar de seguir o de no seguir desde el principio. Un sistema óptimo, un sistema de buenas prácticas. Recuerda que tienes un montón de enlaces en la parte de enlaces a cursos, por ejemplo de Elementor, de GeneratePress, en fin, más de 40 cursos a los que puedes acceder si estás suscrito, al igual que a más de 130 vídeos avanzados de la zona código y a soporte conmigo personalizado. A todo ello puedes tener acceso durante 15 días sin compromiso alguno. Te apuntas, ves qué tal todos los cursos, los vídeos, el soporte conmigo. Si quieres seguir, pues nada, no tienes nada que hacer y si no me contactas, oye, Gonzalo, que no quiero seguir, te hago la devolución íntegra, sin preguntas y todos contentos para probarlo o para apuntarte definitivamente Gonzalonabarro es cursos. Nada más por este episodio, nos seguimos escuchando. Adiós.