Rubriques & contenu des pages

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

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 occupe la plein hauteur de page, contiennent une vidéo en arrière plan ou image/couleur de fond, se termine par un bouton lien ou contienne un objet parmi les nombreux proposé par TOWeb (formulaire, carte, graphique, fiche, évaluation, chiffre-clé, note, etc). 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 :

• Ajouter des photos, widgets et objets multimédia
• Ajouter des liens & des boutons
• Ajouter un formulaire

• 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)

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 disparaîtra 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.

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. Plusieurs 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.

•  Affichage avec effet d'apparition (nécessite une version 7.12 ou supérieure) : un effet d'animation (slide, zoom, flip, fade...) affichera une brève animation de votre paragraphe lors de sa première apparition puis son affichage normal ensuite. 
  
  
  • Par défaut l'effet d'animation d'un paragraphe ne s'effectue qu'une seule fois: lors d'une navigation vers le bas et du premier affichage de votre paragraphe (pour revoir l'animation il faudra donc recharger de nouveau la page). Si vous préférez que toutes les animations des paragraphes d'une rubrique s'affichent non pas une seule fois mais systématiquement à chaque nouveau défilement de page alors il vous faudra décocher l'option "Afficher les animations des paragraphes une seule fois" située au niveau des options de votre rubrique.
  • Si vous utilisez des effets d'animation de paragraphes sur votre site alors il est souhaitable de les désactiver pour tous les utilisateurs de smartphones.
  • Les effets d'apparition des paragraphes peuvent apporter plus de dynamisme et de modernité à vos pages mais il est conseillé d'utiliser ces effets avec parcimonie dans votre site afin que que les visiteurs ne soient pas trop déstabilisé par trop d'animations au détriment de la lecture du contenu.

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.

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.

Si vous désirez que des paragraphes de votre page soient par défaut repliés (c'est à dire avec tout leur contenu masqué) et puissent se déplier par simple clic sur leur titre, il vous faudra activer l'option Autoriser le pliage/dépliage de paragraphes depuis l'étape "Rubriques" (une version 7.14 ou supérieure de TOWeb est nécessaire).

Depuis l'étape "Thème", après avoir cliqué sur le titre d'un paragraphe pliable, vous avez la possibilité de personnaliser le style de l'icone de pliage/dépliage utilisé sur votre site (choix du jeu d'icônes, de sa couleur et de sa taille).

Enfin si vous désirez démarrer une nouvelle rubrique contenant déjà un ou plusieurs paragraphes pliables alors lors de l'ajout de votre rubrique choisissez le type "Page" puis sélectionnez le modèle FAQ (Foire Aux Questions) particulièrement adapté à ce genre d'utilisation.

La possibilité de pliage/dépliage au niveau du titre d'un paragraphe:

• ne peut s'appliquer que lorsque le titre n'est pas vide
• ne peut pas être utilisée en même temps que l'affichage d'un horodatage (ce dernier étant prioritaire).

Après avoir sélectionné un paragraphe en étape "Rubriques", vous avez la possibilité de cliquer sur l'icône date (  ) située dans la section "Disposition du paragraphe". Une 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 de l'ancien 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é.

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 spécifiques 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

Vidéo en arrière-plan

En sélectionnant "Vidéo" au niveau du Fond (disponible à partir de la version 8) vous avez la possibilité d'ajouter une vidéo qui sera jouée en arrière-plan derrière le contenu de votre paragraphe (son texte, ses liens/boutons, son objet additionnel, etc). En mode conception dans TOWeb seule une image de votre vidéo sera affichée en fond avec une icone vidéo dans le coin pour vous le rappeler. Pour voir le résultat complet avec vidéo en fond vous pouvez demander un aperçu externe par la touche F12 et/ou publier votre site pour le consulter en ligne. Les vidéos peuvent être au format MP4, OGV ou WEBM mais le format MP4 est celui à privilégier car reconnu par tous les navigateurs web (y compris MS IE11) et tous les systèmes (y compris iOS). Des vidéos MP4 gratuites et réutilisables en arrière-plan pour vos sites peuvent être téléchargées sur de multiples sites web comme notamment https://www.pexels.com/videos/ et https://coverr.co/.

L'utilisation d'une vidéo en arrière-plan vous donne également la possibilité de choisir l'image représentant votre vidéo (par défaut c'est la première image de votre vidéo qui est sera celle choisie). Cette image sera celle affichée si jamais le navigateur web de certains de vos internautes ne supportent pas ou bloquent les vidéos en arrière-plan (notamment sur smartphones pour lesquels une option de désactivation est également prévue à cet effet dans "Options > Smartphone").

