Créer votre site web avec Wix

1. La plateforme Wix

Parmi tous les choix technologiques vus précédemment, nous allons opter pour la plateforme en ligne Wix (https://fr.wix.com). Cette solution offre beaucoup d’avantages pour les personnes qui veulent créer leur premier site web.

2. Les offres de Wix

Comme de très nombreuses offres en ligne, Wix vous propose plusieurs offres tarifaires. À...

1. Accéder au tableau de bord

Nous sommes maintenant connectés à l’interface d’administration du site. C’est le tableau de bord.

À gauche, se trouve la barre de menus verticale, et au centre, s’affiche le contenu de chaque élément du menu que vous sélectionnez.

Sur toutes les étapes de configuration de notre site, la première est terminée, il s’agissait de Mettre à jour votre type de site. Cette étape est barrée :

Vous n’êtes pas obligé de renseigner tout ce qui est proposé. Dans notre exemple, nous n’avons pas besoin d’une messagerie professionnelle (c’est payant), d’une campagne de collecte de fonds, ou encore de configurer des moyens de paiement.

2. Acquérir un nom de domaine

Avec l’offre Light, vous bénéficiez d’un nom de domaine offert pendant une année. Dans notre exemple, Wix nous propose de reprendre le nom du site Les grands pas comme nom de domaine, avec lesgrandspas.com.

Ce nom de domaine est disponible.

Le nom de domaine est offert avec un des forfaits Premium et le forfait Light que nous avons choisi.

Vous devez maintenant acquérir l’offre...

1. Les paramètres initiaux

Avec l’IA de Wix, nous avons défini un certain nombre de paramètres pour notre site et, dans le tableau de bord, nous avons acquis le nom de domaine. Ceci constitue la première étape du paramétrage du site.

2. Les paramètres du site

Maintenant, nous allons finaliser le paramétrage de notre site depuis l’interface d’administration.

Vous avez alors accès à de nombreux paramètres :

Nous n’allons pas tous les aborder, car certains dépendent du contexte de création de votre site web.

3. Les paramètres professionnels et de vente

Dans les sections Finances et paiements et Solutions professionnelles, les paramètres sont dédiés aux entreprises qui créent leur site professionnel de ventes en ligne et de prestations avec Wix. Nous n’allons pas les aborder dans le contexte de ce livre.

4. Les paramètres Site, domaine et référencement

Les paramètres Site, domaine et référencement permettent de paramétrer et de personnaliser la configuration de notre site.

Le paramètre Domaines a déjà été géré précédemment. Vous pouvez afficher les informations concernant votre domaine :

Le paramètre Gestion du forfait permet d’afficher les éléments relatifs à votre offre chez Wix :

Les paramètres Messagerie professionnelle et Numéro de téléphone professionnel ne sont pas utilisés dans notre exemple de site.

Le paramètre Membres du site ne sera pas abordé dans le contexte de ce livre.

5. Les paramètres de la catégorie Général

Les paramètres de la catégorie Général nous sont utiles :

Le paramètre Rôles et autorisations ne sera pas abordé dans le contexte de ce livre.

1. Les techniques de personnalisation

Nous allons maintenant personnaliser l’affichage du site, c’est-à-dire que nous allons modifier des paramètres d’affichage, afin que les visiteurs aient la meilleure expérience possible et qu’ils puissent utiliser le site dans de bonnes conditions de navigation, de lecture et de visualisation. Pour ce faire, Wix nous propose deux solutions, avec son IA ou en personnalisant un thème existant.

Les deux actions sont équivalentes.

Wix affiche alors un nouvel écran où vous pouvez choisir la solution technique que vous souhaitez :

Si jamais vous vous êtes trompé, vous pouvez revenir sur le tableau de bord en cliquant en haut à gauche sur Retour.

Pour notre exemple, nous allons choisir la solution de l’IA de Wix.

2. Générer le design avec l’IA de Wix

Lorsque vous avez cliqué sur le bouton, Wix affiche un assistant qui va analyser le site et faire une proposition qui pourra être modifiable. Dans le cadre de notre exemple, voici la proposition de Wix :

Dans le premier encadré, Les spécifications et le design de votre site sont prêts, Wix vous indique ce qu’il a fait d’après son analyse :

Dans le deuxième encadré, SPÉCIFICATIONS DU SITE, Wix vous fait...

1. L’interface des modifications

À l’étape précédente, nous avons exploité l’IA de Wix pour personnaliser le design général du site. Nous avons terminé la personnalisation d’un thème. Maintenant, c’est nous qui allons modifier le design et la structure du thème exploité.

Wix affiche le site dans un nouvel onglet de votre navigateur :

Voici les principaux éléments de l’interface de modification du site.

La barre d’outils est composée des éléments suivants :

Vous pouvez à tout moment utiliser ces outils pour parfaire vos modifications.

À gauche, un menu dispose des boutons suivants :

Enfin, il existe une dernière...

1. Sélectionner une page du site

Dans les modifications précédentes, nous avons travaillé sur la page d’accueil du site. Cette fois nous allons choisir une autre page du site, la page À propos.

Le site s’affiche dans un nouvel onglet, en mode modification :

La page À propos s’affiche en mode modification :

2. Ajouter une section pour les contacts

Dans cette page À propos, nous allons ajouter une section pour afficher des informations de contact.

La nouvelle section est placée dans la page :

3. Modifier la section pour les contacts

Maintenant que la nouvelle section pour les contacts a été ajoutée, nous allons la modifier et la personnaliser.

Pour travailler de manière efficace, Wix nous propose la Modification rapide. Cette fonctionnalité permet d’afficher, dans un volet latéral à droite, les principaux éléments de modification et de personnalisation de cette section.

Sur la droite de l’écran, le volet latéral Modification rapide s’affiche :

4. Modifier la couleur d’arrière-plan de la section

Nous allons dans un premier temps modifier la couleur d’arrière-plan.

1. Connaître les éléments de mise en page

Les sites créés avec Wix, et d’autres plateforme ou CMS utilisent des techniques de mise en page basées sur les dernières normes de mise en page avec les CSS : les grilles (CSS Grid Layout Module Level 1, https://www.w3.org/TR/css-grid-1/) et les boîtes flexibles (CSS Flexible Box Layout Module Level 1, https://www.w3.org/TR/css-flexbox-1/).

Ces techniques récentes de mise en page utilisent des conteneurs qui permettent d’y insérer des colonnes, des rangées de contenus divers, des images, des titres, des paragraphes… Tous ces contenus vont pouvoir être agencés, placés et positionnés avec assez de liberté pour obtenir une mise en page attractive.

2. Afficher la structure de la page À propos

Pour aborder les possibilités de mise en page, nous allons à nouveau modifier la page précédente, la page À propos.

Nous allons afficher la structure de cette page en visualisant ses conteneurs qui sont nommés calques dans Wix. Chaque « partie », nommée section par Wix, de la mise en page est placée dans un calque qui lui est dédié.

Nous allons afficher le calque de la partie supérieure de la page.

Wix affiche un cadre coloré entourant cette partie et il nomme le calque : Section : À...

1. Les pages existantes

Lors de la création de notre site, l’IA de Wix que nous avons utilisée a automatiquement ajouté des pages et des menus. C’est en fonction de nos échanges avec l’IA que cette dernière a déduit nos besoins en termes de pages et de menus. Mais bien sûr, cela reste une appréciation de l’IA et elle n’est pas parfaite par définition même. C’est donc à nous de modifier ce que l’IA a généré.

2. Lister les pages générées

Dans un premier temps, nous devons lister les pages que l’IA de Wix a générées.

En voici un extrait :

Les pages sont classées dans des catégories.

Wix affiche alors toutes les pages et les actions pour les gérer. En voici un extrait :

La page qui est actuellement affichée dans l’éditeur a un fond bleu.

1. Ajouter une nouvelle page

Nous allons maintenant ajouter une nouvelle page à notre site et la gérer dans le menu de navigation.

En bas du volet droit du menu, vous avez la possibilité d’ajouter une nouvelle page.

Ensuite, vous pouvez choisir un modèle de page prédéfinie. Sur la gauche se trouvent plusieurs catégories de modèle de page :

La page est ajoutée et vous devez la nommer.

La nouvelle page est ajoutée :

2. Déplacer la nouvelle page

La nouvelle page s’est insérée sur la page Accueil, ce qui n’est pas forcément judicieux pour notre exemple. Nous allons donc la déplacer dans l’ordre des pages affichées dans le menu.

Dans cet exemple, la nouvelle page Informations générales...

1. Afficher le menu de navigation principal

Wix a généré automatiquement un menu de navigation principal qu’il a placé dans l’en-tête :

Il s’agit d’un menu déroulant qui affiche tous les liens de navigation lorsque les visiteurs cliquent sur le libellé Menu.

Voilà le menu déroulé de cet exemple :

Le menu hiérarchique Informations générales affiche un petit triangle cliquable qui permet d’afficher les sous-pages.

2. Gérer les pages dans le menu de navigation

Nous allons modifier et adapter ce menu à nos besoins ce menu.

Voici le menu, les pages et les sous-pages de cet exemple :

3. Modifier et personnaliser l’affichage du menu

Nous allons maintenant modifier et personnaliser l’affichage du menu de navigation qui est affiché en haut à droite dans cet exemple.

1. Les différentes techniques

Lorsque nous souhaitons insérer un média dans un contenu rédactionnel, Wix nous offre plusieurs possibilités. Nous pouvons effectuer une recherche dans la médiathèque gratuite de Wix ou à partir d’autres médiathèques en ligne ou insérer une image depuis notre ordinateur. De plus, Wix nous propose des applications dédiées à la retouche photo et à la création de nos propres vidéos.

2. Insérer un média dans un contenu

Nous pouvons insérer un média lorsque nous sommes en mode édition de notre site, lorsque la page voulue est ouverte.

Dans cet exemple, c’est la page À propos.

Wix affiche un panneau latéral qui est composé de plusieurs parties. En voici un extrait :

3. Rechercher des médias

Dans le panneau Média, la première section, Que recherchez-vous ?, permet d’effectuer une recherche pour trouver une image selon un ou plusieurs critères.

Wix vous propose alors plusieurs types de médias répondant à votre recherche. En voici un extrait :

1. Comprendre l’utilisation du mode CMS

Maintenant que notre site est conçu, il faut en modifier le contenu rédactionnel. Pour cela il y a deux solutions avec Wix.

Si vous ne souhaitez avoir qu’un site « vitrine » qui affiche des informations relativement statiques, qui ne changent que très peu, vous pouvez parfaitement vous contenter d’exploiter les pages que Wix a créées. Ces pages sont qualifiées de statiques. Dans notre exemple, toutes les pages qui sont à notre disposition sont des pages statiques. Il suffira, comme nous l’avons fait précédemment, de modifier les pages statiques du site.

Si vous souhaitez publier régulièrement des informations à vos visiteurs, il va falloir utiliser le mode CMS de Wix. Le mode CMS de Wix s’utilise avec des pages qualifiées de dynamiques et des collections.

Les collections permettent d’enregistrer les informations régulièrement publiées dans un tableau de bord organisé en ligne et en colonne. Chaque ligne correspond à une publication donnée, publiée à une date donnée. Les colonnes permettent de spécifier un type de contenu : un paragraphe, une image, une date, etc. Dans le cadre de notre exemple de site sur des randonnées, nous pourrons avoir une collection nommée Nos sorties.

Les pages dynamiques sont des modèles de page qui permettent l’affichage des informations stockées dans une collection. Les pages dynamiques sont usuellement constituées de deux pages : la page « liste » qui affiche le titre de toutes les sorties de randonnée, et une page « détail » qui affiche tout le contenu d’une sortie qui aura été cliquée par un visiteur.

Il faudra indiquer à Wix quelle collection afficher dans quelle page dynamique. Wix s’occupe ensuite de la mise en page et de la publication automatique.

Voilà la stratégie que nous allons adopter :

1. Personnaliser l’en-tête

L’en-tête a été généré par Wix. Il ne contient que le logo du site et le menu de navigation principal.

L’en-tête est constitué d’une bande horizontale contenant trois colonnes. La première colonne ne contient rien, la deuxième contient le logo du site et la troisième le menu de navigation :

Nous allons ajouter le nom du site dans la première colonne.

Il est assez courant qu’il y ait un lien qui permette de revenir à la page d’accueil du site, sur le nom du site.

1. Prévisualiser les modifications

Au fur et à mesure de la création du site, nous l’avons prévisualisé en utilisant le bouton Aperçu de la barre d’outils horizontale, depuis le mode Editeur de site.

Par défaut, l’aperçu s’affiche avec une taille d’écran de type Ordinateur, c’est ce qui est sélectionné :

Cela vous permet de visualiser la mise en page et la mise en forme du site vu sur un smartphone.

2. Publier le site

Lorsque votre site est suffisamment avancé dans sa conception, vous pouvez juger qu’il est temps de le publier. À partir de ce moment-là, le site sera visible par les internautes.

Au survol du bouton, trois options s’affichent :