Auf der Seite schreiben und Blöcke hinzufügen

Direkt schreiben

Klicken Sie in einen Text und tippen Sie: Das ist alles. Wenn Sie eine Passage markieren, erscheint eine kleine Leiste, um sie fett oder kursiv zu setzen, durchzustreichen, einen Link hinzuzufügen, und eine ✨-Schaltfläche, um sie mit KI zu überarbeiten. Im rechten Bereich bietet der Reiter Block außerdem Überschriften, Listen, Zitat und Ausrichtung.

In dieser Leiste wandelt die Liste Textstil den Absatz um, in dem der Cursor steht: Text, Überschrift 1 bis 4, Dachzeile (eine kurze Zeile über einer Überschrift) oder Vorspann (ein größerer Einleitungsabsatz). Jede Auswahl wird so gezeigt, wie sie erscheinen wird.

Die Linkauswahl bietet eine Seite, einen Abschnitt, eine E-Mail-Adresse oder eine andere Website und außerdem einen Blogbeitrag, ein Produkt oder eine Shop-Kollektion an (Reiter Artikel, Produkt und Kollektion). Der Link folgt dem Beitrag in jeder Sprache der Website und wird sauber entfernt, wenn der Beitrag nicht mehr veröffentlicht ist.

Im Reiter Extern wird eine Adresse Ihrer eigenen Website angenommen, die mit „/“ beginnt (zum Beispiel /boutique/ma-collection/): Sie wird bei der Veröffentlichung in die richtige Sprache gesetzt.

Wörter in einer Überschrift hervorheben

Markieren Sie in einer großen Überschrift (Überschrift 1, Überschrift 2 oder der Titel eines Hero-Blocks) ein oder zwei Wörter und klicken Sie auf Kursiv: Sie erhalten den Akzent des Stils Ihrer Website. Je nach Stil ist das eine andere Farbe, eine Akzentschrift, manchmal ein Farbverlauf, und die Wörter sind nicht immer schräg gestellt.

So färben Sie ein Wort richtig ein: Der Akzent folgt dem Stil, wenn Sie ihn wechseln, passt sich von selbst an den hellen und den dunklen Modus an und bleibt gut lesbar. Eine von Hand gewählte Farbe könnte nichts davon.

Einen Block mit der Taste „/“ hinzufügen

1. Setzen Sie den Cursor in eine leere Zeile.
2. Tippen Sie /: Das Befehlsmenü öffnet sich, nach Kategorien geordnet (Abschnitt, Text, Medien, Inhalt, Aktion).
3. Tippen Sie ein paar Buchstaben zum Filtern („gal“ für Galerie) und bestätigen Sie.

Sie können auch im Reiter Block des rechten Bereichs auf Objekt einfügen… klicken.

Die wichtigsten Blöcke

• Text und Layout: Überschriften, Listen, Zitat, Hinweisbox, Spalten (2 bis 4 Bereiche nebeneinander), Trennlinie, Abstand, Tabelle, Inhaltsverzeichnis.
• Medien: Bild, Galerie, Medium (Video, Audio oder Inhalte von YouTube, Vimeo, SoundCloud, Spotify…), Vorher / nachher, Einbetten (eine Webcam, ein Kalender, ein Bewertungs-Widget… über seine Adresse oder seinen HTML-Code).
• Ihre Tätigkeit vorstellen: Hero (Banner mit Überschrift und Schaltflächen), Funktionen, Kartenraster, Team, Kundenstimmen, Kennzahlen, Zeitleiste, Datenblatt, Scroll-Story, Laufband, Logo-Wand.
• Preise: Preispakete (Karten mit Angeboten, bei Bedarf mit einem Streichpreis und einem Hinweis unter dem Preis) und Preisliste (eine Liste von Leistungen und Preisen nach Kategorie, wie eine Speisekarte).
• Interagieren: CTA-Button, Formular, FAQ, Karte, Soziale Netzwerke, Newsletter, Buchung, Kommentare / Bewertungen.
• Hervorheben: Produkte aus dem Shop und Blogbeiträge.

Der Block Bild bietet fünf Größen: XS (höchstens 150 px, für ein Logo oder ein Abzeichen), S, M, L und 100 %.

Blogbeiträge und Dokumentationsartikel bieten dieselben Blöcke wie die Seiten, mit denselben Gesten. Der Block Kommentare / Bewertungen wird dagegen nur in Blogbeiträgen angeboten.

Links im Hero und im Team

