Rubriques & contenu des pages

Page 6 sur 27

Ajouter des rubriques

En cliquant sur le bouton Ajouter une rubrique ( ) un écran vous assiste et vous propose les différents choix suivants :

  • une Page web ( ) : lors de la création une page TOWeb vous propose pour démarrer une présentation de base dans laquelle vous pourrez sélectionner le nombre de paragraphes de départ que vous désirez, et indiquer si vous souhaitez également avoir une colonne à droite dans votre page avec des panneaux latéraux ( ). Si vous avez des images vous pouvez également les ajouter en cochant l'option prévue à cet effet et TOWeb les placera alors ensuite automatiquement dans votre page (1 image par paragraphe)
  • un Article (  ) c'est à dire un ensemble de pages ordonnées avec un système de navigation permettant de les consulter
  • un Album ( ) que vous pouvez directement débuter en ajoutant vos photos à sa liste initiale
  • un Catalogue de produits à vendre ( ) que vous pouvez démarrer soit en fournissant les photos de vos produits (1 photo par produit à créer) ou en important vos articles stockés dans un fichier au format XML ou CSV ou bien encore en le commençant par vous-même avec la création du tout premier article
  • une Collection d'objets ou de pages ( ) qui contiendra une liste d'objets avec une page d'index
  • un Groupe (  ) c'est à dire une page de couverture automatisée servant à présenter de manière concise plusieurs rubriques de votre site 
  • un Calendrier pour vous permettre de gérer vos événements (événements pouvant être liés à des rubriques de votre site)
  • une Page d'introduction de site (  ) vers laquelle tous les nouveaux visiteurs de votre site seront redirigés lorsqu'ils visiteront votre site pour la première fois
Une fois que vous avez sélectionné votre type de rubrique et ses options de démarrage, vous devez entrer le nom court qui identifie votre rubrique. Ce nom sera celui affiché par TOWeb dans la liste déroulantes des rubriques de votre site et sera également le texte du lien situé dans le menu permettant d'accéder à cette rubrique.

Ajouter des paragraphes

En cliquant sur le bouton Ajouter un paragraphe ( ) situé en bas d'une rubrique ou celui ( + ) affiché au survol d'un paragraphe, TOWeb vous propose alors de démarrer votre paragraphe en lui donnant un titre, un contenu de texte et un éventuel objet additionnel. Vous pouvez également préciser si vous désirez que votre paragraphe se termine par un bouton lien. Une fois ajouté, vous pouvez ensuite double-cliquer sur votre paragraphe pour modifier et mettre en forme son contenu en utilisant la barre d'outils d'édition classique (caractères gras, italique, couleurs des textes, alignement, liens, ...).
Pour disposer ensuite vos paragraphes en colonnes modifier simplement leur largeur et ils seront alors automatiquement alignés côtes à côte dans votre page. Et si vous avez besoin de centrer un paragraphe ajustez à la fois sa largeur et son retrait.
En effectuant un clic-droit sur votre paragraphe vous pourrez également déplacer votre paragraphe avant ou après sa position, dupliquer votre paragraphe pour en faire une copie dans la même rubrique ou dans une autre rubrique de votre site, ajouter à votre paragraphe un objet (comme une image, une vidéo ou un formulaire) ou supprimer votre paragraphe.
Pour plus d'informations consultez également comment :

A partir de la version 7 de TOWeb vous avez également la possibilité de pouvoir exporter & importer un paragraphe. La fonction "exporter" est accessible à partir du menu contextuel "Modifier" du paragraphe. La fonction "importer" quand à elle peut être utilisé via la fonction d'ajout d'un nouveau paragraphe ou nouveau panneau d'information. 
L'export et import de paragraphes peut s'avérer utile notamment dans les cas suivants :
  • si vous avez plusieurs sites web et souhaitez pouvoir transférer du contenu de l'un vers l'autre
  • si vous désirez copier/transférer un paragraphe vers un panneau d'information d'une barre latéral (ou inversement)
  • si vous désirez supprimer une page mais conserver quelques paragraphes dans le but de les réimporter ultérieurement
  • si vous désirez vous constituer une base de plusieurs "paragraphes types" de manière à aller plus vite lors de la réalisation de pages que vous avez l'habitude de faire (et cela sans pour autant devoir rechercher dans votre site le ou les paragraphes à dupliquer ni devoir forcement dupliquer toute une rubrique entière)

