sssupers ist ein Squarespace Spezialist Webdesign Studio mit Website Boutique, das vom Fotografen und Designer Rasmus Schübel geführt wird. "Ich helfe meinen Kunden, ihre Website als sicheren Hafen der Selbstdarstellung im Internet zu erleben und verkaufe in meiner Boutique schlüsselfertige, maßgeschneiderte Websites an qualitätsbewußte Kunden mit Stil."

 

Bild einfügen

 

SCHATZI, SCHENK' MIR EIN FOTO !

.

 
 

MERKE: Die maximale Größe eines Bildes für den Bild-Block ist 20 MB.

.

 

Schritt 1 - einen Bild-Block hinzufügen

Klicken Sie auf einen Einfügungspunkt , um den Bild-Block einzufügen.

Einfügungspunkte erscheinen, wenn Sie bei aktiviertem Editier-Modus mit der Maus über die Seite fahren. Sie sehen aus wie seitlich liegende Tropfen mit einer kräftigen Linie, die zur rechten Seite herausragt. 

Im the Block-Menu wählen Sie 'IMAGE'. Um den Block an seinen Platz zu bringen, klicken Sie darauf und ziehen ihn auf das Layout der Seite.


.

 

Schritt 2 - Ein Bild hinzufügen

In das EDIT IMAGE Fenster können Sie ein Bild einfach auf die helle Fläche ziehen (manchmal ist es hilfreich, dabei die alt-Taste gedrückt zu halten) oder auf den Pfeil klicken und ein Bild auwählen. Klicken Sie erst auf SAVE, sobald das Bild im Fenster sichtbar wird.


MERKE: Sie können ein Bild auf die helle Fläche ziehen oder auf den Pfeil klicken und ein Bild von ihrem Computer auswählen.

Getty Images durchsuchen

Die Partnerschaft von Squarespace mit Getty Images, eröffnet Ihnen die Möglichkeit, für $10 ein professionelles Archivbild für den BildBlock zu kaufen. Eine schöne Sache, wenn man auf die Schnelle hochwertiges Bildmaterial benötigt und keinen Fotografen, wie zum Beispiel RASMUS SCHÜBEL 2.0 nach einer noch netteren Lösung fragen kann. Klicken Sie also auf Getty Images, um ein Getty-Archivbild für Ihren Bild-Block zu suchen, zu finden und zu kaufen.

.

 

Schritt 3 - Bildgröße einstellen (optional) 

Klicken Sie auf STRETCH, um das Bild unabhängig von seiner Größe und Proportion vollformatig in den ihm zugewiesenen Container zu zwingen. Dieses ist hilfreich, wenn beispielsweise mehrere Bilder nebeneinander stehen sollen, die Bildproportionen jedoch unterschiedlich sind. In so einem Fall können Sie die Blocks gleich groß ziehen und mit Klick auf STRETCH die Bildinhalte in proportional gleichartigen Blocks anzeigen. 

.

 

Schritt 4 - Das Bild in einer Lightbox öffnen lassen (optional)

Markieren Sie LIGHTBOX, um das Bild in einer Lightbox anzuzeigen, wenn darauf geklickt wird.



Ein praktisches Beispiel

Probieren Sie's aus: dieses Bild ist so eingestellt, daß es sich in einer Lightbox öffnet. DIe Größe der Darstellung in der Lightbox orientiert sich an den tatsächlichen Pixelmaßen des Bildes. Sind die Bildmaße größer, als der Bildschirm es benötigt, wird das Bild eben seitenbreit angezeigt. Ein Klick auf das Bild oder das kleine weiße Kreuz in der oberen rechten Ecke (im Inneren der Lightbox) schließt die Lightbox wieder.


MERKE: Im Inneren einer Lightbox werden eingetragene Bildunterschriften sichtbar sobald Sie mit dem Mauszeiger über das Bild fahren; auch wenn die Sichtbarkeit unter dem eigentlichen Bildblock abgeschaltet wurde. Bei Benutzung der Lightbox-Funktion wird außerdem die Link-Funktion deaktiviert.

