Alle KurseArtSlide Designer
Dein Studio bearbeiten

Dein Studio bearbeiten

Dein Studio bearbeiten

Kategorie:
ArtSlide Designer
Komplexität:
Fortgeschritten

Wie bereits in früheren Kapiteln beschrieben, ist die Studio-Seite der Ort, an dem Du Dich und Deine Brand in voller Pracht zeigen solltest. In Zukunft werden noch weitere Seiten dazukommen, die von Dir gefühlt werden können. Gegenwärtig hast Du aber schon die Möglichkeit mit dem ArtSlide | Editor zu arbeiten und individuell zu entscheiden, was zu sehen sein soll. 


Sobald Du auf Studio bearbeiten klickst, landest Du auf einer Seite mit 2 Buttons. Einmal “Dein Studio öffnen”, des weiteren “Dein Studio im ArtSlide | Editor bearbeiten”.

Sobald Du den ArtSlide | Editor über den linken Button erreichst, sollte sich eine mehr oder weniger leere Studio-Seite öffnen.

Im Gegensatz zu Produktseiten, wird allerdings oben ein Header integriert sein. Der Header ist aktuell auf jeder Studio-Seite vorgegeben. Du hast allerdings die Möglichkeit, diesen zu individualisieren. So in der Art sollte Deine Studio-Seite im Editor aussehen, wenn Du ihn zum ersten Mal öffnest:

In diesem Kapitel werden wir exemplarisch eine Studio-Seite kreieren. Bevor wir uns ins Abenteuer stürzen werden einige Vorüberlegungen und Skizzen notwendig sein, um effektiv zu arbeiten.

Vorüberlegungen und Skizzen

Auf meiner fiktiven Studio-Seite möchte ich folgendes präsentieren und erläutern:

  1. Über die/den Künstler*in
  2. Über das Atelier bzw. die Werkstatt, in der alles entsteht
  3. Über die Kunstform, welche ausgeübt wird
  4. Die grundsätzliche Philosophie der Werke

Natürlich muss Deine Seite nicht genauso aufgebaut sein. Im besten Fall hast Du andere Ideen, die Du umsetzen wirst. In erster Linie geht es darum, mit dem ArtSlide | Editor vertraut zu werden. Ich beginne mit einer Skizze. Wir empfehlen Dir ebenfalls eine Skizze anzulegen, um später schneller mit dem Editor arbeiten zu können und Fehler zu vermeiden. 

Dies ist meine Skizze für die Studio-Seite:

Den Inhalt festlegen

In meinem fiktiven Beispiel arbeite ich mit den sogenannten “Lorem ipsum”-Texten. 

Diese werden von Designern und Entwicklern genutzt, da nicht immer der endgültige Inhalt des Textes feststeht, oder eine Wechselwirkung mit dem Design vorliegt. 

Du solltest Dir, bevor Du überhaupt mit der Arbeit im Editor anfängst, überlegen, was Du schreiben möchtest. Eventuell geht Deine Skizze gar nicht auf, weil Du doch mehr schreiben möchtest, als eigentlich angedacht oder erwartet. Also schnapp Dir Stift und Zettel bzw. ein digitales Schreibwerkzeug Deiner Wahl und leg los. (Microsoft Word, Google Docs oder sonstiges) 

Auch die Bilder sollten im besten Fall bereits vorliegen, damit Du im Prozess nicht noch nach diesen Suchen musst.


Umsetzung im ArtSlide | Editor

Die Vorbereitungen sind also abgeschlossen und wir können mit der Umsetzung beginnen. Bevor mit dem Abschnitten losgelegt wird, kümmere ich mich erst einmal um den Kopfteil (Header) der Studio-Seite.

Header

Zuerst ändere ich das Layout. Mit einem Blick auf meine Skizze sehe ich, dass ich mein Titelbild auf der linken Seite haben wollte. Ich kann das Layout in den Einstellungen des Kopfteils ändern. Also erst einmal ab in die Einstellungen. Hierfür klicke ich einmal auf eine leere Stelle des Kopfteils.


Nun ändere ich das Layout meines Kopfteils.

Im nächsten Schritt ändere ich das Bild zu meinem angedachten Titelbild. 

Um das Titelbild zu ändern kannst Du in den Einstellungen bleiben. Unter “Stil” findest Du den Abschnitt “Bild bearbeiten”. Klicke auf Bild ändern, damit sich der Medienverwalter öffnet und Du Dein Titelbild auswählen kannst.



Im Medienverwalter wähle ich mein Titelbild aus und klicke auf “Bild einfügen”.

Einmal Zwischenspeichern…