Klicken Sie in einem Block Hero auf den Block: Im rechten Bereich stellen Sie Text und Ziel jeder Schaltfläche ein, mit der gewohnten Linkauswahl (eine Seite, ein Abschnitt, eine E-Mail-Adresse, eine andere Website…).

In einem Block Team hat jedes Mitglied ein Feld Seite des Mitglieds: Foto und Name führen dann zu seiner eigenen Seite, zu einem Abschnitt oder zu einer anderen Website.

Die Einstellung Fotogröße des Team-Blocks reicht von S bis XL. Ein Mitglied ohne Foto wird durch seine Initialen dargestellt, die seinem Namen folgen. Wählen Sie Keine für einen Vorstand oder eine Kontaktliste nur mit Namen und Funktion, ohne Foto und ohne Initialen.

Der Karten-Block

Der Block Karte setzt eine Karte an die Adresse Ihrer Wahl. Sein Anbieter ist OpenStreetMap oder Google Maps. Mit Google Maps wählt Kartentyp zwischen Karte und Satellit (die Luftansicht, mit Straßennamen): Das sind die beiden Ansichten, die Google ohne Schlüssel anbietet.

Das Kartenraster

Klicken Sie auf einen Block Kartenraster: Der rechte Bereich listet seine Karten auf. Klappen Sie eine Karte auf, um Titel, Text, Meta, Preis und Button-Text zu bearbeiten; so kann auch eine neu hinzugefügte Karte einen Button erhalten. Das Feld Link der Karte legt fest, wohin sie führt. Sie können den Text einer Karte auch direkt auf der Seite anklicken.

Der Link einer Karte wird wie alle Links in TOWeb gewählt: eine Seite der Website, ein Beitrag, ein Produkt, eine Shop-Kollektion, eine Datei oder eine externe Adresse. Die Einstellung Textausrichtung zentriert den Text der Karten.

Gibt es weniger Karten als Spalten, sagt Ihnen ein Hinweis unter Spalten, wie viele Karten Sie hinzufügen müssen, um die Reihe zu füllen.

Der Block Preispakete

Klicken Sie auf einen Block Preispakete: Das rechte Panel listet seine Pakete auf. Die Einstellung Button platziert den Button jedes Pakets Unter dem Preis, auf gleicher Höhe auf allen Karten, damit er ohne Scrollen sichtbar bleibt, oder Unten auf der Karte.

In den Leistungen eines Pakets kann jeder Punkt einen Link tragen: Klicken Sie auf das Symbol Link für diesen Punkt und wählen Sie dann eine Seite der Website, einen Anker oder eine externe Adresse. Mit einem Linktext (zum Beispiel „Demo ansehen“) erscheint er als kleiner Link nach dem Text des Punktes; ohne Linktext wird der ganze Punkt zum Link.

Bearbeiten, verschieben, löschen

Klicken Sie auf einen Block: Seine Einstellungen erscheinen im Reiter Block des rechten Bereichs. Ziehen Sie am Griff links vom Block, um ihn zu verschieben; ein Klick darauf öffnet das Menü Nach oben, Nach unten, Duplizieren, Löschen.

Auch Überschriften und Absätze haben ihren Griff ⋮⋮, der beim Überfahren erscheint: Ziehen Sie ihn, um den Text an eine andere Stelle der Seite zu verschieben, oder klicken Sie darauf, um dasselbe Menü zu öffnen. Ein Block Spalten hat seinen eigenen, wenn Sie über seinen Text fahren. Der Text einer Spalte, einer Tabelle oder eines Hinweiskastens hat keinen: Verschoben wird der Block, der ihn umgibt.

Um einen Spalten-Block aufzulösen, klicken Sie ihn an und dann in seinen Einstellungen auf Spalten auflösen: Der Inhalt der Spalten bleibt erhalten, untereinander, in voller Breite, und eine leere Spalte verschwindet.

Das Inhaltsverzeichnis einer Seite

Der Block Inhaltsverzeichnis listet die Überschriften einer Seite, eines Blogartikels oder eines Dokumentationsartikels auf, jeweils mit Link. Tippen Sie / und dann „Inhaltsverzeichnis“ oder „Inhalt“, oder fügen Sie ihn über den Reiter Hinzufügen ein.

Er entsteht von selbst aus den nachfolgenden Überschriften: Stellen Sie Aufgeführte Überschriften auf H2 und H3 oder Nur H2. Er wird bei jeder Veröffentlichung aktualisiert und erscheint in der Sprache jeder Seite, mit denselben Links in allen Sprachen. Bleibt sein Titel leer, lautet er „Inhaltsverzeichnis“, ebenfalls übersetzt. Auf dem Smartphone bleibt er eingeklappt, bis man ihn antippt.

