Como dejar el tema Boss Pro como en la demo

Es uno de mis temas favoritos. Boss Pro es sencillo de usar y muy elegante de cara al diseño. Con pocos cambios que hagamos, tendremos una web muy distinta de lo que viene siendo el tema original. Pero este tutorial no trata de esto, sino de dejar Boss Pro theme como en la demo. Así que vamos a ello. Como siempre os dejo un enlace a la demo del tema para que os sirva de guía.

Contenido de ejemplo

Ya he escrito un artículo de como importar contenido demo o contenido de relleno. Y como siempre lo primero será instalar algunos plugins que nos servirán más tarde, pero que los necesitamos ahora para poder importar este contenido de ejemplo. Os dejo un lista de los plugins recomendados en este tema para que los instaléis todos de golpe si lo necesitáis.

  • Genesis E-News Extended
  • Genesis Simple Edits
  • Genesis Simple Share
  • Genesis Testimonial Slider Widget
  • Simple Social Icons
  • Ninja forms
  • Regenerate Thumbnails
  • WooCommerce
  • Genesis Conect for Woocommerce

Los importantes antes de importar algo de contenido si lo necesitamos son Genesis Testimonials Slider, Woocommerce y Genesis Conect for Woocommerce. Instalados estos podremos usar el archivo xml que trae el propio tema en la carpeta raíz. 

Ajustes de WordPress

Para dejar Boss Pro como en la demo, necesitamos configurar la página de Inicio y la de Blog. Vamos nada del otro mundo. Seguro que lo has hecho muchas veces, pero por si acaso dejo captura. Ambas páginas se me han creado al importar el contenido de ejemplo, si no las tienes creadas, simplemente creas dos paginas vacías que usaremos para eso.

Ajustes de lectura en WordPress
Ajustes de lectura en WordPress

Imágenes de fondo

El siguiente punto se describe a si mismo por el título. El tema Boss Pro bien con unas imágenes predefinidas para los fondos de algunas áreas de widgets de la página de inicio. ¿Esto quiere decir que tenemos que usarlas si o si? Pues claro que no. Las podemos modificar en el personalizador. Es cómodo y fácil. Veamos.

Vamos a AparienciaPersonalizarFront Page Images. Ahí podemos ver las tres imágenes predefinidas que ademas vienen con el tema. En cada una de ellas tenemos dos opciones, o quitar la imagen o bien cambiarla por otra. Si hacemos clic en Cambiar Imagen veremos que podemos subir nuestra imagen o seleccionar una de la biblioteca de medios de nuestro WordPress.

De cualquier manera, una vez hechos los cambios que deseamos, haremos clic en Publicar. En todas ellas se recomienda un tamaño de 1600 x 1050 px.

Logo

¿Que hay que decir del logo? básicamente es como el resto de temas. Una opción de subir una imagen para sustituir el de texto. Pero en esta ocasión nos da opción a subir dos logos. Uno oscuro (para fondo blanco) y otro claro (para fondo oscuro).

Página de inicio

La primera de las áreas de widgets la configuraremos con un widget de texto o de HTMl personalizado. El código es sencillo y no es más que un título H1 con algunas clases y etiquetas span.

Ajsute s widget en Front Page 1 del tema Boss Pro
Ajsute s widget en Front Page 1 del tema Boss Pro

Os dejo el código por aquí para que podáis hacer un copiar-pegar.

<h1 style="max-width: 500px; text-align: center;">Turn your <span class="handwritten">dreams</span> into <span class="handwritten">plans</span></h1>

Para la segunda área de widget de la portada del tema, el área Front Page 2 está de nuevo configurada con un widget de texto. En esta ocasión lleva título y el cuerpo del widget no es más que una cita o Blockquote, en inglés.

Ajsute s widget en Front Page 2 del tema Boss Pro
Ajsute s widget en Front Page 2 del tema Boss Pro

Tampoco se han complicado demasiado para el área Front Page 3. Eso nos beneficia, porque nos da más flexibilidad. Son en total 4 widgets de texto. Cada uno de ellos con una imagen, título, texto y enlace en forma de botón. Todo salvo el primero de ellos que sirve para crear ese pequeño título vertical al lado izquierdo. Así que le primero de ellos irá sólo con un título, el que queramos que aparezca en vertical.

Ajsute s widget en Front Page 2 del tema Boss Pro

Y los otros tres con todos esos elementos de los que hablábamos antes. Dejo capturas de pantalla de uno de ellos y el código HTML para que puedas copiarlo.

Ajsute s widget en Front Page 3 del tema Boss Pro
 <span class="huge">02</span>
