Ugrás a fő tartalomhoz

Blokk megjelenése: háttér, színek, térköz

Mit állíthatsz be egy blokk megjelenésén?

Ugyanaz a blokk, más ritmus, más hangsúly. A blokkok alapból a weboldalad színpalettáját és egységes térközeit használják. Egy-egy blokknál azonban eltérhetsz ettől: sötét sávba teheted, szélesebbre vagy keskenyebbre állíthatod, több vagy kevesebb levegőt adhatsz neki, elrejtheted telefonon, vagy csak egy adott időszakban mutathatod meg.

Jelöld ki a blokkot: a szerkesztő panel Blokk nézetében a színeket, a háttérképet, a méretet, a térközt és a mozgást a Megjelenés, a láthatóságot, a nyelveket, az időzítést és a horgonyt a Haladó csoportban találod.

A Mozgás résznél azt választhatod ki, hogyan érkezzen a blokk a képernyőre (például előtűnéssel vagy oldalról becsúsztatva), és ahol a blokk támogatja, mi történjen rámutatáskor és görgetés közben. Csak azok a hatások jelennek meg, amelyekre az adott blokk képes, és aki az eszközén kevesebb mozgást kért, annak a blokk a helyén állva jelenik meg.

Színek

A Színek résznél három dolgot állíthatsz: a blokk hátterét, a szöveg színét és a kiemelő színt, amelyet a linkek, ikonok és díszítő elemek használnak. A háttérnél ezek közül választhatsz:

  • Alap: a blokk az oldal hátterén marad.
  • Sötét: a blokk a weboldal sötét szövegszínét kapja háttérnek, a szöveg és a kiemelő szín pedig automatikusan hozzáigazodik. Jó választás egy hangsúlyos szakaszhoz vagy egy záró felhíváshoz.
  • Oldalszín, Kiemelő vagy Tompa: valamelyik márkaszínedből lesz a sáv (a Tompa a tompa szín halvány, áttetsző változata). Ezek a palettádat követik: ha később márkaszínt váltasz, a blokk is vele változik, és a szövege olvasható marad.
  • Egyedi szín: tetszőleges háttérszín. Ha nem adsz meg hozzá szövegszínt, a szerkesztő a márkaszíneid közül azt választja, amelyik olvasható rajta.

Szöveg- és kiemelő színt csak akkor adj meg külön, ha tudatosan egy konkrét párosítást szeretnél. Minden más esetben a háttérből következő szín a legbiztosabb.

Ha saját kiemelő színt adsz meg, az ezzel a színnel kitöltött elemeken, például egy űrlap küldés gombján, egy lépésszám jelvényén vagy az Árazási táblázat népszerű csomagjának címkéjén a felirat színét a szerkesztő automatikusan úgy választja meg, hogy olvasható legyen, egy világos kiemelő színen is.

Háttérkép és szél

A Háttérkép és szél résznél a blokk mögé egy fotót is tehetsz. A háttérkép hangulatot ad, nem tartalmat, ezért a Fátyol beállítás gondoskodik róla, hogy a szöveg minden fotón olvasható maradjon:

  • Világos: a blokk háttérszíne kerül a képre, így a szöveg színei maradnak.
  • Sötét: sötét fátyol világos szöveggel. Ilyenkor ez lép a háttérszín helyére.
  • Nincs: a kép úgy, ahogy van, az oldal saját szövegszíneivel. Csak halvány, díszítő képhez használd, és ellenőrizd, hogy a szöveg mindenhol olvasható rajta.

Válassz nyugodt, kevés részletű képet, például tájat, textúrát vagy elmosódott helyszínt, és a képen húzva állítsd be, mi maradjon látható. A háttérképhez nem kell alternatív szöveg: díszítő elem, a felolvasóprogramok átugorják.

Alsó szél: egyenes, hullám vagy ív

