# 27 rozvržení portfolia URL: https://canvaswp.com/cs/templates/portfolio/ Updated: 2026-11-03 Předlohy Mřížky a masonry. Styly filtrování a načítání. Navíc rozvržení detailu jednoho projektu, která je doplňují. [Otevřít živou ukázku](https://demos.canvaswp.com/classic/) [Procházet dema webů](https://canvaswp.com/cs/demos/) Aktualizováno 3. listopadu 2026 - Mřížky - Masonry - Načítání stylů - Jednotlivý projekt - Rozvržení ## Mřížky 5 Každá mřížka zde je jeden blok Canvas Posts s Layout nastaveným na Portfolio. Columns určuje, kolik projektů sdílí řádek, a Portfolio Gutter nastavuje mezeru mezi nimi, až na nulu. Verze s jedním sloupcem zapíná Alternating Split Cards, takže každý projekt je vedle svého popisu a obrázek mění strany u každé druhé karty. - [1 sloupec (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-1/) - [2 sloupce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-2/) - [3 sloupce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-3/) - [5 sloupců (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-5/) - [6 sloupců (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-6/) ## Masonry 6 Stejný blok, jiný Grid Engine. Zvolte režim masonry a karty si zachovají vlastní výšky a poskládají se do sloupců bez řádků, které by bylo třeba respektovat. Rytmus určuje volba Card Shape: buď každý obrázek oříznete do jednoho tvaru, nebo si každý projekt ponechá vlastní. Smíšená verze také přesune titulek dovnitř překryvu při najetí myší. - [Smíšené sloupce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2 sloupce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3 sloupce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4 sloupce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5 sloupců (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6 sloupců (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## Načítání stylů 5 Tyto volby určují, jak se návštěvník dostane k dalším vašim projektům. Styl stránkování mimo jiné nabízí stránkování na straně klienta a nekonečné posouvání. Možnost „Otevírat projekty na stránce“ načte projekt nad mřížkou, aniž by návštěvník opustil stránku, a možnost „Otevírat projekt v“ může projekt zobrazit v modálním okně lightbox. Styly filtru“ určují podobu bloku Canvas Grid Filter, tedy řady tlačítek kategorií, ve všech jeho stylech, s tlačítkem Shuffle i bez něj. - [jQuery Pagination (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [Nekonečné rolování (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [AJAX na stránce (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-ajax/) - [AJAX In Modal (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [Filtr stylů (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## Detail projektu 5 Stránka projektu převezme rozložení z předlohy, kterou vyberete v nastavení Předloha při úpravě projektu. Předlohy pokrývají čtyři typy médií: velký obrázek, galerii se sliderem, mřížku náhledů a video. Každá z nich má postranní panel po jedné nebo obou stranách, nebo je na plnou šířku, případně pod hero sekcí přes celou šířku. Odkazované stránky zde jsou ukázkou z této sady. - [Parallax Image (otevře se v nové záložce)](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [Galerie s posuvníkem (otevře se v nové záložce)](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [HTML5 Video (otevře se v nové záložce)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [Masonry náhledy (otevře se v nové záložce)](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [Vložit video (otevře se v nové záložce)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## Rozvržení 6 Kde mřížka na stránce stojí. Verze s postranním sloupcem umisťují stejný blok do hlavního sloupce vedle postranního sloupce s widgety, například s nejnovějšími příspěvky a rychlým kontaktním formulářem. 100% Šířka roztáhne mřížku od okraje k okraji bez mezery. Parallax zapne Parallax Cards, které přemění každý obrázek na vrstvu pozadí, jež se při rolování stránky pohybuje. - [Výchozí (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [Pravý postranní panel (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [Levý postranní panel (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [Obě postranní lišty (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [Šířka 100 % (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [Parallax (otevře se v nové záložce)](https://demos.canvaswp.com/classic/portfolio-parallax/) Každý odkaz otevře skutečnou stránku na živé ukázce, vytvořenou stejnou šablonou a bloky, které nainstalujete. Na vlastním webu ## Sestavte kteroukoli z těchto variant z jediného bloku Ukázky jsou tu k prohlížení. Tyto bloky a předlohy jsou součástí Canvas, takže každé rozvržení výše můžete znovu vytvořit na svém webu. ### Projekty jsou záznamy Vaše práce je uložena v typu obsahu portfolio, jeden záznam za každý projekt, s kategoriemi, které Grid Filter čte při tvorbě svých tlačítek. Přidejte projekt a každá mřížka na webu, která danou kategorii zobrazuje, ho automaticky převezme. Samotnou stránku už nikdy není nutné upravovat. ### Mřížka se ovládá nastavením Vložte Canvas Posts, zvolte rozvržení Portfolio a poté projděte jeho panely Layout a Pagination podle názvů uvedených na této stránce. Pro samotnou stránku projektu přidá Canvas 8 portfolio bloků, od titulku a seznamu metadat až po související projekty. ### Nebo importujte hotový web 21 z 88 dem ukázkových webů se importuje s hotovými projekty portfolia, rozvrženými pro agenturu, fotografa nebo ilustrátora. Začněte jedním z nich a upravíte projekty, ne rozvržení. - [Porovnání portfolio dem](https://canvaswp.com/cs/wordpress-themes/portfolio/) ### Každý tarif, každé rozvržení Doplněk pro portfolio neexistuje. Mřížky, filtr, styly načítání a předlohy jednotlivých projektů jsou v ročním tarifu stejné jako v doživotním, protože každý tarif obsahuje každý blok. - [Porovnejte tarify](https://canvaswp.com/cs/pricing/) Výběr ## Které rozvržení portfolia vyhovuje vaší práci Vycházejte z fotografií, protože rozvržení slouží k jejich zobrazení. Fotografie pořízené v jedné orientaci se dobře hodí do pevné mřížky, kde řádky lícují. Směs portrétních a krajinných děl patří do masonry, kde si každá karta může zachovat tvar svého obrázku. Případové studie se čtou jinak. Pokud každý projekt potřebuje odstavec kontextu, mřížka s jedním sloupcem rozdělených karet mu dá prostor a verze s postranním sloupcem se hodí agentuře, která chce mít kontaktní údaje vedle práce. Nezapomeňte ani na počet projektů. Menší soubor prací se vejde na jednu obrazovku s filtrem nad ním. Při větším počtu řádků zvolte způsob načítání, aby se stránka rychle otevírala: stránkování pro návštěvníky, kteří chtějí vědět, kde se nacházejí, nebo nekonečné posouvání pro ty, kdo rádi procházejí. U jednoho projektu nejdřív vyberte šablonu podle jeho médií: galerijní slider pro fotografování nebo video pro film. Postranní panely řešte až nakonec. Další předlohy ## Zbytek knihovny - [Předlohy stránek 13](https://canvaswp.com/cs/templates/page-templates/) - [Shortcody a prvky 57](https://canvaswp.com/cs/templates/shortcodes/) - [Rozvržení blogu 35](https://canvaswp.com/cs/templates/blog/) - [Rozvržení obchodu 9](https://canvaswp.com/cs/templates/shop/)