Glidex

Matériel¶

Télécharger les images

Wordpress¶

Ouvrez votre installation WordPress
Installer le thème Astra
Installer l'extension Elementor
Installer l'extension Unlimited-Elements
Créez une nouvelle page Boutique
Créer un nouvelle page Accueil
Cliquez sur “Modifier avec Elementor”

Indice

Assurez-vous de ne pas avoir d’en-tête ou pied de page prédéfini

Allez dans Paramètres de la page / Mise en page
Choisissez “Valeur par défaut”
Masquer le titre
Publier

Aller voir à quoi ressemble votre page !

Header dans le Thème Astra¶

Appuyer sur personnaliser
Dans l'en-tête : sur la 2e ligne à gauche ajouter --> Site Title & Logo
À l'intérieur, ajouter l'image Main-logo.png
Effacer le titre du site web

Bouton¶

Account¶

Icon Size 20px
Ajouter le lien vers la page : mon compte

Panier¶

Slide in Cart Width : 460px
Couleur : #FFF

En-tête¶

Arrière-plan : transparent
Hauteur : 110px
Taille de la bordure inférieur : 0

Pied de page¶

Ajouter un Widget au centre
Ajouter une image dans le Widget
L'image : Main-logo.png
À droite du pied de page, ajouter Social
Dernière ligne du pied de page, ajouter les copyrights
Couleur d'arrière-plan du pied de page : #261C2A
Taille de la bordure supérieur : 0
Ajouter le CSS suivant dans CSS Personnalisé

.ast-site-header-cart .widget_shopping_cart, .astra-cart-drawer {
    background-color: #261C2A;
    border: none;
}

.ast-site-header-cart .widget_shopping_cart .cart_list a, .woocommerce .ast-site-header-cart .widget_shopping_cart .cart_list a {
    color: white;
}

.woocommerce-js table.shop_table thead, .woocommerce-page table.shop_table thead {
    background-color: #333;
}

.entry-content[data-ast-blocks-layout] > * {
    margin-top: 100px;
}

.woocommerce-cart .cart-collaterals .cart_totals > h2, .woocommerce-cart .cart-collaterals .cross-sells > h2 {
    background-color: #333;
}

.woocommerce-message, .woocommerce-info {
    border-top-color: var(--ast-global-color-1);
    background-color: #333;
    color: #fff;
}

.woocommerce-js form .form-row input.input-text, .woocommerce-js form .form-row textarea {
    background-color: #333;
    border-color: #4f4c4c;
    color: #fff;
}

.woocommerce-js form .form-row label {
    color: #c991fc;
}

.woocommerce .select2-container .select2-selection--single, .woocommerce select, .woocommerce-page .select2-container .select2-selection--single, .woocommerce-page select {
    background-color: #333;
    border-color: #4f4c4c;
}

.select2-dropdown {
    background-color: #333;
    color: #ff47fe;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #b299b9;
}

.woocommerce .select2-container .select2-dropdown, .woocommerce .select2-container .select2-search__field, .woocommerce-page .select2-container .select2-dropdown, .woocommerce-page .select2-container .select2-search__field {
    border: 1px solid #474747;
    background-color: #333;
    color: #fff;
}

.page .entry-header {
    margin-top: 170px;
}

Elementor¶

HERO¶

Ajouter un titre
```
      Mondes virtuels
```

Ajouter un titre

      Redéfinir la réalité à travers les mondes virtuels

Ajouter un bouton

Nommer-le :

      Réservez votre VR dès aujourd'hui

Section Casque¶

Ajouter un titre
```
      Meilleur casque VR haut de gamme
```

Ajouter une image
```
      Home-2-vrhelmet-img-01.png
```

Image Rsolution : Medium Large

Woocommerce¶

Créer 4 produits simples

VirtuLens Web Cam ---> 320$
Contrôleur Tactile ---> 40$
Casque VR HoloQuest ---> 375$
Clavier de jeu 3D ---> 500$

