Bilder hinzufügen

Ein Bild sagt mehr als tausend Worte. Im "Web 2.0" sind Bilder neben Videos das wichtigste Medium, um Informationen interessant aufzubereiten und zu präsentieren. In diesem Artikel zeigen wir dir, welche Möglichkeiten du bei Sitejet hast, um Bilder anzuzeigen.

Einzelne Bilder hinzufügen

Einzelne Bilder können auf verschiedenen Wegen auf Sitejet-Websites eingebettet werden. 

• Das Bild-Element
• Das Logo-Element
• Das SVG-Element
• Das Icon-Element

Jedes dieser Elemente und Presets hat eine bestimmte Aufgabe die wir im Folgenden vorstellen.

Das Bild-Element

Das Bild-Element beinhaltet genau ein Bild, welches an einer bestimmten Stelle angezeigt werden soll. Dieses Element kann in weiteren Elementen wie "Containern" oder Presets eingebunden werden, um ein bestimmtes Design zu erzielen. Wo auch immer ein Bild in Sitejet dargestellt wird, kannst du dieses auch bearbeiten und formatieren.

Dieses Element kann für jede Art von Bildern verwendet werden, sofern es sich nicht um eine Vektorgrafik handelt. Sitejet unterstützt sämtliche gängigen Bildformate. Für den Einsatz auf Websites empfehlen wir jedoch die Verwendung von .jpg-, .png-, oder .gif-Dateien. Jedes dieser Formate hat unterschiedliche Vor- und Nachteile, die es je nach Anwendungsfall abzuwägen gilt.

.jpg-Dateien sind normalerweise die größten Dateien, bieten allerdings auch die höchste Qualität in Bezug auf das verfügbare Farbspektrum. Wird das Bild komprimiert kann es jedoch zu unschönen Effekten bei der Darstellung kommen, da die Komprimierung nicht verlustfrei geschieht.

.png-Dateien unterstützen transparente Hintergründe. Die Komprimierung von .png-Dateien ist mit geringerem Qualitätsverlust möglich. Deshalb ist es das favorisierte Bildformat im Internet.

.gif-Dateien haben gegenüber den beiden zuvor genannten Formaten den Vorteil, dass eine Bilderfolge ähnlich eines Stock-Motion-Videos dargestellt werden kann. Der Vorteil der geringen Dateigröße wird durch das geringe Farbspektrum von 256 Farben erkauft. Dadurch sehen .gif-Bilder oft unnatürlich aus, können sich aber z. B. für Karikaturen, Comic-ähnliche Darstellungen oder Infografiken anbieten. Auch .gif-Dateien ermöglichen transparente Hintergründe.

In Sitejet werden die Bilder automatisch durch unseren eigenen CDN-Dienst auf die erforderliche Auflösung skaliert und anschließend komprimiert. Die Bilder werden in der erforderlichen Auflösung auf der Grundlage der Geräteanzeigegröße bereitgestellt. "Responsive" und "Lazy Load" sind optionale Funktionen die zusätzlich die Darstellung und Ladegeschwindigkeit optimieren können.

Das Bild-Element kann wie andere Elemente folgendermaßen der Website hinzugefügt werden:

1. Bewege deine Maus über "+ Inhalte hinzufügen"
2. Klicke "Element"
3. Ziehe mit gedrückter Maustaste das Bild-Element an die Stelle, an der du das Bild anzeigen möchtest.

Um diesem Element ein Bild zuzuweisen:

• Klicke dieses doppelt oder
• Wähle es aus und drücke die [Enter]-Taste deiner Tastatur.
• Im Abschnitt "Bild" kannst du nun ein Bild direkt hochladen oder per Klick auf das Icon in der oberen, rechten Ecke eines aus dem Media Manager auswählen

Sofern du das Icon klickst, öffnet sich in einem weiteren Seiten-Tab das Media Manager Panel:

Hier hast du die Möglichkeit auf sämtliche von dir oder deinem Kunden bereits hochgeladenen Bilder zuzugreifen oder weitere Bilder hochzuladen. Wie du deinen Kunden dazu befähigst, selbst Bilder hochzuladen haben wir dir in unserem Artikel über die Zusammenarbeit mit Kunden vorgestellt.

Das Logo-Element

Das Logo-Element ist eine spezialisierte Variante des Bild-Elementes. In ihm sollte nach Möglichkeit nur das Logo der Firma bzw. des vorgestellten Produkts dieser Website dargestellt werden. Änderst du das Bild in einem Logo-Element wirst du automatisch gefragt, ob du das Bild auf der gesamten Website und auf allen Unterseiten ändern möchtest. So sparst du Zeit, falls sich die CI (= Corporate Identity) der Firma oder des Produkts ändert.

Weitere Informationen zum Thema Logo hinzufügen findest du in unserem Artikel zum Hinzufügen eines Websitelogos.,

Das SVG-Element

Mit dem SVG-Element können Vektorgrafiken im .svg-Format dargestellt werden. Vektorgrafiken können ohne Qualitätsverlust vergrößert und verkleinert werden und sind außerdem kleine Dateien, was sie ideal für den Einsatz auf responsiven Websites macht.

Das Icon-Element

Das Icon-Element ist eine Spezialform des SVG-Elements mit dem du Icons der bekanntesten Icon-Bibliotheken, die in Sitejet eingebunden sind, darstellen kannst. Mit der Stichwortsuche wählst du das Wunsch-Icon aus der Vorschlagliste aus, ohne selbst Dateien hierfür hochzuladen.

Mit diesem Element stehen dir Icons aus folgenden Bibliotheken zur Verfügung:

• IcoFont
• Ionicons
• FontAwesome Brands
• FontAwesome Regular
• FontAwesome Solid
• FontAwesome Light

Solltest du eine Bibliothek vermissen kannst du diese aber auch selbst einbinden und das entsprechende Icon mittels Custom Code einfügen.

Presets

Presets stellen immer eine Kombination verschiedener Elemente mit eigenen Design-Vorgaben dar. Sie nehmen dir die Arbeit ab und beschleunigen den Design-Prozess. Sitejet hält eine große Auswahl an Presets für die Darstellung von Bildern für dich bereit. Vor allem für die gleichzeitige Darstellung mehrerer Bilder z. B. in Galerienspielen Presets eine wichtige Rolle, aber auch für einzelne Bilder bieten Presets einige Vorteile.

So bietet das "About-with-Image"-Preset die Möglichkeit Text auf responsive Art neben einem Bild darzustellen. Dieser Effekt wird oft bei langen Texten genutzt, um diesen etwas aufzulockern oder um ein neues Thema einzuleiten.

Das Background-Preset ermöglicht dir Bilder im Hintergrund darzustellen. Du hast die Möglichkeit außerdem noch weitere Effekte wie z.B. den Parallax-Effekt zu nutzen, um ein abwechslungsreiches Design zu kreieren. Durch den Parallax-Effekt scrollt der Hintergrund mit einer anderen Geschwindigkeit, als der Vordergrund.

Bildergalerien hinzufügen

Sollen mehrere Bilder gleichzeitig bzw. in einer bestimmten Reihenfolge angezeigt werden, bieten sich die Bildergalerie-Presets an.

Wie man Presets verwendet, haben wir in unserem Artikel über die Verwendung von Presets dargestellt.

Als Gallerien stehen dir in Sitejet in den Presets unter dem Punkt "Bilder" unter anderem folgende Presets zur Verfügung:

• Gallery (grid, circle, captions)
• Filter Gallery
• Slider

Eine Gallery zeigt mehrere Bilder gleichzeitig an. Hier gibt es verschiedene Varianten, die unterschiedliche Darstellungsmerkmale aufweisen. So werden Bilder z. B. in gleichgroßen Kreisen, Quadraten oder in unterschiedlich großen Foto-Collage-ähnlich angeordneten Quadraten dargestellt.

