477 | Diseño personalizado vs a medida (en WordPress)

En el episodio 477 de WordPress Semanal hablamos de si conviene adaptar un tema personalizable o mejor construir desde cero un diseño a medida en WordPress. Veremos las diferencias entre estas dos aproximaciones, ventajas, limitaciones, herramientas para lograrlo y consejos para cada caso. Vamos allá. Hola, Hola, soy Gonzalo Navarro y Bienvenidos al episodio 477 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy hablamos de un concepto, o mejor dicho, dos conceptos que se confunden mucho y que yo creo provocan confusión y problemas en gente. Iba a decir que está empezando, pero no necesariamente, porque conozco a personas que llevan bastante tiempo con WordPress y llega un punto en el que se sienten un poco frustrados porque sienten que. Pues que no están logrando lo que quieren, sobre todo en lo que aspecto de sus webs se refiere. Y me decidí a publicar este episodio porque lo voy a enviar, estoy seguro, a bastantes personas como complemento de la respuesta que le dé en el soporte la pregunta que me hagan. Seguramente que a muchos de ellos este episodio les va a aclarar un montón de dudas, así que si lo estás escuchando porque te lo he enviado en un caso así, pues espero que te sirva. Bien, voy a definir muy bien en este episodio la diferencia entre lo que sería abordar un diseño personalizado en contraposición con lo que sería abordar un un diseño a medida. No es lo mismo y veremos por qué. Además, te voy a hablar de las ventajas de optar por un camino u otro. Cuándo te va a convenir hacer un diseño personalizado y cuándo te va a convenir hacer un diseño a medida. Te voy a hablar de herramientas o constructores con los que puedes hacer diseños personalizados y con los que puedes hacer diseños a medida porque no son las mismas herramientas. Veremos el porqué y cuáles, y luego te daré unos consejos finales, unas recomendaciones según mi experiencia. Pero antes de todo esto, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues hay nuevo vídeo de la Zona Código y en él aprendes a desactivar el selector de idioma del login oficial de WordPress. Es decir, tu web con WordPress tiene un login nativo, tu web punto WP login PHP y ahí hay desde la versión creo que 5.9 de WordPress hay un selector de idioma, puedes traducir o cambiar de idioma la página de inicio de sesión. Pues te enseño a desactivarlo porque en la mayoría de los casos no lo queremos. Es muy fácil, es simplemente una función que el propio WordPress incorpora y te enseño a copiarla y pegarla para que lo puedas lograr así de fácil. Recuerda que esta sección de la zona código, donde Hay más de 400 y pico vídeos, es código para no desarrolladores. El objetivo es que puedas hacer prácticamente cualquier cosa sin conocimientos de desarrollo y ahorrándote plugins. Te voy a dejar el enlace en las notas del episodio a las que puedes acceder escribiendo en Tu navegador GonzaloNavarro es 477. Concretamente lo tendrás en la zona de contenidos recomendados que está al final de la página. Y ahí también te dejo el enlace a la newsletter de WordPress semanal, donde como en este podcast, pues cada semana en concreto la newsletter sale los jueves, cubro algún tema, te enseño algo concreto sobre la creación y gestión de webs con WordPress. Es totalmente gratuito y además échale un vistazo porque tienes dos regalitos por apuntarte. Si prefieres ir directamente lo tienes en Gonzalo Navarro, es lista y somos más de 8.000 y subiendo. Perfecto. Una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama Deepload. Este plugin te permite optimizar el rendimiento de tus webs con WordPress, pero está muy enfocado a las características de eliminar el CSS no utilizado, ajustar la carga de scripts, hacer minificación, hacer precarga. Y está pensado así. El desarrollador lo explica en la página del plugin para usuarios avanzados que les guste controlar con más detalle este tipo de optimizaciones. Es del estilo Autoptimize, no tiene la parte de caché ni nada, sino es para ajustar este tipo de características y es un plugin que se mantiene ahí en sus. Creo que. A ver, voy a abrirlo un momentito. 40.000 instalaciones activas. Es relativamente popular y nunca lo había comentado aquí en el podcast, así que ahí lo tenéis por si le queréis echar un vistazo. Venga, pues ahora sí, vámonos con el tema central del episodio. Diseño personalizado versus diseño a medida. ¿Vamos a empezar definiendo cuando digo diseño personalizado, a qué me refiero? Bueno, esto es cuando tú quieres partir de un tema existente, un thing de WordPress normalmente va a ser un thing multipropósito o yo recomiendo un thing ligero, y lo que vas haciendo es que modificas sus opciones desde el personalizador de ese tema, puedes hacer algunos cambios con CSS y luego vas a usar algún constructor visual para terminar de maquetar las páginas individuales. Ejemplos de esto cuando utilizas por ejemplo Astra con Elementor o Astra con el editor de bloques más algún addon que mejora el editor de bloques de WordPress o GeneratePress más el editor de bloques o GeneratePress más Elementor o KDence Theme, lo que hacemos es combinar las opciones de ese tema que van a estar enfocadas sobre todo a la parte estructural, cabecera, pie de página, incluso si tienes la parte pro de estos plugins, pues vas a poder controlar la plantilla de página, la plantilla de post, la plantilla de blog, las plantillas de categoría, todo este tipo de cosas, pero siempre partes de una cierta estructura, estás personalizando algo existente, no estás creando algo desde cero. ¿Qué sería crear algo desde cero? La siguiente definición, un diseño a medida. Aquí sí que partimos desde totalmente cero, normalmente de un diseño creado en Figma o en algún servicio o programa para diseñar, o un diseñador profesional lo hace por nosotros, y luego la maquetación se realiza de forma precisa siguiendo ese diseño píxel a píxel. Esto implica mayor trabajo técnico, uso de código personalizado o constructores muy avanzados. Un ejemplo de esto es replicar en Oxygen por ejemplo, que es uno de estos constructores que lo haces todo desde cero, puedes replicar en Oxygen un diseño creado previamente en Figma, aunque después veremos herramientas tanto para diseños personalizados como para diseños a medida. Pero estas son las grandes diferencias, por decirlo muy rápido. En un diseño personalizado partimos de algo, aunque podemos llegar a modificarlo bastante y hacerlo muy nuestro, siempre estamos partiendo de algo y haciéndole personalizaciones o modificaciones, mientras que en un diseño a medida partimos desde blanco digamos, y vamos creando todo desde cero. Una vez definido vamos a ver ventajas y limitaciones de cada enfoque. ¿Cuáles son las ventajas del diseño personalizado? Pues aquí tenemos menor coste y menor tiempo de desarrollo. Va a ser más fácil de mantener y de actualizar, sobre todo si se trata de una web en la que vamos a ir haciendo bastantes cambios. Será menos rígido y además vamos a tener compatibilidad con muchos plugins ¿Qué limitaciones tiene este enfoque? Pues que vamos a tener restricciones de estilo, de estructura, sobre todo de la parte del diseño. Puede ser una web que como resultado parezca menos original, se va a parecer seguramente a muchas otras webs, seguramente hayamos partido de algún tipo de plantilla y luego depende de tus conocimientos puede que tengas ciertas limitaciones en cuanto a personalizaciones que quieras hacer o tengas que poner demasiado código encima o utilizar demasiados plugins adicionales para lograr un resultado desde el punto de vista sobre todo del diseño. Esto en cuanto cuanto a diseño personalizado. Vamos a ver las ventajas del diseño a medida. Bueno, aquí puedes adaptar completamente el diseño a la marca o a la necesidad del cliente. Normalmente este tipo de cosas se hacen para clientes, por una agencia, por un desarrollador o desarrollador más diseñador y aquí tenemos control total sobre la experiencia visual, siempre y cuando exista el conocimiento para hacerlo. Por supuesto también como otra ventaja vamos a tener un código mejor optimizado y mejor rendimiento, ya digo, si se hace bien, ya solo con el hecho de que no haya que utilizar constructores que muestran mucho código en el navegador, en el DOM, pues ya con esto de partida vamos a tener un código mucho más Limitaciones del diseño a medida Mayor coste y tiempo de ejecución. Requiere conocimientos técnicos y más complejidad en el mantenimiento Aquí por ejemplo si es para clientes, casi seguro que el cliente va a tener que estar atado entre comillas a una agencia, al desarrollador o a lo que sea para cualquier cosa que quiera hacer. Normalmente aquí lo que vemos es que el desarrollador en cuestión para el cliente con Advanced Custom Fields o algo similar, le crea un panel para que pueda publicar cosas o si quiere crear una página nueva para que pueda publicarla o si es una web inmobiliaria, pues eso le crea unos campos personalizados para que publique y puede ser que la sensación del uso de esa web no sea la típica de WordPress. Por eso muchas veces la gente que pasa de tener una agencia con un tipo de web que se ha hecho un desarrollo a medida y demás, pues cuando quiere empezar a llevarlo por su cuenta y empieza a buscar formación de WordPress y demás, se da cuenta de que lo que está viendo no es lo mismo que por ejemplo ve en mis formaciones. ¿Por qué? Porque se ha hecho tan a medida y tan pensado para que el cliente lo tenga lo más fácil posible que cuando cambia el chip, cuando cambia el enfoque, lo que parecía fácil se convierte en difícil. Y esto me lleva al siguiente punto que es cuándo elegir un enfoque y cuándo elegir otro. Bueno, en líneas generales, porque ya digo, depende también del perfil, no es lo mismo si eres desarrollador que si eres un usuario que quieres hacer tu propia web o que quieres que te la haga un profesional. Pero como digo, líneas generales, vamos a elegir un diseño personalizado si nuestro presupuesto y tiempo son limitados, si es un proyecto relativamente sencillo o de tipo informativo y sobre todo si el diseño, el diseño a medida no es el factor más diferenciador. Y no lo he puesto en el esquema del episodio, pero aquí añadiría que si tú quieres tener control, digamos si no tienes conocimientos de desarrollo y quieres tener control sobre pequeños cambios que vayas a hacer en el diseño y demás, pues entonces elige también este enfoque. Por otro lado nos vamos a ir a un diseño a medida, si necesitas, esto es de cajón, un diseño 100% alineado con una identidad de marca, quieres ir al pixel, quieres controlar absolutamente todo de ese diseño, pues aquí te va a salir un diseño a medida, ya sea que tú sepas diseñarlo o que vayas a contratar a un diseñador y ya sea que tú sepas desarrollarlo o que luego vayas a contratar a un desarrollo. Y por otro lado también obvio, si hay recursos, si tienes recursos suficientes tanto de tiempo, como de conocimiento como de dinero para hacer un desarrollo técnico totalmente a medida, pues es una buena opción. También digo, hay muchas veces que existen los recursos pero no es necesario, pues es momento de ahorrar recursos en ese caso. Yo conozco desarrolladores capaces de hacer cualquier proyecto a medida que solo lo hacen cuando hace falta. Si puedo crear una landing en base a una plantilla porque es lo que necesito, simplemente pues lo voy a hacer. Ahora que me llega un cliente que requiere de una web con un desarrollo totalmente a medida, pues como tengo los conocimientos lo voy a hacer porque me lo van a pagar y es el momento. Entonces también no es solo que sepas o no sepas, sino saber en qué momento utilizar cada enfoque. Bien, vamos a uno de los puntos más interesantes, ¿Qué herramientas puedo utilizar para cada caso y cuáles no me valen para algún otro? Que esto es un poco lo que comentaba de mucha gente que me contacta y yo creo que espera poder hacer un diseño a medida píxel a píxel con herramientas que no lo permiten o con una falta de conocimientos porque al final el diseño es una carrera en sí misma. La gente estudia diseño de forma profesional, yo por ejemplo no soy diseñador, he trabajado con diseñadores y he adaptado diseños de otras personas, o en muchos casos parto de plantillas o diseño algo, pero desde un punto de vista amateur. Yo no soy diseñador profesional, que esto lo hablé en un episodio. Y tenemos que ser conscientes de nuestras limitaciones cuando queremos hacer algo. Muchas veces qué difícil es WordPress, creía que podría conseguir tal, no sé qué. Claro, estás intentando diseñar algo desde cero y no sabes diseño. Entonces las herramientas o WordPress en sí es relativamente sencillo porque quita una barrera de entrada enorme, pero si luego no sabemos o no tenemos gusto por el diseño, pues ahí ya la culpa no es de WordPress. Pero bueno, vamos a lo que nos ocupa. ¿Con qué herramientas, digamos, haríamos diseños personalizados? Pues aquí con constructores, por ejemplo, como Elementor, Beaver View, Gutenberg, Cadence Blocks, Spectra Blocks. Con todo esto no estamos haciendo diseños a medida, no podemos. No podemos controlar todo al pixel perfectamente, ni siquiera con Elementor. Elementor te permite personalizar, pero no te permite diseños a medidas. Elementor Pro sí que tiene el Theme Builder que te da mucho más control, pero ni siquiera llegas a tener ese control total para hacer un diseño 100% a medida. Aquí estaríamos hablando de herramientas para diseños personalizados, que normalmente lo que vamos a hacer es combinarlo, pues en el caso de Elementor puede ser con Hello Elementor, que podría llegar a ser lo más parecido a un diseño medida, pero ya digo, no llega. Y luego pues otros temas ligeros como Astra, como KDENS, como GeneratePress, como Bloxy, por ejemplo. Y aquí yo todavía incluiría también el full site editing. Si realmente la idea del full site editing es que puedas hacer un diseño 100% a medida. Ocurre como con Elementor Pro. De hecho con Elementor Pro de momento tienes más control. Con el Full Site Editing podrías llegar a hacerlo, pero vas a necesitar sí o sí utilizar código a medida, PHP, CSS, JavaScript y demás. Entonces estaría como en medio, Sí, pero no. Ahora, ¿Con qué herramientas podemos hacer diseños a medida? Pues en cuanto a constructores, constructores tipo Bricks Builder y Oxygen, por ejemplo, están pensados para esto. ¿Por qué? Porque son herramientas que tú te vas a su panel de edición y sería como si estuvieses utilizando CSS. De hecho conviene muchísimo que tengas conocimientos de CSS para poder aprovechar bien estos constructores, porque sus opciones son las de CSS, lo que pasa que las controlas visualmente, no escribes tú el CSS ni el HTML ni nada, entonces para poder llegar a usarlas necesitas ese conocimiento y aprender a utilizar la herramienta, que tiene una curva de aprendizaje mucho mayor que otros constructores, ya digo, pues un poco más visuales y pensados para la personalización y no para el diseño desde cero. Y luego por supuesto para un diseño a medida siempre puedes hacerlo a pelo, pues desarrollar un tema hijo en base a algo como underscores y luego ir incluyendo todo, código a medida, PHP, CSS, JavaScript y demás. Venga, vamos con unas recomendaciones, unos apuntes finales, sobre todo para elegir por qué camino tirar. Lo primero que te recomiendo es que definas los objetivos claros de esa web antes de elegir una aproximación u otra. Luego evalúa los recursos que tienes, presupuesto, tiempo, conocimiento, que por ejemplo si tienes más presupuesto pero no tienes conocimiento pues podrás contratar a alguien, pero si no tienes ni una ni otra no vas a poder hacerlo, o quizás tiene muchísimo tiempo y puedes aprender esto ya pues tienes que evaluarlo. Luego yo le daría prioridad a la escalabilidad y facilidad de mantenimiento a largo plazo, es tan tan tan importante ese diseño 100% a medida para sacrificar el hecho de que tú después puedas escalar ese proyecto, puedas tener una facilidad de mantenimiento a largo plazo. Y finalmente si tienes dudas pues consulta a un profesional que entienda bien la implicación de tirar por un camino o tirar por otro, puedes solicitar una consultoría con algún desarrollador o lo que sea, que al final el hecho de pagar una asesoría, una consultoría te puede ahorrar dinero en el futuro tiempo y marcar la diferencia en tu proyecto. Bueno, espero que te haya quedado claro esta distinción, he hablado sobre todo del diseño, no he entrado en funcionalidades, pero sería bastante aplicable, sería bastante similar, pues diferenciando un poco entre el uso de plugins, que siempre vamos a tener un cierto límite y los desarrollos a medida. Lo mismo con el mantenimiento, si hacemos desarrollos a medida el mantenimiento será mucho más complejo, si lo hacemos con plugin serán más sencillos. Un poco la misma línea la puedes aplicar a las funcionalidades, pero aquí me quería centrar en la parte del diseño. Por cierto, si necesitas vídeos paso a paso, no sólo para poner en funcionamiento cualquier web con WordPress, sino también para enfocarte en la personalización de los diseños, Tienes más de 90 cursos en Gonzalo Navarro es donde te enseño a hacerlo. Tienes más de 400 vídeos de la zona código, te enseño a dar ese paso más allá y poder hacer modificaciones que a priori solo estarían al alcance de desarrolladores, pero que están pensadas para implementadores, para que cualquiera pueda copiar y pegar el código. Y todas estas herramientas de las que te he ido hablando, Elementor Pro, Kadence Theme, Generate Press, Astra, los bloques también de Spectra, el Full Site Editing, todo esto está cubierto en cursos en Gonzalo Navarro es y por supuesto con mi ayuda y la de la comunidad. Siempre que tengas alguna duda, pues me podrás contactar por soporte o escribirlo en el grupo privado de Telegram. Tienes toda la info en Gonzalo Navarro, es fantástico. Nada más por este episodio, nos seguimos escuchando. Adiós.