Digital Pro Theme de StudioPress es un theme ideal para empezar un proyecto. Es de esos themes en los que no necesitas hacer cambios de diseño. Como viene el theme de fábrica, por así decirlo, es más que suficiente para empezar.
Tiene todo lo necesario para empezar un negocio online. Un gran CTA o llamada a la acción, menú y varias cosas más en las que entraremos en detalle a lo largo del artículo. Además es compatible con woocommerce, por supuesto. Es uno de los Genesis Themes que tengo listados en mi artículo de los mejores Genesis child themes.
Portada
La portada consta de varias áreas de widgets, las cuales iremos repasando y viendo en profundidad para ver que tipo de contenido tenemos que poner en cada una de ellas para que nos quede como en la demo.
Front Page 1
En la primera de las áreas de widgets o sección de portada, como quieras llamarla, tenemos una gran imagen de fondo con una llamada a la acción (aka CTA). Esta llamada a la acción se compone de un título, un párrafo y un botón.
En gran tamaño tenemos el título, que recomiendo que lo usemos para describir nuestro negocio en 4 o 5 palabras. Esto ayudará a cumplir la regla de los 4 segundos. Esta regla dice que si alguien entra en nuestra web, debe saber de que se trata o nuestra actividad principal en menos de 4 segundos. Por ejemplo, en mi casi. hablo de Genesis Framework, sus themes, escribor tutoriales y demás, así que mi título sería (y es), «Artículos y tutoriales para Genesis Framework».
Lo bueno que tiene Digital Pro es que no se queda en ese título, también tiene un párrafo y un botón. Después de que hayamos dejado claro de que trata nuestro negocio podemos usar ese párrafo para dar una explicación un poco más elaborada. Siguiendo el mismo ejemplo, podríamos añadir algo como «Artículos detallados, tutoriales sobre modificaciones y preguntas frecuentes sobre como sacar el mayor partido a tu Genesis Theme».
En esta sección de la portada de Digital Pro theme como ya he dicho también tenemos un botón. Un elemento importantísimo en el CTA de cada diseño web. Es con lo que le diremos a nuestros lectores que queremos que hagan. Toda portada (o la inmensa mayoría), debe tener un botón o acción a realizar. En este caso Digital Pro nos lo pone fácil con ese gran botón rojo llamativo.
Front Page 2
En la segunda de las secciones de la portada, el área de widgets Front Page 2 es en realidad un área doble. Dividida en dos, tenemos a la izquierda un bloque de texto con algo de información, donde en la demo da una serie de ventajas para los suscriptores y como complemento perfecto, a la derecha tenemos el formulario de suscripción a la newsletter. Para este segundo widget utiliza el plugin Genesis eNews Extended, pero nosotros podríamos usar cualquier otro, teniendo cuidado de no romper la uniformidad del diseño, claro.
Como ya dije al principio Digital Pro Theme está pensado para negocios pequeños y medianos. Y estos dos bloques de contenido son la prueba de ello. Es un theme pensado para dar valor a tu negocio y conseguir conversiones. Tras la llamada a la acción de la primera sección, muestra las suscripciones gratuitas y sus ventajas. Si no atrapa al lector con el primer contenido, lo atrapa con el segundo.
Front Page 3
La tercera de las secciones de la portada de Digital Pro, es un bloque informativo en el que expone una lista de los servicios que pueda ofrecer la supuesta empresa. No se ha de tomar al pie de la letra, claro está. Podemos, en caso de tener un ecommerce, enlazar a 3 diferentes categorías para mostrar nuestros productos. O si lo que tenemos es un blog que monetizamos por afiliación, podemos enlazar con 3 artículos pilares o tres categorías del blog para darles fuerza.
Lo bueno de este bloque es que el enlace es a través de botones, es decir, que al lector le queda claro que debe hacer clic ahí y que si lo hace, le redirigirá a esa sección de la web. A veces no dejamos suficientemente claro lo que es cada cosa. Me refiero a los enlaces o secciones como estos. De ahí vienen mucho fallos de usabilidad.
Cada categoría o servicio, puede ir acompañada de un icono para dar más énfasis y significado a lo que estamos queriendo contar. Estos iconos forman parte de Ionicons, una tipografía de iconos bastante grande y muy bien diseñada.
Sección de artículos o «Our Journal»
En la siguiente sección Digital Pro theme nos muestra los tres artículos más recientes de nuestro blog. Ellos a esta sección, al menos en portada la han llamado «Our Journal». Este nombre se puede editar fácilmente desde los ajustes del theme.
Además incorpora un enlace para ver el resto de los artículos. Es un poco peculiar, porque lo ideal, o mejor dicho, lo más habitual es que tengamos un botón que nos dirija a la página de blog donde podremos ver un listado general de todos los artículos, con o sin paginación. En cambio, Digital Pro nos redirecciona directamente a la segunda página del blog.
Footer
Ya al pie de página tenemos el footer de Digital Pro theme, donde hay tres zonas o áreas de widgets para colorar lo que queramos. En el caso de la demo nos muestran tres bloques con información sobre el negocio.
En un pequeño primer bloque en rojo (color principal), tenemos nuestros datos de contacto o en caso de ser una página corporativa los de la empresa.
En el segundo bloque y el tercero es más información acerca de la empresa. Un pequeño texto introductorio de la página d»sobre nosotros» y en el tercer bloque los enlaces a las redes sociales. Este último es muy sencillo de implementar gracias al plugin Simple Social Icons para Genesis Framework.
Página de tienda
Como ya he dicho al principio, Digital Pro theme es compatible con Woocommerce, lo que lo hace un theme muy potente para pequeños comercios online que quieren empezar con un diseño rápido, barato y óptimo, centrado en el contenido. Si bien es cierto que un diseño a medida por un profesional siempre funciona mucho mejor, porque se ajusta a las necesidades precisas del negocio, lo ideal es empezar con algo barato y rápido hasta que validemos la idea de negocio.
En esta página de tienda Digital Pro, nos muestra los productos en cuatro columnas con el nombre del producto, el precio (rebajado si lo está), y los botones de añadir al carrito en el color primario.
El diseño de la ficha de producto es muy minimalista y cómo detalle a señalar tiene un efecto lupa sobre la foto del producto al pasar el ratón por encima de ella. Eso sí, la podremos ver ampliada en grande al hacer clic en un icono de la lupa en la esquina superior derecha de la imagen.
Contacto
En la página de contacto de la demo viene implementado un formulario de Ninja Forms. Esto no quiere decir que tengamos que trabajar con este plugin de formularios de contacto. Ni mucho menos. Lo único es que Digital Pro Theme viene preparado para ese formulario con algo de soporte pero fácilmente podríamos implementar otro cualquiera. El famoso Contact Form 7 nos valdría a las mil maravillas.
Conclusiones
Pues la verdad, me ha quedado una muy buena impresión. Digital Pro Theme es un theme muy bien diseñado, limpio y enfocado al contenido. Me gustaría señalar, a favor eso si, los espacios en blanco. ¿Que quiero decir con esto? me refiero a los espacios en blanco entre elementos a lo largo del diseño del theme. Esto permite que las cosas respiren. Que los objetos no se pisen o se peleen por la atención del lector.
Me gusta en especial las tipografías que han elegido para este theme. Son muy legibles, y permiten jugar muy bien con tamaños grandes. Y aún siendo tipografías funcionales tienen bastante personalidad. Quizás el tamaño del texto en los párrafos es demasiado pequeño para mi gusto, porque dificulta la lectura sobre todo a personas que no tienen la vista perfecta, como un servidor. Pero es fácilmente resoluble.
Una carencia que si he visto es el menú secundario al pie del theme, bajo el footer. Ese menú es muy útil hoy día que tan necesarios son los enlaces de políticas de privacidad y avisos legales. Al igual que en el caso del tamaño de texto la solución es sencilla, crear nosotros mismos un nuevo emplazamiento de menú. No es complejo. Me lo apunto para crear un tutorial ;).
Para cualquier duda puedes dejar un comentario abajo, o mandarme un mensaje a través del formulario de contacto. Feliz día :).