Text | Sitely-Dokumentation

Text ist eines der wichtigsten Elemente im Layout einer Webseite. Text erzählt nicht nur Ihre Geschichte, sondern hilft auch bei der Erstellung einer visuellen und Suchmaschinen-Hierarchie auf Ihren Seiten. In Sitely ist das Erstellen von Text einfach und unkompliziert. Sie fügen Ihrer Seite einfach einen Textrahmen hinzu und beginnen mit der Eingabe, wie Sie es in einer vertrauten Textverarbeitungsanwendung tun würden. Sie können Ihren Text ganz nach Ihren Wünschen gestalten, und zwar ganz bequem über das Sitely-Stil-Panel. Wenn Sie zum ersten Mal einen Textrahmen (oder Textfeld, wie es in Sitely genannt wird) hinzufügen, sehen Sie auf der Seite einen Standardrahmen, der wie folgt aussieht:

Der Rahmen selbst hat die optimale Größe für Textinhalte auf einer Seite. Bei einem 12-spaltigen Seitenraster erstreckt sich der Standard-Textrahmen über 6 Spalten. Sie können die Breite und Höhe des Textrahmens zwar beliebig anpassen, aber Textkörper oder -absätze sollten am besten in Bereichen von 6 bis 8 Spalten dargestellt werden, damit sie gut lesbar sind.

Wenn der Textrahmen zum ersten Mal auf der Arbeitsfläche platziert wird, enthält er simulierten Text, der sich hervorragend für die Gestaltung Ihres Seitendesigns eignet. Um den Text zu ersetzen, klicken Sie einfach in den Rahmen und beginnen Sie mit der Eingabe. Der simulierte Text verschwindet und wird durch Ihren Inhalt ersetzt. Wenn Sie Ihren Textinhalt noch nicht fertig haben, können Sie den Textrahmen mit einem tatsächlichen Platzhaltertext füllen, den Sie so gestalten können, dass er besser darstellt, wie Ihr Text auf der Seite aussehen soll. Dazu wählen Sie den Rahmen aus und klicken im Stil-Bedienfeld auf die Schaltfläche „Lorem Ipsum einfügen ...“.

In der Verlags- und Grafikbranche ist Lorem ipsum ein Platzhaltertext, der häufig verwendet wird, um die visuelle Form eines Dokuments oder einer Schriftart zu demonstrieren, ohne sich auf aussagekräftige Inhalte zu stützen.

Alle Textinhalte werden standardmäßig als „Body“-Text formatiert, wenn sie erstmals zu einer Seite in Sitely hinzugefügt werden. Dies ist der am häufigsten verwendete Textstil auf Webseiten, daher ist es sinnvoll, ihn als Standard zu verwenden. Sitely enthält eine Reihe vorgefertigter Stile, die im Abschnitt „Stile“ des Stil-Panels angezeigt werden. Textstile sind eigentlich eine Art „Produktivitätswerkzeug“, das die Konsistenz gewährleistet und in den meisten Textbearbeitungsanwendungen, wie z. B. Textverarbeitungssoftware, eine gängige Funktion ist. Sitely hat diese vertraute Methode zur Textgestaltung übernommen, damit Sie sich darauf konzentrieren können, Ihre Inhalte visuell zu gestalten, anstatt sich auf CSS-Code verlassen zu müssen, um das gewünschte Aussehen Ihres Textes zu erzielen. Tatsächlich sind Stile so wichtig, dass es sich lohnt, sich ein wenig Zeit zu nehmen, um sie genauer zu untersuchen.

Die Bedeutung von Stilen

