Como dejar el tema Business Pro como en la demo

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 Woocomerce
Ajustes de Woocomerce

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.

Imágenes de prueba para trabajar con ellas
Imágenes de prueba para trabajar con ellas

Ajustes generales de Genesis

Lo siguiente que haremos será configurar las opciones de las herramientas de Genesis. Las podemos encontrar en Genesis → Theme Settings.

Ajustes de genesis
Ajustes de genesis

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.

Ajustes de archivo de Genesis
Ajustes de archivo de Genesis

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.

Plugins recomendados por el tema Business Pro
Plugins recomendados por el tema Business Pro

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.

Configuración de la imagen de cabecera
Configuración de la imagen de cabecera

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í.

Área de widgets con iconos
Área de widgets con iconos

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.

Clases para columnas en los widgets
Clases para columnas en los widgets

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.

Widget de página destacada en Genesis
Widget de página destacada en Genesis

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.

Páginas destacadas en la portada de Business Pro
Páginas destacadas en la portada de Business Pro

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>
Primer widget del area Front page 4 del tema Business Pro
Segundo widget del area Fornt Page 4 del tema Business Pro
Tercer widget del área Fornt Page 4 del tema Business Pro

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.

Primer widget del área Front Page 5
Segundo widget del área Front Page 5

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.

Widget de testimonios para el tema Business Pro
Widget de testimonios para el tema Business Pro

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:

Primer widget del Footer
Segundo widget del footer
Tercer widget del footer

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.

Widget de texto para título de las redes sociales
Widget redes sociales del footer

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.

Widget de perfil empresarial
Widget de perfil empresarial

Footer 3

El tercer widget del footer es simplemente un menú. Esto lo hacemos con el widget menú personalizado.

Menú del footer
Menú del footer

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.

Widget de suscripción de noticias
Widget de suscripción de noticias

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.

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?