Writing on the page and adding blocks

Writing directly

Click in a text and type: that’s all. When you select a passage, a small bar appears to make it bold, italic, strike it through, add a link, and a ✨ button to touch it up with AI. In the right-hand panel, the Block tab also offers headings, lists, quotes and alignment.

In this bar, the Text style list changes the paragraph where the cursor is: Text, Heading 1 to 4, Eyebrow (a short line above a heading) or Lead (a larger introduction paragraph). Each choice is shown as it will appear.

The link picker offers a page, a section, an email address or another site, and also a blog post, a product or a shop collection (Post, Product and Collection tabs). The link follows the post in every language of the site, and is removed cleanly if the post is unpublished.

In the External tab, an address on your own site that starts with “/” (for example /boutique/ma-collection/) is accepted: it is put in the right language when the site is published.

Highlighting words in a heading

In a large heading (Heading 1, Heading 2, or the title of a Hero block), select one or two words and click Italic: they take on the accent of your site’s style. Depending on the style, this is another colour, an accent font, sometimes a gradient, and the words are not always slanted.

This is the right way to colour a word: the accent follows the style if you change it, adapts by itself to light and dark mode, and stays readable. A colour picked by hand would do none of that.

Adding a block with the “/” key

1. Place the cursor on an empty line.
2. Type /: the command menu opens, organised by category (Section, Text, Media, Content, Action).
3. Type a few letters to filter (“gal” for Gallery), then confirm.

You can also click Insert an object… in the Block tab of the right-hand panel.

The main blocks

• Text and layout: headings, lists, quote, Callout, Columns (2 to 4 areas side by side), Divider, Spacer, Table, Table of contents.
• Media: Image, Gallery, Media (video, audio, or YouTube, Vimeo, SoundCloud, Spotify content…), Before / after, Embed (a webcam, a calendar, a review widget… by its address or its HTML code).
• Presenting your business: Hero (banner with heading and buttons), Features, Card grid, Team, Testimonials, Key figures, Timeline, Spec sheet, Scroll story, Scrolling ticker, Logo cloud.
• Pricing: Pricing plans (cards for each package, with a Compare-at price and a Note below the price if needed) and Price list (a list of services and prices by category, like a restaurant menu).
• Interacting: CTA button, Form, FAQ, Map, Social networks, Newsletter, Booking, Comments / Reviews.
• Highlighting: shop Products and Blog posts.

The Image block offers five sizes: XS (150 px at most, for a logo or a badge), S, M, L and 100%.

Blog posts and documentation articles offer the same blocks as pages, with the same gestures. The Comments / Reviews block, however, is only offered in blog posts.

Hero and Team links

In a Hero block, click the block: the right panel sets the text and the destination of each button, with the usual link picker (a page, a section, an email address, another site…).

In a Team block, each member has a Member page field: their photo and name then lead to their own page, a section or another site.

The Photo size setting of the Team block goes from S to XL. A member without a photo is shown by their initials, which follow their name. Choose None for a committee or a contact list shown with names and roles only, without photos or initials.

The Map block

The Map block places a map at the address of your choice. Its Provider is OpenStreetMap or Google Maps. With Google Maps, Map type chooses between Map and Satellite (the aerial view, with street names): these are the two views Google offers without a key.

The card grid

Click a Card grid block: the right-hand panel lists its cards. Expand a card to edit its title, text, meta, price and button label; a card you add can therefore get a button. The Card link field chooses where it leads. You can also click a card’s text directly on the page.

A card’s link is chosen like any other TOWeb link: a page of the site, a post, a product, a shop collection, a file or an external address. The Text alignment setting centres the text of the cards.

When there are fewer cards than columns, a hint under Columns tells you how many cards to add to fill the row.

The Pricing plans block

Click a Pricing plans block: the right-hand panel lists its plans. The Button setting places each plan’s button Under the price, at the same height on every card, so that it stays visible without scrolling, or At the bottom of the card.

In a plan’s Features, each point can carry a link: click the Link on this point icon, then choose a page of the site, an anchor or an external address. With a Link text (“See the demo”, for example), it appears as a small link after the text of the point; without link text, the whole point becomes the link.

Editing, moving, deleting

Click a block: its settings appear in the Block tab of the right-hand panel. Drag the handle to the left of the block to move it; clicking it opens the menu Move up, Move down, Duplicate, Delete.

Headings and paragraphs also have their ⋮⋮ handle, which appears on hover: drag it to move the text elsewhere on the page, or click it to open the same menu. A Columns block has its own when you hover over its text. The text of a column, a table or a callout has none: the block around it is what moves.

To undo a Columns block, click it, then click Remove columns in its settings: the content of the columns is kept, one below the other, at full width, and an empty column disappears.

A page’s table of contents

The Table of contents block lists the headings of a page, a blog post or a documentation article, with a link to each one. Type / then “table of contents”, “contents” or “outline”, or add it from the Add tab.

