Cómo usar un editor visual para crear widgets en WordPress

La edición visual ha transformado la forma en que creamos widgets.

Lo que antes requería código personalizado, ahora se puede hacer con solo unos pocos clics, haciendo que la creación de widgets sea accesible para todos.

El editor visual en WordPress se ha vuelto cada vez más potente, especialmente con las últimas actualizaciones del editor de bloques de Gutenberg.

Esto significa que crear widgets de bloques ahora es más intuitivo que nunca. Ya sea que estés personalizando tu barra lateral, pie de página o cualquier área de widgets, ahora puedes agregar contenido hermoso y funcional sin tocar una sola línea de código.

En esta guía, le mostraremos exactamente cómo usar el editor visual para crear widgets para su sitio de WordPress.

¿Por qué usar el editor visual para crear widgets en WordPress?

Usar el editor visual facilita la creación de widgets personalizados con contenido enriquecido en cualquier lugar de tu sitio sin escribir código.

Puedes agregar estos widgets a áreas preparadas para widgets como el pie de página, encabezado o barra lateral, dependiendo de tu tema.

Los widgets son perfectos para mostrar cosas como una sección "sobre mí", publicaciones populares, formularios de suscripción a boletines informativos o incluso feeds sociales incrustados.

WordPress te permite agregar bloques a estas áreas, y muchos plugins proporcionan sus propios bloques personalizados.

Por ejemplo, con el plugin Smash Balloon Twitter Feed, puedes incrustar tus tweets recientes en cualquier lugar usando su bloque.

También puedes crear widgets completamente personalizados, como una biografía de autor con una foto y enlaces a perfiles sociales, para hacer tu sitio más atractivo.

Dicho esto, veamos cómo puedes usar un editor visual para crear widgets personalizados en WordPress.

Simplemente usa los enlaces a continuación para saltar al método adecuado para tu tema:

Método 1: Usando el plugin Widget Options (Funciona con todos los temas de WordPress)

La forma más fácil de agregar contenido personalizado a tus áreas de widgets es usando el plugin Widget Options.

Agrega muchas configuraciones adicionales al editor visual de widgets estándar de WordPress, incluida la capacidad de mostrar diferentes widgets según el rol del usuario, ocultar widgets de WordPress en dispositivos móviles y más.

También agrega un widget de Texto que puedes personalizar con tus propios enlaces, imágenes, formato y más. Esto te permite agregar contenido personalizado y enriquecido a tus áreas de widgets sin tener que escribir ningún código.

Primero, necesitas instalar y activar el plugin Widget Options. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a la página Apariencia » Widgets en tu panel de WordPress.

Ahora verás una lista de todas las áreas de widgets en tu tema de WordPress. El plugin Widget Options agrega un widget de Texto mejorado.

Busca este widget y simplemente arrástralo y suéltalo en cualquier área de widgets, como la barra lateral o el pie de página.

Una vez que lo hagas, el plugin Widget Options abrirá una pequeña ventana emergente.

Esta ventana emergente actúa como un mini editor de páginas o publicaciones, por lo que debería resultarte familiar.

Para empezar, puede escribir un título, que aparecerá encima del widget.

Después de eso, puedes escribir texto directamente en el editor pequeño, agregar enlaces e imágenes, cambiar el formato, agregar viñetas y listas numeradas, y más.

También puedes mostrar u ocultar widgets en páginas específicas de WordPress y agregar estilos personalizados al widget de WordPress.

Cuando estés satisfecho con la configuración del widget, haz clic en el enlace 'Listo' para guardar sus ajustes.

Ahora, si visitas tu sitio web, verás el nuevo widget de texto enriquecido en vivo.

Si estás utilizando un tema clásico de WordPress, también puedes crear contenido personalizado para las áreas de widgets visualmente usando el Personalizador de WordPress.

Simplemente ve a Apariencia » Widgets, pero esta vez, haz clic en 'Administrar con vista previa en vivo'.

Esto abrirá el Personalizador con la configuración del widget ya seleccionada.

Ahora puedes hacer clic en el área donde deseas agregar el widget personalizado.

Después de eso, haz clic en 'Agregar un widget', lo que abrirá un panel que muestra todos los diferentes widgets.

Simplemente busca el widget de Texto clásico y haz clic en él para agregarlo a tu sitio web.

Esto abre un pequeño editor donde puedes agregar texto, enlaces, medios y más.

A medida que realices cambios en el editor, la vista previa en vivo se actualizará automáticamente.

Cuando estés satisfecho con la apariencia del widget, haz clic en el botón 'Publicar' para que aparezca en vivo en tu blog o sitio web de WordPress.