<img src="https://cdn.twinsmommy.com/wp-content/uploads/2016/06/twiggy-posts-sample-2.jpg" />
 <h5>Service 1</h5>
 An entrepreneur, writer, philanthropist and an unshakable optimist dedicated to helping you.
<a class="button" href="https://boss.designbybloom.co/investment/">Learn More</a>

No te olvides de escribir el código dentro de la pestaña de HTML en el propio widget. Si lo escribimos en la pestaña de texto, nos saldra el código en crudo en el diseño de la página ;).

En el Front Page 4 o cuarta área de widgets de la página de inicio está pensada para una corta carta de presentación para la empresa o persona a la que está dedicada la página. la configuración es simple y a través de un poco decódigo HTML así que usaremos de nuevo un widget de texto o uno de HTML personalizado. A elegir.

Ajsute s widget en Front Page 4 del tema Boss Pro

Y aquí está el código para que podáis copiar y pegar.

t;div class="card two-fifths right">
 <h6 class="card-title">About</h6>
 <span class="huge">Hi,</span>
 <h5>I'm here for you.</h5>
 <p>An entrepreneur, writer, philanthropist and an unshakable optimist dedicated to helping you become the person you most want to be.</p>
 <a class="button" href="https://boss.designbybloom.co/about/">Learn More</a>
 </div>

El Front Page 5 o los testimonios, están configurados con unos de los plugins que hablaba al principio, Genesis Testimonials Slider. Es sencillo. Tan solo configurar dos widgets, uno de ellos de texto con el título para que quede bien maquetado y el propio widget de Testimonials. Debemos comprobar si en el menú de WordPress en Testimonials tenemos alguno creado. Si has seguido mi tutorial y has importado el contenido de ejemplo tendrás que tener 2. Si no es así puedes crearlos manualmente.

La configuración del plugin Testimonials es importante. LO puedes configurar en Genesis → Testimonials. Como puedes ver en la captura no es complicado. Simplemente asegurate de que lo tienes con los mismos ajustes para que quede como en la demo.

Configuración plugins testimonials en el tema Boss Pro

Lo siguiente que podemos ver en la página principal es nada menos que una serie de imágenes pensada como muestra de las marcas con las que se ha trabajado. De nuevo y como tónica en esta demo se ha usado código HTML para crear el contenido del área Front Page 6. Y por supuesto un widget de texto para contenerlo. El código es sencillo, tan sólo 6 divisiones con el código CSS necesario para que sea adaptativo y las imágenes dentro de cada una. Os dejo el código con las URL’s originales de las imágenes de la demo.

<div class="one-sixth first"><img style="padding: 10%; opacity: 0.5;" src="https://boss.designbybloom.co/wp-content/uploads/2017/06/logo-1.png" /></div>
<div class="one-sixth"><img style="padding: 10%; opacity: 0.5;" src="https://boss.designbybloom.co/wp-content/uploads/2017/06/logo-2.png" /></div>
<div class="one-sixth"><img style="padding: 10%; opacity: 0.5;" src="https://boss.designbybloom.co/wp-content/uploads/2017/06/logo-3.png" /></div>
<div class="one-sixth"><img style="padding: 10%; opacity: 0.5;" src="https://boss.designbybloom.co/wp-content/uploads/2017/06/logo-4.png" /></div>
<div class="one-sixth"><img style="padding: 10%; opacity: 0.5;" src="https://boss.designbybloom.co/wp-content/uploads/2017/06/logo-5.png" /></div>
<div class="one-sixth"><img style="padding: 10%; opacity: 0.5;" src="https://boss.designbybloom.co/wp-content/uploads/2017/06/logo-6.png" /></div>

Front Page 7 y última área de widgets. Como puedes apreciar en la demo, no es más que un formulario de contacto. Eso si de Ninja Forms. Lo he probado con uno de Contact Form 7 y no queda tan bien, es decir, imposible no es, es sólo que el tema viene por defecto desarrollado para un formulario de Ninja Forms. Si queremos cualquier otro formulario de contacto deberemos maquetarlo y trabajar un poco nuestro código CSS para dejarlo como en la demo.

Configuración contacto en Boss Pro
Configuración contacto en Boss Pro

La página de «About»

La típica página de «About» o «Sobre Nosotros», en Boss Pro viene maquetada acorde con el diseño del resto del tema. Esto se agradece, la verdad, porque si nos gusta el tema y su estética podemos tener casi todo con esa coherencia que a mi me gusta en los diseños y que ayuda tanto a tener una mejor experiencia del usuario.

