• Ir a navegación principal
  • Ir al contenido principal

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Outfitter Pro – 4. Widgets – Front page, home o portada

13 noviembre, 2017 by apascual001

Para configurar los widgets de la home o página de portada como en la demo iremos a Apariencia/Personalizar/Portada estática y nos aseguraremos que tenemos marcada la opción «Tus últimas entradas»

Front Page 1 Widget Area

Luego volveremos a Apariencia/Personalizar/Front Page 1. Esta widget área és la que se encuentra por debajo de la cabecera:

Outfitter - Front page 1
Outfitter – Front page 1

En esta widget área hay un plugin de texto con el título «Welcome to Outfitter» y en el contenido tiene el código para crear dos columnas. En la primera hay un texto y en la segunda columna un botón que enlaza con el área Front Page 2:

<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 Widget Area

En esta widget área, si WooCommerce no está activado, se mostrará por defecto una lista de los últimos posts. Si WooCommerce está activo y además tenéis productos publicados, se mostrarán los 9 últimos productos como en la demo sin necesidad de colocar ningún widget.
Para personalizar los productos que se muestran proponen usar los shortcodes disponibles en WooCommerce en un widget de html.

Un ejemplo seria mostrar los productos que nosotros escojamos como destacados; en este caso el shortcode a usar seria:
[featured_products]
que nos mostraría los productos destacados en nuestra tienda.
La forma más sencilla para marcar un producto como destacado es ir al listado de productos y marcar la estrella que aparece en la parte derecha de cada uno de los productos. En esta imagen están marcados como destacados los dos primeros productos:

WooCommerce marcar productos destacados
WooCommerce marcar productos destacados

Otro ajuste a configurar son las imágenes que se muestran cuando pasamos el cursor por encima de los productos. Se trata de otras vistas de los productos y que podemos subirlas desde la ficha de cada producto. Para ello editaremos el artículo escogido y subiremos la imagen del producto como imagen que se va a mostrar de entrada. Para la segunda vista del producto que se muestra al pasar por encima subiremos una segunda imagen a la galería de imágenes del producto:

Outfitter - Imagen de producto e imagen on hover
Outfitter – Imagen de producto e imagen on hover

Front Page 3 Widget Area

Esta widget área, al igual que la Front Page 1, muestran los widgets en distinta configuración según el número de ellos que hayamos colocado en el área:

Outfitter - Flexible layout en widget áreas Front Page 1 y 3
Outfitter – Flexible layout en widget áreas Front Page 1 y 3

En la demo de la plantilla hay un widget de posts destacados : Genesis Featured Posts mostrando los últimos 6 posts publicados. Este widget lo configuraremos para que se muestre el título, la imagen destacada y el extracto de cada post:

Outfitter - Widget de posts destacados en Front page 3 widget área
Outfitter – Widget de posts destacados en Front page 3 widget área

Y como siempre, guardar los cambios y publicar!

Aquí os dejo el vídeo para que lo veáis en directo:

Archivado en:Comolademo, Outfitter pro

© 2022 · Aviso legal · Política de privacidad

Esta web solo instalará cookies analíticas y de publicidad si lo aceptas. Puedes informarte más sobre qué cookies estamos utilizando en los ajustes Ajustes Aceptar Rechazar Más información
Política de cookies

Resumen de privacidad

Esta web solo instalará cookies analíticas y de publicidad comportamiento si usted lo acepta. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puede encontrar más información en nuestra política de cookies
Cookies estrictamente necesarias
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analíticas
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares
GUARDAR Y ACEPTAR