Over - GoViral Prime

Bedankt voor het importeren van Prime

Prime is voornamelijk gebouwd met behulp van de geweldige ingebouwde WooCommerce-functies van GP met wat CSS om aangepaste stijlen te bieden.

De gebruikte plug-ins omvatten: WooCommerce, Ajax Zoeken naar WooCommerce, Soliloquy Slider en MailChimp.

Voorvoegsel

De header met de Ajax-zoekbalk is een van de belangrijkste kenmerken van Prime.

Zoals gebruikelijk kan de sitetitel of het logo worden toegevoegd of gewijzigd in de in Site-identiteit sectie in de aanpasser.

De Ajax-zoekbalk wordt toegevoegd met Haken Element met de titel Header Search Form.

De tekst GP | Gutenberg | Woo is toegevoegd in Header-widget.

Dit zijn de CSS die in het kopgedeelte worden gebruikt:

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

En hier zijn enkele CSS toegevoegd om de standaard Ajax-zoekbalkstijl te wijzigen:

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

Navigatie

Het navigatiegedeelte moet vrij eenvoudig zijn. De navigatie locatie kan worden aangepast in de customizer.

De positie van menu-items Contact en Login | Register wordt gepositioneerd met behulp van de ingebouwde menu-item-float-rechts klasse.

Hier zijn wat CSS toegevoegd voor de minikar:

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

Uitschuifnavigatie wordt gebruikt voor mobiele navigatie en kan worden gewijzigd in de Off-Canvas sectie in de aanpasser.

De onderstaande CSS biedt enkele stijlen voor de uitschuifnavigatie:

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

De schuifregelaar voor de startpagina is gemaakt met: Soliloquy Slider en ingevoegd met behulp van Koptekstelement getiteld Home Slider.

Containerbreedtes

In Prime worden drie verschillende containerbreedtes gebruikt.

De startpagina gebruikt 1500px die kan worden aangepast met de containerbreedte: instelling in de aanpasser.

De productcategoriearchieven gebruiken 1100px en de afzonderlijke producten en statische pagina's gebruiken 900px - die beide worden toegepast met Lay-outelement.

Productarchiefblokken

De productarchiefblokken zijn gebouwd met: WooCommerce Shortcodes met de volgende CSS-stijlen:

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

Algemene stijlen

Hieronder staan de CSS die worden gebruikt om globale knoppen op te maken en een ronde toe te voegen aan de hoeken van de container:

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

De WooCommerce-knoppen zijn een beetje lastig om mee om te gaan en vereisen de onderstaande CSS:

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

Contact Formulieren

De twee formulieren op de Contact-pagina zijn gebouwd met MailChimp en kan binnen de plug-in zelf worden gewijzigd.