easyPage - Texte bearbeiten und stylen

Texte zu einer Webseite hinzufügen

Text auf einer Webseite spielt eine entscheidende Rolle sowohl für Benutzer als auch für Suchmaschinen. Für Benutzer vermittelt er wichtige Informationen, stellt Kontext bereit und führt sie durch die Webseite. Suchmaschinen hingegen nutzen den Textinhalt, um die Relevanz der Webseite für bestimmte Suchbegriffe zu ermitteln und ihr Ranking in den Suchergebnissen festzulegen.

Darüber hinaus kann qualitativ hochwertiger und gut organisierter Text die Benutzererfahrung verbessern und die Glaubwürdigkeit einer Webseite stärken.

Die angemessene Menge von Text auf einer Webseite hängt stark von ihrem Zweck und Zielgruppe ab. Informative Seiten oder Blog-Beiträge benötigen in der Regel mehr Text, um komplexe Themen zu erläutern, während für Landingpages oder Produktseiten eine knappe, prägnante Beschreibung oft effektiver ist. Eine Überlastung mit Text kann Benutzer überfordern und ablenken, wohingegen zu wenig Text möglicherweise nicht genug Informationen liefert. Ein ausgewogenes Verhältnis von Text, Bildern und anderen Medien ist für eine optimale Benutzererfahrung und Suchmaschinenoptimierung ideal.

Vielleicht ist Text auf einer Webseite nach wie vor das wichtigste Inhaltselement. Auf Webseiten ist Text aber nicht gleich Text. Im Web hat Text unterschiedliche Bedeutung. Ein Text kann eine Überschrift sein, ein Linktext, eine Aufzählung etc. Zudem kann man Texte unterschiedlich darstellen, um einer Textstelle einer herausgehobenen Bedeutung zu geben: Fett, kursiv, unterstrichen, durchgestrichen, hochgestellt, tiefgestellt etc.

Technischer Hintergrund: Texte können nach ihrer Bedeutung „ausgezeichnet“ werden. Die „Web-Sprache“ HTML ermöglicht es, Informationen einzubauen, die angeben, ob es sich bei diesem Text um beispielsweise eine Überschrift handelt oder ob ein Textteil fett oder kursiv dargestellt werden soll. Die Spezialität von HTML ist, einen Textabschnitt als Sprungmarke (Hyperlink) zu markieren. Dies bewirkt, dass ein Webseitenbesucher auf diesen Link klicken kann und der Browser dann zu der verlinkten Seite springt.

Textstile

Textstile in der Webbeschreibungssprache HTML dienen dazu, den Text in einer Webseite zu formatieren, zu strukturieren und bestimmte Bedeutungen oder visuelle Hervorhebungen zu vermitteln. Hier sind einige häufige Bedeutungen, die mit Textstilen in HTML verbunden sind (in Klammern jeweils die entsprechenden HTML-Tags):

• Überschriften (H1 bis H6)
  Überschriften werden verwendet, um die Struktur und Hierarchie einer Webseite darzustellen. Sie ermöglichen es Suchmaschinen und Benutzern, den Inhalt einer Seite schnell zu erfassen und wichtige Abschnitte zu identifizieren.
• Fett (b)
  Fettgedruckter Text wird oft verwendet, um wichtige Informationen, Schlüsselwörter oder Hervorhebungen zu kennzeichnen. Es zeigt eine starke Betonung an und hebt den Text hervor.
• Kursiv (em)
  Kursiver Text wird verwendet, um Wörter oder Phrasen zu betonen oder eine leichte Hervorhebung zu erzeugen. Es kann auch für technische Begriffe oder fremdsprachige Ausdrücke verwendet werden.
• Unterstrichen (u)
  Unterstrichener Text kann verschiedene Bedeutungen haben, je nach Kontext. Es wird manchmal verwendet, um Hyperlinks zu kennzeichnen, insbesondere wenn die Standard-Darstellung von Links geändert wurde. In anderen Fällen kann es verwendet werden, um einen speziellen Textabschnitt zu markieren oder zu kennzeichnen.
• Durchgestrichen (s)
  Durchgestrichener Text wird oft verwendet, um veraltete oder nicht mehr gültige Informationen darzustellen. Es kann auch verwendet werden, um Stornierungen, Änderungen oder gelöschte Inhalte zu kennzeichnen.
• Code (code)
  Der Code-Stil wird verwendet, um Text als Code oder Programmcode darzustellen. Dies erleichtert die Unterscheidung zwischen normalem Text und dem Code und hilft bei der Lesbarkeit und Verständlichkeit.
• Zitat (blockquote)
  Das Zitat-Stil wird verwendet, um Text als Zitat zu markieren. Es kann für lange Zitate, wichtige Aussagen oder Referenzen verwendet werden.
