Ako na responzivitu vo WordPress?

Problém moderných FSE (Full Site Editor) tém je nedostatočná implementácia responzivity – možnosti iného nastavenia zobrazenia na rôznych rozlíšeniach/zariadeniach. Ako sa s tým popasovať?

1. Použitite pluginov

Pre lepšiu kontrolu nad responsivitou blokov môžeš využiť pluginy, ktoré pridávajú responsívne nastavenia do blokového editora:

Doplnky s rozšírenými funkciami:

1. Kadence Blocks:
   • Poskytuje možnosť nastaviť rôzne hodnoty pre desktop, tablet a mobil pre každý blok (napr. veľkosť písma, medzery, zarovnanie).
   • Obsahuje jednoduché nástroje na prispôsobenie správania stĺpcov.
2. Stackable Blocks:
   • Pridáva pokročilé možnosti pre každý blok, vrátane animácií a prispôsobenia pre rôzne zariadenia.
3. GenerateBlocks:
   • Umožňuje detailnú kontrolu nad štruktúrou a rozložením blokov na rôznych obrazovkách.

2. Použitie CSS prispôsobených pre rôzne zariadenia

Ak natívne možnosti nepostačujú, môžeš pridať vlastné CSS:

Základné CSS pre responsivitu:

Použitie mediálnych dotazov (media queries) ti umožní presne špecifikovať správanie blokov pre rôzne veľkosti obrazovky.

Príklad:

/* Pre menšie obrazovky (mobil) */
@media (max-width: 768px) {
    .wp-block-column {
        flex-basis: 100%; /* Každý stĺpec zaberie celú šírku */
        margin-bottom: 20px;
    }
    .wp-block-group {
        padding: 10px;
    }
}

/* Pre stredné obrazovky (tablet) */
@media (min-width: 769px) and (max-width: 1024px) {
    .wp-block-column {
        flex-basis: 50%; /* Každý stĺpec zaberie polovicu šírky */
    }
}

Tento CSS kód môžeš pridať do:

• Vlastného CSS (Vzhľad → Prispôsobenie → Dodatočné CSS).
• Súboru style.css v aktívnej téme.

3. Natívne možnosti v blokovom editore (Gutenberg)

Základný WordPress editor obsahuje obmedzené možnosti responsivity, ale niektoré bloky majú natívnu podporu prispôsobenia:

Možnosti v paneli „Bloky“ (vpravo):

1. Stacking (stohovanie):
   • Pri blokoch ako Group Block alebo Columns Block môžeš nastaviť spôsob zobrazenia na menších obrazovkách:
     • Horizontálne alebo vertikálne usporiadanie.
   • Tieto nastavenia sa aktivujú automaticky, ale ich správanie môžeš ovplyvniť cez CSS.
2. Margin a Padding:
   • Nastavuješ medzery vo vnútri alebo okolo blokov. Niektoré témy (napr. Blocksy, Kadence) umožňujú rozdielne hodnoty pre desktop, tablet a mobil.
3. Typografia:
   • Môžeš zmeniť veľkosť písma podľa zariadenia, ak je to podporované.

4. Dynamické zobrazenie pomocou podmienok

Niektoré pluginy a nástroje umožňujú dynamicky meniť viditeľnosť alebo správanie blokov podľa veľkosti obrazovky:

• Visibility Settings: Niektoré doplnky, ako Kadence alebo Spectra, umožňujú skryť bloky pre určité zariadenia (napr. blok viditeľný len na mobiloch).

Vaše tipy a triky?

Ako riešite responzívny dizajn vo Wordprese vy? Máte nejaké tipy a triky? Podeľte sa o ne v komentároch pod článkom.