Business Pro es uno de los temas de Genesis más usados. Tiene soporte para Woocommerce y su página principal está diseñada a base de áreas de widgets. Te vendrá bien tener la demo abierta en otra pestaña como referencia para seguir este tutorial.
Haz clic en la imagen si quieres ver el resultado :).
Importar contenido
Hay gente a la que le gusta primero desarrollar la web con contenido de prueba. Si es así, o simplemente, hasta que te entreguen el contenido real, puedes seguir el tutorial de como importar contenido demo o de ejemplo a WordPress.
WooCommerce
Tras instalar Woocommerce haremos una pequeña configuración.
Navegamos a WooCommerce → Ajustes y allí hacemos clic en la pestaña de productos. Ahí, haremos click en el enlace Mostrar. Se nos mostrarán varios desplegables. En el de página de la tienda, seleccionaremos Shop (o la páfina de prueba que queramos como tienda) y guardamos los cambios. Después vamos a la pestaña Finalizar Compra. En ella asignamos las páginas de finalización de compra.
Ajustes de WordPress
En WordPress también necesitamos hacer unos ajustes. Vamos a Ajustes → Lectura, donde configuraremos las página de portada y la de blog. Aprovechamos también para determinar el número de entradas que queremos que se muestren en nuestro Blog. Yo he puesto un límite de 12 entradas.
Para poder trabajar con imágenes y así asignarlas a algunos artículos he descargado una colección de imágenes de montañas y paisajes de Pexels.com.
Ajustes generales de Genesis
Lo siguiente que haremos será configurar las opciones de las herramientas de Genesis. Las podemos encontrar en Genesis → Theme Settings.
En la sección Content Archives configuraremos como queremos que se muestre nuestro blog. Indicamos que queremos que se muestre el contenido, con un límite de 250 caracteres. Que también se muestre la imagen destacada en el tamaño de Portfolio (definido por el Tema), y la paginación numérica. Eso dejará el blog exactamente como en la demo.
Lo siguiente que quiero mencionar es una lista de los plugins recomendados para configurar el tema. Puede parecer que nos intentan condicionar o vender algo, pero la verdad es que sólo nos indican los plugins para los que la plantilla tiene soporte por defecto. Es decir, con los plugins con los que se diseñó.
Los vamos a ir instalando a medida que los necesitemos. Os dejo una captura de ese aviso.
Página principal
Así que vamos con la página principal. La de inicio. Vistosa y modular, tiene varias áreas de widgets que vamos a ir configurando de una en una.
Front Page 1
La primera de esas áreas de widget o Front Page 1, no es más que HTML. Puro y simple. Eso echa para atrás a algunas personas. A mi me encanta porque nos da mucha flexibilidad a la hora de diseñar. El código para que quede como en la demo sería así.
<h1>WE CREATE SOLUTIONS FOR BUSINESSES</h1>
<p>A clean and modern WordPress theme built on the rock-solid Genesis framework designed for creative agencies or any kind of local business.</p>
<a href="#custom_html-5" class="button accent">See Our Services</a>La imagen o video de fondo para esa sección de la página principal se configura a través del personalizador de WordPress. Una vez dentro del personalizador iremos a Cabecera Multimedia, eso nos mostrará varias opciones de configuración. Podremos colocar de fondo una imagen o un vídeo.
El vídeo lo podremos configurar desde dos fuentes. O bien alojado en nuestro servidor (eso si, tendrá que ser .mp4), o bien alojado en Youtube. El tema Business Pro trae la opción para que le indiquemos la url del video de YouTube que queremos que se muestre de fondo en la cabecera.
Las opciones de imagen son dos. O bien la que sugiere el Tema, que es la que viene por defecto o añadir una de nuestra biblioteca de medios. Ambas son opcionales. Dado que aunque el tutorial es para dejar el tema como en la demo pero no identico, yo lo personalizaré un poco y añadiré una propia.
Front Page 2
El siguiente área de widgets es la Front Page 2, que en la demo viene con tres módulos para resaltar tres categorías, productos o servicios con iconos y una corta descripción.
Esto se consigue con el plugin Icon Widget. Lo que hace es crear un widget con título, contenido e icono, el cual podremos asignar a cualquier widget área. Veamos la configuración del Widget.
Crearemos un widget para cada icono con su título y descripción. Esto nos deja el área de widgets así.
El resultado no es el esperado. Esto, nos deja los tres módulos en la portada uno encima del otro, ocupando todo el ancho de la web. Nosotros queremos que cada uno ocupe un tercio, de manera que queden alineados y que se adapten a pantallas pequeñas. Pues bien, esto lo hacemos con otro de los plugins recomendados por el tema, Genesis Widget Column Calsses. Este widget nos permite asignar las clases de columnas de Genesis a los widgets y con ello conseguir un diseño adaptativo. Añade un campo desplegable a todos los widgets. En él podemos escoger una de las clases de Genesis en función del ancho que queremos para cada widget. Marcaremos la casilla «first» en el primer widget, empezando por la izquierda, de cada fila.
Y ahora si deberíamos ver los tres widgets con sus iconos alineados. Podemos comprobar también su adaptabilidad en pantallas pequeñas con las herramientas del inspector de navegador, o simplemente haciendo la ventana más pequeña.
Front page 3
En el tercer área de widgets de la página de inicio, tenemos tres páginas destacadas. El proceso es similar al usado en el anterior área de widgets. Creamos 3 widgets y les asignamos el ancho. El widget que he usado es uno nativo de Genesis, Genesis – Página Destacada. Para que quede igual que en la demo dentro del widget, marcamos la página queremos destacar. Marcamos que queremos mostrar la imágen destacada con el tamaño de Portfolio, el título, y el contenido con un límite de alrededor de 100 caracteres.
Como antes, debemos acordarnos asignar a cada widget el ancho requerido. En la demo se muestras tres páginas, pero puedes jugar con tamaños y cantidades. No te olvides de marcar la casilla de first en el primero de la izquierda.
Front page 4
El área Front page 4 es un poco más compleja. Pero bien explicado y sin saltarse ningún paso, sale seguro. Consta de 3 widgets. El primero (ha de ser el primero), es un widget de imagen par configurar la imagen de fondo. No tiene nada ni ancho determinado, ni enlace a ninguna parte. Simplemente la imagen.
El segundo uno de HTML personalizado con el código del botón del vídeo (que ha de tener la clase «show-video» y el tercero el widget de vídeo que por defecto, no se mostrará hasta que hagamos click en el botón. Os dejo el código HTML del botón.
<button class="show-video">►</button>
<p>Encotramos soluciones efectivas para problemas de negocios a través de la estrategia, tecnología, pensando en diseño y una buena creatividad a la antigua usanza.</p>
<a target="_blank" href="https://seothemes.com/themes/business-pro" class="button accent">Get Business Pro</a>
Front page 5
En la quinta sección de la página principal, encontramos una selección de artículos de un portfolio. Esto se consigue con dos de los plugins que nos recomienda el tema. Genesis Portfolio Pro y Display Post Shortcode. Con el primero de ellos estoy familiarizado. Crea un Custom post Type llamado Portfolio.
El otro, que he de decir que ha sido un grato descubrimiento, como su nombre indica, Display Posts Shorcode es para mostrar artículos de cualquier CPT en un área de widgets.
Con el primero, Genesis Portfolio Pro, bastará con instalarlo y crear nuestros artículos de portfolio. El segundo si requiere que lo configuremos. Os dejo una captura de pantalla del shortcode para mostrar los artículos como en la demo.
Front page 6
Los siguiente que haremos será la parte de los testimonios. Esto requiere que instalemos un plugin llamado, Genesis Testimonials Slider. Es gratuito y crea un Custom Post Type dedicado a testimonios. Para que el widget tenga contenido que mostrar tienes que crear algunos testimonios. Yo he creado cuatro. Después, la configuración del plugin es sencilla. Básicamente, para que quede como en la demo, lo dejaremos todo en blanco. Aunque, claro está puedes jugar añadiendo título y demás.
Before Footer
Para el último espacio de trabajo o área de widgets, el que está antes del Footer, usaremos de nuevo tres widgets. El primero uno de imagen que nos dará el fondo. El segundo y tercero dos de HTML personalizado en los que introduciremos el texto y el código del botón. Estas son las configuraciones:
Dejo el código HTML del tercer widget para que no tengas que escribirlo y puedas copiarlo:
<a target="_blank" href="https://seothemes.com/themes/business-pro" class="button accent">Buy Business Pro</a>Footer 1
Y pasamos al Footer. Consta de cuatro columnas, cada una de ellas es un área de widget. Para la primera necesitamos instalar el plugin Simple Social Icons de Nathan Rice. Añadiremos primero en el área Footer 1 un widget de HTML personalizado para agregar un poco de texto a modo introductorio. Y después el widget de Simple Social Icons.
Footer 2
En la segunda columna del Footer tenemos los datos de la empresa. Es un plugin que crea un widget que muestra los datos de la empresa o persona física, con el marcado HTML optimizado para el SEO de Schema.org. Para primero saber lo que va a mostrar el widget tendrás que introducir los datos de la empresa o persona física en el menú del escritorio de WordPress en Perfil Empresarial una sección que crea el propio plugin una vez lo hemos activado.
Una vez introducidos todos los datos de la empresa, en el widget decidimos que vamos a mostrar.
Footer 3
El tercer widget del footer es simplemente un menú. Esto lo hacemos con el widget menú personalizado.
Footer 4
Y el cuarto es un módulo de suscripción a un boletín de noticias. En Business Pro esto lo han hecho con Genesis eNews Extended, pero en mi caso suelo trabajar con Mailpoet. Las direcciones las aloja en el propio WordPress y luego externamente puede vincularlo a cualquier servicio de email marketing. Vemos como se ve el widget de Genesis eNews Extended.
Extras
Si queremos añadir, o más bien fijar el menú del tema Business Pro podemos hacerlo con una simple línea de código. Simplemente tendremos que editar el archivo functions.php del tema y añadir la siguiente línea al final:
add_theme_support( 'fixed-header' );Tablas de precios
Para las talas de precios, SeoThemes, creadores del propio Business Pro, tienen publicado en su cuenta de GitHub las tablas usadas en la demo en HTML. Dejo el código aquí:
Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.