SARL DDLX Multimédia Place du général de Gaule … · site de présentation site mobile ... 3.1.2.2 Personnalisation de l’arrière plan général du site 3.1.2.3 Personnalisation

DDLX Multimedia 2007-2012 SARL au capital de 6000 EUR 34160 Boisseron Siret : 52270913800013 APE :6201Z - RCS : Montpellier

1

SARL DDLX MultimédiaPlace du général de Gaule34160 BoisseronTèl :09 7219 85 01Email : [email protected]

Agence Web

Design Prestashop personnalisé

création de boutique en ligne

site de présentation

site mobile

hébergement

référencement naturel


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.

http://www.support.ddlx.org

Ou par email à : [email protected]

Note : Bien que l’installation et l’utilisation du EVO6 soit relativement simple, il est conseillé delire attentivement le manuel afin de vous servir au mieux du module.


3

SOMMAIRE :

Partie 1) Présentations générale :

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 PrestashopPartie 2.2 : Installation : Méthode 2 : Utilisez votre client FTPAnnexe : Positions des modules et blocs

Partie 3) Utilisation du EVO6

3.1Le module DDLX Template créator :3.1.1 Créer et personnalisez vos profils.3.1.1.2 Cloner un profil :

3.1.2 Personnalisez un profil.3.1.2.1 Personnaliser l’en-tête : le header (le bandeau du haut) de votre thèmeprestashop :3.1.2.2 Personnalisation de l’arrière plan général du site3.1.2.3 Personnalisation des bloc latéraux3.1 .2.4 personnalisation du pied de page3.1.2.5 personnalisation des produit3.1.2.6 Personnalisation du menu3.1.2.7 Personnalisation CSS

3.3 Gestion des profil (Importer exporter son thème)


4

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 enquelques clics vous allez pouvoir vous même personnaliser le look de votre boutiqueprestashop.

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

Partie 1 : Présentations générale :


5

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

2.1.1 : Rendez vous dans l’administration de votre boutique en ligne prestashop 1.5

2.1.2 : Puis allez dans la section module et activez (si ce n’est déjà fait) le module d’installationde thème prestashop nommé : Importer / exporter un thème

Partie 2 : Installation


6

2.1.3 : Rendez vous dans la configuration du module installeur de thème prestashop.

2.2.4 : 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, lesdroits CHMOD de fichier du thème et module ne sont pas bons, le cas échéant le thème s’affiche pas oumal.

Solution : Avec votre client FTP (ex filezila) modifiez les droit CHMOD sur les répertoire des moduleset 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) duzip 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 Boutiqueles 3 autres thèmes disponible dans le EVO6 et dans le répertoire module les module non installé.


7

Partie 2.2 : Installation :: Utilisez votre client FTP

2.2.1 : Décompressez l’archive ZIP du thème

2.2.2 : Avec votre client FTP :(Ex filezila : ttp://www.clubic.com/telecharger-fiche11141-filezilla.html )

a. Uploadez les modules dans le répertoire /modules de votre Prestashopb. Uploadez les thèmes dans le répertoire /thèmes de votre Prestashop


8

2.2.3 Rendez vous dans l’administration de votre site et activez les modules du thème :

2.2.3.1 : Section « autre module » :

DDLX Créator :

Produit phare sur la page d'accueil

Circonflex-studio


9

DDLX best footer

2.2.3.2 Section fonctionnalité Front office

Menu horizontal


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 :


11

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


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 importantd'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" :


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 devos 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


14

Si vous avez déjà des produits en boutique il vous faudra regénérer les miniature de ces typed’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 votrerépertoire /img


15

Annexe : Positions des modules et blocs : Pour un affichage optimal il convient de correctementpositionner 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 lesbloc a positionner):

- Soit en modifiant les positions dans les différents points de greffe de votre boutiqueprestashop.


16

Un fois vos différents blocs installés les opérations sont terminées.

Ouf, ça y est, votre thème est installé !!


17

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.

Partie 3 : Utilisation du EVO6