Stile sind ein wenig wie unsichtbare Post-it-Notizen, die nur von Webbrowsern gelesen werden können. Wenn ein Browser eine dieser Notizen sieht, weiß er, dass der Text in einer bestimmten Schriftart, in einer bestimmten Größe und in einer bestimmten Farbe angezeigt werden muss. Die Notizen enthalten auch andere Informationen, wie z. B. die Textausrichtung, die Zeilenhöhe, Abstandsattribute und, was ebenso wichtig ist, wie Suchmaschinen diesen Textinhalt behandeln sollten. Dies sind ziemlich viele Informationen, die auf viele verschiedene Textfelder auf einer Website angewendet werden müssen. Daher ist die Verwendung von „Stilen“ eine wirklich effiziente Möglichkeit, diese Details auf allen Ihren Webseiten einheitlich bereitzustellen. Wenn Sie außerdem einen Aspekt eines bestimmten Stils ändern möchten – beispielsweise die Farbe oder Schriftart –, können Sie einfach den Stil ändern und er wird auf Ihrer gesamten Website angewendet, wo immer dieser Stil verwendet wurde.

Ändern eines Stils

Auf diese Weise informiert Sitely Sie darüber, dass Sie einige Änderungen am Stil vorgenommen haben, und bietet Ihnen die Möglichkeit, Ihren Stil zu aktualisieren, indem Sie auf die Schaltfläche „Änderungen übernehmen“ klicken, oder Ihre Änderungen zu verwerfen und zum ursprünglichen Stil zurückzukehren, indem Sie auf die Schaltfläche „Zum Stil zurückkehren“ klicken. Wenn Sie die Änderungen anwenden, werden sofort alle Textelemente im Hauptteil Ihrer Seiten geändert, um die Änderungen an Ihrem neuen Stil widerzuspiegeln. Wenn Sie diese Option ignorieren, gelten Ihre Änderungen NUR für den Text, an dem Sie gearbeitet haben – alles andere auf Ihrer Website bleibt unverändert.

Es ist wichtig zu wissen, dass Stile auf ganze Textrahmen angewendet werden. Wenn Sie also eine Situation haben, in der Sie eine Mischung aus Textattributen innerhalb eines einzelnen Textrahmens haben, z. B. wenn Sie ein Textfeld als Fließtext formatiert haben und dann selektiv fette Unterüberschriften in einer größeren Schriftgröße innerhalb desselben Textfeldes erstellen, werden alle nachfolgenden Änderungen, die Sie am Fließtextstil vornehmen, der mit diesem Textrahmen verbunden ist, Ihre Überschriften auf den Stil des gesamten Rahmens ändern. Aus diesem Grund ist es oft besser, Überschriften und Unterüberschriften als separate Textrahmen auf Ihren Seiten zu belassen und ihnen unterschiedliche Stile zuzuweisen.

Ein Blick auf die Gestaltungsoptionen

Nachdem wir nun ein besseres Verständnis von „Stilen“ haben, können wir uns nun den verschiedenen Attributen zuwenden, die auf Textinhalte angewendet werden können. Viele davon werden Ihnen bereits bekannt sein, wenn Sie schon einmal eine Textverarbeitung verwendet haben, aber hier ist eine kurze Auffrischung. Der erste Abschnitt im Stil-Panel ist der Abschnitt „Schriftart“.

Hier können Sie eine Schriftart aus der Dropdown-Liste der auf Ihrem System verfügbaren Schriftarten auswählen. Sie können auch aus einer Liste von Schriftattributen auswählen, z. B. normal, leicht oder fett. Die Liste der verfügbaren Attribute hängt von der ausgewählten Schriftart ab. Einige der gängigsten Attribute werden auch als Symbole angezeigt, z. B. fett, kursiv und unterstrichen. Einige dieser Optionen sind möglicherweise ausgegraut, wenn die von Ihnen gewählte Schriftart einige Attribute nicht unterstützt. Als Nächstes können Sie eine Größe für Ihren Text auswählen und eine Laufweite festlegen. Dies ist der Abstand zwischen einzelnen Buchstaben. Einige Schriftarten haben eine sehr enge Laufweite, was die Lesbarkeit erschwert, insbesondere bei kleineren Schriftgrößen. Mit der Laufweitenoption können Sie einen zusätzlichen Abstand zwischen den Buchstaben hinzufügen.

