SARL DDLX Multimédia Place du général de Gaule Boisseron Tèl : support@ddlx.org. Agence Web. Design Prestashop personnalisé

Transcription

1 SARL DDLX Multimédia Place du général de Gaule Boisseron Tèl : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site mobile hébergement référencement naturel 1

2 Guide d utilisation du EVO6-X Thème éditable et responsive pour Prestashop 1.5 En cas de problème à l'installation de celui ci n'hésitez pas à contacter notre support technique. Ou par à : support@ddlx.org Note : Bien que l installation et l utilisation du EVO6 soit relativement simple, il est conseillé de lire attentivement le manuel afin de vous servir au mieux du module. 2

3 Partie 1) Présentations générale : SOMMAIRE : Partie 1.1 : Présentation du EVO6 : Partie 1.2 : Ce que contient le EVO6 : Partie 2) Installation : Partie2.1 Installation : Méthode 1 : Avec l installateur de thème Prestashop Partie 2.2 : Installation : Méthode 2 : Utilisez votre client FTP Annexe : Positions des modules et blocs Partie 3) Utilisation du EVO6 3.1Le module DDLX Template créator : Créer et personnalisez vos profils Cloner un profil : Personnalisez un profil Personnaliser l en-tête : le header (le bandeau du haut) de votre thème prestashop : Personnalisation de l arrière plan général du site Personnalisation des bloc latéraux personnalisation du pied de page personnalisation des produit Personnalisation du menu Personnalisation CSS 3.3 Gestion des profil (Importer exporter son thème) 3

4 Partie 1 : Présentations générale : Partie 1.1 : Présentation de l EVO6 : Le évolution 6 est un thème+modules pour prestashop 1.5.x qui a pour vocation de permettre à tous de personnaliser facilement l apparence de son site prestashop 1.5. Grave à l EVO6 en quelques clics vous allez pouvoir vous même personnaliser le look de votre boutique prestashop. Partie 1.2 : Ce que contient le EVO6 : Le EVO6-X - 1 thèmes Prestashop : EVO6X - Une série de modules qui permettent la personnalisation du thème - Le module DDLX template créator : (Module principal de personalisation) - Le module DDLX slider pure (Diaporama en page d accueil ) - Le module DDLX produit phrare en page d accueil - Le module DDLX best footer : pied de page - Le module Circonflex-studio 4

5 Partie 2 : Installation C est très simple : Le thème et les modules s installe comme n importe quel thème / ou module. Partie2.1 Installation : Méthode 1 : Avec l installateur de thème Prestashop : Rendez vous dans l administration de votre boutique en ligne prestashop : Puis allez dans la section module et activez (si ce n est déjà fait) le module d installation de thème prestashop nommé : Importer / exporter un thème 5

6 2.1.3 : Rendez vous dans la configuration du module installeur de thème prestashop : Uploadez le zip du Template et suivez les instructions à l écran. Votre thème est installé. Problème connu avec cette méthode : Selon les hébergeurs lors de la décompression du zip, les droits CHMOD de fichier du thème et module ne sont pas bons, le cas échéant le thème s affiche pas ou mal. Solution : Avec votre client FTP (ex filezila) modifiez les droit CHMOD sur les répertoire des modules et thèmes installé. (Mettez selon le cas CHMOD 755 ou 777 ) Problème connu avec cette méthode : L installeur de thème n installe qu 1 des 4 thèmes (evo6r) du zip et il se peut que certains modules ne soient pas installés nativement!! Solution : Avec votre client FTP (ex filezila) uploadez dans le répertoire /themes de votre Boutique les 3 autres thèmes disponible dans le EVO6 et dans le répertoire module les module non installé. 6

7 Partie 2.2 : Installation :: Utilisez votre client FTP : Décompressez l archive ZIP du thème : Avec votre client FTP : (Ex filezila : ttp:// ) a. Uploadez les modules dans le répertoire /modules de votre Prestashop b. Uploadez les thèmes dans le répertoire /thèmes de votre Prestashop 7

8 2.2.3 Rendez vous dans l administration de votre site et activez les modules du thème : : Section «autre module» : DDLX Créator : Produit phare sur la page d'accueil Circonflex-studio 8

9 DDLX best footer Section fonctionnalité Front office Menu horizontal 9

10 2.2.4 : MODULE A DESACTIVER (De préférence pour un meilleur visuel) Carrousel d'image (slider) pour votre page d'accueil. (Double emploi) Produits phares sur la page d'accueil (double emploi) 2.2.5) Activez votre thème : Rendez vous dans l'onglet Préférence / Thème : Votre thème apparait alors dans la liste des thèmes présents pour votre boutique : 10

11 Vous n'avez plus qu'à sélectionner et activer l'affichage de votre thème puis enregistrer 11

12 NOTE Compatibilité IE9 et versions supérieures Pour assurer la compatibilité des thèmes avec ce navigateur de l'enfer qu'est IE, il est important d'activer la concaténation des feuille de style CSS. Rendez vous dans l'onglet : "Paramètre avancé / performances" Activez le "smart cache pour ls CSS" : 12

13 IMPORTANT : Taille des images pour le thème responsive EVO6X! Si vous utilisez le thème evo6x (responsive) nous vous conseillons de redimensionner les image de vos fiche produit afin que celle-ci soit plus nette lors de l affichage sur grand ecran. 1) Allez dans l admin : onglet préférence / images Puis éditer les dimensions des images avec la valeur ci-dessous : - Large_default : 400px 400px - Home_default : 190px 190px 13

