Configurar widgets en child theme Hello Pro

En este tutorial vamos a aprender a configurar los widgets de la home del tema Hello Pro, un child theme de Genesis Framework.

Hello Pro theme

Como podemos ver en el curso de puesta a punto de themes, los themes de Genesis suelen configurarse a mayoritariamente a través de widgets.

Hello Pro no es una excepción, así que vamos a ponerlo como ejemplo, para que veáis cómo funciona, configurando la home. Primero veamos de forma rápida sus características:

• Personalizador: Desde el personalizador del tema podemos realizar algunos ajustes como por ejemplo modificar los colores o cambiar las imágenes de fondo.
• Encabezado personalizable: Esta plantilla permite añadir fácilmente al encabezado el logotipo de nuestro negocio.
• Plantillas de página personalizadas: Hello Pro viene con varias plantillas prefabricadas como la home o el portfolio.
• Áreas de widgets: El tema cuenta con áreas de widgets tanto en la página de inicio como en el footer, las cuales nos permitirán añadir contenido personalizado.

Esta plantilla está además optimizada para móviles, es segura y está bien programada, por lo que puede cargarse ágilmente. Como hemos visto cuenta con varias áreas de widgets. En este tutorial vamos a ver cómo configurarlas de forma sencilla para conseguir la estructura y apariencia que aparece en la demo. ¡Comencemos!.

Instalar plugins recomendados

Estos plugins no son obligatorios pero Hello Pro está preparado para usarlos y es recomendable tenerlos instalados y activos para obtener todas las funcionalidades que ofrece el tema. Como en este caso queremos poner a punto los widgets para dejarlos como en la demo, vamos a proceder a instalarlos todos.

• Gravity Forms: Es un plugin premium muy versátil que sirve para crear formularios tanto básicos como avanzados, si sois suscriptores de boluda.com ya lo conoceréis. Lo tenéis disponible para descargar en la pestaña "Descargas" de la Intranet. En este caso se utiliza para el formulario de contacto y para la suscripción a la newsletter.
• Simple Social Icons: Es un plugin gratuito que sirve para mostrar iconos sociales y enlazarlos con nuestros perfiles. Podéis descargarlo desde el repositorio de WordPress. Se usa en el pie de página del tema y también en la barra lateral.
• Social Proof (Testimonial) Slider: Hello Pro usa este plugin para añadir testimonios a la página. Podéis descargarlo también desde el repositorio.
• Display Posts Shortcode: Sirve para agregar shortcodes a nuestros posts y páginas. Display Posts Shortcode está disponible en el repositorio.
• Genesis eNews Extended: Con este plugin podemos integrar la lista de suscripción a nuestro tema. Es un básico en muchos child themes de Genesis. Está disponible en el repositorio de WordPress.
• Genesis Portfolio Pro: Es un plugin gratuito creado por StudioPress que nos permite añadir entradas tipo "Portfolio". Podemos encontrarlo igualmente en el repositorio de WordPress.

Pues bien, para instalarlos, como siempre, vamos al escritorio de WordPress "Plugins/Añadir nuevo". Si lo hemos descargado, como es el caso de Gravity Forms, haremos clic en "Subir plugin" e importaremos el zip para instalarlo y activarlo después.

Podemos hacer lo mismo con el resto, o bien estando en "Plugins/Añadir nuevo" usar el cuadro de búsqueda y localizarlos en el repositorio sin necesidad de descargarlos en el equipo. Una vez tengamos todos instalados y activos, podemos pasar al siguiente paso.

Instalar Widget Importer & Exporter

Widget Import & Exporter, como su nombre indica, es un plugin que facilita la tarea de importar y exportar widgets de un sitio a otro. Está disponible en el repositorio de WordPress.

Su instalación se realiza de la forma habitual, nos vamos al escritorio de WordPress, hacemos clic en "Plugins/Añadir nuevo", lo buscamos por su nombre, y una vez localizado pulsamos en "Instalar ahora", y después en "Activar".

Este plugin lo vamos a usar para importar la configuración de los widgets del child theme Hello Pro según aparecen en la demo. Para ello tendremos primero que descargar el archivo de configuración WIE pulsando en el enlace.

Esto descargará un archivo comprimido con extensión ".zip" que tendremos que descomprimir para acceder al archivo ".wie" que es el que nos interesa. Una vez lo tenemos podemos pasar al próximo apartado.

Importar configuración de widgets según demo Hello Pro

Ahora que hemos instalado y activado los plugins, y tenemos el archivo de configuración ".wie" en nuestro equipo, vamos a proceder a importarlo a WordPress.

Para ello tenemos que ir al escritorio y pulsar sobre la opción de menú "Herramientas/Importar y exportar widgets". A continuación seleccionaremos el archivo ".wie" que descargamos en el paso anterior, y pulsaremos sobre el botón "Importar widgets".

Una vez hecho esto, WordPress comenzará con la importación y al finalizar nos mostrará los resultados del proceso:

¡Y esto es todo! Ya tenemos los widgets configurados según la estructura de la demo del tema Hello Pro. Lo único que quedaría sería ajustar las imágenes que queremos mostrar en cada widget, lo cual podemos hacerlo desde el personalizador de temas en "Apariencia/Personalizar/Front Page Background Images".

¡Y ya lo tenemos a punto! Nuestra home configurada de inicio a fin, sólo a base de widgets y widget areas.

Resumen y conclusión

Hello Pro es un Genesis child theme limpio, rápido y optimizado para móviles que cuenta con varias áreas de widgets que podemos personalizar.

En este tutorial hemos visto cómo configurar esos widgets para conseguir la estructura que aparece en la demo. Primero instalamos y activamos todos los plugins necesarios, incluido el plugin Widget Importar & Exporter. Después descargamos el archivo de configuración desde el enlace, y por último importamos el mismo a nuestro sitio.

¡Y esto es todo! Si os interesa aprender más, os recomendamos los cursos de Genesis. Ya sabéis que si sois suscriptores podéis acceder a más de 5718 vídeos, y podréis descargar tanto el tema Hello Pro como los del curso de puesta a punto de themes.