Jan Stárek / 01.08.2026
Stavba fotografického portfolia na WordPressu+Elementor s pomocí Claude
1.Úvodem: proč nakonec fotografické portfolio a proč Claude?
Můj výstup do předmětu Praxe je navázaný na můj původní cíl v předmětu Studijní seminář, kde jsem si stanovil, že se budu věnovat stavbě webové stránky pomocí AI. Mojí motivací bylo využít jazykový model, v tomto případě Claude, ke stavbě reálného produktu, který neputuje jen do šuplíku, ale bude pro mě mít reálný význam.
Jelikož mám již od prvního semestru v hlavě, že si postavím oddělené webové fotografické portfolio, byl tento časový blok v rámci předmětu Praxe ideální. Myšlenka na subdoménu vznikla v rámci tvorby tohoto projektově orientovaného designového portfolia. Na původní článek je možné se prokliknout zde.
Také původní adresa jstarek.cz byla mé fotografické portfolio pro prezentaci svatební fotografie, které se vedle své hlavní práce věnuji.
Subdoména mi tedy dávala smysl, protože jsem v rámci ní mohl rovnou poukázat na to, že se jedná o fotografickou webovou stránku. A tak vznikla subdoména fotograf.jstarek.cz.
Obecně jsem přemýšlel, jak k jejímu designu přistoupit. Moje prvotní myšlenka byla zkusit využít AI nástroj Pencil.dev od Tomáše Krchy pro AI design digitálních produktů. To jsem nakonec po pár pokusech vzdal i s vědomím toho, že si chci zachovat výhody redakčního prostředí WordPressu, na kterém běží má hlavní webová stránka.
Zároveň přede mnou stál prázdný WordPress této subdomény a já jsem chtěl tento nový produkt posunout na novou úroveň. Chtěl jsem, aby celek působil kvalitně, nadčasově a aby reprezentoval mě jako fotografa.
Další klíčovou věcí byl fakt, že web neměl sloužit pouze jako prezentace svatební fotografie, ale i jako místo, kam mohu nahrát fotky z cest, produktů, portréty lidí a podobně.
Nemalou roli zde také hrál čas, a to jsem si sliboval právě od pomoci umělé inteligence, která mi umožní rychlé a kvalitní prototypování a provede mě celým procesem.
2. Propojení Claude+Wordpress=Nova Mira (plugin)
Game changer pro mě bylo video od tvůrce Darrela Wilsona, který připravil přesný postup, jak si vše správně nastavit, aby výsledek fungoval tak, jak má.
V rámci těchto kroků jsem si musel projít nastavením zabezpečení webu na hostingu Wedos, přípravou správného promptu a mnoha iteracemi. Rozepíšu se o nich níže.
Prvotní promp:
Navrhni pro mé fotografické podnikání kompletní web o 5 stránkách v HTML. Ať je design ultraminimalistický, čistý, s moderní a trendy estetikou. V typografii využívej kombinace elegantního patkového písma pro nadpisy a čistého bezpatkového písma s dostatkem volného prostoru. Název firmy: [Jan Stárek photographer] Co dělám: Autentické lifestyle fotografie, emotivní svatební reportáže a vizuální vyprávění příběhů. Pro koho pracuji: Páry, které hledají nestrojené a přirozené svatební fotky, a lidé/značky, kteří chtějí zachytit syrové, estetické momenty ze života. Hlavní cíl webu: Získat poptávky na focení (svatby/lifestyle) a rezervace termínů přes kontaktní formulář. SEO klíčová slova: [svatební fotograf Středočeský kraj], [lifestyle fotografie], [umělecký fotograf portfolio] Vytvoř těchto 5 stránek:
Úvodní stránka (Home) – Hero sekce: Dominantní, celoobrazovková černobílá fotografie s minimalistickým, ale silným nadpisem a jemným CTA tlačítkem. Následují 3 pilíře mého přístupu (např. Autentičnost, Světlo, Příběh), rychlý vizuální rozcestník na Svatby a Život, krátký citát z reference a minimalistické představení mé maličkosti s odkazem na detail.
Svatby – Úvodní estetická esej o mém vnímání svatebního dne. Grid (mřížka) s nejlepšími svatebními momenty využívající asymetrické rozvržení. Tlačítka s jednou fotkou jako odkaz na online galerii Pixieset.com – kde budou fotky z celé svatby. Sekce „Jak pracuji“ (3 jednoduché kroky od rezervace po předání), FAQ zaměřené na svatby a výrazné, ale elegantní CTA.
Život – Čistá vizuální galerie zaměřená na lifestyle, portréty a momentky. Fotky mají velkorysý prostor (velký padding/margin), aby dýchaly. Možnost filtrování (Cestování / Rodina/ Produkt / Sport ). Cílená výzva k akci pro rezervaci lifestylového focení.
Blog – Minimalistický magazínový styl. Mřížka článků (velká úvodní fotka, čistý nadpis, datum). Články budou sloužit jako ukázky celých příběhů z konkrétních focení (např. „Svatba na statku Dobrohošť“).
O mně – Osobní příběh, moje filozofie za foťákem, v čem jsem jiný (nestylizuji, zachycuji moment). Velká neformální, ale profesionální fotka. Závěrečné CTA směřující na kontakt. Hlavička (Header): Fixní (sticky) a transparentní, při skrolu jemně zbělá. Logo na levé straně (čistá typografie) – po kliknutí na logo- zpět na úvodní stránku (homepage), navigace uprostřed (Svatby, Život, Blog, O mně), na pravé straně minimalistické tlačítko „Rezervovat termín“. Samozřejmostí je skryté mobilní menu (hamburger). Patička (Footer): Velmi decentní. Minimalistické logo, rychlé odkazy na podstránky, e-mail a telefon, ikony na sociální sítě (Instagram, Facebook) a copyright. Technické a designové požadavky:
Paleta barev: Monochromatický základ (bílá, odstíny šedé, hluboká černá) s jedním velmi jemným, tlumeným pastelovým nebo zemitým tónem pro detaily/akcenty.
Plně responzivní (na mobilu musí celoobrazovková černobílá fotka vypadat skvěle).
Všechny odkazy a tlačítka funkční.
Obrázky z Unsplash, které reprezentují špičkovou lifestyle a svatební fotografii (přirozené světlo, emoce, žádný kýč).
SEO-ready struktura (H1 pouze pro hlavní sdělení, smysluplné alt texty u fotek).
Postav to jako jeden ucelený kód/artefakt pro náhled a export.
Po první iteraci vypadal web opravdu dobře. Byl vyplněn stockovými fotkami a textově nebyl daleko od mé představy. Jen běžel lokálně a nebyl propojený s WordPressem pomocí pluginu Nova Mira.
Bylo také důležité zkusit eliminovat chyby, které při generování webu mohly nastat (prompt na obrázku výše).
Při následném propojení WordPressu s Claudem jsem využil následující prompt pro opětovné narovnání designu. Po vygenerování živého webu byl jeho design od původního návrhu celkem vzdálený a potřeboval další ladění.
Prompt:
Go through whole website https://fotograf.jstarek.cz/ and correct it base on the Claude design proposal. Make sure to use the native elementor elements and not HTML widgets. Use the container and not inner sections. Also i have disabled the atmoic editor, do not use the atmoic elements. We have installed novamira plugin to help you understand how to use elementor elements better.
Correct header (Next Use XPRO to correct the header. This plugin allows you to build a custom header and footer with elementor. Do not use the Elementor pro widgets, use the elements provided by XPRO Make sure to save the header and footer template in the XPRO library so i can customize them later.)
3. Iterace designu (Claude), final touch (Elementor)
Výše je naznačen celý iterační proces, který bylo potřeba s pomocí Clauda odladit, aby byl web po technické stránce funkční, a to jak v desktopové, tak v mobilní verzi.
Po tomto odladění mě čekalo plnění webu obsahem. To obnášelo volbu vhodných fotografií, revizi a úpravu textů a dále přidávání nových a úpravu stávajících komponent v Elementoru.
Bylo také potřeba zprovoznit a otestovat formulář, který běží na WPForms.
7. Závěrem
Závěrem musím říct, že jsem s celým webem celkem spokojený a mám radost i z procesu, kterým jsem si prošel. Z prvotních nejasností ohledně využití WordPressu ve spojení s Claudem se stal funkční model, který má ale i své mínusy.
Mezi hlavní mínusy řadím kontrolu nad verzováním webu a možnost snadno se v úpravách vrátit o úroveň zpět. Všechny úpravy, které Claude vytvořil, se ihned propisovaly do živého webu. Kdybych se tomu chtěl vyhnout, musel bych pravděpodobně jít cestou generování HTML kódu a jeho kopírování na FTP server.
Co se týče přístupnosti, hodně jsem si odnesl z předchozích předmětů, které se této oblasti věnovaly. U každé fotky jsem tak vyplňoval popisky a ALT texty. To jsem třeba při tvorbě projektového portfolia nedělal, protože jsem v tom neviděl význam ani přidanou hodnotu.
Co mě čeká dále?
- Obecně bych chtěl web alespoň základně otestovat, zda je po UX stránce funkční.
- Rád bych se více zaměřil na SEO, aby byl web dobře dohledatelný.
- Dále bych ho chtěl propojit s analytikami, abych dokázal sledovat jeho návštěvnost a výkonnost.