Ajouter les images au bon produit
Ajuster Woocommerce pour Dollars canadiens
Ajouter la page de boutique

Section Avenir¶

Nommer le 1er conteneur : Colonne Gauche
Nommer le 2e conteneur : Colonne Droite

Dans le conteneur Colonne Gauche

Largeur du contenu : Pleine largeur
Largeur : 25%
Direction : Vertical
Justify-Content : Fin
Align Items : Centre
Arrière-Plan : Image
```
      home-2-shop-image-left-sie.jpg
```

Position : Center Center
Répéter : No-Repeat
Display Size : Cover

Ajouter un titre dans le conteneur Colonne Gauche
```
  Façonner l'avenir de l'expérience
```

Dans le conteneur Colonne Droite

Ajouter Woo Product Carousel

WOO Product Carousel¶

Faites en sorte que votre carousel ressemble à celui-ci :

Voici les couleurs utilisées¶

Background-color : #201924
Product Name : #C458FD
Regular Price : #FFF
Button Add to cart bacground : #9E6AB9

Section Possibilités¶

Ajouter un conteneur 2 colonnes
Nommer-le Section Possibilités
Largeur du contenu : Pleine largeur
Direction : Horizontal
Padding : 100px 120px 100px 120px

Nommer le 1er conteneur : Colonne Gauche
Nommer le 2e conteneur : Colonne Droite

Colonne de Gauche¶

Direction : Vertical

Ajouter un titre
```
      Explorer les jeux VR
```

Balise HTML : Span
Famille de police : Inter
POids : 600

Ajouter un 2e titre

      Explorer les possibilités illimitées de la Réalité Virtuelle

Famille de police : Inter
Taille : 50
POids : 900

Ajouter un éditeur de texte

Ajouter un conteneur
Nommer-le : Chiffres
Direction : Horizontal
Justify-Content : Espace entre
Ajouter 3 Widgets Titre
Famille de police : Inter
Taille : 48
Poids : 900

Couleur : #C560FF

Ajouter un conteneur
Nommer-le : Unités
Direction : Horizontal
Justify-Content : Espace entre
Ajouter 3 Widgets Titre
Balise HTML : H4
Famille de police : Inter
POids : 600

Couleur : #FFF

      Distance en Km

      Poids

      Par charge

Colonne de droite¶

Ajouter l'image
```
      stocky-slide-01.jpg
```

Section Expérience¶

Ajouter un conteneur 2 colonnes
Nommer-le Section Exprerience
Largeur du contenu : Pleine largeur
Direction : Horizontal
Padding : 100px 120px 100px 120px

Nommer le 1er conteneur : Colonne Gauche
Nommer le 2e conteneur : Colonne Droite

Colonne Gauche¶

Ajouter l'image
```
      stocky-slide-03.jpg
```

Colonne Droite¶

Direction : Vertical

Ajouter un titre
```
      Expérience en VR
```

Famille de police : Inter
POids : 600

Ajouter un 2e titre

      Transformez votre réalité grâce aux expériences de réalité virtuelle

Famille de police : Inter
Taille :37
POids : 900

Ajouter un éditeur de texte

Ajouter un conteneur
Nommer-le : Chiffres
Direction : Horizontal
Justify-Content : Espace entre

Ajouter 3 Widgets Barre de progression

      Vision 360-Degré    ---> 80%
      Suivi de mouvement  ---> 60%
      Interaction en temps réel   ---> 70%

Famille de police : Inter
Taille : 24
Poids : 700
Couleur : #9004EC

Section Plan¶

Ajouter 3 Widgets Pricing Table

Pricing Table¶

Faites en sorte que votre carousel ressemble à celui-ci :

Voici les couleurs utilisées¶

Icons¶

Rocket
User Astronaut
Crown

Titre et Prix¶

Famille de police : Inter
Taille : 60
Poids : 900

Boutique¶

Faites en sorte que votre carousel ressemble à celui-ci :

Ajouter le Widget Woo Product Grid