Bilder | Sitely-Dokumentation

Bilder sind ein wichtiger Bestandteil der meisten Websites. Bilder helfen Ihren Besuchern, sich mit Ihren Seiten zu beschäftigen und die Botschaft Ihrer Website besser zu verstehen. In Sitely haben Sie viele Möglichkeiten, Bildinhalte zu verwenden und Ihren Seiten hinzuzufügen. Die einfachste Möglichkeit besteht darin, ein Bild von Ihrem Computer direkt auf die Sitely-Arbeitsfläche zu ziehen. Dadurch wird es als Bildelement auf der Arbeitsfläche platziert und sieht in der Regel wie folgt aus:

Das Bild wird in den meisten Fällen in seinen Originalabmessungen und seinem Seitenverhältnis platziert. Um die Größe des Bildes anzupassen, ohne seine Proportionen zu verändern, halten Sie die Umschalttaste gedrückt, während Sie einen Eckpunkt ziehen. Sie können die Bildabmessungen auch ändern, indem Sie einen der Ziehpunkte zum Ändern der Größe ziehen, ohne die Umschalttaste gedrückt zu halten. Dadurch wird der Bildrahmen vergrößert, während das Bild innerhalb der Begrenzung des Rahmens bleibt. Dies wird als „Anpassen“ des Bildes bezeichnet und ist im Stil-Panel zu sehen.

Im obigen Beispiel wurde das Kontrollkästchen „Dehnen“ sowie die Option „Anpassen“ des Bildes ausgewählt. In diesem Abschnitt des Stil-Panels erfahren Sie auch, ob Ihre Bilder für die Anzeige auf hochauflösenden Geräten geeignet sind. In den meisten Fällen sollten Bilder mit einer Auflösung von weniger als 2x vermieden werden, wenn Sie ein hochwertiges Erscheinungsbild Ihrer Website beibehalten möchten. Die andere „Stretch“-Option ist „Füllen“. Wenn Sie diese Option auswählen, wird das Bild proportional vergrößert, bis es den Kasten vollständig ausfüllt.

Die Fülloption schneidet das Bild effektiv zu, in diesem Beispiel werden der obere und untere Teil des Bildes abgeschnitten. Standardmäßig wird das zugeschnittene Bild innerhalb des Bildkastens zentriert. Sie können jedoch den Fokus des Bildes mithilfe der Platzierungssymbole im Stil-Panel ändern. Dort können Sie wählen, ob der obere, mittlere oder untere Teil Ihres Bildes im Feld angezeigt werden soll. Wenn es sich um ein Querformat handelt, das in einem Hochformatfeld platziert ist, können Sie das Bildfeld so einstellen, dass es die linke, mittlere oder rechte Seite des Bildes anzeigt.

Bilder gestalten

Mit den Gestaltungsoptionen im Bedienfeld „Stil“ können Sie Ihren Bildern Rahmen, abgerundete Ecken, Schatten, Deckkraft oder Filter hinzufügen. Hier sind einige Beispiele für die verfügbaren Optionen.

Abrunden

+ Rahmen

Abrunden

+ Schatten

Vollständiges Abrunden

Abrunden + Rahmen + Graustufenfilter

Hinzufügen von Bildern mit dem Bildelement

Das Bildelement ist ein großartiges Werkzeug, wenn Sie mit dem Entwurf Ihrer Webseite beginnen. Es platziert effektiv einen Bildplatzhalter auf der Leinwand, den Sie später mit einem Bild Ihrer Wahl füllen können. Wenn es zum ersten Mal auf der Leinwand platziert wird, sieht es so aus.

Wenn Sie bereit sind, Bilder hinzuzufügen, wählen Sie einfach den Platzhalter aus und fügen Sie Ihr Bild über das Stil-Panel hinzu.

Durch Klicken auf die Schaltfläche „Hinzufügen ...“ können Sie auf Ihrem Computer nach einem Bild suchen. Sie können auch aus anderen Bildquellen auswählen. Durch Klicken auf die Auswahl „Bitmap (PNG, JPEG, GIF)“ werden die verfügbaren Quellen angezeigt.

