Das ist dein Spielplatz für Systeme - damit du den Pagebuilder (Editor) kennenlernen kannst

Hier kannst du dich ausprobieren - aber nichts falsch machen. Jetzt geht es ans Üben.

Übung - Textfeld verstehen

a. Nimm deine Maus und bewege sie HIER über den Text.

Was passiert? Welche Farbe hat die Umrandung? Was steht links über der Umrandung?

Jetzt klicke hier in den Text und schreibe deine Antwort zu 1a

b. Nimm deine Maus und bewege sie über den Text. Dann klicke in den Text.

Was passiert? Welche Farbe hat die Umrandung jetzt?

Jetzt klicke hier in den Text und schreibe deine Antwort zu 2b

c. Jetzt schreibe einen Text und breche ihn um

Schreibe in das rosa Textfeld deinen Vornamen und Namen und deine Adresse (das geht wie sonst am Computer auch)

Textfeld

So sollte das Ergebnis aussehen

Birgit Baindl

Fantasiestraße 18

12345 Traumstadt

Übung - Text formatieren

a. Jetzt veränderst du die Schriftstärke etc.

Klicke in das rosa Textfeld

Markiere den Text Fett (Bold) und gehe dann auf das B (links oben)

Markiere den Text Italics (Schräg) und gehe dann auf das I (links oben)

mach jetzt weiter mit unterstrichen, gehe auf das U

und dann noch mit durchgestrichen, gehe auf das S

(die Lösung siehst du drunter, hellblau unterlegt

Fett (Bold) Italics (Schräg) unterstrichen durchgestrichen

Fett (Bold)Italics (Schräg)unterstrichendurchgestrichen

b. Jetzt änderst du die Schriftgrößen und Zeilenabstände

Fahre mit der Maus über das rosa Textfeld, auf der rechten Seite erscheint ein Rädchen (für Einstellungen).

Klicke auf das Einstellungsrädchen darauf und schau, was du im linken Seitenmenü siehst:

Schriftgröße verändern (verwende den Schieberegler oder die Pfeile nach oben und unten)

Zeilenhöhe verändern (verwende den Schieberegler oder die Pfeile nach oben und unten)

Vergrößere die Buchstaben auf Schriftgröße 30

und Zeilenabstand 40

So sollte es dann aussehen: Buchstaben auf Schriftgröße 30

und Zeilenabstand 40

Vergrößere die Buchstaben auf Schriftgröße 25

und Zeilenabstand 30

und mache die Schrift FETT (Bold)

So sollte es dann aussehen: Buchstaben auf Schriftgröße 25

und Zeilenabstand 30

und Schrift FETT (Bold)

c. Jetzt änderst du die Ausrichtung der Schrift: linksbündig - mittig - rechtsbündig

Fahre mit der Maus über das rosa Textfeld, auf der rechten Seite erscheint ein Rädchen (für Einstellungen).

Klicke darauf und suche im Seitenmenü nach "Polsterung" (einfach nach unten scrollen); unter Polsterung siehst du dann "Angleichen". Hier kannst du linksbündig, mittig oder rechtsbündig einstellen.

Stelle mich linksbündig ein:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

So sollte es linksbündig aussehen:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

Stelle mich rechtsbündig ein:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

So sollte es rechtsbündig aussehen:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

Stelle mich mittig ein:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

So sollte es mittig aussehen:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

Übung - Kopieren

a. Jetzt verdoppelst du einen Text

Nimm deine Maus und bewege sie über den Text unten

Du siehst rechts neben dem Einstellungsrädchen zwei Papiersymbole (das steht für "Verdoppeln bzw. Duplizieren"

Klicke auf das Verdoppeln-Symbol - und der Text ist jetzt verdoppelt

Ich möchte bitte dupliziert (verdoppelt) werden

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

b. Jetzt löscht du einen Text

Nimm deine Maus und bewege sie über den Text unten

Du siehst rechts neben dem Einstellungsrädchen ganz rechts ein Papierkorbsymbol

Klicke auf das Papierkorbsymbol - und der Text ist gelöscht (du wirst zur Sicherheit noch gefragt, ob du löschen willst)

Ich möchte bitte gelöscht werden

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum

Übung - Elemente einfügen

a. Jetzt fügst du einen Text ein

Klicke dafür mit der Maus links neben dieses Feld.

Das Seitenmenü verändert sich.

Klicke jetzt auf "Text" - siehst du das "Ziehkreuz"

halte den Bereich mit der Maus fest und ziehe ihn in den Bereich unter diesem Text

Achte auf blaue Linie, die du siehst

Dann lass los

b. Jetzt fügst du eine Überschrift ein

Klicke dafür mit der Maus links neben dieses Feld.

Das Seitenmenü verändert sich.

Klicke jetzt auf "Überschriften-Text" - siehst du das "Ziehkreuz"

halte den Bereich mit der Maus fest und ziehe ihn in den Bereich unter diesem Text

Achte auf blaue Linie, die du siehst

Dann lass los

c. Jetzt fügst du eine Aufzählung ein

Klicke dafür mit der Maus links neben dieses Feld.

Das Seitenmenü verändert sich.

Klicke jetzt auf "Aufzählung" - siehst du das "Ziehkreuz"

halte den Bereich mit der Maus fest und ziehe ihn in den Bereich unter diesem Text

Achte auf blaue Linie, die du siehst

Dann lass los

d. Jetzt änderst du das Symbol bei der Aufzählung und die Schriftgröße des Textes

Klicke dafür auf das Einstellungsrad bei der Aufzählung.

Verändere die Schriftgröße auf 25

Dann gehe etwas weiter runter zu "Iconwähler"

in einem Feld steht "check" - klicke darauf und du siehst alle Symbole, die du auswählen kannst

wähle einen Pfeil (arrow) - hier musst du entweder ein Symbol auswählen, oder den engl. Begriff "arrow" eintippen.

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

  • so sollte es dann aussehen

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

e. Jetzt fügst du Spalten ein

Klicke dafür mit der Maus links neben dieses Feld.

Das Seitenmenü verändert sich.

Unter "Spaltenlayout" findest du verschiedene Möglichkeiten für Spalten

wähle 2 Spalten halte den Bereich mit der Maus fest und ziehe ihn in den Bereich unter diesem Text

Achte auf blaue Linie, die du siehst

Dann lass los

f. Jetzt fügst du Texte in die Spalten ein

Klicke dafür mit der Maus links neben dieses Feld.

Das Seitenmenü verändert sich.

Unter "Spaltenlayout" findest du verschiedene Möglichkeiten für Spalten

wähle 2 Spalten halte den Bereich mit der Maus fest und ziehe ihn in den Bereich unter diesem Text

Achte auf blaue Linie, die du siehst

Dann lass los

Anschließend wähle "Text" und versuche den Text in die linke Spalte zu ziehen

Schreibe in den Text "linke Spalte"

Ziehe ein "Bild" in die rechte Spalte

linke Spalte.

Übung - Bilder einfügen und verändern

a) Jetzt fügst du Bilder ein bzw. tauscht die vorhandenen Bilder aus

Gehe mit der Maus über das Bild, bis der Rahmen orange wird.

Klicke auf das Einstellungsrad

Das Menü links verändert sich.

Du findest links den Namen des Bildes (Bilddatei) und ein Kreuz daneben. Mit dem Kreuz kannst du das Bild löschen.

Mit der Wolke neben dem Bildnamen kannst du

a) ein Bild von deinem Computer hochladen oder

b) ein Bild aus den bereits hochgeladenen Bildern auswählen

Das Bildformat ist hier 500x500 px

Du kannst auch ausprobieren, wenn du 500x700 px als Größenformat auswählst. (geht genauso!)

b. Jetzt veränderst du die Bildgröße

Gehe mit der Maus über das Bild, bis der Rahmen orange wird.

Klicke auf das Einstellungsrad

Das Menü links verändert sich.

Verändere die Bildgröße mit dem Schieberegler - verkleinere ein Bild

und dann

setze das Bild linksbündig, dann mittig, dann rechtsbündig in der Spalte

Übung - Bilder formen und umranden

a. Jetzt veränderst du die Form der Bilder

Gehe mit der Maus über das Bild, bis der Rahmen orange wird.

Klicke auf das Einstellungsrad

Das Menü links verändert sich.

Scrolle nach unten bis zu "Umrandung" und dann "Radius der Umrandung"

Du kannst den Radius der Umrandung einzeln einstellen oder für das gesamte Bild.

Probiere das mal aus.

Beim linken Bild ist nur oben link ein Radius eingestellt

Beim mittleren Bild ist oben rechts und unten links ein Radius eingestellt

Beim rechten Bild ist der Radius für alle vier Ecken gleich eingestellt

Rahmenradius (eine Ecke)

Rahmenradius (2 Ecken)

Rahmenradius (4 Ecken)

b. Jetzt bekommen die Bilder einen Rand

Gehe mit der Maus über das Bild, bis der Rahmen orange wird.

Klicke auf das Einstellungsrad

Das Menü links verändert sich.

Scrolle nach unten bis zu "Umrandung"

Dann gehe etwas weiter nach unten bis "Stil" und wähle aus, ob der Rand solide, gepunktet, gestrichelt sein soll.

Und dann lege noch mit dem Farbwähler eine Farbe fest.

Und wähle die "Breite" des Randes aus.

Rand solide

Rand gepunktet

Rand gestrichelt

Übung - Hintergründe

Übung - Hintergrund in der Breite füllen

a. Hintergrund in der Breite füllen

Gehe mit der Maus über das den Hintergrund und klicke darauf.

Klicke auf das Einstellungsrad

Das Menü links verändert sich.

Scrolle nach unten bis "Hintergrund"

Hier findest du das "Hintergrundbild"

Unter "Display Image (also Anzeige des Bildes) kannst du verschiedene Möglichkeiten auswählen.

Wähle "100% in der Breite fixieren" und probiere aus, was passiert, wenn du im rechts davon stehenden Rahmen einmal den Punkt unten, den Punkt in der Mitte und den Punkt oben anklickst.

b. Tausche den Hintergrund aus

Gehe mit der Maus über das den Hintergrund und klicke darauf.

Klicke auf das Einstellungsrad

Das Menü links verändert sich.

Scrolle nach unten bis "Hintergrund"

Hier findest du das "Hintergrundbild"

Tausche das Hintergrundbild aus und verwende ein 16:9 Format (es gibt dazu eine Lektion)

Du kannst auch die Hintergründe verwenden, die ich auf Canva mit dir geteilt habe.

Übung - Farbwähler

a. Arbeite mit dem Farbwähler

Gehe mit der Maus über den Hexcode - du wirst sehen, dass das nur ein Textfeld ist, das transparent ist.

Jetzt klicke auf den äußeren Bereich der Farbfläche (eine Reihe) und gehe auf Einstellungen.

Das Menü links verändert sich.

Du siehst einen runden Farbpunkt (Hintergrundfarbe)

Klicke auf den Farbpunkt. Es öffnet sich der Farbwähler.

Du kannst jetzt entweder den Hexcode eingeben

oder einfach mit den Schiebereglern eine Farbe suchen

oder in das große Farbfeld klicken.

Spiele hier ein bisschen.

Finde den grünen Hexcode (unten links) heraus

Verändere die Farbfelder in der unteren Reihe in die Farbhintergründe, die beschrieben sind (pink, gelb, weiß)

#333333

#B61C1C

#3B435F

#BD10E0

#?????

pink

gelb

weiß

Übung - Ausprobieren an Teilen der Vorlage

Impressum und Datenschutz

Arbeite die Lektion im Kursbereich zu Impressum und Datenschutzgenerator durch.

Nutze den Impressumsgenerator und erstelle dein Impressum (dazu gibt es eine Lektion)

Die Vorlage findest du im Funnel

Probiere aus, wie weit du mit dem Datenschutzgenerator kommst und erstelle einen ersten Datenschutz-Entwurf

Die Vorlage findest du im Funnel

Übung - Footer-Menü

Die Footer-Menüleiste (unten)

Setze deinen Vornamen und Namen ein

Footermenü verlinken

Verlinke jetzt und passe den Footer an dein Design an.

Das Footermenü muss die rechtlich erforderlichen Angaben (Impressum und Datenschutz) enthalten. Keine weiteren Ablenkungen.

Füge in den rechten Menübereich ein Bildelement ein. Du kannst dein Logo in das Bildelement einsetzen.

Quadratische Logos sind für Header oder Footer nicht so gut geeignet