À Propos

Merci d'avoir importé Prime 🙂

Prime est principalement construit en utilisant les superbes fonctionnalités WooCommerce intégrées de GP avec du CSS pour fournir des styles personnalisés.

Les plugins utilisés incluent WooCommerce, Recherche Ajax pour WooCommerce, Curseur Soliloquyet MailChimp.

En-tête

L'en-tête avec la barre de recherche Ajax est l'une des principales fonctionnalités de Prime.

Comme d'habitude, le titre ou le logo du site peut être ajouté ou modifié dans le Identité du site section dans le personnalisateur.

La barre de recherche Ajax est ajoutée en utilisant Élément de crochets intitulé Formulaire de recherche d'en-tête.

Le texte GP | Gutenberg | Woo est ajouté dans Widget d'en-tête.

Voici le CSS utilisé dans la section d'en-tête:

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

Et voici quelques CSS ajoutés pour modifier le style de barre de recherche Ajax par défaut:

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

La section de navigation devrait être assez simple. le emplacement de navigation peut être ajusté dans le personnalisateur.

La position des éléments de menu Contact et Login | Le registre est positionné à l'aide du menu-item-float-droite classe.

Voici quelques CSS ajoutés pour le mini panier:

/* 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 navigation coulissante est utilisée pour la navigation mobile et peut être modifiée dans le Hors-toile section dans le personnalisateur.

Le CSS ci-dessous fournit quelques styles pour la navigation coulissante:

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

Accueil Curseur

Le curseur de la page d'accueil est construit avec Curseur Soliloquy et inséré en utilisant Élément d'en-tête intitulé Home Slider.

Largeurs de conteneurs

Trois largeurs de conteneur différentes sont utilisées dans Prime.

La page d'accueil utilise 1500px qui peut être ajustée à l'aide du largeur du conteneur réglage dans le personnalisateur.

Les archives de catégories de produits utilisent 1100px et les produits individuels et les pages statiques utilisent 900px - qui sont tous deux appliqués à l'aide de Élément de mise en page.

Blocs d'archives de produits

Les blocs d'archive produit sont construits avec WooCommerce Codes abrégés avec les styles CSS suivants:

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

Styles généraux

Vous trouverez ci-dessous le CSS utilisé pour styliser les boutons globaux et ajouter un arrondi aux coins du conteneur:

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

Les boutons WooCommerce sont un peu difficiles à gérer et nécessitent le CSS ci-dessous:

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

Formulaires de contact

Les deux formulaires de la page Contact sont créés avec MailChimp et peut être modifié dans le plugin lui-même.