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.

Personnaliser un thème

Définition

Un thème 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 > Apparence > Thèmes

Parcourez la liste des familles de thèmes 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, pour ne faire ressortir que ceux qui proposent un carrousel dans l'en-tête par exemple.
  • En cliquant sur l'image d'illustration du thème, vous pourrez connaitre le nombre de paramètres modifiables avec les formulaires de personnalisation du design. Les thèmes sont conçus par nos designers, qui choisissent délibérément une série de paramètres, et en prévoient la modification par l'utilisateur.
  • Chaque thème est mis à votre disposition sous la forme de plusieurs déclinaisons (variation de couleurs, images différentes, variantes de typographie, etc). 
  • Les paramètres modifiables diffèrent d'un thème à l'autre. 

Personnaliser un thème

Pour 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 certains paramètres avec les formulaires de personnalisation.

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

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 flottant à droite Aperçu  puis allez sur votre site afin de vérifier.

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.

apercu.png

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 les curseurs de votre clavier.

Color picker 1

NB : Personnaliser son design pour avoir un site à son image c'est bien, mais il faut faire attention de conserver une cohérence graphique pour que votre site reste lisible.

Nous vous recommandons la lecture de ce tutoriel pour adopter les bons reflexes et créer un joli site, clair et pratique

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, vous pouvez enregistrer jusqu'à 15 thèmes.
 
 

Pour cela, rendez-vous dans  Configuration > Apparence > Thèmes et cliquez sur l'onglet 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 > Apparence puis rendez vous sur l'onglet Thèmes
  • Sélectionnez un thème parmi la liste et cliquez sur aperçu.
  • Choisissez le dernier bouton "tester ce thème" 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

Comment tester un thème personnalisé ?

  • Rendez vous dans Configuration > Apparence > thèmes et sélectionnez un thème en cliquant sur aperçu puis sauvegardez-le
  • Retrouvez le thème en question dans mes thèmes sauvegardés et cliquez sur personnalisez
  • Un bouton aperçu à droite de la page vous permet de visualiser sur votre site les modifications

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 deux zones dans lesquelles vous pouvez surcharger du CSS :

  • Dans Configuration > Apparence> Personnaliser le design, tout en bas dans la zone Ajouter du CSS au thème. Le code CSS viendra s'ajouter au CSS du thème. Si vous changez de thème, ce CSS ne sera pas conservé.
  • DansConfiguration > 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é.

expert e-monsite

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