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

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Outfitter pro

Outfitter Pro – Añadir categorías de producto en la home con widget de imagen

27 diciembre, 2017 by apascual001

Después de haber visto como añadir las categorías de la tienda a la portada de nuestra web con shortcodes, vamos a hacerlo de nuevo con el widget de Imagen.
Para ello he preparado unas imágenes que nos sugieren el contenido de cada categoría.
También enlazaremos cada imagen con los artículos de la categoría correspondiente.

Os dejo una imagen de como nos va a quedar y las explicaciones detalladas en el vídeo.

Outfitter con categorías de nuestra tienda en portada
Outfitter con categorías de nuestra tienda en portada

Archivado en:Outfitter pro, Pequeños cambios

Outfitter Pro – Añadir categorías de producto en la home con shortcodes

20 diciembre, 2017 by apascual001

Hoy vamos a ver como insertar las categorías de nuestros porductos en la home del tema Outfitter Pro de StudioPress.

Vamos a añadir un nuevo widget en la Front Page 1 con un shortcode de WooCommerce que nos muestre las categorías.

Tema Outfitter con categorías de producto en la home
Tema Outfitter con categorías de producto en la home

Empecemos; el primer paso es ir a Apariencia/Personalizar/Widgets/Front Page 1 y añadir un widget de html. Añadiremos un shortcode de WooCommerce que nos muestra las categorías de la tienda:

[product_categories number="4"]

En este caso hemos limitado el número de categorías a 4.

Una vez añadido este widget las categorías ya se mostrarán el la home:

Tema Outfitter con shortcode WooCommerce en Front Page 1
Tema Outfitter con shortcode WooCommerce en Front Page 1

Luego vamos a tener que ajustar los estilos de la plantilla para que estas 4 categorías se muestren en una sola fila ocupando cada una de ellas el 25% del ancho.

También ajustaremos los mediaqueries para mantener una buena visualización en todos los dispositivos.

Os dejo el CSS para aplicar todos estos cambios:

.front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(6n+1), .front-page-1	.woocommerce ul.products li.product.masonry-brick {
    width: 25%;
}

@media only screen and (max-width: 1023px) {
	.js .front-page-1	 .masonry-brick:nth-of-type(3n+1), .js .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(3n+1), .woocommerce.full-width-content div.product div.images.woocommerce-product-gallery{
    width: 25%;
}
	
}
@media only screen and (max-width: 600px) {
	.js .front-page-1	 .masonry-brick:nth-of-type(3n+1), .js .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(3n+1), .woocommerce.full-width-content div.product div.images.woocommerce-product-gallery, .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(6n+1), .front-page-1	.woocommerce ul.products li.product.masonry-brick{
    width: 100%;
}
	
}

En el vídeo os lo explico con todo detalle:

Finalmente he añadido un poco más de CSS para que los títulos de las categorías se muestren igual que los títulos de los productos:

