Einführung
Sitely verwenden
Elemente
Anleitungen
Zu diesem Thema sind zwei Video‑Tutorials verfügbar; Hier klicken, um sie anzusehen
Text gehört zu den wichtigsten Elementen im Seitenlayout. Er erzählt nicht nur Ihre Geschichte, sondern hilft auch dabei, auf Ihren Seiten eine visuelle und suchmaschinenrelevante Hierarchie zu erzeugen. In Sitely ist das Erstellen von Text einfach und unkompliziert: Fügen Sie Ihrer Seite einfach einen Textrahmen hinzu und beginnen Sie zu tippen – wie in einer vertrauten Textverarbeitungsanwendung. Sie können Ihren Text ganz nach Wunsch gestalten – bequem über das Sitely-Stil-Panel. Wenn Sie erstmals einen Textrahmen (in Sitely auch „Text Box“ genannt) hinzufügen, erscheint auf der Seite ein Standardrahmen, der so aussieht::
Der Rahmen selbst wird tatsächlich in der optimalen Größe für Textinhalte auf einer Seite platziert. Auf einem 12‑Spalten‑Seitenraster spannt der Standard-Textrahmen 6 Spalten auf. Zwar können Sie die Breite und Höhe des Textrahmens beliebig anpassen, doch lässt sich Fließ- bzw. Absatztext am besten in Spannen von 6–8 Spalten lesen.
Wenn der Textrahmen erstmals auf die Arbeitsfläche gesetzt wird, enthält er Beispieltext, was beim ersten Ausarbeiten des Seitenlayouts praktisch ist. Um den Text zu ersetzen, klicken Sie einfach in den Rahmen und beginnen zu tippen. Der Beispieltext verschwindet und wird durch Ihre Inhalte ersetzt. Falls Ihre Textinhalte noch nicht bereitstehen, können Sie den Textrahmen mit echtem Platzhaltertext füllen, den Sie stylen können, um besser darzustellen, wie Ihr Text später aussehen soll. Wählen Sie dazu den Rahmen aus und klicken Sie im Stil-Panel auf die Schaltfläche „Lorem Ipsum einfügen …“.
In der Verlags- und Grafikbranche ist Lorem ipsum ein Platzhaltertext, der üblicherweise verwendet wird, um die visuelle Form eines Dokuments oder einer Schriftart zu demonstrieren, ohne auf bedeutungsvollen Inhalt angewiesen zu sein.
Allen Textinhalten, die in Sitely erstmals zu einer Seite hinzugefügt werden, wird standardmäßig der Stil „Body“ zugewiesen. Das ist der am häufigsten verwendete Textstil auf Webseiten – daher ist er als Standard sinnvoll. Sitely enthält eine Reihe vorgefertigter Stile, die Sie im Bereich „Stile“ des Stil-Panels sehen. Textstile sind eigentlich eine Art „Produktivitäts“-Werkzeug, das Konsistenz sicherstellt, und sie sind ein gängiges Feature der meisten Textbearbeitungsanwendungen, etwa von Textverarbeitungsprogrammen. Sitely hat diese vertraute Methode zur Textgestaltung übernommen, damit Sie sich visuell auf das Layout Ihrer Inhalte konzentrieren können, statt auf CSS-Code angewiesen zu sein, um das gewünschte Erscheinungsbild Ihres Textes zu erzeugen. Stile sind so wichtig, dass es sich lohnt, ihnen etwas mehr Aufmerksamkeit zu widmen.
Stile sind ein wenig wie unsichtbare Klebezettel, die nur von Webbrowsern gelesen werden können. Wenn ein Browser einen solchen Zettel sieht, weiß er, dass der Text in einer bestimmten Schriftart, in einer bestimmten Größe und in einer spezifischen Farbe dargestellt werden muss. Die Zettel enthalten auch andere Informationen, etwa den Textsatz (Ausrichtung), die Zeilenhöhe, Abstandsattribute und – ebenso wichtig – wie Suchmaschinen diesen Text behandeln sollen. Das ist eine Menge Information, die in vielen verschiedenen Textfeldern einer Website angewendet werden muss. Daher ist die Verwendung von „Stilen“ eine sehr effiziente Methode, diese Details konsistent über alle Webseiten bereitzustellen. Außerdem können Sie, wenn Sie einen Aspekt eines bestimmten Stils ändern möchten – vielleicht seine Farbe oder Schrift –, einfach den Stil ändern; die Änderung wird dann überall auf Ihrer Website übernommen, wo dieser Stil verwendet wurde.
Änderungen an einem Stil vorzunehmen, könnte kaum einfacher sein. Markieren Sie einfach einen Text, der mit Ihrem bestehenden Stil formatiert ist, ändern Sie die Formatierung dieses Textes im Stil-Panel und aktualisieren Sie anschließend den Stil. Möchten Sie beispielsweise den Stil Ihres Fließtexts ändern, wählen Sie ein Textfeld mit dem Stil „Body“ und nehmen Sie Ihre Änderungen auf der Arbeitsfläche vor. Wenden Sie eine andere Schrift an, ändern Sie Schriftgröße, Farbe oder andere Attribute. Wenn Sie diese Änderungen vornehmen, sehen Sie im Stil-Panel ein Sternchen neben dem Stilnamen.
Auf diese Weise zeigt Ihnen Sitely an, dass Sie Änderungen am Stil vorgenommen haben, und bietet Ihnen an, den Stil per Klick auf „Änderungen anwenden“ zu aktualisieren oder Ihre Änderungen zu verwerfen und mit „Auf Stil zurücksetzen“ zum ursprünglichen Stil zurückzukehren. Das Anwenden der Änderungen aktualisiert sofort alle Body‑Textelemente auf Ihren Seiten, sodass sie den neuen Stil widerspiegeln. Wenn Sie diese Option ignorieren, gelten Ihre Änderungen NUR für den Text, an dem Sie gearbeitet haben – alles andere in Ihrer Site bleibt unverändert.
Manchmal möchten Sie lieber einen komplett neuen Stil erstellen, statt einen bestehenden zu ändern. Sie können einen neuen Stil hinzufügen, indem Sie oben in der Stil-Dropdownliste auf das „+“-Symbol klicken. Dadurch wird am Ende der Liste ein neuer Stil erzeugt, den Sie beliebig benennen können. Standardmäßig übernimmt der neue Stil alle Attribute des Standardstils „Body“. Um die neuen Attribute festzulegen, erstellen Sie einfach ein Textfeld und fügen etwas Text ein. Wenden Sie Ihren neuen Stil auf dieses Feld an. Nehmen Sie anschließend im Stil-Panel alle Attributänderungen vor, die Ihr neuer Stil benötigt. Wenn Sie das Sternchen neben dem Namen Ihres neuen Stils im Stil-Panel sehen, übernehmen Sie die Änderungen. Ihr neuer Stil ist nun einsatzbereit und kann überall auf Ihrer Website angewendet werden.
Es ist wichtig zu wissen, dass Stile auf ganze Textrahmen angewendet werden. Wenn Sie also innerhalb eines einzigen Textrahmens eine Mischung aus Textattributen haben – etwa ein als Fließtext („Body“) formatierter Textkasten, in dem Sie selektiv fettgedruckte Zwischenüberschriften in größerer Schriftgröße anlegen –, dann ändern spätere Anpassungen am Body-Stil dieses Textrahmens auch Ihre Überschriften in den Stil des gesamten Rahmens. Deshalb ist es oft besser, Überschriften und Zwischenüberschriften als separate Textrahmen auf Ihren Seiten zu verwenden und ihnen jeweils eigene Stile zuzuweisen.
Nachdem wir nun ein besseres Verständnis von „Stilen“ gewonnen haben, können wir uns die verschiedenen Attribute ansehen, die auf Textinhalte angewendet werden können. Vieles davon ist Ihnen vertraut, wenn Sie schon einmal eine Textverarbeitung benutzt haben – hier eine kurze Auffrischung.
Der erste Abschnitt im Stil-Panel ist der Bereich „Schrift“.
Hier können Sie eine Schrift aus der Dropdown-Liste der auf Ihrem System verfügbaren Schriften auswählen. Außerdem können Sie aus einer Liste von Schriftattributen wählen, z. B. normal, light oder bold. Die verfügbaren Attribute variieren je nach gewählter Schrift. Einige der gängigsten Attribute sind auch als Symbole vorhanden, etwa Fett, Kursiv und Unterstrichen. Einige Optionen sind möglicherweise ausgegraut, wenn Ihre gewählte Schrift bestimmte Attribute nicht unterstützt. Als Nächstes können Sie eine Größe für Ihren Text wählen sowie Laufweite hinzufügen. Das ist der Abstand zwischen einzelnen Buchstaben. Manche Schriften haben eine sehr enge Laufweite, was das Lesen – insbesondere bei kleinen Größen – erschweren kann. Mit der Laufweiten-Option können Sie zusätzlichen Abstand zwischen den Buchstaben hinzufügen.
Sie haben vielleicht auch das Zahnradsymbol neben den Attribut-Symbolen bemerkt. Hier können Sie erweiterte Optionen festlegen, z. B. Groß-/Kleinschreibung, Tief- und Hochgestellt, Text-Hintergrundfarbe oder einen Schatteneffekt für Ihren Text. Schließlich gibt es noch ein Farbfeld, mit dem Sie eine Farbe für Ihren Text auswählen können. Ein Klick auf das Farbfeld öffnet das Farb-Panel von Sitely, sodass Sie eine Farbe aus der Website-Palette auswählen können.
Als Nächstes folgt der Bereich „Absatz“.
Hier wählen Sie Attribute, die auf ganze Absätze angewendet werden. Die ersten Optionen betreffen die Textausrichtung. Damit können Sie Text linksbündig, zentriert, rechtsbündig oder im Blocksatz ausrichten. Das Doppelpfeil-Symbol wird hauptsächlich verwendet, wenn Text in Sprachen eingegeben wird, die von rechts nach links statt von links nach rechts gelesen werden. Es kann auch als einfacher Umschalter dienen, um zwischen links- und rechtsbündiger Ausrichtung zu wechseln.
Die nächste Option ist die Zeilenhöhe. Sie bestimmt den Abstand zwischen Textzeilen. Im Webdesign liegt dieser Wert idealerweise zwischen 1,2 und 1,4. Die endgültige Abstimmung hängt jedoch von der Schrift und der Größe des erstellten Textes ab. Am besten wird die Zeilenhöhe häufig visuell so eingestellt, dass der Text gut lesbar ist.
Die Option „Erste Zeile“ ermöglicht es, jedem Absatz einen Erstzeileneinzug zu geben. Während dies im Buchsatz üblich ist, um Absätze voneinander zu trennen, wird es auf Webseiten seltener verwendet. Es kann jedoch besonders hilfreich sein, wenn Sie große Textmengen setzen, bei denen zusätzliche Absatztrennung wichtig ist. Die Optionen „Abstand davor“ und „Abstand danach“ legen den Zeilenabstand vor bzw. nach einem Absatz fest. Dies ist die gängigere Methode, Absätze auf Webseiten zu trennen – letztlich ist es aber eine Frage des persönlichen Geschmacks.
Die letzte Option ist das HTML-Tag. Es ist eine Art Kennzeichnung, die Suchmaschinen verwenden, um die Bedeutung von Textinhalten auf Ihrer Seite zu bestimmen. Zwar korreliert dies oft mit der visuellen Hierarchie aus Überschriften, Zwischenüberschriften und Fließtext, es muss aber nicht so sein. In der Webwelt können Sie Text als Überschrift (gekennzeichnet durch H1 bis H6) ausweisen, oder er kann durch den Buchstaben „p“ als Absatztext gekennzeichnet werden. Allgemein ist H1 das wichtigste Element auf der Seite, damit Suchmaschinen verstehen, worum es auf der Seite geht. Jede nachfolgende Überschriftenebene (H2–H6) ist weniger wichtig. Absatztext ist der Hauptseiteninhalt aus Sicht der Suchmaschinen. Diesen Text werden sie am ehesten indizieren, um die Relevanz Ihrer Webseite für Suchabfragen festzustellen. Als Faustregel sollten Sie nur ein H1-Tag auf einer Seite verwenden, während Sie von den anderen beliebig viele verwenden können.
Anschließend an die allgemeinen Absatz-Einstellungen gibt es zusätzliche Optionen in Form von Kontrollkästchen. Damit lassen sich besondere Formatierungen auf Absätze anwenden.
Diese Option rückt einen Absatz links und rechts ein. Die Einzüge/Margins können Sie über die Optionen festlegen, die erscheinen, wenn das Kontrollkästchen „Zitat“ aktiviert ist.
Diese Option erstellt Spezialeffekte auf dem ausgewählten Text, z. B. das Füllen mit einem Bild, Farbverlauf oder Muster. Hier ist ein Beispiel für die Option „Clip to Text“, bei der der Text mit einem Bild gefüllt wurde.
BEISPIELTEXT
Im folgenden Beispiel wurde der Knockout-Effekt angewendet. Der Knockout-Effekt ist im Wesentlichen eine Option, bei der eine Hintergrundfarbe mit einer Vordergrund-Textfarbe verrechnet wird, um unterschiedliche Effekte zu erzeugen. Diese Option richtet sich vor allem an Personen mit Grafik-Hintergrund, die „Blendmodi“ besser verstehen. Für die meisten Benutzer ist es genauso einfach, Text auf eine farbige Fläche zu legen und jedes Element einzeln zu stylen.
BEISPIELTEXT
Diese Option macht Ihren Textrahmen zu einer scrollbaren Box, sodass er mehr Text aufnehmen kann, als auf der Seite sichtbar ist. In der Browseransicht können Benutzer nach oben oder unten scrollen, um den Text anzuzeigen. Dieser Textrahmen ist ein Beispiel für diese Funktion. Scrollen Sie in diesem Kasten, um den zusätzlichen „Lorem Ipsum“-Text unten einzublenden.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices dapibus. Phasellus eu ultrices turpis. Vivamus non mollis lacus, non ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet scelerisque ipsum. Morbi nulla dolor, adipiscing non convallis rhoncus, ornare sed risus.
Sed adipiscing eget nibh at convallis. Curabitur eu gravida mauris, sit amet dictum metus. Sed a elementum arcu. Proin consectetur eros vitae odio sagittis, vitae dignissim justo sollicitudin. Phasellus non varius lacus, aliquet feugiat mauris. Phasellus fringilla commodo sem vel pellentesque. Ut porttitor tincidunt risus a pharetra. Cras nec vestibulum massa. Mauris sagittis leo a libero convallis accumsan. Aenean ut mollis ipsum. Donec aliquam egestas convallis. Fusce dapibus, neque sed mattis consectetur, erat nibh vulputate sapien, ac accumsan arcu sem quis nibh. Etiam et mi sed mauris commodo tristique. Proin mollis elementum purus, a porta quam vehicula et.
Die letzten Optionen sind „Smart Field einfügen …“ und „Icon einfügen …“. Mit der Smart-Field-Option können Sie ein Feld hinzufügen, das anhand einer Formel berechnet oder Informationen anzeigt, die innerhalb der Website generiert werden. Die zahlreichen Möglichkeiten sind unten dargestellt, aber wir haben einen ganzen Abschnitt in unserer Dokumentation, der diese Optionen in größerer Detailtiefe erklärt.
Mit der Option „Icon einfügen …“ können Sie ein Symbol in Ihren Text einfügen. Ein Klick auf diese Option öffnet ein Pop-up-Panel, in dem Sie die gewünschten Symbole auswählen können. Sobald sie in Ihrem Textfeld platziert sind, können Sie mit weiteren Stiloptionen Farbe vergeben und die Symbole vergrößern. So sieht das Panel aus – klicken Sie einfach auf ein Symbol, um es Ihrem Textfeld hinzuzufügen.
Hier sind einige Beispiele
Praktischer Tipp: Wenn Sie Schaltflächen-Icons erstellen möchten, fügen Sie einfach eine Schaltfläche zu Ihrer Arbeitsfläche hinzu. Stylen und skalieren Sie sie nach Belieben. Wählen Sie dann die Schaltflächenbeschriftung aus und verwenden Sie die Option „Icon einfügen“, um der Schaltfläche ein Symbol hinzuzufügen. Sie können das Symbol vergrößern, indem Sie im Stil-Inspektor die Schriftgröße der Schaltfläche anpassen. Dies ist ein Beispiel für eine auf diese Weise erstellte Schaltfläche – zusammen mit den Einstellungen für die Schaltfläche.
Wenn Sie ein neues Website-Projekt starten, richten Sie am besten gleich zu Beginn Ihre Textstile ein. Das spart viel Zeit, sobald Sie mit der Arbeit loslegen. Um Ihnen das Einrichten zu erleichtern, haben wir eine Vorlage erstellt, mit der Sie den Standard-Textstil bequem in Stile Ihrer Wahl ändern können. Bonus: Mit derselben Vorlage können Sie auch eine benutzerdefinierte Farbpalette für Ihre Projekte anlegen. Bitte beachten Sie: Die Verwendung der Vorlage ändert keine der Standardstile oder -farben von Sitely – alle Änderungen, die Sie mit der Vorlage vornehmen, gelten nur für das Dokument, an dem Sie arbeiten. Neue Projekte starten stets mit allen Sitely-Standards. Klicken Sie auf den folgenden Link, um die Vorlage herunterzuladen – eine vollständige Anleitung ist enthalten.
Bitte melden Sie uns alle Mängel in dieser Dokumentation, wir beheben sie so schnell wie möglich!
Aktualisiert für Sitely 6
Diese Website verwendet Cookies.
Bitte lesen Sie unsere Datenschutzerklärung für weitere Details.