Als nächstes ändere ich mein Profilbild. 

Dafür klicke ich einmal auf das Platzhalter-Profilbild und die Einstellungen öffnen sich. 

Mit einem Klick auf “Bild ändern”, öffnet sich erneut der Medienverwalter.

Nun wähle ich mein angedachtes Profilbild aus und klicke auf “Bild einfügen”.

Im vorerst letzten Schritt ändere ich den Titel sowie den Untertitel. Mit einem Klick auf meinen Titel öffnen sich erneut die Einstellungen des Kopfteils.

Nun ändere ich den Inhalt meines Titels und meines Untertitels. Einmal auf Inhalt aktualisieren klicken und schon habe ich meinen neuen Titel sowie Untertitel. 



Auf den ersten Blick scheint mein Titel zu groß zu sein, um in einer Zeile präsentiert zu werden. Allerdings drückt die rechte Seitenleiste des Editors unseren Inhalt etwas zusammen. Wir empfehlen das “Live”-Studio in einem zweiten Tab zu haben, um nach dem Speichern (!), zu sehen, wie es wirklich aussieht. 

Bevor wir jedoch speichern, ändere ich den Titel sowie den Untertitel zu einem Blocksatz. Zentriert finde ich es persönlich nämlich schöner. Um mein Ziel zu erreichen, gehe ich in die Stil-Einstellungen. Unter Inhalt ändere ich dann die Textausrichtung nach meinem Belieben.


Speichern nicht vergessen!

Da ich auf meiner Studio-Seite 4 Themen abdecken möchte, erstelle ich nun 4 Abschnitte. 

Du kannst den gesamten Inhalt auch in einem Abschnitt abdecken, allerdings ist es übersichtlicher mit so vielen Abschnitten zu arbeiten, wie Du Themen abdecken möchtest.


Um noch mehr Struktur reinzubekommen benenne ich die Abschnitte nach den angedachten Themen. Hierfür klicke ich einfach einmal auf den leeren Abschnitt, damit sich die Einstellungen öffnen.

Unter Inhalt kann ich nun den “Titel des Abschnitts” ändern. Der Inhalt wird automatisch aktualisiert. Dies ersetzt allerdings nicht das speichern!

Mein Endresultat sieht dann wie folgt aus…

Über den/die Künstler*in

Ich arbeite mich am liebsten von oben nach unten durch, um den Überblick nicht zu verlieren und somit nichts zu vergessen. Ich beginne also mit dem Thema: “Über den/die Künstler*in”.

Mit einem Blick auf meine Skizze sehe ich, dass ich ein Bild und einen Text mit Überschrift nebeneinander platzieren möchte. Hierfür benötige ich das Layout-Widget 

“Spalten [ 50:50 ]”. Zuerst platziere ich dieses also im ersten Abschnitt.

Zuerst ziehe ich nun ein Bild-Widget in die rechte Spalte.

Gefolgt von einem Titel-Widget.

Last but not least, platziere ich ein Textabschnitt-Widget unter meinem Titel.

Die Grundstruktur steht somit. Nun speichere ich einmal alles ab, um keine Fortschritte zu verlieren.

Als nächstes kümmere ich mich um den Inhalt des ersten Abschnitts.

Erst danach werde ich die Feinheiten des Abschnitts bearbeiten und kontrollieren.

Mit einem Klick auf das Titel-Widget öffnen sich die Einstellungen des Widgets und ich kann unter “Inhalt” den Titel bearbeiten.


Nun ändere ich den Inhalt zu meinem gewünschten Titel und klicke auf aktualisieren.

Jetzt ist es an der Zeit den Inhalt des Textabschnitt-Widgets zu verändern. Erneut klicke ich auf das gewünschte Widget, um die Einstellungen zu öffnen.

Wie bei meinem Titel-Widget ändere ich den Inhalt ab und klicke auf aktualisieren.

Zu guter Letzt tausche ich noch das Bild aus. Ein Klick auf das Platzhalterbild und die Einstellungen öffnen sich. Mit einem Klick auf “Bild ändern” öffnet sich der Medienverwalter und ich kann das gewünschte Bild aussuchen.

Zwischenspeichern…

Es steht jetzt zwar bereits der Inhalt, aber meine Skizze sieht noch anders aus. 

Das ändere ich jetzt! Ich beginne damit, indem ich auf das Layout-Widget klicke. 

Beim ersten Mal kann dies etwas schwierig sein, da man explizit auf eine freie Stelle des Elements klicken muss, nicht auf eines der integrierten Inhalt-Widgets! Spätestens an den Einstellungsmöglichkeiten wird der Unterschied allerdings klar.


