Elementor hacky, které Blocksy nativně neumí - Webseidonův Almanach Tipy/Triky

Elementor hacky, které Blocksy nativně neumí (ale budeš vypadat, že umí)

Používáš Blocksy, miluješ Elementor, ale klient chce animovaný sticky header, karty z CPT na autopilota a mikro‑interakce, které v klikátkách neexistují. Vytáhni tyhle hacky a ušetříš si plugin‑overload i bolest z update‑hellu.

1 · Proč hackovat, když existují pluginy?

Každý extra plugin = další JS, další CSS, další riziko XSS. Elementor + Blocksy zvládnou 90 % požadavků, pokud víš, kam sáhnout:

Lepší výkon – méně HTTP requestů, méně bloat‑kódu.
Kontrola – update šablony tě nerozhodí, když kód vlastníš.
Security – minimalizuješ zásuvné moduly třetích stran.

2 · Příprava: child theme a bezpečné pískoviště

Child theme: vytvoř blocksy-child, nahraj style.css s headerem a functions.php. Blocksy to respektuje.
Local WP: Instant WP / DevKinsta / Local by Flywheel pro test.
Verzování: Git + GitHub Actions → scp nebo rsync na staging.

3 · Hack #1 – Sticky header s proměnlivou výškou podle scrolu

3.1 Co blokuje Blocksy

Umí sticky, neumí zmenšovat logo a paddingy při scrolu. Elementor Pro to umí, Free ne.

3.2 Kód (JS + CSS)

// /blocksy-child/assets/js/header-shrink.js
(function() {
  const header = document.querySelector('.ct-header');
  if (!header) return;
  const shrink = () => {
    if (window.scrollY > 120) header.classList.add('is--shrunk');
    else header.classList.remove('is--shrunk');
  };
  shrink();
  window.addEventListener('scroll', shrink);
})();

/* /blocksy-child/style.css */
.ct-header{transition:all .3s ease}
.ct-header.is--shrunk{padding:8px 0}
.ct-header.is--shrunk .logo img{max-height:32px}

3.3 Zapojení

// functions.php
add_action('wp_enqueue_scripts', function(){
  wp_enqueue_script('header-shrink', get_stylesheet_directory_uri().'/assets/js/header-shrink.js', [], null, true);
});

Hotovo. Bez Pro licenci, bez dalšího pluginu.

4 · Hack #2 – Dynamické karty CPT v Elementoru bez Pro

4.1 CPT UI + ACF

Vytvoř CPT Reference, pole client_logo, excerpt, url.

4.2 WP_Query widget (free addon)

Nainstaluj Elementor Custom Skin → povol Loop Item. Vytvoř template pro kartu reference.

4.3 ACF Shortcode

[acf field="client_logo" post_id="ID"]

Náhledy běží dynamicky, nepotřebuješ Pro Repeater.

5 · Hack #3 – Globální CSS proměnné v Blocksy + Elementor

Blocksy generuje root CSS proměnné v inline styly, Elementor svoje – chaos. Sjednoť:

:root{
  --brand:#0069ff;
  --accent:#ffb703;
}
.elementor-button{background:var(--brand)}
a:hover{color:var(--accent)}

Přidej do child style.css. Náhled Elementor = F5.

6 · Hack #4 – Inline SVG ikony lazy‑loaded

FontAwesome = 70 kB. Řešení: SVG sprite.

// functions.php
add_action('wp_footer', function(){
  include get_stylesheet_directory().'/assets/svg/sprite.svg';
});

<svg class="icon"><use href="#icon-instagram"></use></svg>
<script>document.querySelectorAll('.icon use').forEach(u=>u.closest('svg').setAttribute('aria-hidden','true'));</script>

Snížíš HTTP requesty, zlepšíš CLS bod ve Web Vitals.

7 · Hack #5 – Header meta‑pole pro Page Speed IQ

Google miluje <meta name="theme-color">. Blocksy nemá GUI.

add_action('wp_head', function(){
  echo '<meta name="theme-color" content="#0069ff">';
});

Drobnost, která přidává +1–2 b na PageSpeed.

8 · Hack #6 – Přepínač temného režimu bez pluginu

8.1 Button v Elementoru

Tlačítku dej ID darkToggle.

8.2 JS

// dark-mode.js
const btn=document.getElementById('darkToggle');
btn.onclick=()=>{document.body.classList.toggle('dark');localStorage.setItem('dark',document.body.classList.contains('dark'))}
if(localStorage.getItem('dark')==='true')document.body.classList.add('dark');

8.3 CSS

.dark{--brand:#ffb703;--bg:#0d1117;color:#c9d1d9;background:var(--bg)} a{color:var(--brand)}

9 · Hack #7 – WooCommerce mini‑košík jako off‑canvas

Blocksy Pro umí, Free ne. Spoj LeanCart + trochu JS:

document.querySelector('.ct-cart-icon').onclick=()=>{document.body.classList.toggle('mini-cart--open')}

.mini-cart--open .mini-cart{transform:translateX(0)}
.mini-cart{position:fixed;right:0;top:0;width:320px;height:100%;background:#fff;box-shadow:-2px 0 10px rgb(0 0 0 /.2);transform:translateX(100%);transition:.3s}

Levné, rychlé, responzivní.

10 · Mikro‑SEO: schema, lazy‑loading, WCAG 2.2

Schema: ACF JSON‑LD pole, injektuj přes wp_head.
Lazy loading: add_theme_support('lazy-load').
WCAG 2.2: Kontrast >4.5:1, fokus outline, ARIA labels.

11 · Case study: malý e‑shop do dvou dnů

Klient: lokální pekárna. Požadavky: katalog 20 produktů, dark mode, online košík, PageSpeed >90.

Úkol	Čas	Tool/Hack
Nastavení Blocksy + Elementor	45 min	base kit
Sticky header + dark mode	25 min	Hack #1 & #6
Produkty CPT + Woo Simple	40 min	Hack #2
Mini‑košík off‑canvas	35 min	Hack #7
SVG ikony & schema	30 min	Hack #4 & #5
Test & deploy	15 min	WP Staging
Celkem	≈ 3 h 10 min	—

PageSpeed mobil = 93, desktop = 100. Počet pluginů: 8 (bez bloat).

12 · FAQ a tvoje nejčastější proklínání

Update Blocksy přepsal změny!: Neměl by, pokud je kód v child theme. Kontroluj i cache plugin (optimalizuje CSS).
Elementor CMS zlobí s SVG sprite: Přidej ignoreInlineSVG v safe‑mode nebo whitelist MIME image/svg+xml ve Security pluginu.
Dark mode bliká při načtení: Přidej do <head>: <script>if(localStorage.getItem('dark')==='true')document.documentElement.classList.add('dark');</script>

13 · Závěr

Blocksy + Elementor Free zvládnou víc, než si většina lidí myslí. Stačí pár řádků CSS/JS/PHP, a to, co působí jako „Pro‑only funkce“, máš za pár minut. Výsledek? Lehký web, vyšší PageSpeed, méně pluginů a klient, který kouká, jak jsi to všechno sfoukl u jednoho espressa. Hack happy!

Klíčová slova

elementor, blocksy, wordpress, hacky, tipy, triky, css snippet, javascript, dynamic content, hook, filtr, child theme, webdesign

↥ Zpět nahoru