• Listen (ul, ol)
  Listen dienen dazu, Informationen in einer geordneten oder ungeordneten Form darzustellen. Unsortierte Listen (ul) werden oft für Punkte oder Aufzählungen verwendet, während sortierte Listen (ol) für nummerierte oder geordnete Elemente eingesetzt werden.

Die Bedeutungen von Textstilen können variieren und sind oft abhängig von der spezifischen Gestaltung und dem Kontext der Webseite. Es ist wichtig, Textstile angemessen und konsistent zu verwenden, um die Lesbarkeit und Verständlichkeit der Webseite zu verbessern und eine klare Kommunikation der Inhalte zu ermöglichen.

Textblöcke hinzufügen

Neue Textelemente fügt man hinzu, indem man das Element "Text" aus der oberen Werkzeugleiste mit der Maus an die gewünschte Stelle zieht. Es öffnet sich ein Menü mit einem Angebot an vordefinierten Textelementen.

Das Texttool in easyPage 3.0

easyPage 3.0 hat einen kompakten Texteditor eingebaut. Mit diesem Tool kann man Texte neu eingeben, ändern und verschiedene Textstile diirekt - also "inline" - hinzufügen. Das Texttool öffnet sich, wenn man mit der Maus im Webbuilder auf einen Text klickt.

Zunächst wird der zu ändernde Text aktiviert und die Ausrichtung des Textblocks in der umgebenden Layoutbox kann festgelegt werden. Nach Mausklick auf "Text bearbeiten" erscheint am Anfang des Textes ein Cursor, mit dem der Text eingegeben, gelöscht oder verändert werden kann.

Das Texttool ist wenig dazu geeignet, lange Texte zu erstellen. Wir empfehlen dafür einen Editor. Längere Texte sollte man fertig geschrieben per Copy/Paste einfügen.

Vordefinierte Textstile

Textblöcke in easyPage 3.0 sind bereits mit bestimmten Eigenschaften versehen. Beispielsweise sind Schriftart, Schriftgröße, Farbe etc. für jeweils einen Art von Textblock vordefiniert. Überschriften, Absätze, Listenelemente etc. sehen daher unterschiedlich aus.

Wie die Stile voreingestellt sind, hängt von der gewählten Vorlage ab. Die in den Vorlagen voreingestellten Textstile können aber geändert werden.

