Choisir un thème graphique et modifier le design

Sur e-monsite, pour créer un site à votre image, nous vous proposons de choisir un thème et de le personnaliser pour donner l'apparence que vous souhaitez à votre site.

Pour cela, pas besoin de connaître le CSS car nous vous proposons d'utiliser des formulaires de personnalisation du design. Il y a quelques mots en gras qui méritent une définition, commençons par ça si vous le voulez bien.

Définition

Un thème graphique est un ensemble de paramètres personnalisables qui définissent le squelette et l'apparence du site. Changer de thème n'affectera pas le contenu du site, uniquement son apparence.

Le formulaire de personnalisation de design est la liste des paramètres du thème que vous avez activé et que le designer vous autorise à modifier. C'est une page sur laquelle sont listés les paramètres modifiables (couleur, bordures, taille du texte etc) pour différentes zones de votre site (en tête, contenu, menus etc..).

Le CSS est le langage qui est utilisé pour définir l'aspect d'un site. Nous n'entrerons pas dans les explications approfondies. Les formulaires de personnalisation du design vous permettent de ne pas avoir à utiliser directement le CSS.

Choisir et appliquer un thème

Pour choisir un nouveau thème, rendez-vous dans votre manager dans Configuration > Thèmes.

Parcourez la liste des thèmes graphiques et retenez celui qui convient le mieux à l'apparence globale que vous souhaitez donner à votre site.

Vous pouvez choisir un thème en fonction de critères comme le secteur d'activité, les couleurs, le profil, ou par mots clés.
En cliquant sur l'image d'illustration du thème, vous pourrez avoir un aperçu du thème.
Vous pouvez ensuite visualiser le site de démonstration, tester le thème sur votre site pour avoir un aperçu en direct avant de faire votre choix.
Une fois que vous avez fait votre choix, vous pouvez appliquer le thème sur votre site. Vos contenus sont conservés, c'est uniquement l'apparence qui change.

Personnaliser un thème

Pour personnaliser le thème graphique, et modifier les couleurs, les dimensions, les largeurs, les marges et les bordures, vous n'avez pas besoin de mettre les mains dans le CSS.

Les thèmes sont conçus par nos designers et ces derniers vous donnent la liberté de modifier de nombreux paramètres avec les formulaires de personnalisation.

Vous allez pouvoir modifier le thème activé depuis votre manager dans Configuration > Apparence > Personnaliser.

Vous pouvez ainsi changer la couleur ou l'image de fond, les polices, les couleurs des textes et titres, l'apparence du menu, du pied de page, des boutons, des liens, et plus encore. De façon à obtenir un site unique, à votre image.

Dans notre système de gestion de design, vous avez un aperçu en direct des modifications que vous apportez à votre site. Vous pouvez ainsi prévisualiser le rendu des éléments que vous personnalisez. Pour voir par exemple si les couleurs que vous choisissez permettent d'obtenir un design harmonieux.

Si vous faites une erreur, n’hésitez pas à appliquer de nouveau le thème graphique afin d’annuler vos modifications.

Après chaque modification, validez le formulaire en cliquant sur le bouton Enregistrer pour conserver vos modifications.

Si vous n’êtes pas à l’aise avec la personnalisation du design de votre site, il est préférable de ne pas modifier le thème choisi afin de conserver un site propre et cohérent graphiquement.

Le ColorPicker : un outil pour choisir une couleur facilement

Dans la partie de personnalisation de l'apparence, des colorpickers RGBA permettent de sélectionner facilement des couleurs.

Grâce à une pipette, vous pouvez choisir une couleur puis en récupérer le code pour l'appliquer à différents paramètres.

Notez qu'il est possible de faire varier le dernier chiffre compris entre 0 et 1, pour appliquer un effet de transparence. Pour cela, utilisez le curseur de votre clavier.

Enregistrer votre thème

Vous avez modifié un thème avec les formulaires de personnalisation de design, nous pouvons donc dire que vous avez créé votre propre thème.

Pour ne pas le perdre (en activant un nouveau thème par dessus ou en faisant une modification trop rapide), sauvegardez-le dans "Mes thèmes".

En version gratuite, vous pourrez avoir un thème en cours et sauvegarder 2 thèmes.
En Version Pro, Business ou E-commerce vous pouvez enregistrer jusqu'à 15 thèmes.

Vous pouvez également vous rendre dans Configuration > Thèmes et cliquer sur l'onglet Mes thèmes. Vous avez alors la possibilité de sauvegarder votre thème actuel en cliquant sur le bouton "Sauvegarder dans mes thèmes".

Faire une sauvegarde de votre thème vous permettra par exemple d'activer un autre thème et de réappliquer le précédent en cas de regret. Vous retrouverez ainsi toujours votre propre déclinaison de thème.

Essayer un thème sans l'appliquer

Pour vous permettre de choisir le design le plus approprié pour votre site il est également possible de tester un thème sans avoir à l'appliquer.

Vous pouvez ainsi avoir un aperçu de l'apparence de votre site sans aucun impact en ligne. Les internautes ne verront aucune modification tant que vous n'aurez pas appliqué le thème sélectionné.

Comment essayer un thème ?

Connectez vous sur votre manager, rubrique Configuration > Thèmes
Sélectionnez un thème parmi la liste et cliquez sur aperçu.
Cliquez sur le bouton "Aperçu sur mon site" pour visualiser votre site dans une nouvelle fenêtre avec le thème sélectionné.
Vous pouvez naviguer sur votre site ou arrêter le test en cliquant sur le bouton flottant aperçu situé à droite de votre site ou en fermant l'onglet.

Et pour ceux qui veulent aller plus loin ...

Personnaliser le design d'un thème, c'est facile grâce aux formulaires mais il y a toujours la contrainte des paramètres modifiables. Si vous souhaitez modifier un paramètre qui n'est pas prévu dans le formulaire, il est toujours possible de le faire en CSS.

Faire appel à un designer ou à quelqu'un qui maitrise ce langage serait la façon la plus rapide, mais comme ce n'est pas très compliqué, nous vous invitons à lire ce tutoriel pour faire vos premiers pas en CSS.

Editer la feuille de style

Sachez qu'il est possible d'éditer la feuille de style et de personnaliser votre design directement en CSS.

Pour cela, rendez-vous dans Configuration > Apparence > Personnaliser et cliquez sur l'onglet Avancé.
Attention, si vous personnalisez votre thème en CSS et que vous repassez ensuite ensuite en mode simple, vous perdrez toutes les modifications effectuées en CSS.

Surcharger en CSS

Pour ceux qui veulent personnaliser leur design en mode simple (avec les formulaires) mais qui souhaitent aussi ajouter du CSS, sachez qu'il y a une zone dans laquelle vous pouvez surcharger du CSS :

Dans Configuration > Réglages > Zones éditables > Zones CSS supplémentaires. Le CSS viendra aussi surcharger le CSS du thème mais si vous changez de thème, il sera conservé.

Pour être en mesure d'utiliser cette fonctionnalité, vous devez avoir soucrit au préalable à la version Pro, la version Business ou la version E-commerce.

Les experts en webdesign

Si vous pensez que votre site nécessite une touche plus professionnelle, vous pouvez confier la gestion du design à nos experts e-monsite.

Ils seront en mesure de vous proposer une amélioration graphique. N'hésitez pas à contacter nos experts en webdesign pour obtenir un avis et de nouvelles propositions de design.