Ugyanitt az Alsó szél lehet Egyenes (ez az alapértelmezett), Hullám vagy Ív. Hullámnál és ívnél a blokk alja lágyan fut bele a következő szakaszba, és alatta mindig a következő blokk valódi háttere látszik, legyen az sima oldal, másik színes sáv vagy kép. Ezért nem kell színt választanod hozzá.

  • A szél háttérszínnel vagy háttérképpel rendelkező blokkon látszik; sima háttéren nincs mit kivágni.
  • A szél maga a térköz: hullámos vagy íves szélnél a Térköz alatta beállítás nem érvényes.
  • Az oldal utolsó blokkja mindig egyenes marad.
  • Oldalanként legfeljebb két ilyen szél legyen, és egy oldalon maradj egyféle formánál.

Élő példa: Hullám alsó szél. Ez a sáv Sötét hátteret és Hullám alsó szélt kapott. Az alján lágyan fut bele a következő blokkba, és a hullám alatt annak valódi háttere látszik.

Háttérkép Világos fátyollal és Hullám alsó széllel.
Sötét sáv Ív alsó széllel.

Méret és térköz

  • Tartalom szélessége: Olvasható (egy hasáb szöveghez), Széles (több hely a tagoláshoz, például rácsokhoz) vagy Teljes (nincs korlát, kitölti a blokkot).
  • Szélesség: meddig érjen a blokk háttere. Kolumna: a tartalom széléig. Teljes szélesség: a képernyő széléig. Széltől szélig: nemcsak a háttér, hanem a tartalom is a képernyő széléig ér.
  • Térköz alatta: Nincs (a következő blokk hozzáér), Szűk, Alap vagy Tágas.
  • Sáv belső tere: mennyi levegő legyen a színes sávban a tartalom körül, a tömör sávtól a magas, levegős sávig.
  • Belső margó oldalanként: ha pontosan kell, fent, jobbra, lent és balra külön-külön is megadhatod.

Az alapértékek úgy vannak beállítva, hogy az oldal egységes ritmusú legyen. Csak ott térj el tőlük, ahol tényleg szükség van rá, például két összetartozó blokknál, amelyeket közelebb szeretnél hozni egymáshoz.

Láthatóság eszközönként

  • Minden eszköz: mindenhol látható.
  • Csak mobil: tableten és asztali gépen rejtve.
  • Csak asztali: mobilon rejtve.
  • Elrejtve: a látogatók egyáltalán nem látják, de a blokk megmarad a szerkesztőben. Jól jön, ha egy blokkot későbbre tartogatsz, vagy még dolgozol rajta.

Egy tipikus használat: asztali gépen egy széles képes hero, telefonon helyette egy egyszerűbb, gyorsabban betöltődő változat.

Időzítés

Egy blokkot automatikusan megjeleníthetsz és elrejthetsz:

  • Dátumablak: a blokk csak a Től és Ig időpont között látható. Ideális egy akcióhoz, egy esemény beharangozásához vagy egy ünnepi nyitvatartáshoz: beállítod előre, és nem kell emlékezned rá, hogy később levedd.
  • Napszak óra szerint: a blokk minden nap csak a megadott órák között látható, a látogató helyi ideje szerint. Például 9-től 18-ig nappal, vagy 22-től 6-ig éjszaka.

Az Időzítés törlése gombbal visszaállíthatod, hogy a blokk mindig látszódjon.

A szerkesztőben minden blokkot látsz. A rejtett, a csak egy eszközön látható és az időzített blokkok a szerkesztőben is megjelennek, egy címkével (Csak mobil, Csak asztali, Elrejtve vagy az időzítés). Így semmi sem vesz el, de mindig látod, mit lát belőle a látogató.

Horgony: ugrás egy blokkhoz

A Horgony azonosító mezőben nevet adhatsz a blokknak, például kapcsolat vagy arak. Ezután egy gomb, egy menüpont vagy egy link a #kapcsolat címmel közvetlenül ehhez a blokkhoz görget. Kisbetű, szám, kötőjel és aláhúzás használható, és nem kezdődhet számmal. Egy oldalon minden horgony legyen egyedi.

Gyakori kérdések

Gyors megoldások a blokkok láthatóságával, színeivel és térközével kapcsolatos elakadásokra.

Súgó

Az egész weboldal színei egy helyen.

A blokkok alapszínei a márkabeállításokból jönnek. Nézd meg, hogyan válassz palettát és betűtípust.

Márka: színek és betűtípusok →Vissza a súgóhoz