Vektor (SVG)

Hierbei handelt es sich in der Regel um reine Grafikelemente wie Logos, Symbole oder Illustrationen. Diese werden in Vektorgrafikanwendungen erstellt und haben in der Regel eine sehr geringe Dateigröße. Sie eignen sich gut für Webdesign-Arbeiten, da sie auf jede Größe skaliert werden können, ohne an Schärfe zu verlieren. Sie haben auch den Vorteil, dass sie direkt in Sitely mit der Option „Farbüberlagerung“ im Stil-Panel neu eingefärbt werden können. Hier sehen Sie ein Beispiel für ein SVG-Logo in seiner monochromen Grundform und in der Form, wie es mit einer Farbüberlagerung aussehen würde.

Einige SVGs werden bereits mit mehreren Farben erstellt. Sie können so verwendet werden, wie sie sind, und behalten alle Vorteile des SVG-Formats bei. Durch die Verwendung der Farbüberlagerungsoption wird jedoch die Mehrfarbenfunktion des SVG entfernt. Hier ein Beispiel:

Live-Foto

Sitely unterstützt die hybriden Foto-Video-Kombinationen, die mit iPhones aufgenommen werden können. Durch Eingabe sowohl der Bild- als auch der Filmdatei, die aus Fotos exportiert wurde, können Sie eine Seite erstellen, auf der Ihre Website-Besucher das Live-Foto sehen und damit interagieren können. Sie können die Standbild- und Filmdateien für ein Live-Foto erhalten, indem Sie Ihre Fotos mit Fotos auf dem Mac synchronisieren und dann das Foto auswählen und den Befehl „Datei -> Unverändertes Original exportieren“ verwenden.

Stockbild

Mit dieser Option erhalten Sie schnellen Zugriff auf drei der beliebtesten Stockbild-Bibliotheken im Internet – Pixabay, Unsplash und Pexels. Klicken Sie einfach auf die Schaltfläche „Auswählen“, wählen Sie Ihre Plattform aus und starten Sie die Suche nach dem perfekten Bild.

Wichtiger Hinweis: Obwohl Stock-Bilder von diesen Plattformen im Allgemeinen unter sehr liberalen Lizenzbedingungen kostenlos zur Verfügung stehen, bedeutet der Zugriff auf die Bibliotheken über die Sitely-Schnittstelle nicht, dass die Bilder in jeder Situation uneingeschränkt verwendet werden dürfen – insbesondere Bilder, die Gesichter von echten Personen oder Marken enthalten können. Wir empfehlen Ihnen, die spezifischen Lizenzbedingungen jedes Bildes, das Sie verwenden, auf der Website der jeweiligen Plattform zu überprüfen.

Instagram

Mit dieser Option können Sie Ihrer Seite einen Instagram-Feed hinzufügen. Im Wesentlichen ruft Ihre Website die Bilder aus Ihrem Feed ab, sodass Sie Ihre Website nicht aktualisieren müssen, wenn sich die Bilder in Ihrem Feed ändern. Sie müssen Sitely über die Einstellungsoptionen autorisieren, auf Ihren Feed zuzugreifen, bevor Sie diese Funktion nutzen können.

Von der Netzwerkadresse

Mit dieser Option können Sie Bilder hinzufügen, die auf einem Remote-Server gehostet werden, indem Sie die Bild-URL in das Stil-Panel eingeben. Dies wird oft als „Hot-Linking“ bezeichnet und sollte nur verwendet werden, wenn Sie der Eigentümer der Website sind, auf die Sie verlinken, oder wenn Sie die Erlaubnis des Website-Eigentümers haben.

Styling-Optionen