Si no puedes encontrar el personalizador de temas en tu panel de WordPress, consulta nuestra guía sobre cómo solucionar la falta del personalizador de temas en el administrador de WordPress.

Método 2: Usando el Editor de Sitio Completo (Funciona con temas de WordPress habilitados para bloques)

Si estás utilizando un tema de WordPress con bloques, entonces puedes agregar bloques a cualquier área de las plantillas de tu sitio usando el editor de sitio completo.

De esta manera, puedes crear contenido personalizado para áreas como la barra lateral organizando bloques de WordPress estándar directamente dentro de las plantillas de tu tema. Tampoco necesitas instalar un plugin de WordPress aparte.

También es una forma de agregar widgets a áreas que no puedes editar usando el editor de widgets o el personalizador estándar de WordPress. Por ejemplo, puedes agregar widgets a tu plantilla de página 404.

Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes agregar widgets y bloques a cualquier área.

Para ver todas las opciones disponibles, simplemente selecciona 'Plantillas' o 'Partes de Plantilla'.

Ahora puedes hacer clic en la plantilla o parte de plantilla que deseas editar.

WordPress ahora mostrará una vista previa del diseño. Para continuar y editar esta plantilla, haz clic en el pequeño ícono del lápiz.

Una vez hecho esto, haz clic en el ícono azul '+' y luego busca el primer bloque que deseas usar para tu contenido personalizado.

Puedes usar cualquier combinación de bloques que desees, pero si planeas usar una imagen y texto, te recomendamos comenzar con el bloque 'Medios y Texto'.

Esto te permite organizar fácilmente una imagen junto a algo de texto en un diseño agradable. Teniendo esto en cuenta, el bloque Medios y Texto es perfecto para crear una caja de información del autor, como puedes ver en la siguiente imagen.

Después de seleccionar el bloque que deseas usar, simplemente arrástralo y suéltalo en una sección de tu plantilla, como la barra lateral y el pie de página.

El editor de sitio completo te da acceso al conjunto completo de herramientas y configuraciones de WordPress. Esto significa que puedes agregar un botón de llamada a la acción, texto, enlaces, imágenes y otro contenido a una gama más amplia de bloques.

Dicho esto, deberías poder crear exactamente el contenido personalizado que tenías en mente. Simplemente agrega más bloques y contenido a tu plantilla hasta que estés satisfecho con cómo se ve.

Para obtener más ideas sobre cómo usar las áreas listas para widgets de tu tema, consulta nuestra lista de verificación de cosas para agregar al pie de página de tu sitio de WordPress.

Cuando estés satisfecho con los cambios que has realizado, haz clic en 'Guardar'.

Ahora, si visitas tu sitio web de WordPress, verás el nuevo contenido personalizado en vivo en tu plantilla.

Preguntas Frecuentes sobre el uso de un editor visual para crear widgets en WordPress

Aquí hay algunas preguntas que nuestros lectores hacen frecuentemente sobre la creación de widgets usando el editor visual:

¿Necesito instalar un plugin para crear widgets visualmente?

No siempre. Si estás usando un tema de bloques, puedes agregar widgets usando el Editor de Sitio Completo sin plugins adicionales.

Sin embargo, si tu tema no es compatible con el editor de sitio completo, usar un plugin como Widget Options te da más control sobre dónde y cómo aparecen tus widgets.

¿Por qué no veo los cambios en mi widget de inmediato?

Si tu widget no se actualiza instantáneamente, intenta limpiar la caché de tu sitio y la caché del navegador. Algunos plugins de caché o CDN pueden retrasar los cambios.

Usar la opción de Vista Previa en Vivo es una buena manera de confirmar que tus widgets se actualizan antes de publicarlos.

¿Puedo agregar bloques personalizados de plugins (como Smash Balloon o WPForms) dentro de un área de widgets?

Absolutamente. La mayoría de los plugins modernos, como Smash Balloon, WPForms o MonsterInsights, incluyen sus propios bloques que se pueden colocar en cualquier área lista para widgets.

Puedes arrastrar estos bloques a tu barra lateral, pie de página o encabezado como cualquier otro bloque.

¿Cuál es la diferencia entre usar el plugin Widget Options y el Editor de Sitio Completo?

El plugin Widget Options funciona con todos los temas, incluidos los más antiguos que no son compatibles con FSE.

El Editor de Sitio Completo solo funciona con temas habilitados para bloques y ofrece una mayor flexibilidad de diseño, ya que puedes editar encabezados, pies de página y plantillas visualmente.

Esperamos que este artículo te haya ayudado a aprender a usar fácilmente el editor visual para los widgets de WordPress. También te puede interesar nuestra guía sobre consejos para dominar el editor de contenido de WordPress y cómo crear una página de destino con WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.