Vielleicht ist Ihnen auch das Zahnradsymbol neben den Attributsymbolen aufgefallen. Hier können Sie einige erweiterte Optionen wie Großschreibung, tiefgestellte und hochgestellte Zeichen, Texthintergrundfarbe oder einen Schatteneffekt für Ihren Text einstellen. Schließlich haben Sie ein Farbfeld, in dem Sie eine Farbe für Ihren Text auswählen können. Durch Klicken auf das Farbfeld wird das Farbfelder von Sitely geöffnet, sodass Sie eine Farbe aus Ihrer Website-Palette auswählen können.

Als Nächstes kommt der Abschnitt „Absatz“.

Hier können Sie Attribute auswählen, die auf ganze Absätze angewendet werden. Die erste Option ist die Textausrichtung. Damit können Sie den Text linksbündig, zentriert, rechtsbündig oder im Blocksatz ausrichten. Das Doppelpfeilsymbol wird hauptsächlich bei der Eingabe von Text in Sprachen verwendet, die von rechts nach links statt von links nach rechts gelesen werden. Es kann auch als einfacher Schalter verwendet werden, um von linksbündigem Text zu rechtsbündigem Text zu wechseln.

Die nächste Option ist die Zeilenhöhe. Diese bestimmt den Abstand zwischen den Textzeilen. Im Webdesign wird sie am besten auf 1,2 bis 1,4 eingestellt. Der endgültige Abstand hängt jedoch von der Schriftart und der Größe des von Ihnen erstellten Textes ab. Oft ist es am besten, die Zeilenhöhe visuell so einzustellen, dass sie gut lesbar ist.

Mit der Option „Erste Zeile“ können Sie für jeden Absatz einen Einzug für die erste Zeile festlegen. Dies ist zwar eine gängige Funktion in Buchveröffentlichungen, um Textabsätze voneinander zu trennen, kann aber auch, wenn auch seltener, auf Webseiten verwendet werden. Dies kann besonders nützlich sein, wenn Sie eine große Textmenge festlegen, bei der eine zusätzliche Trennung der Absätze wichtig sein kann. Mit den Optionen „Abstand davor“ und „Abstand danach“ können Sie den Zeilenabstand vor und nach einem Absatz festlegen. Dies ist die gängigere Methode, um Absätze auf Webseiten voneinander zu trennen, aber letztendlich ist es eine Frage der persönlichen Vorliebe.

Die letzte Option ist der HTML-Tag. Dabei handelt es sich um eine Art Kennung, anhand derer Suchmaschinen die Wichtigkeit des Textinhalts auf Ihrer Seite bestimmen. Dies korreliert zwar oft mit der visuellen Hierarchie, die durch Überschriften, Unterüberschriften und Fließtext erstellt wird, muss aber nicht so sein. In der Welt der Websites können Sie Text als Überschriftentext (gekennzeichnet durch H1 bis H6) oder als Absatztext (gekennzeichnet durch den Buchstaben „p“) kennzeichnen. Im Allgemeinen ist H1 das wichtigste Element auf der Seite, wenn es darum geht, dass Suchmaschinen feststellen, worum es auf der Seite geht. Jede Überschriftenebene danach (H2 - H6) verliert an Bedeutung. Absatztext ist der Hauptinhalt der Seite, soweit es Suchmaschinen betrifft. Dies ist der Text, den sie höchstwahrscheinlich indizieren, um die Relevanz Ihrer Webseite für Suchanfragen festzustellen. Als allgemeine Regel sollten Sie nur ein H1-Tag auf einer Seite haben, während Sie so viele der anderen haben können, wie Sie möchten.

Im folgenden Beispiel wurde der Aussparungseffekt angewendet. Der Aussparungseffekt ist im Wesentlichen eine Option, mit der eine Hintergrundfarbe mit einer Vordergrundtextfarbe gemischt werden kann, um verschiedene Effekte zu erzielen. Diese Option ist wirklich für Personen mit grafischem Hintergrund gedacht, die „Mischmodi“ besser verstehen. Für die meisten Benutzer wäre es genauso einfach, Text auf einem farbigen Feld zu platzieren und jedes Element einzeln zu gestalten.