18

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 site3) Personnaliser le profil et l’apparence du thème=================================================

Plus en détail :

3.2.1 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. Notreconseil : Une fois votre thème de base et profils choisi : Pour les éditer il est conseiller de créez unnouveau profil « clone » de celui que vous aurez choisie. (Vous conserverez ainsi le profil de baseintact et vous travaillerez sur un nouveau profil personnalisé).

3.2.2 Cloner un profil :

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 despersonnalisations du thème.

Les sections :

● Général : cette section permet de paramettrer la stucture générale du site (lescolonnes)

● 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


19

Allez dans la section « profil » du module et clonez le profil sélectionné, puis pour l’éditer sélectionnezle et validez votre choix.

3.2.3 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 :

3.2.1 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 votresite. 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 votresite.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 PNGavec de la transparence.

Chargement et positionnement du logo : Chargez votre logo depuis votreordinateur.

Positionnez votre logo dans lebandeau du haut

Ne pas afficher le logo(Généralement utilisé lorsque lelogo est dans l’image d’arrière plan)


20

Chargement de la bannière d’arrière plan de l’entête

Chargez votre bannière d’en-têtedepuis votre ordinateur.

Définissez une couleur d’arrièreplan pour votre entête

Définissez ici la hauteur totale dubandeau d’en-tête (header)

Option pas d’image d’arrière planpour l’entête


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 pouvezcharger 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 uneimage PNG avec de la transparence.

Chargez une image d’arrière plandepuis votre ordinateur

Positionnez votre imaged’arrière plan

Réglez la répétions del’image

Fond fixe ou défilant avec la page

Choisissez la couleur du backgroundNe pas afficher l’image


22

3.2.3 Personnalisation des blocs latéraux

Cette section permet la personnalisation de vos blocs latéraux. .

Choix de la forme de l’en-tête des blocks

Uploadez votre propreimage d’en-tête

Gestion des couleursd’arrière plan et despolices de caractère


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

Astuce : pour pouvoir ajuster la couleur d’arrière plan il est nécessaire d’uploader une image PNG avecde la transparence.

Le contenue du pied de page se gère via le module DDLX best footer

Gestion de l’apparence dupied de page


24

3.2.5 Personnalisation des produits

Personnalisation del’apparence des produitsphares

Personnalisation del’apparence des listesproduits


25

3.2.6 Personnalisation du menu Position du menu (margehaute)

Gestion de l’apparence dumenu et des sous menu


26

3.2.7 Onglet CSS

Cette section s’adresse a ceux qui ont un minimum de maitrise du CSS, elle permet d’ajouter ducode CSS et personnalisation ainsi n’importe quelle partie de votre thème

Activer / Désactiver le CSS

Insérez / modifier votrecode CSS


27

3.2.3 Gestion des profils (Importer exporter son thème)

Créer / copier un nouveauthème / profils

Importer un profil(exporté) depuis son pc

Activer le profil en coursd’utilisation Sauvegarder / exporter

supprimer un profil


28

Dans ce module vous êtes libre de choisir combien de produits vous souhaitez afficher dans la paged’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 dansmodule puis positions. Vous trouverez le module au niveau du point de greffe (homepage)

3.3 Module Produits phare en page d'accueil - DDLX

Résumé : Ce module permet un affichage dynamique des produits phares de votreboutique en page d’accueil


29

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 votrepied 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 souhaitezdans 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 »

3.3 Module DDLX Best Footer


30

La configuration du module est assez simple.


31

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 »

3.6 Module Slider pure

Résumé : Le module est un classique diaporama d’image en page d’accueil. L’administrationde celui-ci vous permet de charger vos propres images, liens et texte a paraitre sur le slider.


32

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 pourRemonter.

3.7 Module Circonflex-studio - Scrolling page pluginjquery.ui.totop

Documents

SARL DDLX Multimédia Place du général de Gaule … · site de présentation site mobile ... 3.1.2.2 Personnalisation de l’arrière plan général du site 3.1.2.3 Personnalisation