Xxxxxx1212xxxxxxx

Choisir un thème graphique et modifier le design

, 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 1. 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. 2. 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 les thèmes responsives par exemple, ou encore ceux qui proposent un carrousel dans l'en-tête.

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.

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

personnalisation.png

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. 4. 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 la perdre (en activant un nouveau thème par dessus ou en faisant une modification trop rapide), sauvegardez-la 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.

mes-themes.png

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.

mes-themes-enregistres.png

5. 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. 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. 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é. 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é. expert 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.

choisi e-monsite nous somme les expert pour cree des site web

Insérer des widgets dans une page

Vous le SAVEZ, sur une page web il n’y a pas que du texte. Il peut y avoir aussi des photos, des vidéos, de la musique, des cartes google map, des quizz, etc.

Toutes ces fonctionnalités sont appelées des widgets et vous pouvez les insérer dans des pages. Widgets Texte L'éditeur visuel

Ce widget permet d'insérer du texte en utilisant un éditeur visuel. Vous pourrez facilement mettre en forme votre contenu comme avec un logiciel de traitement de texte (mettre en gras, souligner etc), faire des liens hypertextes, placer des ancres ou encore créer des paragraphes. Html

Ad by Notification | Close L'éditeur HTML

Grâce au widget HTML, vous pouvez insérer du code HTML dans des pages (code HTML externe, javascript). Notez qu'il existe une passerelle entre l'éditeur visuel et le widget HTML, ce qui vous permet par exemple de créer un bloc de texte avec l'éditeur visuel puis d'apporter des modifications en HTML si vous le souhaitez. Picture Le widget Images

Il vous permet d'ajouter une image ou une photo depuis l’espace de stockage de votre site ou depuis le disque dur de votre ordinateur. Vous pouvez facilement insérer des images, proposer un agrandissement de la photo, faire un lien sur l'image et les redimensionner au format de votre choix. Carrousel Le carrousel d'images

Le widget carrousel vous permet de créer un carrousel de photos (appelé aussi "slider"). Composez votre carrousel avec les photos de votre choix et affichez-le dans une page. Vous disposez de dizaines d'options de transition et d'affichage pour créer un véritable diaporama personnalisé. Sur chaque image du carrousel, vous pouvez ajouter un titre, une description et faire un lien vers la page de votre choix.

Ad by Notification | Close Video Le widget vidéo