Im Editor zeigt seine Karte die aktuellen Überschriften. Solange ihm keine Überschrift folgt, bleibt er leer und wird auf der Website nicht angezeigt.

Das Kontaktformular

Tippen Sie / und wählen Sie Formular. Klicken Sie auf den Block: Seine Einstellungen erscheinen im Reiter Block des rechten Bereichs.

Um das Formular in Gruppen zu gliedern („Ihre Kontaktdaten“, „Ihr Projekt“), fügen Sie ein Feld vom Typ Überschrift hinzu: ein fester Text, der vom Besucher nichts abfragt.

• Felder: Fügen Sie sie einzeln hinzu (Text, E-Mail, Telefon, Textbereich, Dropdown-Liste, Einfachauswahl, Kontrollkästchen, Datum, Datei) und legen Sie fest, ob sie Pflichtfelder sind.
• Link der Beschriftung: Bei einem Kontrollkästchen führt die Beschriftung zu einem Dokument, zum Beispiel zu Ihren AGB. Es öffnet sich in einem neuen Tab, ohne dass das begonnene Formular verloren geht.
• Button-Text: was die Senden-Schaltfläche anzeigt.
• Nach dem Senden: Nachricht anzeigen (die Bestätigungsmeldung erscheint anstelle des Formulars) oder Zu einer Seite gehen: Nach dem Senden gelangt der Besucher auf die gewählte Seite, in seiner Sprache.
• Betreff der E-Mail: Er gilt für jedes Formular einzeln und dient als Betreff der eingehenden Nachrichten, wenn der Besucher keinen eingegeben hat. So sortieren Sie sie auf einen Blick („Angebot“, „Anmeldung“…).

In einem Feld Auswahlliste oder Einzelauswahl ändern die Pfeile Option nach oben und Option nach unten die Reihenfolge der Optionen, mit der Maus wie mit der Tastatur.

Die Nachrichten gehen an die Empfangsadresse der Formulare, die einmal für die ganze Website unter Einstellungen › i-Services festgelegt wird. Damit ein Formular an eine andere Adresse schreibt, tragen Sie in den Einstellungen des Blocks seine Empfänger-E-Mail ein.

Auf der veröffentlichten Website wird unter einem E-Mail-Feld (Kontaktformular, Newsletter, Bestellung, Buchung) ein Tippfehler in der Adresse eines großen Webmail-Anbieters (gmail.vom, hotmial.com…) dem Besucher mit „Meinten Sie …?“ angezeigt: Ein Klick korrigiert ihn. Die eingegebene Adresse wird immer auch so akzeptiert, wie sie ist.

Ihre Formulare vor Spam schützen

Unter Einstellungen › i-Services schützt der Bereich Spamschutz Kontaktformulare, Blog-Kommentare und Produktbewertungen. Wählen Sie den CAPTCHA-Anbieter (Cloudflare Turnstile oder Google reCAPTCHA) und fügen Sie dann den Websiteschlüssel und den geheimen Schlüssel (Geheimer Schlüssel) ein, die Ihnen dieser Anbieter gegeben hat.

Bei der Veröffentlichung prüft TOWeb bei Google oder Cloudflare, ob der geheime Schlüssel akzeptiert wird: Ein abgelehnter Schlüssel würde Spam stillschweigend durchlassen. Der Bildschirm Veröffentlichen weist darauf hin und nennt die Stelle, an der Sie den Schlüssel korrigieren. Er meldet auch einen halb eingerichteten Schutz, wenn der Websiteschlüssel oder der geheime Schlüssel fehlt. Ohne Verbindung startet die Veröffentlichung, ohne zu warten.

Auf der veröffentlichten Website prüft der Server der Website jede Übermittlung. Mit reCAPTCHA v3 wird eine Übermittlung abgelehnt, die Google als automatisiert einstuft; antwortet Google nicht, wird die Übermittlung angenommen, damit keine Nachricht Ihrer Kunden verloren geht. Mit Turnstile wird eine auf einer anderen Website erhaltene Bestätigung abgelehnt.

Auf einer passwortgeschützten Seite zeigt ein Formular kein Captcha: Nur Besucher, die das Passwort eingegeben haben, können es absenden.