Selon la vidéo de fond utilisée, vos textes pourront ne plus être lisibles. Si tel est le cas essayez de cocher ou décocher l'option "Texte en noir" et/ou de placer des images ou des boutons.

Enfin lors de la création d'une nouvelle rubrique "Page" de type "Parallax", TOWeb vous proposera également le choix de démarrer votre rubrique avec une vidéo de votre choix. De plus, une option "vidéo en arrière-plan" permettant de tester et/ou de démarrer rapidement avec une vidéo par défaut vous sera également proposée
- lors de l'ajout d'une nouvelle rubrique "Page" de type "Colonnes"
- ainsi que lors de l'ajout d'un nouveau paragraphe dans une de vos rubriques.

Note: afin de ne pas retarder l'affichage de votre page et/ou de pénaliser les "data" de certains internautes par le chargement de vos vidéos (ceux mobiles et/ou ayant une connexion internet faible débit), il est conseillé d'utiliser des vidéos de petites tailles (c'est à dire inférieure à 10Mo) et d'éviter d'en utiliser plusieurs sur une même page.

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électionner celle "Auto".

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

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

Paragraphe à coté de l'image d'arrière-plan

A partir d'une version 9.0 ou supérieure de TOWeb, il est également possible de choisir le positionnement du contenu de chaque paragraphe par rapport à son image de fond en utilisant le bouton "Position" indiqué en vert comme "Nouveau!" dans la capture écran ci-dessous où l'on voit également un exemple de résultat possible avec 2 paragraphes.

En plus des paramètres de positionnement (à gauche ou à droite, sans ou avec marges et avec une largeur de votre choix) vous pourrez également choisir le niveau de transparence ainsi que la couleur de fond afin de permettre à vos textes de rester les plus lisibles possible comme dans l'exemple ci-dessus.

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 encore 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 :

• Ajouter des photos, widgets et objets multimédia
• Ajouter des liens & des boutons

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à.

En mode construction d'une page dans TOWeb, vous disposez d'un bouton "Enregistrer en PDF" situé en fin de son contenu (juste avant le pied page et à coté du bouton "Ajouter un paragraphe") qui vous permet de convertir votre page au format PDF. Vous devrez tout d'abord saisir le nom et l'emplacement de sauvegarde de votre fichier PDF puis sélectionner vos préférences notamment celle d'un affichage des pages en mode portrait ou paysage ou d'utilisation d'une page de garde. 

A noter que si vous utilisez une autre page de votre site comme page de garde pour votre fichier PDF et que celle-ci est uniquement utilisé à cette fin, alors devrez activer son option "En construction" afin qu'elle ne soit pas publié et n'apparaissent nul par dans votre site.   

Par défaut tous les paragraphes de votre rubriques figurent dans le fichier PDF exporté. Mais si vous désirez que certains n'y figurent pas, cela reste possible en utilisant le petit bouton imprimante situé parmi les propriétés "Disposition du paragraphe".

Remarques :

• le site lauyan.com est réalisé avec TOWeb et sa documentation en ligne téléchargeable au format PDF a également été créée en utilisant cette fonction
• l'export de catalogues en PDF est supporté à partir de la version 11 de TOWeb