Ajouter des panneaux latéraux

En cliquant sur le bouton Ajouter un panneau latéral ( ) situé en bas d'une rubrique ou celui ( + ) affiché au survol d'un panneau latéral, TOWeb vous propose la création d'un panneau latéral c'est à dire un petit paragraphe qui sera placé dans une colonne latérale de votre page. Si votre page ne contient pas déjà une colonne latérale, celle-ci sera automatiquement créée par l'ajout du premier panneau. De la même manière, si vous n'avez plus qu'un seul panneau et que vous le supprimez, cette colonne latérale disparaitra de votre page.
Tout comme un paragraphe le contenu de votre panneau latéral pourra être modifié par un double-clic dessus et vous pourrez également accéder à l'aide d'un clic-droit dessus aux fonctions de suppression ou de rajout d'autres panneaux. En revanche contrairement aux paragraphes de votre rubrique, les panneaux latéraux seront tous disposés dans la même colonne de votre page et ne pourront donc pas être alignés les uns à côté les autres mais uniquement les uns en dessous des autres (leur largeur ne pourra pas être modifiée ni leur retrait).
L'utilisation de panneaux dans certaines pages peut être utile à l'affichage d'informations complémentaires à votre rubrique, pour mettre en valeur certains encarts (nouveautés, événements, etc), placer des listes de liens vers d'autres rubriques de votre site qui ne figurent pas nécessairement dans le menu principale de votre site, etc.

Ne pas afficher ou ne pas publier un paragraphe

Depuis l'étape  "Rubriques", lorsque vous sélectionnez un paragraphe d'une rubrique, vous avez la possibilité de modifier la propriété "Affichage" de votre paragraphe. 3 choix vous sont alors proposés :

  • Visible : votre paragraphe sera visible par tous, aussi bien les internautes que les moteurs de recherche internet.
  • Non publié : le paragraphe ne sera pas publié. Ce choix peut être très utile dans différentes situations, par exemple si avez un paragraphe relatif à des promotions ponctuelles ou autres événements ne survenant qu'un seule fois par an, le choix "non publié" vous permettra alors de ne pas rendre cette information publique dans votre page en dehors des périodes désirées. Vous conserverez alors le contenu de votre paragraphe sans avoir à le supprimer ni à le refaire lorsque vous voudrez de nouveau besoin de le réutiliser ultérieurement. Ce choix peut également vous permettre de préparer à l'avance un nouveau contenu dans un rubrique, tout en continuant de publier cette rubrique sans pour autant rendre certains paragraphes officiels tant qu'ils ne sont pas finalisés.
  • Caché : votre paragraphe ne sera pas affiché par les navigateurs web mais son contenu sera malgré tout présent dans le code source de votre page web et potentiellement utilisable aussi par des moteurs de recherche internet.
Lorsque vous choisissez soit "Non publié" soit "Caché", votre paragraphe apparaitra dans TOWeb avec un effet grisé pour vous rappeler qu'il ne sera pas visible par les internautes.

Aligner des paragraphes

Par défaut un paragraphe occupe la pleine largeur de page disponible et cette pleine largeur dans TOWeb correspond à 12 unités. Par conséquent, si vous désirez obtenir un paragraphe occupant une moitié de page il vous faudra fixer sa propriété "largeur" à 6. Et si ensuite vous désirez le centrer il vous faudra lui appliquer l'option "retrait" à 3 (car 3 + 6 + 3 = 12).
En modifiant la largeur de plusieurs paragraphes consécutifs vous pourrez alors les aligner. Le total des largeurs de vos paragraphes devant donc être de 12 unités pour remplir une ligne comme par exemple 3 paragraphes de largeur 4 (=12), 2 paragraphes de largeur 6 (=12), 4 paragraphes de largeur 3 (=12), 1 paragraphe de largeur 6 et 2 paragraphes de largeur 3 (=12), etc... Pour plus d'information reportez-vous également au tutoriel vidéo sur le "Positionnement des paragraphes" sur notre chaîne YouTube.