.

 

Schritt 5 - Einen Link setzen (optional)

Sie können ein Bild zu einer anklickbaren Schaltfläche machen, die zu einer internen oder externen URL führt.

.

 

Schritt 6 - Fügen Sie eine Bildbeschreibung hinzu (optional)

Bildbeschreibungen stellen eine wunderbare Möglichkeit dar, etwa den Namen eines Künstlers, die Quelle der Urheberschaft oder einfach einen Bildtitel darzustellen. Wir raten Ihnen nicht dazu, diese Bescheibungen für längere Informationseinheiten zu nutzen. Können Sie machen, sieht aber sonderbar aus.

Um eine Bildbeschreibung hinzuzufügen, erstellen Sie einen Bildblock, füllen ihn mit einem Bild und SPEICHERN ihn.

Dann klicken Sie auf WRITE HERE… um Ihre Bildbeschreibung einzufügen.

Ein Klick auf die Schaltfläche CAPTION BELOW eröffnet Ihnen die Möglichkeit, zwischen vier Darstellungsweisen Ihrer Bildunterschrift zu wählen:

Wählen Sie zwischen diesen Optionen:

  • KEINE BILDUNTERSCHRIFT (Do Not Display Caption)
  • UNTERHALB DES BILDES (Caption Below)
  • ALS ÜBERLEGER AUF DEM BILD (Caption Overlay)
  • ALS ÜBERLEGER AUF DEM BILD BEI MAUSZEIGER-BERÜHRUNG (Caption Overlay on Hover)

TIPP: Die Bildbeschreibung ist der ALT-Text eines Bildes - Suchmaschinen lieben diese Beschreibungen. Wann immer Sie ein Bild hochladen, wird zunächst der Bildname zum ALT-Text des Bildes. Sobald Sie eine Beschreibung (Caption) hinzufügen, wird wiederum diese zum ALT-Text und ersetzt den Bildnamen.

Zusätzlich zur eben beschriebenen Reihenfolge der Vergabe von ALT-Texten durch Bildnamen macht es auch aus SEO-Sicht abslout Sinn, Ihren Bildern aussagekräftige Namen zu geben. Falls Sie Bilder mit kryptischen Namen wie IMG_2051.jpg hochladen, können Suchmaschinen damit nämlich nichts anfangen. Daher sollten Sie im Filename-Feld unterhalb der Eingabe der Bildbeschreibung einen gehaltvollen Namen für das Bild eintragen. Verwenden Sie vorzugsweise Bindestriche, um Worte innerhalb der Beschreibung zu trennen. Die Dateiendung (.jpg / .png / .gif /…) fügt Squarespace automatisch hinzu. 

.

 

Schritt 7 - Das Bild Speichern

Klicken Sie auf SAVE / SPEICHERN.

.

 

8. Das Bild entfernen (optional)

Um das Bild zu entfernen, ohne den Block zu entfernen, Klicken Sie auf REMOVE im Bild-Block Editor. Der Block steht Ihnen dann erstens als Platzhalter und zweitens zur jederzeitigen Bearbeitung zur Verfügung. Sollten Sie individuelle Bildnamen eingegeben haben, so werden diese beibehalten, Bildbeschreibungen werden mit dem Entfernen des Bildes gelöscht.

.

 

9 - FAQ / Häufig gestellte Fragen

 

"Kann ich ALT-Text zu Bildern hinzufügen, die ich in meinen Bild-Block geladen habe?"

Eine Bildbeschreibung (CAPTION), die Sie dem Bild in Ihrem Bild-Block hinzufügen, wird als ALT-Text verwendet.

"Kann ich meine Bildbeschreibungen stylen?"

