Alle KurseArtSlide Designer
Die Basics zu Beginn

Die Basics zu Beginn

Die Basics zu Beginn

Kategorie:
ArtSlide Designer
Komplexität:
Anfänger

Der ArtSlide | Editor ist ein einfaches Baukastensystem, um schnell, schöne Seiten zu gestalten. Du kannst Dir selbst eine Seite zusammenbauen, oder von uns gestaltete Vorlagen nutzen. Unsere Vorlagen können natürlich auch noch weiter von Dir individualisiert werden.

Der Aufbau des ArtSlide | Editors

Der Grundaufbau des Editors ist immer gleich. Ganz oben auf der Seite kommst Du über den “Zurück”-Button zurück in die ArtSlide | App. Rechts daneben führt Dich der Button “Handbuch öffnen” zum ArtSlide Handbuch. 

Nun folgt unser Feedback Button (Konstruktive Kritik ist uns immer Willkommen). Zu guter Letzt findest Du oben den Button “Tutorial starten”. Wir empfehlen allen neuen Nutzer*innen das Tutorial mindestens einmal zu durchlaufen!

Auf der rechten Seite sind die Website-Komponenten sowie die jeweiligen Einstellungen der Komponenten zu finden

Speichern nicht vergessen!

Vergiss nie Deine Inhalte zu speichern. Oben rechts in der Ecke findest Du den blauen “Speichern”-Button.

Die Komponenten des ArtSlide | Editors

Ein Abschnitt

Du kannst Dir einen Abschnitt wie einen Tisch vorstellen, auf dem Du im weiteren Verlauf verschiedene Elemente (Teller, Gläser etc.) platzieren kannst. Ein Abschnitt ist die Grundlage für alles Weitere. 

Um einen neuen Abschnitt zu erstellen, klicke einfach auf “Neuer Abschnitt”.

Klickst Du nun auf den Abschnitt, erscheinen auf der rechten Seite die Einstellungen zu Deinem Abschnitt. Wie Du siehst, sind die Einstellungen in “Inhalt” und “Stil” aufgeteilt. Diesen Aufbau der Einstellungen wirst Du auch bei allen weiteren Elementen wiederfinden.


Inhaltlich gibt ein Abschnitt nicht viel her, schließlich dient er nur als Tisch für die anderen Elemente. Du kannst aber den Titel des Abschnitts bearbeiten. Dies ist hilfreich, um im späteren Verlauf die Übersicht zu behalten. Bspw. könnte ein Abschnitt “Über mich” oder “Über meine Kunst” heißen, weil Du diese Themen abdecken wirst. 

Deine Seiten können aus mehreren Abschnitten bestehen. Deinen Seiten müssen allerdings mindestens einen Abschnitt enthalten, um überhaupt weitere Elemente nutzen zu können.

Du kannst auch den Stil des Abschnitts bearbeiten. Du hast die Möglichkeit einerseits den Hintergrund und andererseits die Abstände zu verändern.


Hinsichtlich des Hintergrunds kannst Du entweder die Farbe des gesamten Abschnitts verändern, oder ein Foto als Hintergrund wählen. Die Ausrichtung des Bildes kannst Du ebenfalls verändern, um den gewünschten Effekt zu erzielen.

Mit den Abständen kannst Du Deinen Abschnitt nach Belieben vergrößern, bzw. die Form des Abschnitts anpassen. Am Besten spielst Du mit den Abständen einfach etwas herum, um ein Gefühl für die Wirkung zu bekommen.


Wenn es Dir nicht gefällt, kannst Du das Speichern einfach unterlassen und die Seite neu laden. Die Änderungen sind in diesem Fall verloren.

Um aus den Abschnitts-Einstellungen herauszukommen, klicke einfach auf den Pfeil direkt neben dem Wort “Einstellungen”. Nun kommst Du in die Auswahl verfügbarer Elemente, mit denen Du Deinen “Tisch” decken kannst.

Mindestens ein Teller auf Deinem Tisch!

Ein Abschnitt muss mindestens ein Widget (Element) enthalten, um auf Deiner Produktseite angezeigt zu werden. Solltest Du Deinen leeren Abschnitt speichern, ohne dass ein Element in diesem Abschnitt vorhanden ist und die Seite neu laden, wird dieser Abschnitt nicht mehr verwendet werden können! Lösche den Abschnitt in diesem Fall...

Um einen Abschnitt zu löschen: Klicke auf den Abschnitt, welchen Du löschen möchtest. In den Einstellungen unter Inhalt findest Du ganz unten den Button “Abschnitt löschen”.

Speichern, auch in diesem Fall, nicht vergessen!

Tisch weg. Alles weg.

Wenn Du einen Abschnitt löscht, wird auch der gesamte Inhalt (also alle weiteren Widgets des Abschnitts) gelöscht!

Eine Vorlage

Gerade zu Beginn kann es Sinn ergeben einfach eine von uns vorgebaute Vorlage zu nutzen. In Zukunft werden weitere Vorlagen dazukommen. Um eine Vorlage auf Deiner Seite zu implementieren, klicke einfach auf “Seitenvorlage wählen”.


Schon kommst Du in das Vorlagen-Menü.

Wähle ein passende Vorlage (mit einem Doppelklick) aus und der ArtSlide | Editor lädt die Vorlage in Deine Seite.

Vorlagen verändern Deine Seite vollständig!

Zum jetzigen Zeitpunkt löscht das Nutzen einer Vorlage alle von Dir zur Seite hinzugefügten Abschnitte. Du kannst jedoch noch weitere Abschnitte hinzufügen, nachdem Du eine Vorlage ausgewählt hast.

Ein Widget

Die Elemente, welche in einen Abschnitt kommen heißen “Widgets” (auf dt.: eine Einheit, ein Ding oder eine Kapsel). 

Um unsere Tisch-Metapher erneut aufzunehmen: Ein Widget ist ein Element, welches Du auf Deinem Tisch platzierst. Zum Beispiel also ein Teller oder ein Glas. 

Im folgenden werden wir die verschiedenen Widgets kurz vorstellen, um Dir ein Gefühl für die Elemente zu geben. Grundsätzlich unterscheiden wir zwischen Inhalts- und Layout-Widgets. Um ein Widget in den Abschnitt zu bringen, ziehe (Drag-and-Drop) einfach das gewünschte Widget in eine der blau aufleuchtenden Stellen. Diese Stellen sind zudem mit den Worten “Widget hier rein ziehen” gekennzeichnet.

Auch hier kannst Du wie bei den Abschnitten die Einstellungen des Widgets öffnen, indem Du auf das Widget klickst.

Um ein Widget zu löschen: Klicke auf das Widget, welches Du löschen möchtest. In den Einstellungen unter Inhalt findest Du ganz unten den Button “Widget löschen”.

Speichern auch in diesem Fall nicht vergessen!

Ein Inhalt-Widget

Wie es der Name schon vermuten lässt, sind “Inhalt-Widgets” Elemente, welche einen bestimmten Inhalt präsentieren. Gegenwärtig gibt es 3 “Inhalts-Widgets”: Titel-, Textabschnitt- und Bild-Widgets.

Inhalt-Widgets haben sehr ähnliche Einstellungsmöglichkeiten. Wie bei unseren Abschnitten (also unseren Tischen) gibt es die Möglichkeit den Inhalt zu ändern und die Möglichkeit den Stil zu ändern.


Titel-Widget

Durch den Titel dieses Widgets (und nein, das war nicht mit Absicht), ist die Funktion grundsätzlich selbsterklärend. Dieses Widget lässt Dich einen Titel präsentieren, dass es sich gewaschen hat. Klicke auf das Widget, um die Einstellungen zu öffnen. Nun kannst Du unter “Inhalt” den Platzhalter-Titel nach Belieben verändern.

Klicke auf “Inhalt aktualisieren”, um den Inhalt zu aktualisieren (Überraschung!).

Aktualisieren ≠ Speichern!

Das aktualisieren des Inhalts zeigt Dir nur, wie der Titel im Nachhinein aussieht. Es ersetzt das Speichern der Seite allerdings nicht!

Nun aber zum Stil Deines Titel-Widgets. Im Gegensatz zu einem Abschnitt gibt es 3 verschiedene Formen, nach welchen Du Dein Widget verändern kannst.

Farben

Du kannst sowohl die Textfarbe als auch die Hintergrundfarbe verändern. Auch hast Du die Möglichkeit die Ecken des Elements abzurunden. (Eigentlich nur sichtbar, wenn Du auch die Hintergrundfarbe verändert hast.)

Typographie

Unter diesem Punkt kannst Du z.B. die Textausrichtung verändern. Auch lässt sich der Stil des Textes verändern. So könntest Du Deinen Titel z.B. fett oder kursiv schreiben. Zu guter Letzt lässt sich noch die Schriftgröße anpassen. (Vielleicht möchtest Du Dir einen Untertitel basteln)

Abstände

Im Grunde lässt sich mit den Abständen das Widget vergrößern. Somit kannst Du z.B. mehr Abstand zu anderen Elementen gewinnen. Im Gegensatz zu Textabschnitt-Widgets kann allerdings nur der Abstand nach oben und nach unten verändert werden.

Textabschnitt-Widget

Dieses Widget lässt Dich einen Textabschnitt hinzufügen. (Erneut ist der Name Programm) 

Ziehe einfach ein Textabschnitt-Widget in eine der markierten, blauen Felder und leg los! Mit diesen Widgets lässt sich richtig viel Inhalt verarbeiten. Vielleicht möchtest Du etwas mehr zu Deiner Person sagen? Oder ein Produkt verlangt eine ausführlichere Beschreibung? 

Ein Textabschnitt-Widget ähnelt dem Titel-Widget stark. Unter dem Einstellungspunkt “Farben” hast Du die gleichen Einstellungsmöglichkeiten. Hinsichtlich der Typographie fehlt jedoch eine Möglichkeit. Du kannst die Schriftgröße nicht verändern. 

Dafür hast Du die Möglichkeit unter dem Punkt Abstände auch nach links und rechts einen Abstand einzubauen. Zusätzlich zu der Möglichkeit nach oben und nach unten einen Abstand einzubauen.

Bild-Widget

Natürlich willst Du auf Deinen Produkt- und Studioseiten nicht nur mit Text arbeiten. 

Wir empfehlen gerade längere Texte mit Bildern zu begleiten und somit aufzulockern. 

Ein Bild-Widget lässt Dich Deiner Seite ein Bild hinzufügen. Wenn Du ein Bild-Widget in einem Abschnitt ziehst, wird vorerst ein Platzhalter-Bild hinein geladen. Dieses kannst bzw. solltest Du natürlich verändern. Unter dem Einstellungspunkt “Inhalt” kannst Du genau dies tun. Wenn Du auf “Bild ändern” klickst, öffnet sich der Medienverwalter. 



Der Medienverwalter

Der Medienverwalter ist ein hilfreiches Werkzeug, wenn Du viel mit ArtSlide arbeitest. Aufgeteilt ist der Verwalter in “Deine Medien” und “Externe Medien”.


Unter “Deine Medien” findest Du alle Bilder, welche Du jemals auf ArtSlide hochgeladen hast. Bilder hochladen kannst Du übrigens über den Button unten links in der Ecke.

Unter “Externe Medien” findest Du bislang einen Zugang zur Unsplash-Foto-Bibliothek. Unsplash ist eine Plattform, auf welcher Du kostenfreie Fotos findest. Beachte zu jedem Zeitpunkt die Unsplash-Lizenz. (Keine Sorge, diese schränkt kaum ein!)

Gerade für Hintergrundbilder kann es häufig dazu kommen, dass ein lizenzfreies Foto am Besten geeignet ist. 

Wenn Du das perfekte Bild gefunden hast, klicke einfach auf das Bild und danach unten rechts auf den Button “Bild einfügen”.


Unter dem Einstellungspunkt “Stil” kannst Du die Maße verändern. Also die Höhe des Bildes anpassen und, wie bei allen bisherigen Widgets, die Ecken des Widgets abrunden. 

Außerdem kannst Du die Hintergrundfarbe verändern, welche allerdings nur zu sehen ist, wenn Du unter dem Einstellungspunkt “Abstände”, die Abstände nach veränderst. Wie bei Textabschnitt-Widgets kannst Du den Abstand nach oben, unten, links und rechts verändern.


Ein Layout-Widget (Aktuell 50:50 Layouts)

Gegenwärtig ist nur ein Layout-Widget vorhanden. Dies wird sich in Zukunft aber noch ändern. Das aktuell vorhandene Layout-Widget ist ein “Spalten [50:50]”-Widget. 

Wie bei den Inhalts-Widgets, kannst Du ein Layout-Widget einfach in eine der markierten, blauen Felder ziehen, um es zu nutzen. Sobald Du ein solches Widget in einem Abschnitt hast, lässt es Dich zwei Inhalts-Widgets nebeneinander anzeigen. Dies kann besonders sinnvoll sein, wenn Du ein Bild hast, welches Du in einem beiliegenden Text näher erläutern möchtest. 

Im Grunde entstehen, wenn Du ein Spalten-Widget in einem Abschnitt ziehst, einfach 2 Felder nebeneinander, welche Du nach Belieben nutzen kannst. 

Ein Layout-Widget hat bislang genau eine Einstellungsmöglichkeit. Unter “Stil” kannst Du die Ausrichtung der beiden Elemente festlegen. In den meisten Fällen ist es sinnvoll eine Ausrichtung auf die Mitte der Elemente.


Die Vorgehensweise mit dem ArtSlide | Editor

Um Deine Seiten zu verändern benötigt es eine immer gleiche Vorgehensweise. 


1.a) Einen neuen Abschnitt hinzufügen

Zuerst muss ein neuer Abschnitt hinzugefügt werden. Dieser fungiert wie ein Tisch, welchen Du dann mit verschiedenen Elementen bestücken kannst. Der Abschnitt ist die Grundlage für alles weitere. Deine Seiten können mehrere Abschnitte enthalten. 

Dies sorgt für eine bessere Übersicht. Gib Deinen Abschnitten einen spezifischen Namen, um noch geordneter vorzugehen.


1.b) Eine Vorlage wählen

Du möchtest schneller zum Ziel kommen? Kein Problem! 

(Obwohl natürlich der Weg das Ziel sein sollte, oder?) Wähle eine unserer Vorlagen und verändere nur noch den Inhalt. Mehr dazu aber in Schritt 3.

Vorlagen-Vielfalt & Löschung vorhandener Inhalte

Zum Standpunkt unserer BETA sind nur erste einfache Vorlagen vorhanden. Mit der Zeit werden wir weitere kreieren und zur Verfügung stellen. Zudem werden alle bereits integrierten Abschnitte gelöscht, wenn Du eine Vorlage auswählst.


2. )Ein Widget hinzufügen

Wenn Du einen (oder mehrere) Abschnitt(e) auf Deiner Seite hinzugefügt hast, kannst Du “den Tisch decken”.

Soll heißen, Du kannst den Abschnitt mit Inhalten füllen. Ziehe hierfür ein Widget in eines der blau aufleuchtenden Felder, markiert mit den Worten “Widget hier rein ziehen”. Es kann passieren, dass Abschnitte, welche bereits erste Widgets enthalten, nicht mehr die Worte “Widget hier rein ziehen” anzeigen. Fokussiere Dich also auf die blauen Felder.

3. )Widget nach Belieben bearbeiten

Du hast also ein Widget integriert. Soweit, so gut. Wann immer Du auf ein integriertes Widget klickst, öffnen sich in der rechten Leisten die Einstellungsmöglichkeiten zu dem spezifischen Widget. Diese sind weiter oben in dem Kapitel Unterpunkt “Die Komponenten des ArtSlide | Editors” zu finden.

Nun aber ran an den Speck!

In den nächsten beiden Kapiteln zeigen wir Dir exemplarisch, wie Du eine gute Produktseite planst und umsetzt.



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.