Topics & Page content

Page 6 of 27

Add a new topic

By clicking on the Add a new topic button ( ) you can add different types of topics to your web site :

  • web pages ( ): when creating a page TOWeb proposes to start with a basic presentation in which you can select the number of paragraph to start with as well as the number of panels in the sidebar. If you have images you can add them by checking the "use picture" option and they will be automatically added (1 picture per paragraph)
  • Articles (  ) : sets of pages with a system of navigation links between them
  • Albums ( ) that you can directly start adding them to a list
  • Catalogs of products for sale ( ) that you can start either by providing a list of pictures (1 picture = 1 product) or from an XML or CSV products database or just from scratch
  • Collection of web pages or items ( ) that will contain a navigation bar and page indexes to navigate among your pages or items
  • Groups (  ) : automated front pages containing a brief description and links to introduce several topics
  • Calendars to manage your events (events that can be linked to your topics)
  • Site introduction/agreement page (  ) : a page where all new visitors will be redirected to when accessing your site for the first time

To create a new topic you need to enter the short name that will identify your topic (name displayed in your list of topics) and will be the text link used in your website menu to access your topic.

Add a paragraph

Use the Add a paragraph button ( ) from either the top left toolbar or using a right-click on your page to display the context menu. TOWeb will propose you to start your paragraph with a title, a text a additional object if needed and if you want to end your paragraph with a link button. Once added just make a double-click on it to edit and modify its content using the classic editor toolbar buttons (bold, italic, text colors, bullets, text alignment, ...).
If you want to display paragraphs in columns just change adjust their width and they automatically be displayed side by side (if your screen width is large enough otherwise they will be displayed to you as they will appears in mobile devices). And you want to center a paragraph change both its width and its offset.
With a right-click on your paragraph you may also move your paragraph before / after the other ones, duplicate it inside your topic (or another topic), add or replace an object into it (a form, a picture, a video, ...) or delete it.

For more information see also how to :

Starting from version 7 of TOWeb, you also have the possibility to export & import a paragraph. The "export" function is accessible from the "Edit" contextual menu of a paragraph. And the function "import" can be used when adding a new paragraph or new side panel.
The export and import of paragraphs can be useful especially in the following cases:
  • if you have multiple websites and want to be able to transfer content from one to the other
  • if you want to copy / transfer a paragraph to a side panel (or vice versa)
  • if you want to delete a page but keep aside a few paragraphs in order to reimport them later
  • if you want to build a base of several paragraphs to go faster when creating pages by reusing classic things you usually do (and this without having to search in your site the paragraph(s) to duplicate neither to necessarily have to duplicate a whole topic)

Add a sidebar panel

Use the Add a sidebar panel button ( ) from either the top left toolbar or using a right-click on an existing panel to display the context menu. A panel is a small paragraph placed inside a sidebar of your page behave like a paragraph except that you can not adjust its width nor aligned them side by side (all panels are displayed in the same column)

As a paragraph you can modify the content of a panel by double-clicking on it and from a right-click you can access to functions such as delete or add another panel to your sidebar.

See also how to :

Manage paragraphs as "Hidden" or "Not published"

From the "Topics" step, when you select a paragraph in a topic, you have the possibility to change the property "Display" of your paragraph. Three choices are then offered:

  • Visible : your paragraph will be visible for all users and Internet search engines.
  • Not published : paragraph will not be published. This choice can be very useful in different situations, for example if have a paragraph on one-off promotions or other events that happen only once a year. The choice of a paragraph "not published" can be used then if you do not want to make it public now, this without having to delete your paragraph and recreate it later on when needed. And this choice may also help you to prepare some new content inside existing topics of your site and continue to publish your topics without paragraphs not finalized yet.
  • Hidden : your paragraph will not be displayed by web browsers but its content will still be present accessible and visible in the source code of your web page and also potentially usable by Internet search engines.

When you choose either "Not published" or "Hidden", your paragraph appears with a shaded effect in TOWeb to remind you that it will not be seen by your visitors.

Paragraph layout

By default a paragraph occupies the full page width available and this full width in TOWeb is 12 units. Therefore, if you want to obtain a paragraph occupying half a page you will have to set its property "width" to 6. And if you want to center it you will have to apply its "Offset" to 3 (because 3+6+3=12).
Furthermore, by reducing the width of several consecutive paragraphs, you can align them together. The total width of your paragraphs must therefore be 12 units to fill a complete line, like for instance : 3 paragraphs of width 4 (= 12), 2 paragraphs of width 6 (= 12), 4 paragraphs of width 3 (= 12), 1 paragraph of width 6 and 2 paragraphs of width 3 (= 12), etc ... For more information please watch the "Paragraph layout" video tutorial on our YouTube channel.

With or without spacing between your paragraphs
By default your paragraphs are aligned with a spacing for better reading of each column. Nevertheless, depending on their content and/or their formatting (especially if you have set different background colors) and/or presentation desired, it may be desirable to display them next to each other without any spacing thanks to the option "No margin". Using this option not only applies no margin to the selected current paragraph but also do the same to all other paragraphs before and after it, as long as they are not in full page width.

