Configura la plantilla como en las demos

Hoy vemos como configurar el pié de página del tema Gallery Pro de StudioPress com se muestra en el sitio de demostración.

En el pié de página hay tres áreas de widgets:

Footer 1

En la widget área Footer 1 hay un widget de html con el título: Contact y el contenido:

<p>+1 919 567 8256<br>
<a href="#">info@gallery.com</a></p>

Footer 2

En la widget área Footer 2 hay un widget del plugin Simple Social Icons con el título: Follow y el contenido:

Los colores de los iconos són el negro #111111 y el color hover o de cuando el ratón pasa por encima és el #999999

Footer 3

En la widget área Footer 3 hay un widget de html con el título: Studio y el contenido:

<p>123 N. Main St.<br>
Nowhere, MO 10567 </p>

Os dejo el vídeo para que lo veáis en directo.

En este tutorial veremos como configurar la página de inicio o portada del tema Gallery Pro de StudioPress. En esta página hay cuatro widget áreas.

Widget área Front Page 1

Para introducir el contenido de esta widget área iremos a Apariencia/Personalizar/Widgets/ Front page 1. En esta área hay un widget de texto con un título, un texto introductorio y un botón. Este es el texto:

<h1>Gallery Pro</h1>
<p class="intro">This theme showcases your galleries or pages in a minimal style with
 stunning typography. Make it your own with the styled Portfolio, 
E-Commerce, flexible front page and full color customization.</p>
<br>
<a href="#" class="button">Work With Us</a>

Esta plantilla viene con una imagen de fondo precargada para el área Front Page 1 . Esto quiere decir que en el momento que añadamos un widget a esta área la imagen de fondo se va a mostrar automáticamente.

Si queremos cambiar esta imagen tendremos que ir a Apariencia/Personalizar/Front Page Background Images. El tamaño de imagen recomendado es de 1600 x 900 px.

Y luego ir a Front Page Image 1 y cambiar la imagen:

Widget área Front Page 2

En esta sección encontramos 4 widgets. El primero ocupa todo el ancho de la pantalla y muestra 4 portfolios con el widget Featured Custom Post Type

Luego tenemos 3 widgets de texto que se disponen en 3 columnas:

Esta widget área mostrará una disposición de widgets segun el número de widgets que se añadan. El esquema de las disposiciones es éste:

Os dejo el contenido de los widgets de texto. En ellos se incluye un icono. Para cambiar el icono podéis ir a la página de Ionicons y cambiar el código por el del icono que más os guste.

Primer widget de texto:

<div class="text-center">
<p><i class="icon ion-ios-pricetag-outline"></i></p>
<h2>Branding</h2>
<p>We will work with you to bring your brand to life and make sure your personality is reflected in a brand you love.</p>
</div>

Segundo widget  de texto:

<div class="text-center">
<p><i class="icon ion-ios-camera-outline"></i></p>
<h2>Photography</h2>
<p>Photography is a powerful way to introduce your brand to the world. We make sure it's as unique as you!</p>
</div>

Tercer widget de texto:

<div class="text-center">
<p><i class="icon ion-ios-monitor-outline"></i></p>
<h2>Web Design</h2>
<p>We make sure your online presence is one of a kind. Your website will look great across all devices and mediums.</p>
</div>

Widget área Front Page 3

Esta widget área sigue el mismo patrón que la Front Page 1; tiene una imagen de fondo y un widget de texto. Aquí os dejo el código:

<h2>We live in a world that is full of beauty, charm and adventure.
<br>
There is no end to the adventures we can have if only we seek them with our eyes open.</h2>
<h5>Jawaharlal Nehru</h5>

Widget área Front Page 4

En la demo no se utiliza esta widget área pero tiene las mismas características que la Front Page 2

Widget área Front Page 5

Esta widget área sigue el mismo patrón que las Front Page 1 y 3; tiene una imagen de fondo y un widget de texto. Aquí os dejo el código:

<h2>Lady, you've got style, your blog should too.</h2>
<p><a href="http://my.studiopress.com/themes/gallery" class="button secondary">Get Gallery Pro</a></p>

Últimos posts del blog

Antes de la Front page 5 en la demo podemos ver que se muestran los últimos posts del blog. Este ajuste lo encontraremos en Apariencia/Personalizar/Front Page Content Settings:

Veremos que tenemos la opción de mostrar blog o esconder el blog. También nos permite cambiar el texto que se muestra antes de estos posts en la home:

Os dejo un vídeo con las instrucciones detalladas:

Después de haber configurado los widgets centrales de la home del tema Gallery Pro de StudioPress. vamos a ver como configurar la barra lateral.

En este post veremos los widgets que tenemos que añadir en el área Primary Sidebar para que se muestre como en la demo.
En esta widget área nos encontramos con 5 widgets:

Primary sidebar – Widget 1

El primero de ellos és un widget del plugin Simple Social Icons con el título: Follow y el contenido:

Los colores de los iconos són el negro #111111 y el color hover o de cuando el ratón pasa por encima és el #999999

Primary sidebar – Widget 2

El segundo es un widget de html con el título : Gallery Pro y el contenido:

Welcome to Gallery Pro! This Genesis child theme showcases your galleries or pages in a minimal style with stunning typography. Make Gallery Pro your own with a styled Portfolio, E-Commerce, flexible front page layout and full color customization!

Primary sidebar – Widget 3

El tercer widget es del plugin «Instagram Slider Widget» y lo ajustaremos con la siguiente configuración:

Primary sidebar – Widget 4

El cuarto widget se trata de un widget de html con el código para conectar a una API de una plataforma de ventas no relacionada con WordPress

Primary sidebar – Widget 5

Este último widget del área Primary Sidebar, es el widget para la suscripción de usuarios a nuestra newletter. Se llama Genesis eNews Extended. Lo tendremos que configurar con los datos que nos proporcione nuestro servicio de mailing.

Ahi va el video para que lo podáis seguir paso a paso.