Página de About en ancho completo
Página de About en ancho completo

Si habéis importado el contenido de ejemplo la tendréis creada con todo el código HTML necesario. Tan sólo tendréis que ir cambiando lo que necesitéis. De todas formas, aquí os dejo el código para que si no has importado nada porque ya tenías tu propio contenido, tengas al menos la estructura HTML.

<div class="one-half first"><img class="aligncenter size-full wp-image-541" src="https://bosspro.genesiswpsupport.com/wp-content/uploads/2017/06/demo-27.jpg" alt='' width="1050" height="1575" /></div>
<div class="one-half">
<h1 class="huge"><span class="handwritten pull-left">let's meet</span></h1>
<div class="four-fifths only">This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like in order to share with your readers what is on your mind. This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like.This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like in order to share with your readers what is on your mind.

This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like in order to share with your readers what is on your mind. This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like.
This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like in order to share with your readers what is on your mind.

This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from.

</div>
</div>

También deberemos a asegurarnos de que añadir la clase necesaria para que la página tenga un ancho especial. Las clases, que en realidad son dos, son: full title-hidden.

Ajustes de ancho en página de About
Ajustes de ancho en página de About

Tabla de precios

El tema Boss Pro viene diseñado con una tabla de precios. Al igual que antes nos facilitan el código HTML para poder rellenar con nuestros datos. te dejo el código aquí para que sólo tengas que copiarlo.

<p style="text-align: center; max-width: 680px; margin: 0 auto 60px;">Choose one of our packages below. Boss Pro is designed to take your business to the next level and connect you with your ideal audience. From captivating typography to crafted buttons and forms, every detail has been thought through. Let’s turn your dreams into plans.</p>

<div class="pricing-table">
<div class="plan one-third first">
<div class="top">
<h5>Engagements</h5>
<em>Included in most wedding packages</em>
<h1 class="price">$450</h1>
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
</div>
<a class="button full-width" href="#">Get Started</a>

</div>
<div class="featured plan one-third">
<div class="top">
<h5>Weddings</h5>
<em>Printing rights included in all collections</em>
<h1 class="price">$3,200</h1>
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
</div>
<a class="button full-width" href="#">Get Started</a>

</div>
<div class="plan one-third">
<div class="top">
<h5>Lifestyle</h5>
<em>Inquire for more details</em>
<h1 class="price">$500</h1>
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
</div>
<a class="button full-width" href="#">Get Started</a>

</div>
</div>

Como en la página de «About», para la página de tabla de precios nos dan la opción de usar dos clases para personalizar la página. En esta ocasión son full title-center.

Como extra de mi parte, he modificado la tabla de precios para aquel o aquella que tenga cuatro precios. Una tabla de precios con cuatro opciones. aquí la dejo.

<div class="pricing-table">
 <div class="plan one-fourth first">
 <div class="top">
 <h5>Engagements</h5>
 <em>Included in most wedding packages</em>
 <h1 class="price">$450</h1>
 <ul>
 <li>Option 1</li>
 <li>Option 2</li>
 <li>Option 3</li>
 </ul>
 </div>
 <a class="button full-width" href="#">Get Started</a>

</div>
 <div class="featured plan one-fourth">
 <div class="top">
 <h5>Weddings</h5>
 <em>Printing rights included in all collections</em>
 <h1 class="price">$3,200</h1>
 <ul>
 <li>Option 1</li>
 <li>Option 2</li>
 <li>Option 3</li>
 </ul>
 </div>
 <a class="button full-width" href="#">Get Started</a>

</div>
 <div class="plan one-fourth">
 <div class="top">
 <h5>Lifestyle</h5>
 <em>Inquire for more details</em>
 <h1 class="price">$500</h1>
 <ul>
 <li>Option 1</li>
 <li>Option 2</li>
 <li>Option 3</li>
 </ul>
 </div>
 <a class="button full-width" href="#">Get Started</a>

</div>
 <div class="plan one-fourth">
 <div class="top">
 <h5>Nomad</h5>
 <em>Inquire for more details</em>
 <h1 class="price">$750</h1>
 <ul>
 <li>Option 1</li>
 <li>Option 2</li>
 <li>Option 3</li>
 </ul>
 </div>
 <a class="button full-width" href="#">Get Started</a>

</div>
</div>

Iconos para compartir en redes sociales

Si queremos añadir unos iconos de compartir en redes sociales, como mejor opción, teniendo en cuenta de que estamos trabajando con Genesis, está Genesis Simple Share. Hemos hablado de este plugin en un artículo del blog. echadle un vistazo y veréis que simple.

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?