Quienes somos

Gracias por importar Prime 🙂

Prime se construye principalmente utilizando las increíbles funciones integradas de WooCommerce de GP con algo de CSS para proporcionar estilos personalizados.

Los complementos utilizados incluyen WooCommerce, Búsqueda Ajax para WooCommerce, Soliloquy Slidery MailChimp.

Encabezamiento

El encabezado con la barra de búsqueda Ajax es una de las principales características de Prime.

Como de costumbre, el título o el logotipo del sitio se pueden agregar o modificar en el Identidad del sitio sección en el personalizador.

La barra de búsqueda Ajax se agrega usando Elemento de ganchos titulado Formulario de búsqueda de encabezado.

El texto GP | Gutenberg | Woo se agrega en Widget de encabezado.

Aquí están los CSS utilizados en la sección del encabezado:

/* Custom header */
.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}

.woo-search {
    margin-left: 30px;
    margin-right: 30px;
    -webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
}

.header-widget {
	order: 10;
	line-height: 1em;
	font-size: 20px;
}

.header-widget p {
	margin: 0;
}

Y aquí se agregan algunos CSS para modificar el estilo predeterminado de la barra de búsqueda Ajax:

/* AJAX search bar in header styles */
.dgwt-wcas-has-img .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product {
    padding: 0;
}

.dgwt-wcas-ico-magnifier {
    height: 50%;
}

Navegación

La sección de navegación debería ser bastante sencilla. los ubicación de navegación se puede ajustar en el personalizador.

La posición de los elementos del menú Contacto e inicio de sesión | El registro se coloca utilizando el menú-elemento-flotante-derecha clase.

Aquí hay algunos CSS agregados para el mini carrito:

/* Woo mini cart styles */
#wc-mini-cart .total {
    background: rgba(255,255,255,0.05)
}

#wc-mini-cart .button {
    border-radius: 3px;
}

#wc-mini-cart .woocommerce-mini-cart-item a {
    font-weight: normal;
}

La navegación deslizable se utiliza para la navegación móvil y se puede cambiar en la Fuera del lienzo sección en el personalizador.

El CSS a continuación proporciona algunos estilos para la navegación deslizable:

/* Off-canvas menu styles */
.slideout-navigation.main-navigation .main-nav ul li a, .slideout-navigation button.slideout-exit {
    text-align: right;
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
    margin-bottom: 0;
	}
}

@media (max-width: 500px) {
	.inside-header {
		flex-direction: column;
	}
	
	#masthead .site-branding,
	.woo-search {
		margin-bottom: 20px;
	}
}

Inicio deslizante

El control deslizante de la página de inicio está construido con Soliloquy Slider e insertado usando Elemento de encabezado titulado Home Slider.

Anchos de contenedor

En Prime se utilizan tres anchos de contenedor diferentes.

La página de inicio usa 1500px que se puede ajustar usando el ancho del contenedor en el personalizador.

Los archivos de categorías de productos usan 1100px y los productos individuales y las páginas estáticas usan 900px, los cuales se aplican usando Elemento de diseño.

Bloques de archivo de productos

Los bloques de archivo de productos se construyen con Códigos cortos de WooCommerce con los siguientes estilos CSS:

/* Product archives and product blocks styles */
.woocommerce ul.products li.product,
.wp-block-columns.contact .wp-block-column {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
		border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 3px;
		box-sizing: border-box;
}

.woocommerce ul.products li.product:hover, 
.wp-block-columns.contact .wp-block-column:hover {
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link > .price {
    margin-bottom: 10px;
}

button:not(.menu-toggle), html input[type="button"], input[type="reset"], input[type="submit"], a.button, 
a.button:visited, 
.woocommerce a.button,
.woocommerce a.button:visited,
.woocommerce a.button:hover,
.woocommerce button.button.single_add_to_cart_button,
.woocommerce button.button.single_add_to_cart_button:visited,
a.wp-block-button__link:not(.has-background) {
    border-radius: 3px;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.7),transparent);
}

Estilos generales

A continuación se muestra el CSS que se usa para diseñar botones globales y agregar un redondeo a las esquinas del contenedor:

/* General styles */
.separate-containers .inside-article {
    border-radius: 3px;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    border-radius: 3px;
}

input[type="submit"] {
    border-color: inherit;
}

Los botones de WooCommerce son un poco difíciles de manejar y requieren el CSS a continuación:

/* Woo buttons */
.woocommerce button[type="submit"]:not(.single_add_to_cart_button):not(.dgwt-wcas-search-submit):not(#place_order),
.woocommerce a.button:not(.wc-forward) {
    border-width: 1px;
    border-style: solid;
    border-color: inherit !important;
    border-radius: 3px;
}

.woocommerce button[type="submit"]:not(.single_add_to_cart_button):not(.dgwt-wcas-search-submit):not(#place_order):hover,
.woocommerce a.button:not(.wc-forward):hover {
    border-color: transparent !important;
}

.woocommerce a.checkout-button.button,
.woocommerce button[type="submit"]#place_order {
    color: #000000 !important;
    border: 0 !important;
    border-radius: 3px;
    background: -webkit-linear-gradient(top,#f7dfa5,#f0c14b);
    background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
}

.woocommerce a.checkout-button.button:hover,
.woocommerce button[type="submit"]#place_order:hover {
    background: -webkit-linear-gradient(top,#f7dfa5,#efaf0e);
    background: linear-gradient(to bottom,#f7dfa5,#efaf0e);
}

.woocommerce button[type="submit"]#place_order {
    margin-top: 1.5em;
}

.woocommerce-Message .button {
    border: 0 !important;
}

Formas de Contacto

Los dos formularios de la página de contacto se crean con MailChimp y se puede modificar dentro del propio complemento.