Sobre

Obrigado por importar o Prime 🙂

O Prime é construído principalmente usando os incríveis recursos integrados do WooCommerce da GP com alguns CSS para fornecer estilos personalizados.

Os plug-ins usados ​​incluem WooCommerce, Pesquisa Ajax para WooCommerce, Slider Soliloquye MailChimp.

cabeçalho

O cabeçalho com a barra de pesquisa Ajax é um dos principais recursos do Prime.

Como de costume, o título do site ou logotipo pode ser adicionado ou modificado no Identidade do Site seção no personalizador.

A barra de pesquisa Ajax é adicionada usando Elemento Hooks intitulado Formulário de pesquisa de cabeçalho.

O texto GP | Gutenberg | Woo é adicionado em Widget de cabeçalho.

Aqui estão os CSS usados ​​na seção de cabeçalho:

/* 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;
}

E aqui estão alguns CSS adicionados para modificar o estilo da barra de pesquisa Ajax padrão:

/* 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%;
}

Navegação

A seção de navegação deve ser bastante simples. O localização de navegação pode ser ajustado no personalizador.

A posição dos itens do menu Contato e Login | O registro é posicionado usando o embutido menu-item-float-right classe.

Aqui estão alguns CSS adicionados ao mini carrinho:

/* 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;
}

A navegação deslizante é usada para navegação móvel e pode ser alterada no Fora da tela seção no personalizador.

O CSS abaixo fornece alguns estilos para a navegação deslizante:

/* 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;
	}
}

Controle deslizante inicial

O controle deslizante da página inicial é construído com Slider Soliloquy e inserido usando Elemento do cabeçalho intitulado Home Slider.

Larguras do contêiner

Três larguras de contêineres diferentes são usadas no Prime.

A página inicial está usando 1500px, que pode ser ajustado usando o largura do contêiner configuração no personalizador.

Os arquivos de categoria de produto estão usando 1100 px e os produtos individuais e as páginas estáticas estão usando 900 px - ambos os quais são aplicados usando Elemento de Layout.

Blocos de arquivo de produto

Os blocos de arquivo do produto são construídos com Códigos de acesso WooCommerce com os seguintes 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 Gerais

Abaixo estão os CSS usados ​​para estilizar botões globais e adicionar um contorno aos cantos do contêiner:

/* 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;
}

Os botões WooCommerce são um pouco complicados de lidar e exigem o CSS abaixo:

/* 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;
}

Formulários de contacto

Os dois formulários na página de contato são construídos com MailChimp e pode ser modificado dentro do próprio plugin.