It builds itself from the headings that follow it: set Headings listed to H2 and H3 or H2 only. It is refreshed at every publication and appears in the language of each page, with the same links in every language. Left empty, its Title becomes “Table of contents”, translated too. On phones it stays collapsed until tapped.

In the editor, its card shows the current headings. As long as no heading follows it, it stays empty and is not shown on the site.

The contact form

Type / then choose Form. Click the block: its settings appear in the Block tab of the right panel.

To split the form into groups (“Your details”, “Your project”), add a field of type Heading: fixed text that asks the visitor nothing.

• Fields: add them one by one (text, email, phone, text area, drop-down list, single choice, checkbox, date, file), and say whether they are required.
• Label link: on a checkbox, the label leads to a document, such as your terms and conditions. It opens in a new tab, without losing the form in progress.
• Button text: what the send button shows.
• After sending: Show a message (the Confirmation message replaces the form) or Go to a page: once the message is sent, the visitor lands on the chosen page, in their language.
• Email subject: specific to each form, it is used as the subject of the messages you receive when the visitor has not entered one, so you can sort them at a glance (“Quote”, “Registration”…).

In a Dropdown or Radio field, the Move option up and Move option down arrows change the order of the options, with the mouse or the keyboard.

Messages arrive at the form inbox address, set once for the whole site in Settings › i-Services. To send a form to another address, fill in its Recipient email in the block settings.

On the published site, under an e-mail field (contact form, newsletter, order, booking), a typo in the address of a major webmail (gmail.vom, hotmial.com…) is pointed out to the visitor with “Did you mean …?”: one click fixes it. The address as typed is always still accepted.

Protecting your forms against spam

In Settings › i-Services, the Anti-spam Protection section protects contact forms, blog comments and product reviews. Choose the CAPTCHA Provider (Cloudflare Turnstile or Google reCAPTCHA), then paste the Site Key and the Secret Key that this provider gave you.

When you publish, TOWeb checks with Google or Cloudflare that the secret key is accepted: a rejected key would let spam through without a word. The Publish screen tells you, along with where to correct the key. It also flags a half-configured protection, when the site key or the secret key is missing. Without a connection, publishing goes ahead without waiting.

On the published site, the site’s server checks every submission. With reCAPTCHA v3, a submission that Google judges automated is rejected; if Google does not answer, the submission is accepted, so that no message from your customers is lost. With Turnstile, a validation obtained on another site is rejected.

On a password-protected page, a form shows no captcha: only visitors who have entered the password can send it.

The site also limits mass sending, even when a robot sends all its requests at once. The acknowledgement email sent to the visitor only copies their message if the site has spam protection: without it, a robot could use your site to send emails to third parties.

Subscribing to the newsletter

With the Newsletter block, a visitor who enters their address receives a confirmation email. Its link opens a page of your site with the Confirm my subscription button: only this button subscribes the address. An email antivirus that opens the links of incoming emails therefore cannot confirm a subscription in the person’s place.

Embedding an external service

A webcam, an online calendar, a review widget, a weather forecast, a form from another service: the Embed block places them anywhere in your pages.

1. On an empty line, type / then Embed.
2. In the right panel, choose what you embed: An address (the service’s page, shown in a frame whose height you set) or HTML code (the code the service gives you, to copy and paste as is).
3. Describe in a few words What the embed shows: this is what screen readers read out.
4. Open the Preview to see the result: in the editor, the block is shown as a card.

In HTML code mode, the code is typed directly in the block, in colour, and the Preview tab shows the result. The code can be up to 1 MB, for services that provide a long code.

If the service sets cookies or tracks your visitors, choose its category under Visitor consent: Audience measurement or Marketing and social media. The block then waits until the visitor accepts this category in the cookie banner; until then, a message takes its place, with a link to manage cookies. This works with the TOWeb banner as well as with the WebLegal one.

The code can also contain PHP, like a .php page in TOWeb 14: the page that contains it is published as index.php, at the same address. Before publishing, TOWeb checks the code’s syntax: an error stops publishing and names the page and the line. The code runs on your hosting, under your responsibility, and in the local test; in the preview, a frame takes its place. It is not published on a password-protected page. To check that your hosting runs PHP, use Publish › Test the server.

Copy or duplicate a passage

A heading, its text and an image are copied together, just like in a word processor:

1. Select the passage with the mouse, from the start of the heading to the end of the last element. You can also click at the start, then Shift + click at the end.
2. Copy: ⌘C (Mac) or Ctrl+C (Windows).
3. Click at the end of the line after which to place the copy, then press Enter: an empty line is created.
4. Paste: ⌘V (Mac) or Ctrl+V (Windows).

To reproduce a whole section, with its background and all its content, use Duplicate in its commands instead: see the Sections article.

Showing a block by screen

At the bottom of each block’s panel, Show on chooses the screens where it appears: Desktop, Tablet and Mobile. A block turned off for a screen does not appear there on the published site, but stays visible in the editor with a badge. The device preview shows the result.