Création de site internetCentre d'aide > Créer ma première page

Structure de site : des blocs et des modules pour créer une page

Temps estimé : 8 minutes

Avec Orson.io, vous construisez véritablement votre site internet.

Vous disposez de plusieurs éléments, préalablement assemblés ou crées sur-mesure, qu’il vous suffit d’accorder pour construire votre interface.

Vous pouvez modifier cette construction à tout moment afin de parvenir à un résultat idéal, et en accord avec vos objectifs.

Pour apprendre à modifier la structure de votre site facilement, suivez notre guide :

Étape 1 : Ouvrir une page

Deux options s’offrent à vous :

  • Si vous souhaitez
  • modifier une page déjà existante, cliquez directement sur sa vignette et passez directement à la troisième étape.
  • Si vous souhaitez seulement vous entraîner, cliquez sur “
  • Nouvelle page” pour créer une page test. 

Vous devez donner un nom à cette page afin de la retrouver facilement et pouvoir la valider par la suite. Cette page test ne sera visible que par vous.

Notez que si vous possédez un site onepage, il est impossible de créer une nouvelle page. Cliquez donc sur la vignette de votre unique page, et nous vous donnons rendez-vous à l’étape 3.


Étape 2 : Sélectionner le modèle de référence

Vous trouverez plusieurs modèles de pages pré-construites pour vous guider.

Vous avez le choix de conserver ces modèles tels quels, ou de les personnaliser selon vos envies !

Commencez par choisir le modèle qui vous plaît. Dans notre exemple, nous avons sélectionné le premier modèle de Home Page.

Une fois votre choix effectué, cliquez sur “Ok”.

Étape 3 : Comprendre la structure d'une page sur Orson

Vous arrivez sur votre espace de travail. Il se compose toujours de la même manière, quel que soit le modèle choisi.

Le haut de page (ou header) :

Le haut de page est entouré en jaune sur l’exemple.

Il est généralement constitué de votre logo et de votre menu. Il est présent à l'identique sur toutes les pages de votre site. Donc, si vous modifier votre header, les changements s’appliqueront automatiquement sur toutes vos pages. 

Les blocs :

En dessous du haut de page se trouvent plusieurs blocs : ils forment le contenu de votre page. Les blocs sont des éléments pré-construits par nos équipes pour répondre aux besoins de 90% des sites sur le marché.

Parmi ces blocs, vous trouverez :

  • des blocs de présentation de votre entreprise,  
  • des blocs de présentation de vos produits,
  • des blocs de témoignages...

Lorsque vous cliquez dans un bloc, un liseré bleu vous indique sa délimitation.

Les modules :

Les blocs sont constitués d’élément appelés modules.

Parmi ces modules, vous trouverez le titre, les zones de texte, ou encore les images.

Ces éléments sont signalés en orange sur l’exemple.


Le bas de page (ou footer) :

Comme son nom l'indique, il est présent tout en bas de la page ! Il est encadré en vert.

L’apparence de votre footer change en fonction du modèle que vous avez sélectionné. Tout comme l’ensemble de vos éléments, il est personnalisable à volonté.

Tout comme le header, le pied de page est présent sur toutes vos pages. Il est l’endroit idéal pour indiquer vos mentions légales, vos conditions générales ainsi que vos réseaux sociaux.

Étape 4 : Ajouter un bloc

Commencez par cliquer sur l’onglet Bloc situé en haut à droite de votre espace de travail.

Vous accédez aux différents

types de blocs disponibles. Sélectionnez celui qui vous intéresse.

Dans notre exemple, nous avons fait le choix d’un bloc “Équipe”, et sélectionné l’avant-dernier de la liste.

Pour basculer le bloc choisi vers votre page, vous devez maintenir votre clic sur l’élément et le faire glisser.

Des liserés bleu vous montrent où vous pouvez le déposer. L'espace entre deux blocs devient bleu foncé lorsque vous pouvez y déposer le bloc. Une fois l’emplacement choisi, relâchez l’élément avec votre souris.

À noter : Vous pouvez également double-cliquer sur le bloc que vous avez sélectionné pour le placer sur votre page. Il viendra s’ajouter, par défaut, entre votre dernier bloc et votre bas de page.

Votre bloc est ajouté !

Étape 5 : Modifier un bloc

Vous voyez apparaître un bouton gris en haut à droite du bloc. Cliquez dessus, puis cliquez encore sur les trois points afin de faire apparaître les options suivantes :

  • Design du bloc : vous pouvez modifier la couleur du bloc, ainsi que sa photo de fond.

Pour aller plus loin, vous pouvez consulter notre tutoriel afin d’apprendre à modifier les fonds d’un bloc.

  • Les flèches : elles vous permettent de déplacer le bloc en haut ou en bas sur votre page.
  • Le bouton de duplication d’un bloc
  • Le bouton de sauvegarde d’un bloc
  • Le bouton de suppression d’un bloc représenté par une croix rouge.


Étape 6 : Ajouter et modifier des modules

Une fois votre bloc mis en place, vous pouvez en modifier les modules. Pour cela, commencez par vous rendre dans l’onglet Module, en haut à droite de votre espace de travail.

Vous voyez apparaître une liste de modules. Choisissez le type de module qui vous intéresse.

Dans notre exemple, nous avons sélectionné le module Texte.

En cliquant sur “Gérer mes modules”, vous pouvez choisir d’en cacher ou d’en visualiser certains.

Tout comme pour les blocs, vous pouvez insérer les différents modules en faisant glisser l’élément. Vous pouvez le relâcher lorsqu’un trait bleu apparaît.

Pour modifier votre module, cliquez simplement dessus. Une barre noire composée de différents boutons apparaît :

  • La poignée à gauche vous permet de déplacer le module sur la page.
  • Les boutons centraux vous permettent de monter ou descendre le module.
  • La croix rouge vous permet de supprimer le module.

Dans le cas de notre module texte, il suffit de cliquer sur le texte par défaut pour voir un menu apparaître. Celui-ci vous permet de modifier le formatage de votre texte, sa taille, ainsi que sa couleur.

Vous pouvez supprimer un effet en cliquant sur la gomme, située à droite.

💡A noter : les couleurs et les typographies proposées sont celle de votre Thème. Cela vous permet de conserver la cohérence visuelle de votre site. Vous pouvez modifier ces paramètres en vous rendant l’espace Thème de votre site.

Vous pouvez également modifier la taille de votre module en faisant glisser la barre vers la gauche ou la droite. Si d’autres modules sont déjà présents dans votre bloc, le nouveau module adaptera automatiquement sa taille.

Grâce au système de construction en glisser-déposer, vous pouvez facilement modifier la structure de votre site !

Envie d'apprendre ? Pour la suite c'est par ici 👇

Insérer un bouton cliquable d'e-mail

Intégrer des mentions légales à son site internet

Personnalisez votre compte et votre espace personnel Orson