Chi siamo

Grazie per aver importato Prime 🙂

Prime è costruito principalmente utilizzando le fantastiche funzionalità WooCommerce integrate di GP con alcuni CSS per fornire stili personalizzati.

I plugin utilizzati includono WooCommerce, Ricerca Ajax per WooCommerce, Slider Soliloquioe MailChimp.

testata

L'intestazione con la barra di ricerca Ajax è una delle caratteristiche principali di Prime.

Come al solito, il titolo o il logo del sito possono essere aggiunti o modificati nel file Identità del sito sezione nel customizer.

La barra di ricerca Ajax viene aggiunta utilizzando Elemento Ganci intitolato Modulo di ricerca intestazione.

Il testo GP | Gutenberg | Woo è aggiunto Widget di intestazione.

Ecco i CSS utilizzati nella sezione dell'intestazione:

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

Ed ecco alcuni CSS aggiunti per modificare lo stile predefinito della barra di ricerca 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%;
}

Navigazione

La sezione di navigazione dovrebbe essere abbastanza semplice. Il posizione di navigazione può essere regolato nel customizer.

La posizione delle voci di menu Contatto e Login | Il registro è posizionato utilizzando il built-in menu-item-flottante-destra classe.

Ecco alcuni CSS aggiunti per il mini carrello:

/* 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 navigazione a scorrimento viene utilizzata per la navigazione mobile e può essere modificata in Fuori tela sezione nel customizer.

Il CSS di seguito fornisce alcuni stili per la navigazione a scorrimento:

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

Home Slider Home

Lo slider della home page è costruito con Slider Soliloquio e inserito usando Elemento di intestazione intitolato Home Slider.

Larghezze del contenitore

In Prime vengono utilizzate tre diverse larghezze del contenitore.

La home page utilizza 1500px che può essere regolata utilizzando il larghezza del contenitore impostazione nel customizer.

Gli archivi delle categorie di prodotti utilizzano 1100 px e i singoli prodotti e le pagine statiche utilizzano 900 px, entrambi applicati utilizzando Elemento layout.

Blocchi archivio prodotti

I blocchi di archivio del prodotto sono costruiti con Codici brevi WooCommerce con i seguenti stili 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);
}

Stili generali

Di seguito sono riportati i CSS utilizzati per modellare i pulsanti globali e aggiungere un arrotondamento agli angoli del contenitore:

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

I pulsanti di WooCommerce sono un po 'complicati da gestire e richiedono il CSS di seguito:

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

Moduli di contatto

I due moduli nella pagina Contatti sono costruiti con MailChimp e può essere modificato all'interno del plugin stesso.