Aperçu
Bienvenue dans notre guide de création de site. Cet article vous accompagne pas à pas pour donner à votre site une allure moderne et épurée. Il s’appuie sur le travail de notre équipe de conception et vous simplifie la tâche en vous proposant des directives et des choix précis. N’hésitez pas à essayer d’autres réglages, modèles, etc. au fil de l’article : votre site vous ressemblera vraiment.
L’éditeur de thème se trouve sous Settings > Themes. Pour accéder aux outils de modification du site public, vous avez besoin des permissions suivantes : Admin, Manage Public Content, Manage Site Theme.
Préparation
Une bonne préparation est la clé du succès. Si vous rassemblez les éléments ci-dessous à l’avance, le processus se déroulera sans heurts ni frustration. Vous pouvez bien sûr aussi avancer par petites étapes si vous le préférez.
Images
Les images peuvent faire toute la différence pour un site. Des images nettes et en haute résolution changent radicalement son apparence. Si votre club n’en a pas, vous pouvez toujours utiliser des images libres de droits. Beaucoup de sites offrent gratuitement d’excellentes images; Unsplash est l’un des plus populaires.
C’est aussi à cette étape que vous rassemblez ou créez les images de marque de votre organisation :
- Une bannière : une image haute résolution plus large que haute. L’image utilisée dans ce tutoriel mesure 330 px sur 75 px (un rapport de 22:5). Votre image n’a pas à respecter exactement ces proportions.
- Un favicon : une image .ico qui s’affiche dans l’onglet du navigateur. 16 px sur 16 px.
- Une bannière de courriel : semblable à votre bannière habituelle, elle s’affiche en haut des courriels envoyés par le système. 650 px sur 450 px.
Rassemblez toutes vos images dans un seul dossier sur votre ordinateur pour les avoir sous la main.
Texte
Comme les images, le texte est très important. C’est lui qui donne aux utilisateurs l’information dont ils ont besoin pour connaître leurs options, faire leur choix et passer à la caisse. Gardez en tête que la plupart des gens lisent peu aujourd’hui : une information brève et concise est préférable.
Rassemblez votre texte dans un document ou un dossier facile d’accès. Nous vous déconseillons d’utiliser Microsoft Word pour ce faire : Word a tendance à transporter des métadonnées qui peuvent causer des problèmes. Vous pouvez plutôt utiliser Notepad++. Si vous tenez à utiliser Word, des résultats inattendus peuvent survenir quand vous collez votre texte dans le site.
Couleurs de l’organisation
Les derniers éléments à préparer sont les couleurs de votre organisation. Vous pouvez utiliser des valeurs RVB ou HEX pendant la configuration du site, mais l’une de ces deux notations est obligatoire. Si vous ne connaissez pas les couleurs de votre organisation, écrivez-nous à support@uplifterinc.com avec un exemple des couleurs que vous utilisez (image ou lien vers un site Web), et nous vous aiderons.
Nous vous recommandons d’avoir la valeur RVB ou HEX de la couleur principale de votre organisation ainsi que d’une couleur secondaire. Si votre organisation n’a pas de couleur secondaire, vous pouvez utiliser une couleur analogue ou complémentaire. Vous les trouverez facilement à l’aide des nombreux sélecteurs de couleurs gratuits en ligne, par exemple HTML Color Codes - Color Picker (en anglais).
Une fois prêt et organisé, vous pouvez passer à la suite!
Configuration du thème
Maintenant que tout est prêt, vous pouvez commencer à concevoir votre site. La première étape consiste à configurer son thème. Le thème donne le ton à l’ensemble du site et rend la navigation fluide pour vos utilisateurs.
Choisir un thème
- Allez à Settings > Themes
- Sélectionnez le thème souhaité
Les thèmes se trouvent sous Settings > Themes. Vous y choisissez un thème de base dont vous pourrez ensuite modifier certains éléments. Dans ce guide, nous choisissons Alpaca, mais vous pouvez choisir le thème qui vous plaît.
Mettre à jour vos images
- Allez à Header > Images et téléversez votre bannière
- Réglez Image Position à Top Left
- Revenez au menu principal du thème
- Allez à Additional Images
- Téléversez votre favicon et votre bannière de courriel
- Cliquez sur Save
Pour mettre à jour les images et l’image de marque de votre site, allez à Header > Images. Vous pouvez y téléverser votre bannière et régler sa position à Top Left. Cliquez sur Back (sous le titre de la section, et non dans votre navigateur) pour revenir au menu principal du thème. Allez à Additional Images et téléversez votre favicon et votre bannière de courriel. Nous vous recommandons fortement de cliquer sur Save.
Mettre à jour vos couleurs
- Appliquez votre couleur principale aux emplacements suivants
- Header > Top Navigation Bar > Colours > Top Navigation Bar Link Colour - Hover
- Header > Top Navigation Bar > Colours > Top Navigation Dropdown Link Colour - Hover
- Header > Main Navigation Bar > Colours > Main Navigation Bar Link Colour - Hover
- Header > Main Navigation Bar > Colours > Main Navigation Dropdown Link Colour - Hover
- Body > Text/Links/Actions > Links > Default Body Link Text Colour
- Body > Text/Links/Actions > Buttons > Button Background Colour
- Body > Text/Links/Actions > Buttons > Alternate Section Button Background Colour
- Footer > Footer Area > Footer Link Colour - Hover
- Appliquez votre couleur secondaire aux emplacements suivants
- Body > Text/Links/Actions > Links > Default Body Link Text Colour - Hover
- Body > Text/Links/Actions > Buttons > Button Background Colour - Hover
- Body > Text/Links/Actions > Buttons > Alternate Section Button Background Colour - Hover
- Cliquez sur Save
L’étape suivante consiste à mettre à jour les couleurs du site. Le thème est conçu pour bien fonctionner avec ses couleurs existantes; seuls quelques emplacements doivent donc être modifiés. Appliquez votre couleur principale et votre couleur secondaire aux emplacements indiqués ci-dessus. Certains de ces éléments peuvent être « cachés » en mode simple (Simple Mode) : cliquez sur l’en-tête d’une section pour passer en mode avancé (Advanced Mode). Cliquez sur Save quand vous avez terminé. Vous pouvez aussi enregistrer régulièrement en cours de route, pour ne pas perdre votre travail.
Confirmer les réglages
- Confirmez les réglages suivants :
- Header > Images > Image Position = Top Left
- Header > Top Navigation Bar > Text Styling > Text Case = Uppercase
- Header > Main Navigation Bar > Border Styling > Main Navigation Bar Full Width Borders (mode avancé) > Bottom Border Weight = 1px
- Header > Main Navigation Bar > Text Styling > Text Case = Uppercase
- Body > Text/Links/Actions > Text > Body Font (mode avancé) Body Font = Montserrat
- Body > Text/Links/Actions > Text > Body Font (mode avancé) Header Font = Playfair Display Bold
- Body > Text/Links/Actions > Text > Body Font Size = 0.9em
- Cliquez sur Save
Comme pour tout le reste de cet article, vous êtes libre de vous écarter de ces suggestions.
Configuration de la page d’accueil
Votre page d’accueil se trouve toujours à la racine de votre site. Autrement dit, si votre site est à l’adresse www.monsite.com ou monsite.uplifterinc.com, cette adresse mène à la racine, soit la page d’accueil de votre organisation. Il est donc important d’avoir une page d’accueil attrayante qui oriente les utilisateurs rapidement, sans qu’ils aient à chercher.
Choisir votre modèle
- Allez à la page racine de votre site
- Cliquez sur Edit Page Details
- Dans la liste déroulante Page Template, sélectionnez l’option Full Page Home Page Alternate Sections
- Entrez le titre de page souhaité (p. ex. « Accueil » ou le nom de votre organisation)
- Cliquez sur Save Page
Pour aller à la page racine de votre site, entrez simplement l’adresse habituelle de votre site. Si vous êtes déjà connecté, vous pouvez aussi cliquer sur la bannière en haut de la page. Une fois sur la page, cliquez sur le bouton Edit Page Details en haut à droite pour accéder aux options de la page. Choisissez le modèle voulu (Full Page Home Page Alternate Sections est un choix très populaire), entrez un titre de page et cliquez sur Save Page.
Mettre à jour le contenu de la page
- Cliquez sur Edit
pour chaque section
- Modifiez le contenu de la section comme vous le souhaitez (ou selon les suggestions ci-dessous)
- Cliquez sur Save Page en cours de route et à la fin
Les suggestions suivantes supposent que vous avez choisi le modèle Full Page Home Page Alternate Sections. Plusieurs d’entre elles s’appliquent toutefois aussi à d’autres modèles.
Section 1 - Bannière d’accroche
Les bannières d’accroche sont de grandes images qui présentent aux utilisateurs vos nouveautés et ce qui se passe d’intéressant. Il peut s’agir d’une seule image ou (ce que nous recommandons) d’un carrousel de bannières.
- Cliquez sur Edit
- Supprimez l’image de remplacement : cliquez une fois dessus pour la sélectionner, puis appuyez sur la touche Retour arrière
- Choisissez l’option Template dans la barre d’outils
- Sélectionnez Banner Slider dans le menu déroulant et cliquez sur OK
- Pour chaque image de remplacement du carrousel :
- Sélectionnez l’image en cliquant dessus
- Sélectionnez l’icône Media dans la barre d’outils
- Téléversez la bannière souhaitée
- Allez à l’onglet Images, sélectionnez l’image et cliquez sur Insert Image
- Cliquez sur Save Page
Vous voulez que ces images mènent ailleurs sur votre site? Suivez ces étapes :
- Sélectionnez l’image en cliquant dessus
- Cliquez sur l’icône Link dans la barre d’outils
- Entrez l’adresse souhaitée dans le champ URL
- Ajustez le réglage Target au besoin
- Cliquez sur OK
Cliquez toujours sur Save Page avant de tester vos liens!
Section 2 - Énoncé de mission, citation ou affiliations
Le contenu de la section suivante dépend de vos préférences. Il peut s’agir de l’énoncé de mission de votre club, d’une citation qui reflète la vocation de votre organisation ou d’un espace où afficher les images ou bannières de vos affiliations. Pour un énoncé de mission ou une citation, suivez les étapes ci-dessous.
- Cliquez sur Edit
- Supprimez tout le contenu de remplacement
- Entrez le texte de votre énoncé de mission ou de votre citation
- Surlignez le texte
- Dans la barre d’outils, sélectionnez Formats > Headings > Heading 1
- S’il s’agit d’une citation, surlignez-la et mettez-la en italique
- S’il s’agit d’une citation, placez le nom de son auteur sur une nouvelle ligne, en taille normale
- Surlignez tout le contenu
- Dans la barre d’outils, sélectionnez Formats > Alignment > Center
- Cliquez sur Save Page
Section 3 - Programmes ou cours en vedette
Cette section peut mettre en vedette quatre programmes ou cours : vos plus populaires, ou ceux qui ont encore besoin d’inscriptions. En haut de la section, vous pouvez remplacer le titre (« Four Column Section » par défaut) par quelque chose comme « Programmes en vedette ». Vous pouvez ensuite utiliser les sections déjà mises en forme et remplacer leur contenu par le vôtre.
Pour les images de remplacement, cliquez une fois dessus, puis utilisez le bouton Media pour téléverser et insérer vos propres images. Pour le texte, faites attention aux copier-coller provenant d’autres sources. Comme mentionné au début de l’article, Microsoft Word peut transporter une mise en forme indésirable. Il vaut mieux copier depuis un éditeur de texte brut (comme Notepad++). Surlignez alors entièrement le texte existant, puis collez le nouveau texte avec Ctrl+V (Cmd+V sur Mac). Le style actuel du modèle est ainsi conservé.
Les liens de cette section peuvent mener à l’un de deux endroits : (1) une page d’inscription personnalisée ou (2) une page d’inscription dédiée. La différence : la page personnalisée présente le programme avec d’autres programmes semblables, alors que la page dédiée n’affiche que ce programme.
Option 1 - Page d’inscription personnalisée : créez une nouvelle page à l’endroit voulu sur votre site et appliquez-lui le modèle Registration. Appliquez les filtres voulus pour n’afficher que quelques programmes, dont bien sûr votre programme en vedette. Pour plus de détails, consultez la section sur les pages d’inscription de l’article Gestion du site web public sur Club 1.0. Enregistrez la page, puis copiez son adresse dans votre navigateur. Revenez à votre page d’accueil, cliquez sur Edit pour la section voulue, cliquez une fois sur le bouton et choisissez l’option Link dans la barre d’outils. Collez l’adresse copiée dans le champ URL et cliquez sur OK. N’oubliez pas de cliquer sur Save Page!
Option 2 - Page d’inscription dédiée : allez du côté administrateur de votre site, puis à Products & Programs > Programs. Trouvez le programme voulu et cliquez sur Edit . En haut à gauche de la page de modification du programme, copiez le texte de la section jaune Program Registration URL. Revenez à votre page d’accueil, cliquez sur Edit
pour la section voulue, cliquez une fois sur le bouton et choisissez l’option Link dans la barre d’outils. Collez l’adresse copiée dans le champ URL et cliquez sur OK. N’oubliez pas de cliquer sur Save Page!
Section 4 - Nouvelles, événements et concours
Cette section met en valeur vos nouvelles, vos événements à venir ou vos concours. Elle ne compte que deux blocs par défaut, mais vous pouvez survoler l’icône Edit du deuxième bloc et choisir Copy
pour en créer un nouveau. Répétez autant de fois que nécessaire pour présenter tous vos éléments.
Lorsque vous modifiez ces blocs, vous pouvez conserver la mise en forme existante : une zone d’image, un titre ou une accroche, et une description. Vous pouvez aussi ajouter un lien en bas du bloc ou transformer l’image en lien.
Pour transformer une image en lien, cliquez sur Edit pour la section, puis cliquez une fois sur l’image. Choisissez l’icône Link dans la barre d’outils et entrez l’adresse voulue dans le champ URL. Si vous ne voulez pas que les utilisateurs quittent la page en cours, réglez le champ Target à « New Window ». Dans la plupart des navigateurs récents, le lien s’ouvrira alors dans un nouvel onglet plutôt que dans une nouvelle fenêtre.
Pour ajouter un bouton sous le texte, écrivez d’abord le texte du bouton. Séparez-le de la description par un espace. Surlignez le texte et sélectionnez l’icône Link dans la barre d’outils. Entrez l’adresse voulue dans le champ URL et sélectionnez Button dans la liste déroulante Class.
Section 5 - À propos de nous
Cette section est l’endroit idéal pour en dire plus sur qui vous êtes et ce que vous faites. C’est aussi ici que vous utiliserez votre tout premier modèle de section! Cette zone à arrière-plan alternatif contient en fait deux sections. Pour la première, cliquez sur l’icône Edit et supprimez tout son contenu. Ensuite, pour la deuxième section :
- Cliquez sur Edit
- Supprimez tout son contenu actuel
- Sélectionnez l’option Insert Template
dans la barre d’outils
- Choisissez l’option Two Columns et cliquez sur OK
- Supprimez le contenu de remplacement de la première colonne
- Sélectionnez le bouton Media dans la barre d’outils, puis téléversez et insérez une image
- Remplacez le contenu de la deuxième colonne comme vous le souhaitez
- Cliquez sur Save Page
Section 6 - Commanditaires
La dernière section à créer met en valeur les commanditaires de votre organisation. Nous utiliserons pour cela la section à arrière-plan standard et supprimerons la dernière section à arrière-plan alternatif du modèle. Pour la supprimer, cliquez sur Edit pour la section et effacez son contenu. Dès que vous cliquez à l’extérieur de la section, elle disparaît complètement, sans laisser de trace.
Comme la précédente, cette dernière section est divisée en deux parties, le haut et le bas. Le bas contient deux sections en colonnes, que nous n’utiliserons pas : effacez aussi leur contenu. Pour vous assurer de tout supprimer, il est souvent utile de cliquer sur Edit pour la section, puis sur Source Code
, et de tout effacer à partir de là. Vous êtes ainsi certain que tous les éléments sont supprimés.
Dans la section restante, cliquez sur Edit et modifiez le titre comme vous le souhaitez. Vous pouvez supprimer le sous-titre, puis laisser un peu d’espace sous le titre. Utilisez ensuite de nouveau l’option Insert Template
, cette fois avec deux, trois ou quatre colonnes selon le nombre de vos commanditaires. Si vous en avez davantage, utilisez un diviseur commun. Par exemple, avec six commanditaires, utilisez le modèle Three Column et l’outil Copy
pour obtenir six blocs en tout.