Diese sind alle im Stil-Panel aufgeführt, wie hier dargestellt. Durch Aktivieren der Styling-Kontrollkästchen werden zusätzliche Einstellungen für jede Option angezeigt. Darüber hinaus können Sie beliebige On-Click-Aktionen von Sitely an Ihre Bilder anhängen sowie Scroll- oder einmalige Animationseffekte verwenden.

Weitere Optionen für die Bildplatzierung

Bilder können auch auf andere Elemente Ihrer Sitely-Seite angewendet werden. Sie können beispielsweise ein Standardfeld mit einem Bild füllen. Dies mag zwar identisch mit dem Hinzufügen eines Bildfelds zur Seite erscheinen, bietet Ihnen jedoch einige zusätzliche Funktionen, die bei einem Standard-Bildelement nicht verfügbar sind. Als Erstes werden Ihnen einige zusätzliche Gestaltungsoptionen im Stil-Panel auffallen.

Im Fenster fixiert

Mit dieser Option wird Ihr Bild hinter Ihre Webseite gesetzt, sodass der ursprüngliche Kasten als eine Art Fenster bleibt, durch das Sie das Bild dahinter sehen können. Das Bild selbst bleibt fixiert, während der Kasten beim Scrollen der Seite darüber rollt und verschiedene Teile des Bildes sichtbar werden.

Unschärfe

Hier können Sie Ihrem Bild Unschärfe hinzufügen, was eine einfache Möglichkeit ist, einen farbenfrohen Hintergrund für beispielsweise eine Kopfzeile zu erstellen. Hier sehen Sie ein Beispiel für ein unscharfes Bild, das mit einem Textfeld überlagert ist.

Hintergrundfilter

Mit diesen Optionen können Sie interessante Effekte erzielen, insbesondere bei Bildern, auf die Sie Bildlaufeffekte anwenden möchten. Diese Filter ändern nicht das Bild als solches, sondern den Hintergrund hinter dem Bild. Das bedeutet, dass das Bild teilweise transparent sein oder einen transparenten Bereich enthalten muss (wie bei einem PNG-Bild), damit die Effekte sichtbar sind. Um zu verstehen, wie dies funktioniert, wurde auf das untenstehende „Eye“-Bild ein Weichzeichner-Filter angewendet. Wenn Sie auf dieser Seite nach unten scrollen, kann es sein, dass das Bild nach oben wandert und den darüber liegenden Inhalt überlappt. Wenn dies der Fall ist, verschwimmt der Inhalt hinter dem Bild wie abgebildet. Es gibt eine Reihe von Effekten, mit denen Sie experimentieren können. Probieren Sie sie alle aus, um ein Gefühl dafür zu bekommen, wie sie funktionieren.

Überblenden

Diese Funktion ist für Benutzer mit Grundkenntnissen in Überblendeffekten gedacht. Überblendeffekte werden häufig in der Grafik verwendet, um interessante Effekte zu erzielen. Damit das Überblenden funktioniert, müssen mindestens zwei Elemente übereinander platziert werden. Der Überblendeffekt wird dann auf das oberste Element angewendet. Die ausgewählte Option überblendet die beiden Elemente, um einen Effekt zu erzielen. In diesem Beispiel wurde ein roter Kasten mit einem Bild überblendet, wobei die Option „Farbig nachbelichten“ verwendet wurde.

Text over a Blurred Image

Gleiches Bild in verschiedenen Hintergründen

Wenn Sie mehrere Felder auf einer Seite haben und möchten, dass sie dasselbe Hintergrundbild zeigen, fügen Sie einfach dasselbe Bild als Hintergrund für jedes Feld hinzu und wählen die Option „Fixed in Window“ aus. Dadurch wird das Hintergrundbild für alle Felder auf der Seite festgelegt, bis ein neues Hintergrundbild gefunden wird. So können Sie einige interessante Seitenelemente erstellen, wie im folgenden Beispiel.

In diesem Beispiel wurden der Seite zwei breite Felder hinzugefügt, auf die jeweils eine Hintergrundverschiebung angewendet wurde. Auf beide Felder wurde dasselbe Hintergrundbild angewendet und die Option „Im Fenster fixiert“ ausgewählt.