In den Einstellungen gehe ich in die Stil-Einstellungen und in den Bereich “Ausrichtung der Elemente”. Bei der Verteilung der Elemente klicke ich auf den mittleren Button. 

Dies erlaubt es mir alle Elemente des Layout-Widgets (vertikal) zu zentrieren.

Momentan ist das Titel-Widget bereits im Blocksatz. Nun soll auch das Textabschnitt-Widget folgen, damit keine Design-Brüche entstehen. Ich klicke also auf mein Textabschnitt-Widget und gehe dort in die Stil-Einstellungen. Unter Typographie finde ich die notwendigen Einstellungsmöglichkeiten. Der mittlere Button der Textausrichtung löst mein Problem.

Titel und Textabschnitt sind allerdings sehr nah zusammengerückt. Dies sieht etwas zu gequetscht aus. Das ändere ich als nächstes. Hierfür gehe ich in die Stil-Einstellungen des Titel-Widgets und öffne die “Abstände”.



Mit den Abständen gilt es etwas herumzuspielen, da es abhängig von Deiner Textlänge ist. In meinem Beispiel habe ich einen relativ kurzen Text und somit ergibt ein etwas größerer Abstand Sinn. Hier vergrößere ich den Abstand nach unten auf 40 Pixel.

Mein Zwischenergebnis...

Der erste Abschnitt ist soweit fertig und ich kann mich um den zweiten Abschnitt kümmern.

Neuerstellung der weiteren Abschnitte

In der aktuellen Beta-Phase kann es passieren, dass die bereits vorerstellten Abschnitte nicht mehr befüllbar sind. Sollte es dazu kommen, gibt es eine einfache Lösung… Die noch nicht befüllten Abschnitte einmal löschen und neu erstellen. Im nächsten Update wird dieser Fehler gefixt. Zum Zeitpunkt der Tutorial-Erstellung war dieser Fehler noch nicht bekannt...

Über den Ort der Entstehung

Ich beginne erneut mit einem Titel-Widget.

Auch in meinem zweiten Abschnitt benötige ich erneut ein Layout-Widget. 

Das Spalten [ 50:50 ]-Widget hilft mir hier aus.


Wie im ersten Abschnitt benötige ich ein Bild-Widget.

Im Gegensatz zum ersten Abschnitt benötige ich nun aber 3 Textabschnitt-Widgets untereinander. Dies stellt kein Problem dar. Ich ziehe einfach 3 Textabschnitts-Widgets nacheinander hinein.

Jetzt ändere ich wieder den Inhalt ab, bevor ich mich an die Feinheiten setze. Ich beginne, indem ich das Bild austausche. Hierfür klicke ich wieder auf das Platzhalterbild und ändere ich den Einstellungen das Bild ab.

Den Titel ändere ich als nächstes ab. Gleiches Spiel wie im ersten Abschnitt. Erst ein Klick auf den Titel und in den Inhalt-Einstellungen den Text abändern.

Zu guter Letzt ändere ich den Inhalt der 3 Textabschnitte. Ich hoffe, dass Du einen spannenderen Inhalt als ich zur Verfügung hast!

Einmal Zwischenspeichern schadet nie…

Nun kümmere ich mich um die Feinheiten. Zuerst zentriere ich die Inhalte des Layout-Widgets. Hierfür klicke ich auf das Layout-Widget und ändere in den Stil-Einstellungen die Ausrichtung der Elemente auf zentriert.

Nach einem Blick auf die Live-Studio-Seite sehe ich, dass die Textabschnitte zu nah beieinander sind.

Um das Problem zu lösen, erhöhe ich bei den ersten beiden Textabschnitten den Abstand nach unten auf 50 Pixel.

Nach einem erneuten Speichern sehe ich, dass nun der Abstand groß genug ist.

Der Abstand zwischen Titel und meinem Layout-Widget ist mir allerdings noch etwas zu groß. Auch hier muss ich also an den Abständen schrauben. Ich klicke also auf meinen Titel und ändere in den Stil-Einstellungen unter “Abstände” den Abstand nach unten auf 0 Pixel.

Auch die Abstände meines Bild- und meines obersten Textabschnitt-Widgets verringere  ich nach oben 0 Pixel.


Mit dem zweiten Abschnitt bin ich nun beinahe fertig. Jedoch erhöhe ich zu guter Letzt noch einmal die Höhe des Bildes, damit es nicht ganz quadratisch ist. Um die Höhe des Bildes zu erhöhen, gehe ich in die Stil-Einstellungen des Bildes und in den Abschnitt “Maße”. Dort lege ich die Höhe auf 600 Pixel fest.

