Über Uns

Vielen Dank für den Import von Prime 🙂

Prime basiert hauptsächlich auf den fantastischen integrierten WooCommerce-Funktionen von GP mit einigen CSS-Funktionen, um benutzerdefinierte Stile bereitzustellen.

Die verwendeten Plugins umfassen WooCommerce, Ajax Suche nach WooCommerce, Soliloqui Sliderund MailChimp.

Kopfzeile

Der Header mit der Ajax-Suchleiste ist eines der Hauptmerkmale von Prime.

Wie üblich kann der Site-Titel oder das Logo in der hinzugefügt oder geändert werden Site-Identität Abschnitt im Customizer.

Die Ajax-Suchleiste wird mit hinzugefügt Hakenelement mit dem Titel Header Search Form.

Der Text GP | Gutenberg | Woo wird hinzugefügt Header-Widget.

Hier ist das im Header-Bereich verwendete CSS:

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

Und hier sind einige CSS hinzugefügt, um den Standardstil der Ajax-Suchleiste zu ändern:

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

Navigation

Der Navigationsbereich sollte recht einfach sein. Das Navigationsort kann im Customizer angepasst werden.

Die Position der Menüpunkte Kontakt und Login | Register wird mit dem eingebauten positioniert Menüpunkt-Float-Rechts Klasse.

Hier sind einige CSS für den Mini-Warenkorb hinzugefügt:

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

Die Slideout-Navigation wird für die mobile Navigation verwendet und kann in der geändert werden Off-Canvas Abschnitt im Customizer.

Das folgende CSS bietet einige Stile für die Slideout-Navigation:

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

Startseite Slider

Der Homepage-Schieberegler wird mit erstellt Soliloqui Slider und eingefügt mit Header-Element betitelt Home Slider.

Behälterbreiten

In Prime werden drei verschiedene Behälterbreiten verwendet.

Die Homepage verwendet 1500px, die mit dem angepasst werden kann Behälterbreite Einstellung im Customizer.

Die Archive der Produktkategorien verwenden 1100px und die einzelnen Produkte und statischen Seiten verwenden 900px - beide werden mit angewendet Layoutelement.

Produktarchivblöcke

Die Produktarchivblöcke werden mit erstellt WooCommerce Shortcodes mit den folgenden CSS-Stilen:

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

Allgemeine Stile

Im Folgenden finden Sie das CSS, mit dem globale Schaltflächen formatiert und die Containerecken abgerundet werden:

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

Die WooCommerce-Schaltflächen sind etwas schwierig zu handhaben und erfordern das folgende 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;
}

Kontaktformulare

Die beiden Formulare auf der Kontaktseite werden mit erstellt MailChimp und kann innerhalb des Plugins selbst geändert werden.