Il vous permet d'afficher en toute simplicité une vidéo présente sur Youtube ou Dailymotion. A partir de l'adresse URL ou en effectuant une recherche sur un mot clé, vous pouvez ainsi insérer les vidéos de votre choix dans vos pages (notez qu'il existe un module qui vous permet de créer une galerie de vidéos). Musique Le widget fichier à télécharger

Ce widget vous permet de proposer à vos internautes le téléchargement d’un fichier depuis une page de votre site (fichiers de type pdf, un fichier zip, mp3 etc.) Map Le widget Carte Google Maps

C'est l'outil idéal pour afficher une carte de situation géographique dans une page. Insérez le widget, renseignez l'adresse du lieu à afficher, choisissez la taille de la carte puis enregistrez pour afficher dynamiquement la carte sur votre site. Flux rss Le widget flux RSS externe

C'est un widget qui vous donner la possibilité d'afficher les derniers articles publiés sur un site ou un blog à partir de son flux RSS. Paypal Le widget Paypal

Il est réservé aux utilisateurs de la version Pro. Il permet de vendre un produit, un service, de proposer une adhésion en utilisant la plateforme de paiement en ligne Paypal (différent du module Boutique qui permet de créer un site e-commerce). Widgets Et des centaines de widgets

Il existe des centaines d'autres widgets gratuits que vous pouvez insérer dans vos pages, tels que le widget météo, facebook, sondage, dernier message du forum, etc. Chaque module disposant de ses propres widgets, vous pouvez ainsi afficher du contenu dynamique dans vos pages (ex: les produits en PROMOTION de la boutique, les derniers articles publiés sur le blog, les derniers commentaires etc etc..) Vous pouvez insérer les widgets ci-dessus dans vos pages, en créant des lignes et des COLONNES. Comme nous vous l'expliquions dans la partie précédente, vous pouvez ajouter jusqu'à 30 lignes par pages, contenant chacune jusqu'à 6 COLONNES de widgets. Afin de créer un site bien structuré et facile à mettre à jour, nous vous proposons maintenant de découvrir comment ranger des pages dans des catégories.

Classer les pages dans des catégories

Notre outil gratuit de création de site vous donne la possibilité de créer un nombre illimité de pages. Cela nécessite de pouvoir les classer et les ordonner pour les afficher correctement sur votre site web. Pour ranger les pages, vous pouvez utiliser un système de création de catégories imbriquées sur plusieurs niveaux.

Voyons ensemble comment ranger vos pages. Folder page Le système de classement par catégorie

Prenons un exemple simple pour illustrer le système de classement des pages dans les catégories.

Sur l'image de gauche ci-dessous, se trouve une hiérarchie dite classique, où les pages ne sont présentes que sur un seul niveau. Les pages se trouvent donc à la racine (elles ne sont pas rangées dans des catégories). Dans le cas où vous avez beaucoup de pages, la liste peut devenir très longue et être difficile à gérer. Sur l'image de droite, vous voyez une hiérarchie sur plusieurs niveaux. Les pages sont rangées (elles sont triées dans des catégories et des sous-catégories). sans catégorie Avec catégories Pourquoi ranger des pages dans des catégories ?

Le fait de ranger vos pages dans des catégories et des sous catégories vous permet de :

créer des menus facilement sur votre site. Si nous reprenons l'exemple ci-dessus, vous pourriez avoir sur votre site un menu horizontal qui contiendrait le lien "Vacances". Au survol du lien, les catégories "2009", "2010", "2011" s'afficheraient pour permettre une consultation simple et rapide de vos pages (pour plus d'infos, consulter les tutoriels : gérer les menus horizontaux et créer un menu déroulant. retrouver rapidement du contenu. Si vous recherchez une page qui parle de vos vacances 2011, il suffit d'aller dans le dossier Pages > Vacances > 2011 par exemple. profiter des catégories pour protéger ou non leurs contenus. Par exemple, vous souhaitez que seuls les membres de votre famille aient accès à vos photos de vacances, alors vous pouvez protéger la catégorie en question (pour plus d'infos consulter le tutoriel: réserver du contenu à vos membres). utiliser des structures différentes pour chacune de vos catégories. Par exemple vous pourriez très bien pour la catégorie Photos afficher un menu vertical différent qui afficherait les dernières photos de votre album photo (pour plus d'infos consulter le tutoriel: gérer les structures). En nommant astucieusement le nom et les URLs (dans la partie "Optimisation du référencement" de vos catégories), vous améliorerez le référencement des pages qu'elles contiennent. Plutôt que d'avoir une page www.votresite.com/pages/vacances-saint-tropez-2011.html, vous aurez www.votresite.com/pages/vacances/2011/saint-tropez.html Cette liste n'est pas exhaustive et de nombreuses autres possibilités vous sont offertes avec cette gestion plus rigoureuse des pages dans les catégories. Créer des catégories et déplacer des pages

Pour ajouter une catégorie, vous devez cliquer sur le bouton Nouvelle catégorie dans l'explorateur de pages. Si vous souhaitez créer plusieurs niveaux (sous catégories, sous sous catégories etc etc), le principe est identique. Cliquez sur la catégorie pour laquelle vous souhaitez créer une sous catégorie, puis appuyez de nouveau sur Nouvelle catégorie. Nouvelle categorie Deplacer page Vous SAVEZ créer des pages web et vous avez compris l'enjeu des catégories. Vous pouvez déplacer vos pages dans les catégories de votre choix (attention, si vous changez une page de catégorie, l'URL va changer. Pour ne pas perdre votre référencement, pensez à faire des redirections). Avant de refermer ce guide de la création de pages, voici quelques conseils pour bien rédiger une page.--Xxxxxx1212xxxxxxx (discuter) 28 janvier 2015 à 23:43 (CET)