En este tutorial vamos a aprender a configurar el apartado "Servicios" en homepage del tema Digital Pro, un child theme de Genesis.
Digital Pro theme
Digital Pro es un child theme de Genesis Framework muy popular y con bastantes instalaciones, que suele usarse como base para crear otros temas, ya que tiene una estructura muy clara, diseño atractivo y minimalista, y está muy bien programado, algo habitual entre los themes de StudioPress.
En este tutorial vamos a ver cómo poner a punto una sección concreta de Digital Pro, la sección "Servicios". Esto os puede servir como guía a la hora de configurar diferentes child themes de Genesis, ya que la mayoría usan widgets en su página principal.
Si necesitáis ayuda para configurar por completo este u otros temas de Genesis, os recomendamos hacer el curso dejar themes de WordPress como en la demo y el curso de puesta a punto de themes.
Si estáis suscritos, podréis acceder a ambos y también descargar desde la pestaña "Descargas" de la Intranet, el tema Digital Pro y todos los themes que vemos en cada una de las lecciones. Así que si os interesa, ya sabéis. Y ahora sí, ¡comencemos!.
Sección "Servicios" en Digital Pro
La sección servicios del theme Digital Pro está desarrollada con un layout flexible, por lo que los widgets van a ir adaptándose al espacio, y cambiarán su distribución y tamaño según los que configuremos. Así que aunque en la demo del child theme Digital Pro haya tres, podremos añadir tantos como necesitemos.
Pues bien, todo esto lo vamos a hacer desde el escritorio de WordPress, "Apariencia/Personalizar". Una vez aquí, y estando en la página principal del tema, tendremos que acceder al apartado "Widgets".
En dicho apartado encontraremos cuatro secciones donde podremos agregar los widgets que necesite el diseño que tengamos entre manos. Como en este caso vamos a dejarlo igual que en la demo, modificaremos la sección "Font Page 3" que es la que se encuentra entre el formulario de suscripción a la newsletter y los posts del blog.
Secciones disponibles en página principal Digital Pro
Una vez aquí, podremos comenzar a personalizar el apartado. Lo primero que haremos será añadir un widget tipo "Texto" donde introduciremos el texto que encabezará la sección.
En el ejemplo será "Servicios", pero podéis usar el que estiméis oportuno. Para ello, pulsaremos sobre el botón "Añadir un widget", y en el campo "Buscar widgets" escribiremos "Texto".
Agregar widget "Texto" en Front Page 3
Cuando lo localicemos, simplemente pulsando encima, se añadirá a la columna izquierda desde la cual podemos realizar los ajustes. Como veréis, el apartado Servicios es muy sencillo de configurar. Lo siguiente que debemos hacer es desplegar el widget, e introducir en el título el encabezado.
Agregar título widget "Texto"
Cuando lo tengamos, haremos clic sobre "Hecho" para guardar estos cambios. El siguiente paso será agregar tres widgets más, pero esta vez tipo HTML. Esto se hace de la misma forma que acabamos de explicar, vamos a verlo uno por uno.
Añadir widgets para cada servicio
Ahora vamos a añadir el primer servicio de los tres que aparecen en la demostración del theme. Para ello pulsaremos sobre "Añadir un widget", buscaremos "HTML" para localizar el que nos interesa, y lo agregaremos a esta sección.
A continuación desplegaremos el mismo, e introduciremos el siguiente código HTML de prueba. Ni que decir tiene, que después, cuando ya sabemos donde debe modificarse cada apartado, podemos y debemos personalizar la información que aparece en ellos para adaptarla a nuestro caso concreto.
Bien, pues volviendo al widget, en esta ocasión dejaremos el título vacío, e introduciremos los siguientes datos en el campo "Contenido" del primer widget HTML de este apartado:
<!-- Código primer widget --> <i class="icon ion-ios-compose-outline" aria-hidden="true"></i> <h4>Content Marketing</h4> <p>Understand the basics of building the type of audience that will build your business.</p> <a class="button small" href="#">Learn More</a>
Configurar widget HTML del primer servicio en Digital Pro
Haremos lo mismo con el segundo y el tercero. Añadimos el widget HTML, lo desplegamos, insertamos el código que le corresponda en el apartado "Contenido" y guardamos pulsando en "Hecho".
<!-- Código segundo widget --> <i class="icon ion-ios-locked-outline" aria-hidden="true"></i> <h4>Digital Commerce</h4> <p>Our academy shows you how to create and sell profitable digital products & services.</p> <a class="button small" href="#">Learn More</a>
<!-- Código tercer widget --> <i class="icon ion-ios-mic-outline" aria-hidden="true"></i> <h4>Podcast Training</h4> <p>We'll teach you how to deliver a remarkable podcasting audience experience.</p> <a class="button small" href="#">Learn More</a>
Cuando finalicemos todos los pasos, debemos guardar los cambios haciendo clic en "Publicar", y ahora sí, ya lo tendremos listo.
Servicios configurados como en la demo del tema Digital Pro
¿Fácil, verdad? Pues en el resto de themes de Genesis las configuraciones se realizan de forma similar. Así que lo que acabamos de ver, además de aplicarse a Digital Pro, os servirá para otros temas. Simplemente usarán widgets y códigos HTML distintos, pero el procedimiento en muchos casos será parecido.
Resumen y conclusión
Digital Pro es un child theme de Genesis de aspecto minimalista y diseño atractivo, con varios apartados para configurar.
En el caso de la sección servicios, tendremos que acceder al personalizador de temas y desde allí incluir cada uno de los widgets que necesitemos en función de los servicios que estemos ofreciendo. Si queremos dejarlo como en la demo, incluiremos tres con su código correspondiente.
¡Y esto es todo! Esperamos que os haya resultado útil. Si os interesa el tema, os recomendamos echar un vistazo al curso dejar themes de WordPress como en la demo y al curso de puesta a punto de themes. Si estáis suscritos a boluda.com, podréis acceder a estos dos cursos, a los themes premium, y a muchos otros. Hay más de 6753 vídeos a vuestra disposición, ¡os esperamos dentro! :)