ANA PASCUAL WEB ESTUDIO
En este tuturial veremos como configurar el menú de navegación del tema Gallery Pro de Genesis.
Veremos que esta plantilla tiene 3 ubicaciones de menús:
Veámoslo en directo en el vídeo:
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:
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>
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
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.
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:
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>
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>
En la demo no se utiliza esta widget área pero tiene las mismas características que la Front Page 2
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>
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:
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
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!
El tercer widget es del plugin «Instagram Slider Widget» y lo ajustaremos con la siguiente configuración:
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
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.
En este tutorial vamos a ver como incorporar los plugins recomendados y el contenido de muestra.
Empezaremos por los plugins; recordad que siempre tenéis que instalar primero los plugins recomenados antes que el contenido de muestra. Esto es válido para cualquier tema.
Los plugins recomendados para Gallery Pro son:
Plugins relacionados con la tienda:
Plugins para el Portfolio:
Plugins usados en el sidebar:
Aún nos quedará instalar un último plugin para poder importar el contenido y los widgets de muestra: Widget Importer & Exporter
Una vez todos instalados y activados empezaremos con la importación de contenido.
Iremos a Herramientas/Importar y escogeremos en WordPress la opción de Instalar ahora:
Ejecutaremos el importador WordPress y buscaremos el archivo demo.xml dentro de la carpeta «demo» del tema. Clicar Subir archivo e importar. Recordad asignar el autor y marcar la opción «Descarga e importa archivos adjuntos»
Una vez finalizado volvemos a Herramientas y ahora escogeremos Widget Importer & Exporter, Clicaremos el botón «navega» para subir el archivo widgets.wie que está dentro de la carpeta «demo» del tema y clicaremos en «Importar widgets».
Con todo este proceso os quedará en vuestro WordPress todo el contenido de muestra de la demo y configurados todos los widgets que la demo utiliza.
Hola!
Hoy vamos a ver como cambiar más colores del tema Authority Pro de StudioPress. En otro post ya vimos que en Apariencia/Personalizar/Colores existe un único ajuste de color que afecta a distintas secciones.
En cambio hoy veremos como personalizar el color de otras secciones.
Os dejo un vídeo con las explicaciones en directo y el código CSS que he utilizado para que podáis hacerlo vosotros mismos fácilmente.
La extensión de Firefox que utilizo para la selección de colores es Colorzilla.
Aquí os dejo los cambios de CSS que hago en el vídeo; sólo tenéis que cambiar el color por el vuestro:
/*Color del título del sitio*/
.site-title a, .site-title a:focus, .site-title a:hover {
color: #694b18;
}
/*Color del título de la sección Hero*/
h2.hero-title {
color: #487892;
}
/*Color del bloque detrás de la imagen de la sección Hero*/
.hero-section-column.right::before {
background: #bab08e;
}
/*Color del bloque detrás de la imagen de los widgets de imagen*/
.widget_media_image::before {
background: #dde0c5;
}
/*Color del bloque detrás de la imagen destacada de los posts*/
.authority-featured-image::before, .featuredpost .has-post-thumbnail > a::before {
background: #95d5dd;
}
/*Color de fondo de los widgets del pié de página; footer-widgets*/
.footer-widgets {
background-color: #F1AD474D;
}
/*Color de fondo de la imagen de la sección Hero*/
.hero-section-column.right {
background-color: beige;
}
Si queréis cambiar algun otro color y no sabéis como no dudéis en contactar!
Ana