14 Si vous avez déjà des produits en boutique il vous faudra regénérer les miniature de ces type d image. Sur la même page de configuration en bas : régénérez les image home_default / large_default : Conseil : afin d éviter la perte des image faites préalablement une sauvegarde manuelle de votre répertoire /img 14

15 Annexe : Positions des modules et blocs : Pour un affichage optimal il convient de correctement positionner les différents blocs/ modules en front office. Pour cela cliquez sur le lien Module/position Vous pourrez alors éditer les positions des différent modules - Soit en utilisant le mode «live edit» (pratique mais ne fonctionne pas toujours pour tout les bloc a positionner): - Soit en modifiant les positions dans les différents points de greffe de votre boutique prestashop. 15

16 Un fois vos différents blocs installés les opérations sont terminées. Ouf, ça y est, votre thème est installé!! 16

17 Partie 3 : Utilisation du EVO6 La personnalisation de votre thème est relativement simple, Il vous suffit de configurer les différents modules du EVO6. Nous vous proposons de découvrir un par un les module et de commenter leur fonction. 17

18 3.1 Le module DDLX Créator Résumé : C est le module principal du Evo6, c est celui qui va permettre la plus par des personnalisations du thème. Les sections : Général : cette section permet de paramettrer la stucture générale du site (les colonnes) En-tête : Cette section permet de gérer l apparence de l entête de votre profil : (Logo / Bandeau) Fond d écran : Cette section permet de gérer l apparence de l arrière plan du site. Blocs : Cette section permet de gérer l apparence de vos entêtes de block latéraux Pied de page : Cette section permet de gérer l apparence de votre pied de page Produit : Cette section permet de gérer l apparence des produit phare et liste produit Menu : cette section permet de gérer l apparence du menu horizontal du thème. CSS : cette section permet d insérer votre propre code CSS Profils : Cette section permet de gérer et créer les différents profils de votre EVO6 UTILISATION : ================================================= Pour faire simple il faut : 1) Créez / Editer des profils avec l éditeur (Onglet profil) 2) Sélectionner le profil à afficher sur votre site 3) Personnaliser le profil et l apparence du thème ================================================= Plus en détail : Créer et personnalisez vos profils. Note : la section «Profil de l éditeur» vous permet de créer et éditer les profile de votre EVO6. Notre conseil : Une fois votre thème de base et profils choisi : Pour les éditer il est conseiller de créez un nouveau profil «clone» de celui que vous aurez choisie. (Vous conserverez ainsi le profil de base intact et vous travaillerez sur un nouveau profil personnalisé) Cloner un profil : 18

19 Allez dans la section «profil» du module et clonez le profil sélectionné, puis pour l éditer sélectionnez le et validez votre choix Personnalisez un profil. Pour personnaliser un profil vous devez le sélectionner via l onglet «profil» Un fois le profil sélectionné, vous pouvez le personnaliser : Personnaliser l en-tête : le header (le bandeau du haut) de votre thème prestashop : Le module évolution 6 vous permet une personnalisation simple et rapide de l en-tête de votre site. Pour acceder aux champs de personnalisation cliquez sur l onglet en-tête du module. Cette section vous permet de personnaliser le logo ainsi que l arrière plan de l entête de votre site.vous pouvez charger vos propres images.jpg et png puis jouer sur les couleurs. Astuce : pour pouvoir jouer la couleur d arrière plan il est conseillé d uploader une image PNG avec de la transparence. Chargement et positionnement du logo : Chargez votre logo depuis votre ordinateur. Ne pas afficher le logo (Généralement utilisé lorsque le logo est dans l image d arrière plan) Positionnez votre logo dans le bandeau du haut 19

20 Chargement de la bannière d arrière plan de l entête Chargez votre bannière d en-tête depuis votre ordinateur. Définissez une couleur d arrière plan pour votre entête Définissez ici la hauteur totale du bandeau d en-tête (header) Option pas d image d arrière plan pour l entête 20

