Design du site Rosace

Design du site Rosace

Comment personnaliser le design de votre site : nom du site et son slogan, couleurs, image d’arrière-plan, polices Google, haut et logo, pied de page, réseaux sociaux, temps de transition du diaporama-photos ?

Menu Personnaliser

Connecté en tant que webmaster,

  • allez dans Apparence > Personnaliser
  • ou cliquez Personnaliser sur la barre de raccourcis sur le site

Un menu Personnaliser s’ouvre alors à gauche de votre écran, vous pouvez :

 

  • changer les paramètres du design de votre site
  • voir instantanément le changement en ligne
  • publier les changements ou y renoncer.

Pour fermer cette fenêtre, cliquer sur la croix en haut à gauche.

 

 

 

 

 

 

 

1. Identité du site

1. Titre du site

Le titre du site sert à son référencement, mieux vaut ne pas le changer ou nous demander de le faire pour vous.

 

2. Icône du site ou favicon

  • Sélectionnez votre logo de site pour ensuite le recadrer ou
  • téléversez une image au format png de 512 x 512 pixels
  • Publier par le bouton en haut à droite

Aucun changement n’est définitif tant que vous n’avez pas cliqué Publier.

 

 

 

 

2. Couleurs

Thème de couleurs

  • Clair
  • Sombre

Entête

Cela change la texture du texte du logo de site.

  • Clair
  • Sombre

Couleur d’arrière-plan

  1. Cliquez sur la zone de couleur
  2. Copiez le code couleur enregistré par prudence pour pouvoir revenir en arrière
  3. Sélectionnez une autre couleur

 

 

 

3. Image d’arrière-plan

Trois possibilités

  • Texture d’écran
    Sélectionnez une des 5 textures sous la liste de choix
  • Image de 2400 x 1800 pixels
  • Aucun
    A cocher si vous avez déjà choisi une couleur d’arrière-plan en 2 Couleurs

Image d’arrière-plan

Préparez une image de très grandes dimensions : exemple 2400 x 1800 pixels avec un poids de fichier < 300 Ko pour ne pas ralentir le chargement de la page, à tester sur mobile ou sur responsinator.com avec l’adresse de votre site.

 

Configuration

Choisissez Remplir l’écran pour éviter les zones vides. Vous pouvez tester les autres effets.

Position de l’image

Laisser sur le centre

 

 

 

 

 

Astuce !

Si vous optez pour l’image d’arrière-plan, choisir une couleur d’arrière-plan proche (cf 2 Couleurs), le temps que l’image se charge, et des couleurs de police qui restent lisibles si vous changez régulièrement d’image d’arrière-plan.
> > Site avec image d’arrière-plan de saison paroissetlslahaye.com

 

4. Polices Google

Important

Pensez à noter les polices livrées avec votre site avant d’en tester de nouvelles afin de pouvoir revenir en arrière.

Idéalement, vous limiter à deux polices, trois maximum et choisir une police droite pour les menus afin qu’ils demeurent très lisibles.

Polices web

Un site web peut utiliser un choix restreint de polices web ci-dessous :

Polices Google du modèle Rosace

Un site web peut aussi appeler et utiliser d’autres polices, dont les polices Google.

Polices Google Rosace

Choix polices RosacePolice du logo

Vous n’avez pas la main sur la police du slogan

Polices des titres

 

Polices des menus

 

Polices des textes

 

 

 

Au secours ! Je ne vois pas de changement !

Penser à vider le cache de votre navigateur et à actualiser la page (CTRL + R) pour voir le changement.

 

Personnalisation des polices et couleurs par Bonnenouvelle.fr

Le menu Personnaliser ne permet pas de changer toutes les couleurs et polices du site. Vous pouvez nous indiquer les couleurs et polices désirées pour les titres et widgets (blocs) de votre site que nous intégrerons manuellement à votre feuille de styles.
Nous envoyer par email le code hexadécimal (ex: #FFFFFF) et les noms des polices web ou Google choisies en précisant les zones à changer.

Ce changement pouvant être assez long à faire, il est limité à un aller-retour. Des changements supplémentaires sont possibles et seront décomptés de votre temps de support.

Type de logo : Image

  1. Préparez une image de 350 pixels de large x 100 pixels de haut ou plus
  2. Cliquez Sélectionner une image

 

 

 

Logo HiDPI

Pour les écrans à très haute résolution “Retina” PNG, téléversez une image 2 fois la taille du logo ci-dessus

 

 

 

Personnaliser slogan et logoType de logo : Texte

 

Le slogan est important pour la compréhension de votre site, le composer avec vos mots-clés.

Vous pouvez le déplacer vers la droite ou la gauche.

 

 

 

 

 

 

 

 

Personnaliser haut droite RosaceContenu en haut à droite du logo du site

Affiche au choix :

  • Slogan
  • Deux dernières Prédications avec leurs dates
  • Deux prochains Evènements
  • Deux derniers Articles
  • Contenu personnalisé :
    Liens vers d’autres pages du site, mieux vaut nous dire ce que vous désirez et nous laisser faire
  • Rien

Masquer la zone de recherche

Zone de recherche en haut à droite du site : vivement déconseillé ! à laisser affichée

Afficher le fil d’Ariane

Chemin de navigation à l’intérieur des pages : vivement conseillé pour aider le visiteur à comprendre la logique de l’arborescence de votre site

 

 

6. Pied de page

Personnaliser pied de page Rosace

 

  • Adresse

 

  • Téléphone

 

  • Liens & Crédits en bas à droite

Mieux vaut nous laisser faire

 

7. Réseaux sociaux

En-tête

Pied de page

  • Flux RSS de votre site

[ctcom_rss_url] utile au référencement, à ne pas changer

  • Liens vers vos réseaux sociaux ou réseaux sociaux de proches

 

 

 

 

 

8. Slider de la page d’accueil

Personnaliser slider RosacePour changer le temps de transition automatique entre chaque image du diaporama-photos.

Pour changer le contenu du diaporama-photos, passez par l’administration via Apparence.

Astuce !

Allez directement par l’administration via Apparence pour personnaliser les widgets et les menus, vous aurez plus de place.

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Style Switcher

Layout options
Header options
Accent Color Examples
Background Examples (boxed-only)
View all options →