SAMPLE TEXT

Zitat

Mit dieser Option wird ein Absatz links und rechts eingerückt. Sie können den Einzug/Rand mit den Optionen festlegen, die angezeigt werden, wenn das Kontrollkästchen „Zitate“ aktiviert ist.

Liste

Mit dieser Option wird eine Aufzählung erstellt.
Sie können die Art der Aufzählungszeichen auswählen und die Hierarchie anpassen.
Mit der Option „Einzug“ wird der Einzug vom Rand des Textrahmens bis zum Aufzählungszeichen festgelegt.

Effekt
Mit dieser Option werden Spezialeffekte auf den ausgewählten Text angewendet, z. B. das Füllen mit einem Bild, einem Farbverlauf oder einem Muster. Hier sehen Sie ein Beispiel für die Option „An Text anpassen“, bei der der Text mit einem Bild hinterlegt wurde.

SAMPLE TEXT

Im Anschluss an die allgemeinere Absatzeinstellung haben wir einige zusätzliche Optionen in Form von Kontrollkästchen. Diese werden verwendet, um Absätze speziell zu formatieren.

Bildlauf

Diese Option verwandelt Ihren Textrahmen in ein scrollbares Feld, sodass mehr Text auf der Seite angezeigt werden kann. Bei der Anzeige in einem Browser können Benutzer nach oben oder unten scrollen, um den Text anzuzeigen. Scroll this box to reveal the additional ‘Lorem Ipsum’ text below.

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 „Symbol einfügen …“. Mit der Option „Smart Field“ können Sie ein Feld hinzufügen, das anhand einer Formel berechnet wird oder Informationen anzeigt, die auf der Website generiert wurden. Die vielen Optionen werden unten angezeigt, aber wir haben einen ganzen Abschnitt in unserer Dokumentation, der diese Optionen ausführlicher erklärt.

Nützlicher Tipp: Wenn Sie Schaltflächensymbole erstellen möchten, fügen Sie einfach eine Schaltfläche zu Ihrer Arbeitsfläche hinzu. Passen Sie sie an und ändern Sie die Größe nach Belieben. Wählen Sie dann die Schaltflächenbeschriftung aus und verwenden Sie die Option „Symbol einfügen“, um der Schaltfläche ein Symbol hinzuzufügen. Sie können die Größe des Symbols ändern, indem Sie die Schriftgröße der Schaltfläche im Stilinspektor anpassen. Dies ist ein Beispiel für eine Schaltfläche, die auf diese Weise erstellt wurde, zusammen mit den Einstellungen für die Schaltfläche.

Mit der Option „Symbol einfügen ...“ können Sie ein Symbol in Ihren Text einfügen. Wenn Sie auf diese Option klicken, wird ein Pop-up-Fenster angezeigt, in dem Sie die gewünschten Symbole auswählen können. Sobald Sie das Symbol in Ihrem Textfeld platziert haben, können Sie es mit anderen Gestaltungsoptionen einfärben und vergrößern. So sieht das Fenster aus – klicken Sie einfach auf ein Symbol, um es in Ihr Textfeld einzufügen.

Here are some examples

Tipps für bewährte Verfahren

Wenn Sie ein neues Website-Projekt in Angriff nehmen, sollten Sie Ihre Textstile am besten gleich zu Beginn einrichten. Dadurch können Sie viel Zeit sparen, wenn Sie mit der Arbeit an Ihrem Projekt beginnen. Sie sollten auch eine benutzerdefinierte Farbpalette für Ihre Projekte einrichten. Bitte beachten Sie, dass sich durch das Ändern der Standardtextstile oder -farben keine der Standardstile oder -farben von Sitely ändern. Alle Änderungen, die Sie vornehmen, werden nur auf das Dokument angewendet, an dem Sie gerade arbeiten. Alle neuen Projekte, die Sie starten, haben alle Sitely-Standardeinstellungen.

Download the Sitely Style Template