21 3.2.2 Personnalisation de l arrière plan général du site La section Fond d écran permet la personnalisation complète de l arrière plan du site. Vous pouvez charger vos propres images.jpg et png puis jouer sur les couleurs. Astuce : pour pouvoir ajuster/ Jouer sur la couleur d arrière plan il est nécessaire d uploader une image PNG avec de la transparence. Chargez une image d arrière plan depuis votre ordinateur Positionnez votre image d arrière plan Réglez la répétions de l image Fond fixe ou défilant avec la page Ne pas afficher l image Choisissez la couleur du background 21

22 3.2.3 Personnalisation des blocs latéraux Cette section permet la personnalisation de vos blocs latéraux.. Uploadez votre propre image d en-tête Choix de la forme de l entête des blocks Gestion des couleurs d arrière plan et des polices de caractère 22

23 3.2.4 Personnalisation du pied de page La partie arrière plan du pied de page se gère via l onglet Pied de page du créatot Gestion de l apparence du pied de page Astuce : pour pouvoir ajuster la couleur d arrière plan il est nécessaire d uploader une image PNG avec de la transparence. Le contenue du pied de page se gère via le module DDLX best footer 23

24 3.2.5 Personnalisation des produits Personnalisation de l apparence des produits phares Personnalisation de l apparence des listes produits 24

25 3.2.6 Personnalisation du menu Position du menu (marge haute) Gestion de l apparence du menu et des sous menu 25

26 3.2.7 Onglet CSS Cette section s adresse a ceux qui ont un minimum de maitrise du CSS, elle permet d ajouter du code CSS et personnalisation ainsi n importe quelle partie de votre thème Activer / Désactiver le CSS Insérez / modifier votre code CSS 26

27 3.2.3 Gestion des profils (Importer exporter son thème) Créer / copier un nouveau thème / profils Importer un profil (exporté) depuis son pc Activer le profil en cours d utilisation Sauvegarder / exporter supprimer un profil 27

28 3.3 Module Produits phare en page d'accueil - DDLX Résumé : Ce module permet un affichage dynamique des produits phares de votre boutique en page d accueil Dans ce module vous êtes libre de choisir combien de produits vous souhaitez afficher dans la page d accueil, il vous suffit de rentrer le nombre désiré et de cliquer sur «Sauvegarder» Vous pouvez à présent apprécier votre module sur votre page d accueil. N hésitez pas à positionner le module comme vous le souhaitez depuis le backoffice de prestashop dans module puis positions. Vous trouverez le module au niveau du point de greffe (homepage) 28

29 3.3 Module DDLX Best Footer Compatible Prestashop 1.5 Description du module : Le module DDLX best footer vous permet de creer des bloc au contenu divers et varié qui s'afficherons dans votre pied de page Texte / Lien / menu Images Vidéos / média...etc le module offre une très grande liberté de personalisation de votre pied de page Prestashop, orienté markéting / présentation le module vous permet de soigner l apparence de votre site et mettre en avant ce que vous souhaitez dans votre pied de page : Produit / Annonce publicitaire / Bannière / Partenaire / Informations/ vidéo etc. Exemple d utilisation : - Mettre en avant vos partenaire, labels ou certifications affin d assurer vos clients. - Diffuser une vidéo d information sur la qualité de vos prestation et produit. - Annoncer une vente flashs ou une promo spéciale sur un ou plieur produit. - Annoncer un évènement - Inssérer un menu de navigation etc - avec un peu d imagination on peut s en servir pour beaucoup de chose. Utilisation du module - Rendez vous dans l administration de votre site Section module / «autre module» : Pour configurer le module cliquez sur le lien «configurer» 29

30 La configuration du module est assez simple. 30

31 3.6 Module Slider pure Résumé : Le module est un classique diaporama d image en page d accueil. L administration de celui-ci vous permet de charger vos propres images, liens et texte a paraitre sur le slider. Dans l interface de configuration du module. Pour changer les images rien de plus simple - Charge vos fichier image - Ajouter le lien que vous voulez (mettez # si ne souhaitez pas de lien) - Choisissez ensuite la cible (si vous souhaitez que le lien s ouvre dans un nouvel onglet ou dans le même page) - Une fois vos modification faites, cliquez sur «Enregistrer» 31

32 3.7 Module Circonflex-studio - Scrolling page plugin jquery.ui.totop Résumé : Ce module fourni à titre gratuit permet, passé le premier tiers de la hauteur totale, d afficher en bas à droite de l écran un bouton et permet d effectuer un scroll automatique pour Remonter. 32