Die Website begrenzt auch Massenversand, selbst wenn ein Roboter alle seine Anfragen gleichzeitig schickt. Die an den Besucher gesendete Eingangsbestätigung enthält seine Nachricht nur, wenn die Website einen Spamschutz hat: Ohne ihn könnte ein Roboter Ihre Website nutzen, um E-Mails an Dritte zu senden.

Die Anmeldung zum Newsletter

Mit dem Block Newsletter erhält ein Besucher, der seine Adresse eingibt, eine Bestätigungs-E-Mail. Ihr Link öffnet eine Seite Ihrer Website mit der Schaltfläche Anmeldung bestätigen: Nur diese Schaltfläche trägt die Adresse ein. Ein E-Mail-Virenscanner, der die Links eingehender E-Mails öffnet, kann eine Anmeldung also nicht anstelle der Person bestätigen.

Einen externen Dienst einbetten

Eine Webcam, ein Online-Kalender, ein Bewertungs-Widget, eine Wettervorhersage, ein Formular eines anderen Dienstes: Der Block Einbetten platziert sie an beliebiger Stelle Ihrer Seiten.

1. Tippen Sie in einer leeren Zeile / und dann Einbetten.
2. Wählen Sie im rechten Bereich, was Sie einbetten: Eine Adresse (die Seite des Dienstes, angezeigt in einem Rahmen, dessen Höhe Sie einstellen) oder HTML-Code (der Code, den der Dienst Ihnen gibt, unverändert einzufügen).
3. Beschreiben Sie in wenigen Worten, Was die Einbettung zeigt: Das lesen Screenreader vor.
4. Öffnen Sie die Vorschau, um das Ergebnis zu sehen: Im Editor erscheint der Block als Karte.

Im Modus HTML-Code wird der Code direkt im Block eingegeben, farbig hervorgehoben, und der Reiter Vorschau zeigt das Ergebnis. Der Code darf bis zu 1 MB groß sein, für Dienste, die einen langen Code liefern.

Wenn der Dienst Cookies setzt oder Ihre Besucher verfolgt, wählen Sie seine Kategorie unter Einwilligung der Besucher: Reichweitenmessung oder Marketing und soziale Netzwerke. Der Block wartet dann, bis der Besucher diese Kategorie im Cookie-Banner akzeptiert; bis dahin steht eine Meldung an seiner Stelle, mit einem Link zur Cookie-Verwaltung. Das funktioniert mit dem Banner von TOWeb ebenso wie mit dem von WebLegal.

Der Code kann auch PHP enthalten, wie eine .php-Seite in TOWeb 14: Die Seite, die ihn enthält, wird als index.php unter derselben Adresse veröffentlicht. Vor dem Veröffentlichen prüft TOWeb die Syntax des Codes: Ein Fehler stoppt die Veröffentlichung und nennt Seite und Zeile. Der Code läuft auf Ihrem Hosting, in Ihrer Verantwortung, und im lokalen Test; in der Vorschau steht ein Rahmen an seiner Stelle. Auf einer passwortgeschützten Seite wird er nicht veröffentlicht. Ob Ihr Hosting PHP ausführt, prüfen Sie mit Veröffentlichen › Server testen.

Eine Passage kopieren oder duplizieren

Eine Überschrift, ihr Text und ein Bild werden zusammen kopiert, wie in einer Textverarbeitung:

1. Markieren Sie die Passage mit der Maus, vom Anfang der Überschrift bis zum Ende des letzten Elements. Sie können auch am Anfang klicken und dann mit Umschalt + Klick am Ende.
2. Kopieren: ⌘C (Mac) oder Strg+C (Windows).
3. Klicken Sie an das Ende der Zeile, nach der die Kopie stehen soll, und drücken Sie dann die Eingabetaste: Eine leere Zeile entsteht.
4. Einfügen: ⌘V (Mac) oder Strg+V (Windows).

Um einen ganzen Abschnitt mit seinem Hintergrund und seinem gesamten Inhalt zu übernehmen, verwenden Sie stattdessen Duplizieren in seinen Befehlen: siehe den Artikel Abschnitte.

Einen Block je nach Bildschirm anzeigen

Unten im Bereich jedes Blocks wählt Anzeigen auf die Bildschirme, auf denen er erscheint: Desktop, Tablet und Mobil. Ein für einen Bildschirm ausgeschalteter Block erscheint dort nicht auf der veröffentlichten Website, bleibt aber im Editor mit einem Hinweis sichtbar. Die Gerätevorschau zeigt das Ergebnis.