sublimer-son-site-internet-sur-orson

Créer ma première page sur Orson.io


Support création de site web   >  Construire mon site  > Créer ma première page

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

Temps estimé : 15 minutes

Informations nécessaires : rien de particulier c'est un simple exercice de prise en main

Orson.io fonctionne sur les principes des jeux de construction. Des éléments (pré-assemblés ou sur mesure) que vous assemblez entre eux pour construire ce dont vous avez besoin.  A tout moment vous pouvez modifier l'assemblage, afin d'arriver à un résultat idéal qui respecte vos objectifs !

1) Ouvrir une page

  • Cliquez sur "Nouvelle page" pour faire une page test
  • Ou cliquez directement sur la vignette de la page que vous voulez modifier (et passez à l'étape 3)

NB : si vous êtes sur un modèle de site Onepage, vous ne pouvez pas créer de nouvelle page. Cliquez directement sur la vignette de la page existante pour modifier votre site, et passez à l'étape 3 !

créer un site mobile friendly

2) Sélectionner le modèle de référence

  • Donnez un nom à votre page. Ce nom vous servira à la retrouver ultérieurement et est uniquement visible par vous en interne.  Si vous laissez ce champ vide, vous ne pourrez pas valider ;)

Nous mettons à disposition plusieurs modèle de pages pré construites. Dans de nombreux cas vous pourrez utiliser directement utiliser ces modèles, mais chacun est bien sûr personnalisable à volonté !

  • Choisissez le modèle qui vous intéresse. Dans notre cas, pour faire une page test, partons sur le premier modèle de home page ;) 
  • Validez  en cliquant sur OK.

C'est parti !


Créer un site web simplement

3) Comprendre la structure d'une page sur Orson

Vous arrivez sur votre espace de travail qui se compose toujours de la même manière, quel que soit la template et la structure choisie !

Le haut de page (ou header) :

Nous l'avons entouré en jaune sur notre exemple. Il comporte généralement votre logo et votre menu. Il est présent à l'identique sur toutes les pages de votre site, c'est à dire que si vous le modifiez une fois, les changements s'appliqueront automatiquement sur toutes les pages ! 

Les blocs :

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

  • des blocs de présentation de l'entreprise 
  • des blocs de présentation de produits
  • des blocs de témoignages
  • etc !

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

Structure d'une page web : les blocs

Les modules :

Chaque bloc sur votre page contient des éléments appelés "modules",  par exemple un titre, du texte, des photos... Nous avons entouré en orange certains modules sur notre exemple.

Le bas de page (ou footer) :

Comme son nom l'indique, il est présent tout en bas de la page ! Nous l'avons entouré en jaune sur notre exemple (il peut avoir une présentation différente selon la template que vous avez choisie au démarrage, et n'est pas nécessairement noir). 

Tout comme le haut de page, il est présent à l'identique sur toutes les pages du site. C'est donc l'endroit idéal pour mettre vos mentions légales, et des liens vers vos réseaux sociaux...  vous pourrez bien sûr le personnaliser !

Structure d'une page web : les modules

Nous allons maintenant apprendre comment modifier vos blocs et vos modules pour personnaliser votre page !

4) Ajouter et modifier un bloc

  • Cliquez sur l'onglet Bloc en haut à droite de votre espace de travail 
  • Choisissez le type de bloc qui vous intéresse. Dans notre exemple, nous avons choisi un bloc Equipe, et sélectionné l'avant dernier :
Créer ma page web facilement avec des blocs

Cliquez sur le bloc choisi et glissez le dans votre page, entre deux blocs existants.

Des liserés bleu vous montrent où vous pouvez le déposer.  L'espace entre deux blocs devient bleu foncé quand vous pouvez y déposer le bloc : relâchez le avec votre souris.

Variante : si vous préférez, vous pouvez double cliquer sur le bloc choisi. Il va alors s'ajouter entre votre dernier bloc et votre bas de page.

Créer ma page web en 2 min avec les blocs

Voilà, vous avez ajouté votre bloc Equipe au sein de votre page ! 

Cliquez en haut à droite du bloc pour faire apparaître les options suivantes :

  • design du bloc : nous avons un tutoriel spécial pour apprendre à modifier les fonds de bloc
  • le bouton avec les 3 points : en cliquant dessus, vous accédez aux flèches pour monter ou descendre le bloc dans la page. Les 2 autres boutons permettent de sauvegarder ou dupliquer un bloc que vous venez de personnaliser et que vous voulez réutiliser.
  • supprimer un bloc : cliquez sur la croix rouge, le bloc disparaît
Personnaliser ma page web avec les blocs

5) Ajouter et modifier des modules 

  • Cliquez sur l'onglet Module en haut à droite de votre espace de travail 
  • La liste des modules disponibles apparaît : vous pouvez choisir d'en cacher ou d'en visualiser certains en cliquant sur gérer mes modules.
  • Choisissez le type de module qui vous intéresse. Dans notre exemple, nous avons choisi un module Texte.
Ajouter des élément à mon site avec les modules
  • Cliquez sur le module et glissez le dans votre bloc.
  • Un trait bleu apparait lorsque vous pouvez le déposer : relâchez le avec votre souris.
Ajouter mes textes dans mon site web
  • Pour modifier le module que vous venez d'ajouter, cliquez dessus, puis cliquez sur le stylo qui apparait à sa droite :
Personnaliser le contenu de ma page web

NB : si vous modifiez un module texte, une fenêtre d'édition de texte va s'ouvrir pour vous permettre de taper votre texte. Si vous voulez modifier la police et la couleur des textes, rendez-vous dans l'espace "Thème" de votre site et suivez notre tutoriel sur le design.

6) Redimensionner vos modules et créer de nouvelles colonnes avec le curseur

Lorsque vous cliquez sur un module, un curseur bleu apparait à la droite de celui-ci. 

  • Faites glisser ce curseur pour modifier la taille de votre module.

Deux cas de figure :

  • Si aucun module n'est présent à côté : un emplacement vide apparaît dans la colonne que vous venez de créer. Vous allez pouvoir, si vous le voulez, ajouter un module dans cet emplacement vide.
  • Un module est déjà présent à côté : il va s'ajuster automatiquement à la taille de l'élément que vous avez déplacé.

Pour aller plus loin...

Pour en savoir plus sur comment structurer vos blocs, découvrez notre tutoriel sur les grilles !

Contacter Orson.io via le livechat et par téléphone

Contactez nous sur le live chat ou par téléphone pour plus d'explications,

nos équipes feront le maximum pour se rendre disponibles

Articles liés : plus de conseils pour créer un site internet efficace

Design de mon site internet

Comment modifier le design de mon site internet sur le logiciel Orson.io? Découvrez les étapes pas à pas en tutoriel pour créer un site internet beau et design.

Images sur mon site web

Comment intégrer des images sur votre site internet ? Vous allez pouvoir glisser et déposer vos images depuis votre ordinateur et trouver d'autres images gratuites à partir des banques d'images libres de droit.

Utiliser les grilles

Comment créer une structure de page sur mesure, avec plusieurs colonnes ? C'est possible grâce aux grilles qui se redimensionnement comme vous le souhaitez sur votre page.