Wenn Sie den Text- und Bild-Editor verwenden, können Sie Ihren Textinhalt mit Bildern illustrieren. Dadurch erstellen Sie attraktive Artikel und Präsentationsseiten.
Sie haben verschiedene Optionen, um Ihrer Website ein Bild hinzuzufügen:
- Als Inline-Element über das Text-Element aus der Kategorie Text und Bilder
- Über das Element „Bild und Text“, wo weitere Bilder als Inline-Elemente hinzugefügt werden können
- Als einzelnes Bildelement aus der Kategorie Text und Bilder
Wichtiger Hinweis: Wenn Sie ein Bild als reines Bildelement hinzufügen, wie im Beispiel oben dargestellt, können Sie keine weiteren Inhaltselemente daneben darstellen, wie z. B. Text oder Videos. Dies trifft auf die anderen beiden Alternativen nicht zu.
Es gibt mehrere Möglichkeiten, um die gewünschten Bilder hochzuladen:
- Sie können Bilder aus lokalen Ordnern oder von anderen Internetseiten in das Eigenschaften-Steuerelement ziehen und dort ablegen.
- Durchsuchen Sie die lokalen Dateien auf Ihrem Computer nach Bildern, indem Sie in den Bereich zum Hinzufügen von Bildern klicken.
- Für Bilder, die auf einer anderen Website veröffentlicht wurden, wählen Sie „Von URL hinzufügen“. Kopieren Sie einfach die Adresse des Bildes, fügen Sie sie in das URL-Feld ein und klicken Sie auf „Bild hinzufügen“. (Bilder, die ein Rautezeichen „#“ oder Fragezeichen „?“ in ihrem Namen haben, können nur per „Ziehen und Ablegen“ oder URL hochgeladen werden.)
Eine weitere Alternative wäre, die Registerkarte „Bildbibliothek“ zu nutzen und dort aus den verschiedenen Archivbildern auszuwählen.
Sobald Sie ein Bild hochgeladen haben, wird es automatisch auf die Standardgröße eingestellt. Sie können zwischen drei vorgegebenen Bildgrößen wählen: klein, mittel und groß. Sie können auch die tatsächliche Größe verwenden oder eine eigene definieren (Benutzerdefinierte Größe). Auch wenn die Größe eines Bildes angepasst wird, behält das System das Originalbild, sodass es später angepasst werden kann. Alle in der Größe angepassten Bilder erscheinen mit erweiterten Details auf einem hochauflösenden Retina-Display.
Wenn Sie auf das Bild klicken, öffnet sich rechts ein Bearbeitungsbereich mit Optionen zur individuellen Anpassung wie Größe, Umrandung, Textumbruch und Effekte.
Sie können das ausgewählte Bild jederzeit ändern, indem Sie auf die Schaltfläche „Ändern“ klicken. Wählen Sie „Bearbeiten“, und das Bild öffnet sich in einem externen Editor, in dem Sie eine einfache Bildbearbeitung vornehmen können. Dazu gehören Zuschneiden, Kippen, Drehen, Größe anpassen und eine begrenzte Auswahl an besonderen Effekten.
Die Standardoptionen ermöglichen die Festlegung benutzerdefinierter Bildabmessungen, indem Sie die gewünschte Breite und Höhe eingeben. Bei der Größenänderung empfiehlt es sich, auf das Schlosssymbol zu klicken, um die Bildproportionen beizubehalten und Verzerrungen zu vermeiden. Wird beispielsweise die Breite geändert, wird die Höhe automatisch proportional angepasst, um sicherzustellen, dass sowohl das Verhältnis als auch die Perspektive relativ zum Originalbild beibehalten werden. Um ein Bild auf seine Originalgröße zurückzusetzen, klicken Sie auf den Link „Zurücksetzen“.
Die Änderung der Bildgröße im Editor skaliert das Bild nur visuell auf die neuen Abmessungen, wenn die Seite im Browser geladen wird. Die Bilddatei behält dabei aber ihre Originalgröße. Um große Bilddateien zu optimieren, damit sie schneller geladen werden, wird empfohlen, die Bildgröße mit einem externen Bildbearbeitungsprogramm anzupassen, bevor die Datei in den Text- und Bild-Editor hochgeladen wird.
Das Feld Mouseover-Bildunterschrift ermöglicht Ihnen, einen Beschreibungstext anzugeben, der sich auf das Bild bezieht. Dieser erscheint, wenn ein Benutzer mit dem Cursor auf das Bild zeigt. Die Rollover-Bildunterschriften spielen auch eine Rolle bei der richtigen Suchmaschinenoptimierung Ihrer Website. Daher sollten Sie diese für wesentliche Bilder auf Ihren Seiten hinzufügen.
Sie können Ihre Bilder noch weiter anpassen, indem Sie Bildeffekte anwenden, die sichtbar werden, nachdem die Änderungen durch Klicken außerhalb des bearbeiteten Elements gespeichert wurden.
Weitere verfügbare Optionen sind das Festlegen der Bildausrichtung und das Hinzufügen eines Links für das Bild. Ein Klick auf das Symbol zum Hinzufügen eines Links öffnet das folgende Untermenü unterhalb des rechten Menüs.
Legen Sie fest, wie viel Raum um das Bild herum in Relation zu weiteren Inhalten im Element gelassen wird, indem Sie die Abstände oben, unten, links und rechts in Pixeln angeben.
Sie können Ihren Bildern eine Umrandung hinzufügen, indem Sie die Breite des Bildrahmens in Pixeln angeben und die gewünschte Rahmenfarbe auswählen. Ein Klick auf das Symbol für die Rahmenfarbe öffnet eine Farbpalette, wo Sie die Rahmenfarbe anwenden oder entfernen können.
Die Funktion „Mouseover-Bild“ verleiht der Website das Element der Interaktivität und kann auch darauf hinweisen, dass etwas passiert, wenn auf das Bild geklickt wird. Dies kann hilfreich sein, wenn dem Bild ein Link hinzugefügt wurde.
Sie können ein Mouseover-Bild mit Übergangeffekten erstellen, indem Sie unter der Option „Mouseover-Bild“ eine zweite Bilddatei hinzufügen. Nachdem das Mouseover-Bild hochgeladen wurde, können Sie aus einer Liste mit Übergängen auswählen, welcher Effekt zwischen den beiden Bildern angewendet werden soll.
Die Effekte „Einblenden“ und „Auflösen“ sehen sich auf den ersten Blick sehr ähnlich, aber es gibt einen bedeutenden Unterschied, wenn sie auf Bilder angewendet werden, die transparente Bereiche haben. Bei Einblenden bleibt das normale Bild bestehen, während das Mouseover-Bild darüber eingeblendet wird, woraufhin beide Bilder kombiniert werden. Bei Auflösen wird das normale Bild ausgeblendet, während das Mouseover-Bild darüber eingeblendet wird.
Abhängig von der gewählten Bildgröße können Sie die Steuerungen nutzen, um Bilder direkt im Text- und Bild-Editor anzupassen. Sie können Bilder ganz einfach beschneiden und einen bestimmten Bildbereich heranzoomen, ohne ein anderes Tool verwenden zu müssen. Das Ergebnis steht sofort zur Ansicht und im Seitenkontext zur Verfügung. Dies gilt auch für die Mouseover-Bilder. Die Funktion für Bildzuschnitt und Zoom ist verfügbar, wenn die „Erweiterten Optionen“ aktiviert sind und das Quellbild größer als das angezeigte Bild ist.
Beim Klick auf Bilder, die größer sind als die angezeigte Größe, erscheint ein Schieberegler, der Ihnen das Heran- und Herauszoomen ermöglicht. Hier können Sie das Bild auch so bewegen, dass der gewünschte Ausschnitt innerhalb der festgelegten Abmessungen erscheint. Dies erleichtert es, den Fokus auf einen bestimmten Bildabschnitt zu richten, wie im Beispiel unten gezeigt. Bei Bildern mit einer Mouseover-Variation erscheint ein Schalter-Symbol in der oberen rechten Ecke, wenn sie ausgewählt sind. Wenn Sie auf das Symbol klicken, werden die vollständigen Bearbeitungsoptionen für das Mouseover-Bild freigeschaltet.