Die Filter Gallery ist eine Spezialform, die Bilder bestimmter Kategorien anzeigt. Wird auf der Website eine Kategorie per Klick ausgewählt, so werden nur die Bilder angezeigt, die dieser Kategorie zugeordnet sind. Bilder können einzelnen oder mehreren Kategorien zugeordnet werden. Um die Filter Gallery deinen Wünschen anzupassen, sind Änderungen an den Buttons sowie den Bildern notwendig. Nehmen wir an, dass eine Kategorie für "Fisch" eingerichtet werden soll. Schreibe dafür im Tab "Verlinken" des Buttons in das "URL"-Feld "#fische" ohne Anführungszeichen. Was du hier hineinschreibst, ist im Grunde egal, solange du den gleichen Begriff später wieder verwendest.

Nun wechselst du bei den Bildern, die unter der Kategorie "Fische" angezeigt werden sollen, in den "Style" Tab und öffnest den Abschnitt "ID & Klassen". Hier trägst du als zusätzliche Klasse "filter-fische" ein. Wichtig ist dabei, dass die Klasse mit dem Stichwort "filter-" (ohne Anführungszeichen) beginnt und der nachfolgende Begriff dem Begriff aus dem oben genannten Schritt entspricht. Beachte auch, dass Umlaute wie ä, ö, ü und ß nicht unterstützt werden.

Falls du eine weitere Kategorie zur Filter Gallery hinzufügen möchtest, führe bitte die folgenden Schritte durch. Der Vorgang ist hier an einer beispielhaften Kategorie "Test":

1. Klicke einmal auf den letzten Kategorie-Button und dubliziere ihn, indem du das Kontextmenü per Rechtsklick öffnest und "Element duplizieren" klickst oder die Tastenkombination [Strg] + [D] nutzt
2. Ändere, falls gewünscht, die Button-Beschriftung und ändere die URL im "Verlinken" Tab des Buttons zu '#test' 
3. Füge im Abschnitt "ID & Klasse" des "Style" Tabs der Bildeinstellungen die Klasse "filter-test" zu allen Bildern hinzu, die dieser Kategorie angehören sollen; beachte, dass sich der Name der Klasse aus "filter-" gefolgt vom Kategoriename zusammensetzt
4. Erstellst du also beispielsweise eine Kategorie namens "Produkte", kannst du den Link "#produkte" und die Klasse "filter-produkte" nennen

Slider zeigen Bilder einzeln an und bieten die Möglichkeit, per Pfeiltasten, Klick und/oder Timer zum nächsten bzw. vorherigen Bild zu wechseln. Dies wird vor allem gern in Headern, also dem oberen Bereich einer Website, dargestellt. Die sich bewegenden Bilder erregen die Aufmerksamkeit des Website-Besuchers. 

Banner-Bilder hinzufügen

Banner-Bilder - manchmal auch "Heros" genannt - sind teil des "Headers", also dem oberen Teil der Website. Dieser Teil wird oft auch als "Above the fold" bezeichnet und ist der Bereich, der ohne scrollen sichtbar ist. Hier ist auch eine übersichtliche Menüstruktur untergebracht.

Um dir möglichst viel Arbeit abzunehmen, stellt dir Sitejet mehrere Header-Presets zur Verfügung. Diese lassen sich nach deinen individuellen Wünschen anpassen.

Um ein Header-Preset auf deiner Website hinzuzufügen gehst du wie bei jedem Preset vor:

1. Bewege deine Maus über "Inhalte hinzufügen" am oberen Rand des Website Builders
2. Klicke nun auf "Preset"
3. Wähle links im sich öffnenden Fenster "Header" aus

Hier hast du die Wahl zwischen verschiedenen Designs.

Mit ein bisschen Programmiergeschick lassen sich auch eigenen Header erstellen.

Innerhalb der Header kannst du - je nach Preset - das Hintergrundbild durch einen Slider austauschen oder umgekehrt und so deine Website weiter individualisieren.

Zurück zum Anfang