Tipp: Will man einen komplett neuen Textblock oder auch nur ein kleineres Textelement neu hinzufügen, empfehlen wir vorher einen Layout-Block dafür einzufügen (easyPage 3.0 wird ohnehin einen solchen Block neu hinzufügen, um das neue Textelement auf der Seite platzieren zu können.

In den nächsten Tutorial-Videos beschäftigen wir uns damit, wie man mit Textblöcken und mit Textstilen umgeht.

Tutorial:
Neue Textelemente platzieren

Dieses Tutorial zeigt, wie man mit easyPage 3.0 Texte einfügt und mit besonderen Auszeichnungen, das heißt Eigenschaften, versieht.

Zunächst fügen wir vorbereitend in die leere Vorlage fertige Header und Footer ein. Dananch platzieren wir einen Layout-Block, der drei leere Layout-Blöcke enthält. Jeder dieser leeren Blöcke soll Textelemente aufnehmen.

Es kann außerdem sinnvoll sein, bestimmte Textstellen in einem Textblock, die besonders hervorstechen sollen, mit einem eigenen Stil zu versehen.

Eventuell möchte man eine Textstelle als Ankertext für einen Hyperlink nutzen.

Ein Hyperlink, häufig auch einfach als Link bezeichnet, ist ein Element auf einer Webseite, das, wenn es ausgewählt oder angeklickt wird, den Benutzer zu einer anderen Stelle auf der gleichen Webseite einem anderen Web-Dokument führt.

Dieses andere Dokument kann sich unter der gleichen Domain oder unter einer anderen Domain befinden. Hyperlinks sind der Grundpfeiler des World Wide Web. Sie verbinden einzelne Webseiten miteinander und ermöglichen die Navigation im Word Wide Web.

Ein Anker hingegen, ist ein spezieller Typ eines Hyperlinks, der innerhalb des gleichen Dokuments verwendet wird. Statt zu einer anderen Webseite zu führen, verweist ein Anker-Link auf einen bestimmten Teil der aktuellen Webseite. Dies wird häufig in langen Dokumenten verwendet, um den Benutzer schnell zu einem bestimmten Abschnitt auf der Seite zu führen.

Im Texttool kann man auch, wenn die Bearbeitung des Textes mit "Text bearbeiten" aktiviert ist, die Ausrichtung des Textes in diesem Block ändern. Im allgemeinen ist die Ausrichtung des Textes aber eine Eigenschaft des vordefinierten Textstils, den man für dieses Textelement gewählt hatte.

Tutorial:
Mit dem Texttool arbeiten

In diesem Video zeigen wir, wie man punktuell einzelnen Textabschnitten oder einzelnen Wörtern einen bestimmten Stil zuweist, den man im Texttool auswählen kann.

Wir zeigen auch, wie man einen Link hinzufügt und die Zeichen einer markierten Textstelle vergrößert.

Konsistenz

In einem Webauftritt sollte es eine Konsistenz der Stile für die jeweils gleichen Textelemente geben. Konkret: Überschriften der Größe 1, „H1“ genannt, sollten auf der ganzen Website identisch aussehen. Gleiches gilt für normale Textabschnitte, „Paragraphs“ genannt und Listen.

Grundsätzlich lassen sich alle Textstile ändern. Statt der angelegten schwarzen Überschriftenfarbe lässt sich eine graue Überschriftenfarbe umdefinieren. Entsprechendes gilt für Schriftarten und Schriftgrößen.

Um auf die Definitionen der Textstile zuzugreifen, klickt man im Texttool beim Bearbeiten eines Textes auf das Bearbeitungssymbol, dargestellt als Bleistift. Ein anderer Zugriff ist über den Hauptmenüpunkt "Einstellungen" > "Style" möglich (oben rechts im Webbuilder).

Wenn man die Definition eines Textstils verändert, wirkt sich das auf alle Vorkommen in diesem Webauftritt aus.

In easyPage 3.0 gibt es deswegen eine Reihe von so bezeichneten „Custom“-Textstilen, die man vielleicht nur punktuell verwenden will, etwa für den Slogan oder eine Handlungsaufforderung. Andere Textstile sind mit ihrer Bedeutung bezeichnet, etwa als Absatz, Überschrift, Liste...

Tutorial:
Textstile einer Vorlage ändern

Bei aktiviertem Texttool kann man Textstile global ändern, indem man auf das Bearbeiten-Symbol rechts neben der Stilauswahl klickt. Eine andere Möglichkeit ist, den Hauptmenüpunkt "Erweitert" zu nutzen. Dort gibt es einen Unterpunkt "Style". Das Bearbeitungsmenü ist das gleiche.

Flexibilität durch Layout-Boxen

Die Verwendung von Layout-Boxen bringt zwei Vorteile mit sich: Zum einen sorgen die Boxen dafür, dass die Seiten unterschiedlich umgebrochen werden können, je nach Bildschirmgröße oder Browserfenster. Zum anderen kann jede Layout-Box mit unterschiedlichen Farben, Rändern, Aurichtungen etc. versehen werden.

Doch auch Textblöcke selbst können Eigenschaften haben, die die Darstellung festlegen, Schatten zum Beispiel.

Daher ist es wichtig, die richtige Layout- oder Textbox auszuwählen, je nachdem für welches Objekt welche Eigenschaften geändert werden sollen. Im Webbuilder hilft der Menüpunkt "Elternelement finden", wenn man an einer Stelle nicht klar erkennen kann, welche Box für eine Bearbeitung der Eigenschaften aktiviert ist.

Mehr Know How zu easyPage 3.0

Überblick
Allgemeine Tipps | easyPage 3.0 starten | Der Webbuilder und seine Funktionen
Videos:
„Willkommen“ |„Mit dem Webbuilder umgehen“

Layouts
Die Idee hinter den Layout-Boxen in easyPage | Inhaltselemente auf einer Webseite platzieren und ausrichten
Videos:
„Header und Footer in eine leere Vorlage einfügen und Layout-Boxen platzieren“ | Video „Layout-Boxen für Text platzieren und anpassen“

Inhaltselemente platzieren
Texte, Bilder und andere Objekte an die richtige Stelle setzen
Videos: 
„Kontrolle über Layout-Elemente“ | „Noch eine weitere Layout-Box mit Bildinhalt“ | „Wie man sich das Layout-Boxen-System einer easyPage-Website vorstellen muss“

Text
Texte ändern | Textstile verwenden | Stile global ändern
Videos:
„Neue Textelemente platzieren“ |  „Mit dem Texttool arbeiten“ | „Textstile einer Vorlage ändern“ | „Stile für Layout und Texte“

Weitere Inhaltselemente in easyPage
Umgang mit vorgefertigten und  zusammengestellten Objekten
Video:
„Button einfügen, Formen einfügen und ausrichten“ 

Seitenmanagement
Neue Seiten hinzufügen | Navigationsmenü erstellen und ändern | Mehrsprachigkeit
Videos:
„Seiten und Menüelemente hinzufügen“ | Video „Mehrsprachige Websites herstellen“ | Video „Mehrsprachiges Menü für Websites“

Vorlagen
Die Idee hinter der Vorlagensammlung | Kategorien
Video:
„Vorlage finden und anpassen“

FAQ
Häufige Fragen zu easyPage 3.0 und Antworten dazu.