Avec ou sans espacement entre vos paragraphes

Par défaut vos paragraphes sont alignés avec un espacement afin de permettre une meilleure lecture de chaque colonne. Néanmoins, selon leur contenu et/ou leur mise en forme (notamment lors d'un changement de couleur de fond) et/ou présentation désirée, il peut être souhaitable de vouloir les afficher collés les uns au autres sans aucun espacement et cela grâce à l'option "Pas de marge". Le fonctionnement de cette option s'applique non seulement au paragraphe courant sélectionné mais également à tous les autres paragraphes situés avant et après, dès lors qu'ils ne sont pas en pleine largeur de page.

Paragraphes alignés avec espacement
Avec marge
Paragraphes alignés sans espacement
Sans marge

Si vous ne désirez pas la propagation de l'effet "pas de marge" mais seulement l'appliquer au seul paragraphe sélectionné, il vous faudra maintenir la touche CTRL enfoncée lors du clic sur cette option.
Remarque : le fait de mélanger des paragraphes avec et sans marge ne donnera pas des alignements corrects. Si vous désirez garder plusieurs paragraphes correctement juxtaposés sur une même ligne, ils devront tous être de même nature, c'est à dire soit tous avec marge, soit tous sans marge.

Ajouter un horodatage aux titres de vos paragraphes

Après avoir sélectionné un paragraphe en étape "Rubriques", vous avez la possibilité de cliquer sur l'icône date (  ) situé dans la section "Disposition du paragraphe". Uen fenêtre s'ouvre alors vous permettant de modifier la date et l'heure de votre paragraphe et d'activer ou non l'horodatage au niveau de son titre. Le titre du paragraphe ne doit pas être vide pour que la fonction horodatage puisse être utilisée.

La rubrique du blog de TOWeb est un exemple d'horodatage réalisé avec TOWeb qui utilise le style d'affichage compacté "Bubble" (affichant uniquement le jour et le mois avec des couleurs personnalisées).

La personnalisation des couleurs et du style de l'horodatage de votre site s'effectue depuis l'étape du "Thème" dans TOWeb. Pour accéder aux différents choix de personnalisation, vous devrez cliquer au niveau d'un titre de paragraphe puis ensuite activer l'onglet "Date" situé en dessous de l'arborescence de l'éditeur CSS. Vous pourrez alors choisir le style, la taille et les couleurs de l'horodatage qui seront appliqués à tous les titres des rubriques de votre site ayant l'horodatage activé.

Image de fond, Effets de Parallaxe et Pleine hauteur d'écran

En plus des styles globaux à votre thème ("Panneau", "Mise en valeur" et ceux allant de "Custom 1" à "Custom 5") que vous pouvez appliquer à n'importe quel paragraphe de n'importe quelle page de votre site (et que vous pouvez personnaliser au niveau de l'éditeur CSS de l'étape Thème) il existe aussi désormais depuis la version 7 de TOWeb, le style "Fond / Effet parallaxe" permettant d'appliquer non plus des styles globaux liés au thème mais des d'affichages différents et spécifiques à un paragraphe en particulier comme par exemple sa mise en pleine hauteur d'écran, lui ajouter des images et/ou couleurs de fond ainsi que des effets de transparence et de parallaxe.

Pleine hauteur

L'option pleine hauteur permet d'étendre l'affichage du contenu d'un paragraphe à toute la hauteur écran de l'appareil ou navigateur web utilisé. Le contenu se retrouvant alors ensuite centré au milieu de l'écran. La fonction de pleine hauteur est responsive c'est a dire qu'elle s'adaptera à la hauteur maximale disponible du smartphone, de la tablette ou navigateur web d'ordinateur utilisé. 
Cette fonction oblige souvent à ne devoir mettre que très peu d'information dans un paragraphe afin que tout son contenu puisse aussi loger et être vu sur les écrans réduits des smartphones. Si vous constatez que tout le contenu de votre paragraphe en pleine hauteur ne s'affiche que partiellement ou mal sur smartphones alors il vous faudra envisager d'appliquer un ou plusieurs des conseils ci-dessous:

  • essayer de réduire le contenu de votre paragraphe au strict minimum en vérifiant à chaque fois le résultat par des redimensionnements de votre navigateur web et/ou en utilisant les boutons de simulation d'affichage de smartphones & tablettes de TOWeb pour trouver le "meilleur compromis"
  • utiliser l'éditeur de thème de manière à réduire la taille de police de caractères specifiques aux smartphones que vous utiliser dans vos paragraphes et/ou trouver une taille un peu moins grosse satisfaisante à la fois sur smartphone et grands écrans
  • ajuster l'option permettant de désactiver l'affichage plein écran pour les smartphones
Remarque : si vous utilisez une rubrique ayant son 1er paragraphe en pleine hauteur écran et que cette rubrique utilise également un menu local alors un bouton permettant d'effectuent un défilement vers le bas apparaitra alors automatiquement en bas de ce 1er paragraphe.

Image & couleurs de fond

En sélectionnant "Couleur" au niveau du Fond vous avez la possibilité de spécifier une couleur de fond ou 2 couleurs si vous désirez avoir un dégradé de couleurs. Pour supprimer une couleur il vous suffit de sélectioner celle "Auto".

En sélectionnant "Image" de fond vous avez aurez non seulement l'image mais également la possibilité d'appliquer en plusdes couleurs  en jouant avec la transparence du parametre Opacité. Et vous pourrez éventuellement utiliser aussi un effet de parallaxe et celui amplifier selon vos goûts.

Selon l'image de fond utilisé vos textes peuvent ne pas être lisibles. Si tel est le cas essayer de cocher ou décocher l'option "Texte en noir". Et si cela ne suffit pas alors réduiser la valeur du paramètre Opacité.

Effet parallaxe

L'effet de parallaxe consiste à déplacer à des vitesses différentes certains éléments de votre page, notamment entre le fond d'écran (contenant une image ou un dégradé de couleurs) et le contenu situé en avant plan (textes, images, boutons, etc) lorsque l’utilisateur effectue un défilement de la page vers le bas ou vers le haut donnant ainsi une animation et une illusion de profondeur. L'effet parallaxe pouvant également être augmenter à l'aide de l'option "Amplifier" mais cette amplification ne fonctionne pas ancore actuellement avec tous tous les navigateurs web. 
Important : les effets parallaxe de sont pas supportés voir peuvent être incompatibles avec certains appareils tactiles (notamment ceux anciens) c'est pourquoi TOWeb vous permet de
désactiver les effets parallaxes sur les appareils mobiles et tactiles pour toutes les pages de votre site.

Pour plus d'informations consultez également comment :

Conseils sur l'interface utilisateur des rubriques

Dans l'étape "Rubriques" ainsi que dans l'éditeur simplifié du "Thème", un simple clic sur le titre les différentes sections vous permet alternativement d'en replier (  ) ou d'en déplier (  ) tout leur contenu. L'utilisation de ces fonctions de l'interface peut s'avérer utile notamment dans les cas suivants :

  • lorsque vous n'utilisez pas ou très peu certaines options de TOWeb et préférez donc les masquer,
  • si vous utilisez TOWeb sur un petit écran ou dans fenêtre de petite dimension afin d'éviter l'affichage d'une barre de défilement verticale,
  • lorsque vous ne travaillez que sur certains parties et/ou fonctions de votre site et souhaitez rester focaliser uniquement sur celle là.
Remarque: sur  les ordinateurs Mac, les symboles qui précédent les titres de section sont différents pour replier ( > ) et pour déplier ( + ).
Exemple au niveau des options d'une rubrique montrant certaines sections repliées et une seule dépliée (celle des optimisations du référencement de la rubrique) :
Interface TOWeb pour une rubrique
Exemple pour un paragraphe situé au niveau d'une fiche produit d'un catalogue où les sections de disposition et image du paragraphe ont été masquées afin de ne travailler que sur celle du Prix & Stock :
Interface TOWeb pour un produit
Exemple au niveau de l'éditeur simplifié du Thème où toutes les sections ont été repliées sauf celle du Logo :
Interface TOWeb éditeur simplifié du thème