Aligned paragraphs with spacing
With margin
Aligned paragraphs with no spacing
Without margin

If you do not want to propagate the effect "no margin" but only apply it to the selected paragraph, you will have to hold down the CTRL key when clicking on this option.
Note: Mixing paragraphs with and without margins will not give correct alignments. If you want to keep several paragraphs correctly juxtaposed on the same line, they must all the same, that is to say either all with margin, or all without margin.

Timestamping of paragraphs

After selecting a paragraph in step "Topics", you can click on the icon (  ) "Date of paragraph" located in the section "Paragraph Layout" of the left side panel of TOWeb. You will then have the possibility to change the date and time of your paragraph but also to enable the display of a timestamp. The title of the paragraph must not be empty for the timestamp to be applied.
The blog of TOWeb is an example of page using a datestamp (created with TOWeb) that use a compacted display style called "Bubble" (displaying only the day and month with custom colors).
The customization of the colors and styles of the datestamp of your site is done from the step "Theme". To access its different options of customization, you need to click first on a paragraph title, and then activate the tab "Date" located below the treeview of the CSS editor. From there, you can select the styles, the size and the colors that will be applied to all the topics' title of your site that have a datestamp activated.

See also how to :

Background Image, Parallax Effects and Full Screen Height

In addition to the global styles of your theme ("Default", "Panel", "Highlight" and the 5 from "Custom 1" to "Custom 5") that you can apply and reuse for any paragraph of any page of your site (and that need to be customized from the CSS editor of the TOWeb Theme's step) there is a the "Background / Parallax"  style that no longer uses global styles related to theme but has specific display possibilities applicable to make a paragraph different with full screen height, colors & background as well as transparency and parallax effects.

Full height

The full height option extends the display of the content of a paragraph to the full screen height of the device or web browser used. The content is then centered in the middle of the screen. The full height function is responsive meaning thats it will fit the maximum available height of the smartphone, tablet or computer web browser used even when resized or switched to landscape/portrait view.

This feature often requires that you put only very few information in a paragraph so that all its content can also be seen on the reduced screens of smartphones. If you notice that all the content of your paragraph in full height is only partially or badly displayed on smartphones then you will have to consider applying one or more of the following tips :

  • try to reduce the content of your paragraph to the minimum and check the result every after every changes by resizing your web browser and/or using the TOWeb smartphones & tablets display simulation buttons in order to find the "best compromise"
  • use the theme editor to reduce the font size specific to smartphones in the titles/texts of your paragraphs and/or find a size a little smaller that will satisfactory for both smartphones and large screens
  • adjust the option to disable the full screen display for smartphones

Note: If you use a topic with its 1st paragraph at full screen height and this topic also uses a local menu, then a scroll down button will automatically appear at the bottom of this 1st paragraph.

Image & background colors

By selecting "Color" for the background you have the possibility to specify 1 color or 2 colors depending on if you want to have a color gradient or not. To remove a color simply select the "Auto" choice from the color picker.
By selecting "Image" for the background you have not only the image but in adding to that you can also apply colors that will appears by playing with the Opacity parameter by transparency. Then you will eventually be able to use a parallax effect and "magnify" it according to your tastes.
Depending on the background image used, your texts may not always be fully readable. If so, try checking or unchecking the "Black text" option. And if that is not enough then reduce the value of the Opacity parameter.

Parallax effect

The parallax is effect occurring during a scroll down or scroll up of a page that consist in moving different elements of your page at different speed, especially between the wallpaper/background image and the content in the foreground (texts, images, buttons, ...), giving an animation and an illusion of depth. The effect can also be amplified by using the "Magnify" option, but not all web current browsers are supporting it and ignore it.
Important: parallax effects are not always supported or can be incompatible behavior with some touch devices (especially old smartphones) that is why TOWeb allows you to disable parallax effects on mobile touch devices.

User interface tips when editing Topics

In the “Topics” step as weel as in the Smart editor of "Theme", a simple click on the title of the different sections allows you to alternatively fold (  )  or unfold (  ) their content. The use of these functions can be useful for instance in the following cases:

  • when you do not use very often some options and therefore prefer to hide them,
  • if you use TOWeb on a small screen or in a small window and want  to avoid the display of a vertical scroll bar,
  • when you only work or rework specific parts of your site and want to focus only on these ones.
Note: On Mac computers, symbols that precede sections are different for folding ( ) and unfolding ( + ).
Example showing some control sections of a topic which as folded and one unfolded (search engine optimization) : 
TOWeb UI for a topic
Example of a paragraph located in product catalog where the sections of its layout and image have been hidden in order to work only on that of the Price & Stock:
TOWeb UI for a product

Example of the Theme smart editor where all the sections have been folded except for the Logo:

TOWeb Theme smart editor