/*título categorias*/

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	background: #ffffff;
	color: #000;
	left: 0;
	padding: 10px 30px;
	margin-right: 70px;
	position: absolute;
	text-align: left;
	text-decoration: none;
	top: 20px;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:before {
	background-color: #548200;
	bottom: -2px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	-webkit-transform: scaleX(0);
	transform:         scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition:         all 0.3s ease-in-out 0s;
	visibility: hidden;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:hover:before {
	-webkit-transform: scaleX(1);
	transform:         scaleX(1);
	visibility: visible;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition:         all 0.3s ease-in-out 0s;
	visibility: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	font-size: 16px;
	font-size: 1.6rem;
}

.woocommerce ul.products li.product:focus .woocommerce-loop-category__title,
.woocommerce ul.products li.product.focused .woocommerce-loop-category__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-category__title{
	opacity: 1;
	visibility: visible;
}

No olvidéis guardar los cambios!

Archivado en:Outfitter pro, Pequeños cambios, WooCommerce

¿Cómo hacer que el encabezado sea fijo en Outfitter Pro?

7 diciembre, 2017 by apascual001

Para hacer que el header o encabezado del tema Outfitter Pro de Genesis se mantenga fijo al hacer scroll, tendremos que hacer los siguientes cambios CSS.

Cambiar la position de relative a fixed del header .

Dar un ancho del 90% para que cuadre la caja del header con la del site-container.

También vemos que al hacer scroll se superponen los artículos al encabezado.  Por ello tendremos que dar un z-index al header inferior.

Por último quitamos el margen que tiene el site-container en la parte superior para fijar el encabezado arriba de todo.

En resumen, el codigo CSS que tenéis que añadir al tema es:

.site-header { 
    position: fixed;
    width: 90%;
    z-index: 1;
}

.site-container {
    padding: 0 20px 20px; 
}

También os dejo las instrucciones sobre como añadir CSS a tu plantilla.

 

 

Archivado en:Outfitter pro, Pequeños cambios, Tips

Outfitter Pro – 5. Widgets – Footer, Offscreen, Primary Sidebar y After Entry

16 noviembre, 2017 by apascual001

Vamos a ver la configuración de la widget área del pié de página, la offscreen widget área, la del sidebar y la que hay después de cada entrada o post.

Widget área del pié de página

Esta área muestra los widgets que coloquemos en ella con una disposición flexible según el esquema que ya vimos para las widget áreas de la home:

Disposición flexible de los widgets
Disposición flexible de los widgets

En la demo han colocado un único widget de texto con enlaces a las redes sociales.
El código es éste:

You can follow us on <a href="http://www.twitter.com" target="_blank">Twitter</a>, <a href="http://www.facebook.com" target="_blank">Facebook</a>, & <a href="http://www.instagram.com" target="_blank">Instagram</a> <br class="mobile-hide" />or say hello on our <a href="/outfitter/contact/">Contact page</a>.

Offscreen Widget área o área superpuesta a toda la página

En esta área ya vimos que hay la posibilidad de colocar uno de los menús pero también puede usarse como widget área. Podemos añadirle widgets igual que cualquier otra widget área. En la demo la utilizan para colocar el menú principal.
Esta área se hace visible al hacer clic sobre los tres puntos que aparecen a la izquierda del menú y ocupa todo el espacio visible:

Outfitter Offscreen widget área
Outfitter Offscreen widget área
Offscreen menu
Offscreen menu

Widget área del sidebar o lateral

En esta àrea lateral o Primary Sidebar Widget Area, en la demo hay dos widgets.
El primero es el de suscripción por email Genesis eNews Extended. En la demo en el título han escrito «Get Outfitted» y en el botón «Subscribe». Podéis substituir estos textos en el mismo widget. La parte de la «Form Action» tendréis que rellenarla con los datos de vuestro servicio de email marketing.

Outfitter eNews Extended Widget
Outfitter eNews Extended Widget

El segundo widget es el de los últimos posts o «Recent posts» de WordPress. En este caso no hay título en el widget y se muestran las últimas 5 entradas.

Widget área después de las entradas

Por último este tema también dispone de una widget área despues de cada entrada «After Entry», aunque en la demo no se utiliza. Podéis añadir widgets de la misma forma que culaquier otra área.

Guardad cambios y a publicar!!

Este es el vídeo con las explicaciones completas:

Archivado en:Comolademo, Outfitter pro

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

Outfitter Pro – 3. Logo, imagen de fondo y menús.

2 noviembre, 2017 by apascual001

En este capítulo vamos a configurar el lgotipo, la imagen de fondo y los distintos menús.
El logo o imagen del encabezado.
Por defecto se va a mostrar el título del sitio en nuestro encabezado de página. Si queremos mostrar una imagen tendremos que ir a Apariencia/Imagen de cabecera:

Outfitter - Colocar logo en la cabecera
Outfitter – Colocar logo en la cabecera

Como véis recomiendan subir imágenes de 400×80 píxeles aunque si subís otro tamaño luego podéis recortarlo. La medida del logo que se va a mostrar es de 200×40 píxeles pero la subimos a 400×80 píxeles para que pueda verse bien en las pantallas de retina.

Imagen de fondo
La plantilla Outfitter tiene un color gris de fondo por detrás del contenido y que se ve alrededor de toda la página. Este tema tiene la opción de substituir este fondo por una imagen.
Para hacer este cambio tendremos que ir a Apariencia/Personalizar/Imagen de fondo

Outfitter Imagen de fondo - seleccionar imagen
Outfitter Imagen de fondo – seleccionar imagen

Una vez seleccionada la imagen veremos que aparecen opciones adicionales. Según si escogemos la configuración predeterminada, la de rellenar pantalla, la de ajustar a la pantalla, la de repetir o la personalizada nos apareceran distintos ajustes para posicionar repetir y ajustar la imagen.

outfitter ajustes configuración imagen de fondo
outfitter ajustes configuración imagen de fondo

Pasamos ahora a configurar los menús de Outfitter pro.
Estea plantilla tiene 3 ubicaciones de menú:

  1. El menú del encabezado
  2. Menú superpuesto a toda la pantalla (se accede por los tres puntos en la parte superior derecha)
  3. Menú en el pie de página
Outfitter ajustes - Menús
Outfitter ajustes – Menús

En la demo en la ubicación «header menu» está el menú secundario que es el de la tienda en si.
En la ubicación Off-screen o menú superpuesto, han colocado el menú primario o principal.
En el footer no hay ningún menú asignado

Outfitter - ubicaciones de menús
Outfitter – ubicaciones de menús

En dispositivos móviles tanto el menú del encabezado como el off-screen menú se muestran con el icomo del bocadillo o hambuguesa:

Outfitter menú en dispositivos móviles
Outfitter menú en dispositivos móviles

No olvidéis siempre guardar y publicar los cambios!

Archivado en:Comolademo, Outfitter pro

  • Ir a la página 1
  • Ir a la página 2
  • Ir a la página siguiente »

© 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