Die Darstellung der Bildbeschreibungen hängt vom Stil des verwendeten Templates ab. Wenn die Darstellung der Bildbeschreibung als CAPTION BELOW ausgewählt ist, hat die Bildbeschreibung in der Regel die Farbe und Schriftart wie regulärer Text. Lesen Sie mehr über die Einstellung der Stilelemente Ihres Templates in DER STYLE EDITOR.

"Ich habe einen Link hinzugefügt, aber der Link-Text hat die falsche Farbe."

Dieses pasiert meistens, wenn Sie gleichzeitig eine Bildbeschreibung UND einen klickbaren Link (Clickthrough URL) verwenden. Wir halten es da mit Steve Jobs: die Antennenleistung des iPhones 4 sank dramatisch, wenn man es mit der Berührung ganzen Hand zum Ohr führte – Jobs lakonischer Kommentar: "Don't hold it that way." Fazit: benutzen Sie ENTWEDER eine Bildbeschreibung ODER einen klickbaren Link (Clickthrough URL), wenn Sie dieses Phänomen stört. Das Leben kann ja so einfach sein!

"Meine Bilder werden beschnitten."

Meistens liegt die Ursache dieses Effektes nach der Benutzung der Größeneinstellung an den Bildseiten und dem Schieberegler am unteren Bildrand. Um die Maße Ihres Bildes auf ihre Ausgangswerte zurückzustellen, machen Sie einfach einen Doppelklick auf den unteren Rand des Bildes. Schnapp!

"Meine Bilder liegen auf der Seite."

Dieser Effekt kann auftreten, wenn Ihr Bild mitsamt der unsichtbaren Information hochgeladen wurde, seitlich aufgenommen worden zu sein (meist passiert dies mit Bildern aus einer digitalen Kamera oder einem Smartphone) ohne zuvor mit einem Bildbearbeitungsprogramm korrigiert worden zu sein. Nutzen Sie den in Squarespace eingebauten BILD EDITOR, der von Aviary (Adobe) stammt – Sie finden ihn im EDIT IMAGE-Dialogfenster mit einem Klick auf EDIT.

Es öffnet sich - boom - der BILD EDITOR und bietet Ihnen alles, was Sie zur Bildbearbeitung so brauchen. Sie können Bilder DREHEN, EINSTELLEN, SCHÄRFEN … probieren Sie's aus.

 

"Meine Bilder haben sonderbare Farben."

Dieser Effekt tritt meistens auf, wenn Ihr Bild im CMYK Farbraum anstelle im RGB Farbraum gespeichert wurde. Sie liegen richtig, wenn Sie Ihre Bilder stets im RGB oder sRGB Farbraum abspeichern.

 

"Gibt es eine empfohlene Größe für die Bilder, die ich auf meine Website hochlade?"

Auch, wenn der Bild-Block alle Bilder akzeptiert, die bis zu 20 MB groß sind, empfehlen wir, Ihre Bilder auf eine Größe von maximal 500 KB zu beschränken. Sie erreichen dies leicht, wenn Sie darauf achten, daß Ihre Bilder eine Auflösung von 72 dpi haben und die Pixelmaße von 1500 x 1000 Pixel für seitenbreit dargestellte Bilder nicht überschreiten. Bilder im Fließtext ihrer Seiten kommen leicht mit 400 oder 600 Pixeln Breite aus. Bevorzugen Sie, falls Ihnen ein Bildbearbeitungsprogramm dies anbietet, das Bildformat JPG und stellen Sie eine Kompression von 60 ein. Mit diesen drei Richtwerten liegen Sie ziemlich gut im Rennen. Wenn die Zeit reif ist, komme ich sicher dazu, im Bereich TRAINING dieser Seite einen Beitrag über Bildgröße und Pixelmaße zu verfassen. 
 

NACH OBEN ↑


Gönnen SIe sich etwas und lesen Sie Wissenswertes ÜBER DEN STYLE EDITOR

Blocks will be Blocks will be Blocks ist der Tenor im PRAXIS-Beitrag ALLES ÜBER BLOCKS