Die Option „Hintergrundverschiebung“ verdeckt einen Teil des Hintergrundbildes, sodass andere Inhalte in den verdeckten Teil der Seite eingefügt werden können. Diese Option ist für jedes Feld in voller Breite verfügbar, das der Seite hinzugefügt wird. Die Option sieht wie folgt aus.

Hintergründe für Layoutblöcke

Breite Boxen und Layoutblöcke, einschließlich Bild-/Videoraster, und Layoutraster können auch Bilder als Hintergrund haben. Diese Elemente erstrecken sich über die gesamte Browserbreite und können dramatische, über die gesamte Breite verlaufende Seitenelemente für Ihre Website erzeugen. Diese Funktion wird häufig verwendet, um einen Hero-Bereich auf einer Website zu erstellen, wie in der folgenden Abbildung dargestellt.

Sie fügen Bilder zu Layoutblöcken und breiten Feldern im Hintergrundbereich des Stil-Panels hinzu. Es werden Ihnen dieselben Optionen wie bei Standard-Bildfeldern sowie einige zusätzliche Fülloptionen wie Farbverläufe und Muster angezeigt.

Als Hintergrund verwendete Bilder sind besonders effektiv, wenn sie mit der Option „Im Fenster fixiert“ verwendet werden, wodurch ein Parallaxeneffekt entsteht, bei dem die Webseite über das Bild rollt.

Bildschaltflächen

Bilder können auch als Hintergrund für Schaltflächen verwendet werden. Wählen Sie dazu die Schaltfläche auf der Leinwand aus und wählen Sie dann „Bild“ aus den Hintergrundfüllungsoptionen im Stil-Panel aus. Sie können für jeden Schaltflächenstatus unterschiedliche Bilder hinzufügen, um eine gewisse Benutzerinteraktion zu erzeugen, wenn der Mauszeiger über eine Schaltfläche bewegt oder darauf geklickt wird. Eine gängige Methode zur Verwendung dieser Funktion besteht darin, Variationen desselben Bildes für den normalen und den Hover-Status zu verwenden. Beispielsweise kann das Bild im Normalzustand in Farbe und das Bild im Hover-Zustand in Schwarz-Weiß dargestellt werden. Auf diese Weise haben wir die hier abgebildete Schaltfläche erstellt.

Eine bequemere Methode zur Erstellung von Bildschaltflächen könnte darin bestehen, ein Bild auf der Leinwand zu platzieren und dann mit der rechten Maustaste auf das Bild zu klicken und im Kontextmenü „In Schaltfläche konvertieren“ auszuwählen.

Button

Bildhintergründe bearbeiten

Wenn Sie ein Bild mit einem von Cleary definierten Hintergrund und Vordergrund auf der Leinwand platzieren, kann Sitely versuchen, den Hintergrund mit einem einzigen Klick für Sie zu bearbeiten oder sogar zu entfernen. Durch das Entfernen des Hintergrunds wird das Bild in ein transparentes PNG umgewandelt, sodass Sie es über einen anderen Hintergrund Ihrer Wahl legen können. Hier sehen Sie ein Beispiel dafür, wie diese Funktion funktioniert.

Markieren Sie bei ausgewähltem Originalbild das Kästchen „Hintergrund bearbeiten“ im Stil-Panel. Wählen Sie die Option zum Entfernen des Hintergrunds. Das Ergebnis ist ein transparentes Bild, wie hier zu sehen. Sie können das Bild auch automatisch von Sitely auf den Vordergrund zuschneiden lassen.

Mit derselben Option können auch andere Hintergrundeffekte hinzugefügt werden – wählen Sie einfach den gewünschten Effekt aus der Dropdown-Liste aus. Hier finden Sie Beispiele für die verschiedenen verfügbaren Optionen.

Originalbild

Bokeh-Hintergrund

Einfarbiger Hintergrund

Unscharfer Vordergrund