En esta clase del curso Boss Pro vamos a trabajar y dejar Boss Pro como que en la demo para que aprendas cómo funciona todo y puedas personalizarlo sustituyendo los contenidos de ejemplo por los tuyos.
Como siempre, a continuación te dejo 3 vídeos con todos los detalles para que no tengas problemas en implementar Boss Pro.
Instalación, plugins y contenido demo
En el primer vídeo veremos cómo instalar Genesis Framework, su child theme Boss Pro, los plugins que se usan en la demo (ojo, no son obligatorios, sólo si quieres que quede todo exacto a la demo) e importaremos el contenido de demo para tener un punto de partida.
Como has visto, es un proceso muy sencillo y ahora ya sí tenemos todo preparado para empezar a diseñar nuestra home.
Diseñando la página home de Boss Pro
En el segundo vídeo nos ponemos manos a la obra y comenzamos con el diseño de la home de Boss Pro para dejarlo como en la demo. Es muy fácil, sólo tienes que hacer lo que yo hago en los vídeos.
SECCIÓN 1
<h1 style="max-width: 500px; text-align: center;">Convierte <span class="handwritten">tus sueños</span> en <span class="handwritten">planes</span></h1>
SECCIÓN 2
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum arcu ex, eget eleifend justo feugiat sit amet. Aenean mattis dapibus diam, quis aliquet neque elementum in.</blockquote>
SECCIÓN 3
Widgets 2,3,4 (EL MISMO PARA LOS TRES)
<span class="huge">01</span>
<img src="https://cdn.twinsmommy.com/wp-content/uploads/2016/06/twiggy-posts-sample-2.jpg" />
<h5>Service 1</h5>
<p>
An entrepreneur, writer, philanthropist and an unshakable optimist dedicated to helping you.</p>
<a class="button" href="https://boss.designbybloom.co/investment/">Learn More</a>
SECCIÓN 4
<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>
SECCIÓN 6
<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>
PÁGINA ABOUT ME
<div class="one-half first"><img class="aligncenter size-full wp-image-541" src="http://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>
Custom Body Class = full title-hidden
TABLAS DE PRECIOS
<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>
Custom Body Class = full title-center
Como has visto, es un proceso muy sencillo y ahora ya sí tenemos todo preparado para empezar a diseñar nuestra home.
Remates en Boss Pro para dejarlo igual que en la demo
Ha llegado el momento de rematar nuestro trabajo para dejar la plantilla Boss Pro igual que se muestra en la demo.
En el siguiente vídeo vamos a acabar de ver todos los ajustes del personalizador, ver cómo usar los templates, algunas páginas especiales de Boss Pro, las configuraciones de Ninja Forms, la barra lateral y un montón de detalles más.
Como has visto, Boss Pro es un child theme fácil de gestionar y muy ligero gracias al uso de html por medio de Widgets.
Ahora te doy unos recursos extra para que profundices o aclares dudas.
Enlaces a otros cursos y recursos complementarios mencionados en esta clase
A continuación te dejo los enlaces a todo lo que he ido comentando que te puede venir bien. Ya sabes, yo pongo aquí todo este contenido para tú comodidad pero sólo tendrás que mirarte lo que necesites.
- Curso de Genesis Básico.
- Curso del plugin Genesis Simple Edits.
- Snippet para quitar los créditos del footer en Genesis.
- Curso del plugin Genesis Simple Social Icons.
- Curso del plugin Genesis Simple Share.
- Curso del plugin Genesis Enews Extended.
- Curso del plugin Ninja Forms.
- Curso del plugin Genesis Testimonials.
- Tutorial para importar contenidos en WordPress.
¡Listo! Ya tenemos nuestra web igual que en la demo!
Como has visto es muy sencillo realmente, pero si te atascas en algún punto o te queda alguna duda puedes ponerte conmigo en el formulario de soporte.
Y si no eres suscriptor, puedes acceder a esta clase y el resto de clases de todos mis Cursos WordPress suscribiéndote.
A día de hoy hay un total de 108 clases publicadas con más de 216 vídeos .
Eso es todo. ¡Nos vemos en el próximo curso!
Curso válido para las versiones: 1.0.1
Nº actualizaciones en clases: 0
Si una actualización afecta al curso se actualiza la información de la clase o re-graba el vídeo para mantenerlo al día.
Si una clase está actualizada verás los detalles de cada versión.
