Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Genesis / Tutorial de Studio Pro de Genesis

Tutorial de Studio Pro de Genesis

enero 25, 2018 Por Oscar martin Deja un comentario

Hola Chicos, me habéis pedido que hiciera un tutorial paso a paso para configurar la plantilla Studio Pro de Genesis y aquí lo tenéis 😉

La plantilla Studio Pro es ideal para la web de una agencia digital.

Está optimizada para WooCommerce con estilos predefinidos si montas tu tienda con este plugin.

La página principal puedes configurarla a tu gusto ya que sus 6 zonas de Widgets en la página principal así te lo permiten.

Además nos permite configurar un vídeo como fondo y que cada página tenga una imagen de cabecera distinta.

También nos permite crear una galería de imágenes de forma sencilla y responsive.

Si quieres ver el resultado que vas a obtener al realizar este tutorial haz click en la siguiente imagen:

studio pro genesis

La plantilla la puedes comprar aquí o si eres miembro premium la tienes disponible en la zona premium 😉

Aquí tienes el tutorial en vídeo:

Suscríbete a mi canal:  

Antes de instalar la plantilla:

Para seguir este tutorial tienes que tener una instalación de WordPress limpia.

Instalar Studio Pro de Genesis

Recordar que para instalar cualquier plantilla de StudioPress tenemos que instalar previamente la plantilla padre Genesis y una vez hecho instalamos la plantilla hija, en este caso la plantilla Studio Pro.

Una vez hecho desde Apariencia –> Temas –> Añadir nuevo verás algo como lo siguiente:

plantilla studio pro apariencia

Cuando hemos instalado la plantilla nos aparecerá un mensaje en el que nos indica que tenemos que instalar los plugins necesarios para que todo funcione correctamente:

plugins necesarios studio pro

Hacemos click en “Begin installing plugins”

Y una vez instalados los activamos:

activar plugins studio pro

Importar Contenido Demo

Esta plantilla trae dos tipos de contenido demo preparados para que los importemos.

  • Entradas, menus y demás contenido
  • Configuración de los Widgets

Si descomprimimos el fichero studio-pro.zip de la plantilla nos encontramos con los ficheros sample.xml y widgets.wie.

El fichero sample.xml es el fichero demo del contenido y el fichero widgets.wie es la configuración de todos los widgets de la demo.

El fichero de los widgets nos va a ahorrar un montonazo de trabajo 🙂

Entradas, menus y demás contenido

Iremos a Herramientas –> Importar –> WordPress –> Ejecutar importador y importaremos el fichero sample.xml

Una vez hecho tendremos un montón de entradas, páginas y menú demo.

Mucho más fácil configurar el diseño de una web con contenido que vacía 🙂

Si ya tienes contenido real en tu web sáltate este paso.

Configuración de los Widgets

Vamos a herramientas –> Widget Importer & Exporter y seleccionamos el fichero widgets.wie

Una vez hecho si vamos a apariencia –> Widgets veremos que ya tenemos cada widget en su sitio para que nuestra web tenga la misma configuración que en la demo:

widgets demo studio pro

Configurar Página de Inicio o Home

Nos falta un pequeño paso para que nuestra home esté lista.

Tenemos que ir a Ajustes –> Lectura y configurar como página de portada “home” y como página de entradas Blog:

portada home studio pro

Y ahora si nuestra página de inicio se parece un montón a la página demo pero todavía no es idéntica.

Logo

Por defecto en nuestra web no aparece un logotipo, aparece el nombre de la web, para cambiarlo tenemos que hacer click en Personalizar –> Identidad del Sitio y añadir nuestro logotipo:

studio pro logotipo

Menú Principal

Cuando importamos el contenido demo nos crea un menú pero no añade los items en el. Tan sólo seleccionamos los que queremos, los añadimos y nos seguramos que esté marcada la opción “Heder Menu”

menu principal studio pro

Vídeo de fondo en el Widget Front Page 1

Para añadir el vídeo de fondo lo que tenemos que hacer es ir a Personalizar –> Cabecera Multimedia y donde pone Video Cabecera añadir un vídeo en formato mp4 o la url de un vídeo de YouTube:

studio pro video home

Además en esta misma pantalla configuramos la imagen de fondo del widget “Before Footer” en el campo “Imagen de Cabecera”

Si has llegado hasta aquí tienes la página inicial configurada a falta de añadir las imágenes.

Añadir imágenes en el Portfolio y Entradas

Cuando se importa el contenido demo, solo se importa el texto, no trae las imágenes demo por eso no aparecen en nuestra web. Tan sólo añadimos imágenes a los post, elementos de porfolio y listo, nuestra home será idéntica a la demo.

Las imágenes tenemos que añadirlas como imágenes destacadas, aquí un ejemplo:

imagen destacada portfolio

Si hacemos eso con todos los post de portfolio nos aparecerá en la home la siguiente sección:

seccion portfolio home studio-pro

Lo mismo tenemos que hacer con la sección de las entradas:

seccion blog home studio pro

Añadir Iconos en el Menú del Footer

Para tener nuestra web lista nos falta saber como añadir los iconos que aparecen en el menú del footer:

iconos menu footer studio pro

Los iconos se añaden por medio de clases que tenemos que añadir a cada item del menú.

Lo primero que necesitamos es saber el nombre de la clase.

Cuando importamos el contenido demo se nos crea una página con todos los iconos y sus nombre:

clases iconos studio pro

Ahora nos vamos a la página del menú y nos aseguramos que está marcada la opción “Clases CSS”

menu clases css studio pro

Ahora al desplegar cada item del menú veremos el campo Clases CSS:

iconos clases studio pro

el nombre de la clase será el nombre del icono que hemos visto en la página de iconos precedido de icon-

Y si has llegado hasta aquí ya tienes la web configurada.

Espero que os haya gustado 😉

Publicado en: Genesis, Studio Pro

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR