Designer
Als Designer legst du fest, wie die Website aussieht: Farben, Schriften, Abstände, die Designs der Blöcke, die Stile, die Redakteure auswählen können, und die Navigation. Alles stellst du in der Oberfläche ein – du schreibst dafür weder HTML noch CSS. Deine Änderungen wirken sofort auf allen Seiten.
Erste Schritte
- Lies, was du als Designer gestaltest, und verschaffe dir mit Wie Blöcke, Designs und Stile zusammenspielen den Überblick: Was ist ein Block, was ein Design, was ein Stil – und wo wirkt eine Änderung?
- Lies, was Variablen sind: die Farben, Schriften, Abstände, Ecken und Schatten, die überall gelten.
- Lege unter Farben die Grundfarben der Marke fest.
- Wähle unter Typografie die Schriften und unter Schriftgrößen die Größen.
- Stimme die Ecken und Schatten und die Abstände ab.
- Prüfe die mitgelieferten Stile und benenne Werte so, dass Redakteure sie verstehen.
- Gestalte den Kopf der Website unter Navigation gestalten.
- Prüfe das Ergebnis im Editor auf Desktop, Tablet und Smartphone.
Ein Symbol ist dir unklar? Die Übersicht Symbole in deinen Bereichen erklärt alle Symbole von Theme, Stilen, Blöcken, Block-Studio, Navigation und Editor.
Grundlagen
Was du als Designer gestaltestDeine Aufgabe in bloqy, die Begriffe und was andere für dich übernehmen.Wie Blöcke, Designs und Stile zusammenspielenBlock, Design, Stil und Theme-Werte an einem durchgehenden Beispiel – und wo eine Änderung wirkt.Variablen: Werte, die überall wirkenFarben, Schriften, Abstände, Ecken und Schatten als gemeinsame Werte – wo du sie änderst und was der Reiter Variablen ist.Deine Bereiche im AdminWo du die Werkzeuge zum Gestalten findest.Wo deine Änderungen wirkenWas für die ganze Website gilt und was nur für eine Seite oder ein Projekt.Auf allen Bildschirmgrößen prüfenIm Editor zwischen Desktop, Tablet, Smartphone und freier Breite wechseln.Symbole in deinen BereichenWas die Symbole in Theme, Stilen, Blöcken, Block-Studio, Navigation und Editor bedeuten.
Theme
Das Theme im ÜberblickDie Reiter unter Gestaltung → Theme und wofür sie da sind.Design-System und BildschirmgrößenAb welcher Breite eine Website als Smartphone, Tablet oder Desktop gilt.AbständeWie groß „klein“, „mittel“ und „groß“ auf jeder Bildschirmgröße sind.FarbenDie Grundfarben der Website festlegen und eigene Farben ergänzen.Schrift auf Farbe und KontrastDamit Text auf farbigen Flächen gut lesbar bleibt.Farbvorschläge und Farben aus dem LogoPassende Farben finden – aus dem Logo oder als Harmonie zur Primärfarbe.Typografie: Schrift und SchnittWelche Schrift Fließtext, Überschriften und Menüs verwenden.Schriftgrößen und ÜberschriftenGrundgröße und Verhältnis je Bildschirmgröße, Überschriftengrößen und Zeilenhöhe.Schriften hinzufügenGoogle Fonts übernehmen oder eigene Schriftdateien hochladen.BildformateDie Seitenverhältnisse, auf die Redakteure Bilder zuschneiden können.
Stile
Was ein Stil istDie Auswahl, die Redakteure an einem Block sehen – und wie sie entsteht.Die mitgelieferten StileWelche Stile bloqy mitbringt, was sie bedeuten und mit welchem Wert sie starten.Stile bearbeitenWerte umbenennen, Standard festlegen, Werte entfernen und neue Stile anlegen.Ecken und SchattenWie rund und wie plastisch die Website wirkt – zentral für alle Blöcke.Hintergrund, Textfarbe und ButtonfarbeWie die Theme-Farben in die Auswahl der Redakteure kommen.Zellendesign für TabellenDie Hervorhebungen, die Redakteure für Zellen, Zeilen und Spalten wählen.
Blöcke und Designs
Blöcke im ÜberblickDie Liste aller Blöcke mit ihren Designs, aktivieren und deaktivieren.Designs eines BlocksWas Designs sind, welches Standard ist und wie Redakteure sie wählen.Das Block-StudioEin Block mit all seinen Designs auf einer Seite.Aussehen eines Designs einstellenWelche Stile ein Design anbietet und mit welchem Wert es startet.Neues Design anlegenEin bestehendes Design kopieren und mit eigenen Stil-Vorgaben versehen.Ungenutztes aufräumenBlöcke, Designs, Stile und Effekte finden, die keine Seite verwendet.Updates von DesignsWas „Update verfügbar“ bedeutet und wie du entscheidest.Blöcke verschieben und ausblendenEinen Block je Bildschirmgröße verschieben, anheften oder ausblenden.
Effekte
Effekte für BlöckeEinblenden beim Scrollen, Hover-Effekte, Hintergrund-Effekte und mehr.Effekte für die ganze WebsiteEigener Mauszeiger, Ladeanimation und weiche Übergänge zwischen Seiten.
Navigation
Navigation gestaltenAufbau des Headers, Verhalten beim Scrollen und Untermenüs auf dem Desktop.Mobiles MenüBurger-Menü, geöffnetes Menü, Untermenüs und Schnellaktionen auf dem Smartphone.Mega-MenüsGroße Ausklapp-Bereiche mit Spalten, Bildern und Buttons unter einem Menüpunkt.RandleisteEine feste Leiste am Rand mit Telefon, E-Mail, WhatsApp und Suche.Suche im HeaderWie das Suchfeld im Kopfbereich aussieht und sich auf dem Smartphone verhält.
Seitenrahmen
Seitenlayouts und SeitentypenDen Rahmen einer Seite wählen und Seitentypen mit eigenen Feldern nutzen.Kopfzeile und Footer im Editor gestaltenSeitenteile je Sprachprojekt – Kopfzeile und Footer aus Blöcken bauen.VorlagenGestaltete Sektionen als Vorlage speichern, die Redakteure einfügen können.Globale BlöckeEin Block, der auf vielen Seiten gleich ist und an einer Stelle bearbeitet wird.
Werkzeuge
Favicon und App-IconDas Symbol für den Browser-Tab und den Startbildschirm aus einem Bild erzeugen.Karten-StileGoogle-Karten in den Farben der Marke gestalten.Cookie-BannerWie der Cookie-Banner zu deiner Gestaltung passt und wer was einstellt.