Nun speichere ich einmal ab und so sieht mein Zwischenprodukt aus…

Über die ausgeübte Kunstform

Der dritte Abschnitt hat sehr viel Ähnlichkeit zum zweiten. Der größte Unterschied ist der Tausch von Bild und Text. Das wechseln der Seiten, auf welchen die Bilder zu sehen sind, ist wichtig, damit Nutzer*innen interessiert bleiben.

Zunächst benötige ich allerdings wieder ein Titel-Widget. Dieses ziehe ich also als erstes in meinen dritten Abschnitt.



Du kennst das Spiel bereits. Nun kommt wieder einmal ein Layout-Widget. Genauer gesagt, dass Spalten [ 50:50 ]-Widget.

In der rechten Spalte füge ich nun ein Bild-Widget ein.

Auf der linken Seite benötige ich wieder 3 Textabschnitt-Widgets.

Nun ändere ich den Inhalt meines Titels ab.

Das Gleiche gilt für die Textabschnitt-Widgets. Auch hier ändere ich den Inhalt entsprechend meiner Skizze ab.

Natürlich ändere ich auch das Bild ab.

Nun ist wieder die Zeit gekommen die Feinheiten zu ändern. Wie immer zentriere ich zunächst die Elemente des Layout-Widgets.

Auch werde ich wieder die Höhe des Bildes etwas erhöhen, auf 600 Pixel.

Zu guter Letzt ändere ich erneut die Abstände zwischen dem Titel und Bild bzw. meinem Textabschnitt. Zuerst verringere ich den Abstand des Titels nach unten auf 0 Pixel.

Jetzt verringere ich den Abstand des Bildes und des oberen Textabschnitts nach oben auf 0 Pixel.

Mit einem Blick auf die Live-Seite sehe ich erneut das Problem des fehlenden Abstands zwischen den 3 Textabschnitten. Aus diesem Grund erhöhe ich den Abstand der ersten beiden Textabschnitte nach unten auf 40 Pixel.



Speichern nicht vergessen…

Und mein letztes Zwischenresultat sieht wie folgt aus…

Über die Philosophie hinter den Werken

Der letzte Abschnitt meiner fiktiven Studio-Seite soll die Philosophie hinter den Werken thematisieren. Im Gegensatz zu den ersten Abschnitten habe ich mich allerdings in meiner Skizze darauf festgelegt, dass ich kein Bild präsentieren möchte, sondern nur mit Text arbeiten möchte. Legen wir los!

Wie immer beginne ich mit einem Titel-Widget, welches ich in den letzten Abschnitt ziehe.


Unter meinem Titel benötige ich nun nur noch einen einfaches Textabschnitt-Widget.

Nun füge ich erst meinen richtigen Titel ein…

...gefolgt von meinem Fließtext für das Textabschnitt-Widget darunter.

Wie in meiner Skizze bereits angedeutet, möchte ich den Fließtext allerdings zentriert präsentieren. Dies ändere ich kurz ab. Hierfür klicke ich einmal auf meinen Fließtext und gehe in die Stil-Einstellungen. Dort finde ich unter Typographie die Möglichkeit die Textausrichtung zu ändern.

Wie bei allen anderen Abschnitte verringere ich auch hier den Abstand zwischen Überschrift und Text. Erst gehe ich in die Einstellungen meines Titels und verringere den Abstand nach unten auf 0 Pixel.

Das Gleiche mache ich mit meinem Text, nur dass ich den Abstand nach oben auf 0 Pixel festlege.


Da ich meinen Fließtext etwas schlanker gestalten möchte, erhöhe ich in den Abstände-Einstellungen die Pixelanzahl nach links und nach rechts auf 100 Pixel.

Speichern…

Und so sieht mein Endergebnis aus…

Mit etwas Übung kann eine solche Seite schnell und simpel zusammengebaut werden. 

Dazu sollte gesagt sein, dass es die Möglichkeit gibt deutlich komplexere Strukturen umzusetzen, wenn gewünscht. Diese Kapitel sollen nur einen generellen Überblick über die Funktionsweise des Editors geben. 

Tiefgreifende Inhalte werden in naher Zukunft folgen.

Das Endergebnis meiner Tutorial-Seite findest Du hier.

Mit klicken auf “Alle akzeptieren”, akzeptierst Du, dass wir Cookies speichern dürfen um dir eine bestmögliche Experience bieten zu können und die Seitennutzung analysieren dürfen. Für mehr Informationen besuche unsere Datenschutzerklärung.