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 / Ecommerce / Tutorial Plantilla Outfitter Pro de Genesis para WooCommerce

Tutorial Plantilla Outfitter Pro de Genesis para WooCommerce

septiembre 4, 2017 Por Oscar martin 1 comentario

No hay muchas plantillas de Genesis para eCommerce, por eso cada vez que sale una nueva me pongo muy contento. StudioPress acaba de sacar al mercado el Theme Outfitter Pro y aquí tienes un tutorial para aprender a dejar tu web como viene en la demo de esta plantilla.

Esta plantilla, junto al Framework de Genesis tiene un precio de 129,95$.

La puedes comprar desde aquí o si eres miembro premium la tienes disponible gratis en el área de miembros.

En la siguiente imagen puedes ver el resultado final que vamos a obtener:

outfitter

Antes de empezar con este tutorial tienes que tener WordPress instalado. En la zona premium tienes un Curso de WordPress

Aquí tenéis el tutorial en vídeo:

Suscríbete a mi canal:  

Instalación Plantilla

Como seguramente ya sabes, al ser una plantilla hija de Genesis, antes de instalar la plantilla Outfitter tienes que tener instalado el framework Genesis. y una vez instalado y puedes instalar y activar el theme Outfitter.

activar outfitter

Una vez activada la plantilla tenemos que instalar los siguientes plugins:

Plugins Necesarios

  • WooCommerce: Si vamos a crear una tienda en WordPress no hay mejor opción
  • Genesis Connect for WooCommerce: El plugin añade los estilos a los componentes de la tienda. Imprescindible en plantillas Genesis

Importar contenido demo

Configurar la plantilla sin contenido es muy complicado ya que no tendremos nada que colocar en la página.

Esta plantilla viene preparada con contenido demo. El contenido demo lo puedes encontrar dentro del fichero comprimido de la plantilla. Concretamente en la carpeta XML encontrarás un fichero con el nombre outfitter-pro.xml

Para importar el contenido tienes que ir al Escritorio de WordPress –> Importar –> WordPress y ejecutas el importador:

importar outfitter

Puede tardar unos minutos. Cuando termina tienes entradas, productos y páginas demo para poder configurar la plantilla.

Configuración del Menú

En el menú tenemos que configurar los siguientes elementos:

menu outfitter

  • Header Menú: Son los elementos a la derecha del carrito de la compra
  • Carrito de la compra
  • Buscador
  • Off-screen Menú

Header Menú

En el caso de la demo es el menú “Tienda”

Puedes añadir tantos elemenos como quieras, tan sólo tienes que ir a Apariencia –> Menús y añadir un menú.

En el menú que has creado tienes que marcar “header menu”

outfitter header menu

Carrito de la compra

Puedes ocultarlo o mostrarlo de la cabecera de la web. Para ello tienes que ir a Apariencia –> Personalizar –> Theme options y marcar o desmarcar la opción “Show header cart icon”

opciones cabecera header outfitter

Buscador

En las opciones anteriores tenemos que activas o desacgtivar “Show Header Search Icon”

Off-screen Menú

Es el menú que aparece en los tres puntitos. Al hacer click en ellos aparece el menú así:

menu off screen outfitter

Para configurar el menú vamos a Apariencia –> Menus –> creamos un menú nuevo y marcamos la opción “Off-screen Menu”

off screen outfitter

Página Principal – Home

La página principal se configura a través de los widgets. Concretamente las zonas:

  • Front Page 1
  • Front Page 2
  • Front Page 3

Front Page 1

En el front page 1 vemos el siguiente contenido:

outfitter front page-1

Para configurarlo creamos un widget tipo html y añadimos el siguiente contenido si queremos el resultado de la demo:

Título: Welcome to Outfitter

Contenido:

<div class="two-thirds first">
<p>Whether it’s fishing, rafting our country’s rivers, or the hiking adventure of a lifetime - we match with you with the clothes and equipment to make your trip comfortable and memorable.</p>
</div>
<div class="one-third">
<div class="welcome-button">
<a class="button" href="#front-page-2">Shop The Collection</a>
</div>
</div>

Front Page 2

Aquí vienen los productos de la página principal. Si no añadimos nada a esta zona aparecen por defecto.

front page 2 outfitter

Si queremos cambiar el número de productos destacados podemos usar el shortcode siguiente:

 

Front Page 3

En esta zona van los artículos del blog.

Para conseguir el resultado siguiente:

blog home outfitter

Tenemos que añadir a Front Page 3 el widget Genesis Featured Posts con la siguiente configuración:

widget genesis posts outfitter

Página del Blog

Para que la página del blog tenga la imagen destacada a todo lo ancho tenemos que ir al escritorio de WordPress –> Genesis –> Theme Settings –> Content Archives y marcar “Featured image” y seleccionamos “Featured-image” y centrada.

Si has completado el tutorial hasta aquí, enhorabuena, tendrás tu plantilla como en la demo 😉

Recuerda que la plantilla la puedes comprar aquí o si eres miembro premium la tienes disponible gratis en el área de miembros.

Espero que te haya servido

Saludos
Óscar

Publicado en: Ecommerce, Genesis, Outfitter Etiquetado como: Outfitter

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

Trackbacks

  1. Plantilla Outfitter: Cómo Modificar el tamaño de las imágenes en la Home | Cómo Hacer Una Página dice:
    enero 14, 2019 a las 8:14 am

    […] La plantilla Outfitter de Genesis es una plantilla genial para poder hacer una tienda con Woocommerce, si no has visto el tutorial para tener la plantilla como en la demo aquí lo tienes […]

    Responder

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