Share on Facebook28Tweet about this on TwitterShare on Google+16Share on LinkedIn12Share on StumbleUpon0Buffer this page

Si tienes un blog hecho con WordPress, estoy seguro de que conoces los widgets. Ya sabes, esa funcionalidad que te permite arrastrar y soltar bloques de contenido, y colocarlos en tu barra lateral o en el pie de página.

Los widgets de WordPress hacen que sea muy fácil añadir contenidos nuevos a tu sitio. Puedes añadir tantos como quieras, y además tener una gran variedad gracias a los plugins. Sólo tienes que instalar un pack de widgets como CPO Widgets en tu blog, y tienes todos los widgets que necesitas.

La única limitación que les veo a los widgets es cuando necesitas diseñarlos a medida.

¿Y por qué querría diseñar widgets a medida?

El gran problema que tienen los widgets es que no te dan muchas opciones para personalizarlos.

Cuando vas a llenar tu barra lateral o tu página de inicio con contenido, lo único que podrás hacer será rellenar algunos campos de texto– pero poco más. El widget no tiene casi opciones de diseño:
widgets-wordpress-normales

Y si estás montando un blog de marca personal, el diseño es muy importante para diferenciarse.

Por ejemplo, si tienes que mostrar un anuncio importante para tu próximo infoproducto, un diseño genérico no vale. No es lo mismo utilizar un widget tal cual, que algo hecho a medida y con tu sello personal:

widget-personalizado

Los banners son widgets demasiado estáticos

Seguramente habrás tenido que diseñar algún widget a medida para tu blog, alguna vez.

Y para eso, es muy probable que hayas tenido que usar un programa de edición fotográfica como Photoshop, o Canva, o Pixlr:

pixlr

Crear una imagen a mano de esta forma no es mala idea, pero tiene sus limitaciones:

  • No puedes alterar los detalles fácilmente
  • No es contenido legible por google
  • Requiere conocimientos de retoque fotográfico

Los banners suelen ser usados para crear todo tipo de enlaces hacia cursos, páginas, o incluso descargas– el problema es que no son interactivos.

Así no es posible crear un widget que tenga elementos con los que puedes interactuar, como un acordeón o una galería. Y como mínimo, tendrías que localizar el plugin WordPress correcto e instalarlo.

Pero, ¿y si pudieras crear algo 100% interactivo, a medida, y sin programar?

Te voy a enseñar una forma mucho mejor de diseñar tus propios widgets– hechos por tí, fácilmente, y sin tener que tocar una línea de código. ¿Te atreves?

Cómo crear tus propios widgets, sin ser diseñador

Para crear tus widgets, vamos a hacer uso de Forge, un page builder gratis que puedes usar para diseñar sin programar.

A primera vista Forge puede parecer una simple herramienta para crear landing pages, pero se puede utilizar para muchas más cosas.

Por ejemplo, puedes crear piezas de contenido directamente dentro de WordPress, y después incrustarlos en varias partes de tu página web.

Si quieres aprender a utilizar Forge a nivel experto para crear páginas web profesionales sin programar, echa un vistazo a mi curso gratis de page building. En él recibirás acceso a recursos exclusivos para diseñar como un profesional– sin tocar una línea de código.

Únete Al Curso de Page Building

En este caso, lo que vamos a hacer es diseñar un bloque de contenido con arrastrar y soltar, y una vez esté montado añadirlo a la barra lateral como si fuera un widget normal y corriente.

Paso 1: Instala Forge

El primero paso es instalar Forge directamente desde el repositorio oficial de plugins. Ve a tu panel de administración, y sigue estas instrucciones:

  1. Ve a Plugins > Añadir Nuevo.
  2. En el buscador de la derecha, escribe Forge y presiona Enter.
  3. Cuando veas su tarjeta, haz click en Instalar.
  4. Una vez instalado sólo Actívalo.

forge-plugin

Paso 2: Crea una plantilla con Forge

Ahora que tienes Forge instalado, puedes empezar a crear contenidos con arrastrar y soltar, sin tener que utilizar código HTML o CSS.

Una de las grandes ventajas de Forge es su capacidad para crear Plantillas. Las plantillas son trozos sueltos del diseño de una página web, de forma que los puedes reutilizar en casi cualquier parte. En esta ocasión, lo que haremos será crear una plantilla para después usarla como widget en nuestras barras laterales.

Para crear una plantilla, sigue estos pasos:

  1. En tu panel de administración, ve a Forge > Plantillas.
  2. Aquí, escribe el nombre de tu plantilla y haz click en Crear Plantilla. Asegúrate de poner un nombre descriptivo.

Con sólo hacer esto, serás llevado a una página en blanco donde podrás diseñar tu widget a medida:

plantillas-forge

Paso 3: Diseña tu widget

Ahora es el momento de crear tu widget a medida.

Al trabajar con las plantillas, tendrás una página completamente en blanco con la que diseñar contenidos. Como los widgets están pensados para ser bloques de contenido pequeños, te recomiendo que utilices las opciones de vista para cambiar el tamaño del contendor principal:

crear-widget-wordpress

Al hacer click en la opción de Widget, tendrás una región con una anchura similar a tu barra lateral. Aunque las medidas no son exactas, no te preocupes: todos los contenidos que se crean con Forge son automáticamente responsivos.

A partir de aquí, puedes crear un widget de forma libre. te recomiendo empezar añadiendo una Fila, y poniendo colores de fondo para empezar.

(Si te faltan imágenes buenas para añadir a tu widget, puedes probar a buscar en un banco de imágenes gratis, o bien usar esta app para crear mockups originales de dispositivos móviles)

Sin embargo, si te faltan ideas o te sientes perdido, aquí tengo un obsequio para tí:

[DESCARGA] 3 widgets prediseñados listos para usar

Una de las ventajas de Forge es que te permite importar contenidos muy fácilmente. Así que aquí tienes varios widgets que he diseñado, y que puedes importar directamente en tu área de trabajo para empezar ya.

widgets-wordpress-premaquetados

Sólo échame una mano compartiendo este artículo con el social locker aquí abajo, y podrás acceder a ellos:

Paso 4: Inserta tus widgets

Ahora que tu widget ya está montado, sólo te queda añadirlo a tus barras laterales.

Ve a Apariencia > Widgets, y verás que hay un nuevo widget llamado Forge – Plantilla. Al insertarlo, podrás elegir cualquiera de las plantillas que has creado anteriormente en una barra lateral.

Una vez hecho esto, ¡ya has terminado!

Ahora deberías tener tu nuevo widget a medida en una de tus barras laterales. Para hacer cambios al widget, sólo tendrás que editar la plantilla que has creado anteriormente.

Crear widgets de esta forma te da varias ventajas:

  • Puedes personalizar tus widgets en todo momento
  • Puedes crear widgets interactivos, con todo tipo de elementos
  • Puedes indexarlos a través de Google
  • Puedes incluir elementos dinámicos

Personaliza tus widgets ahora

Como puedes ver, para crear widgets que sean muy visuales no siempre es necesario recurrir a Photoshop. Diseñar tus propios widgets a medida te da muchas posibilidades, ya que los irás cambiando conforme pase el tiempo.

Ahora te toca: ¿Has creado algún widget con este tutorial? Si es así, comparte tu diseño y muéstrame el resultado de tu trabajo.

Share on Facebook28Tweet about this on TwitterShare on Google+16Share on LinkedIn12Share on StumbleUpon0Buffer this page

Crea tu página web como hacen los expertos.

Apúntate a un curso de 5 días que te enseñará a crear tu página web en WordPress. Sin tener que programar, y utilizando herramientas que te ahorrarán horas de trabajo.

An error occurred. Please try again and make sure all form fields are filled out.
¡Ahora estás apuntado! Revisa tu email.