{"id":1224401,"date":"2026-05-31T22:03:26","date_gmt":"2026-05-31T22:03:26","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/project-gallery-with-process-notes-it_it\/"},"modified":"2026-06-15T06:51:11","modified_gmt":"2026-06-15T06:51:11","slug":"project-gallery-with-process-notes-it_it","status":"publish","type":"wporg-pattern","link":"https:\/\/it.wordpress.org\/patterns\/pattern\/project-gallery-with-process-notes-it_it\/","title":{"rendered":"Project gallery with process notes"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-text-color has-background is-layout-constrained wp-container-core-group-is-layout-04216274 wp-block-group-is-layout-constrained\" style=\"color:#17211D;background-color:#F5F7F1;padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px\">\n<div class=\"wp-block-group alignwide is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-b91b6bb4 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center has-text-color wp-block-paragraph\" style=\"color:#3B7A68;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">Project gallery<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-text-color\" style=\"color:#111827;font-size:46px;font-weight:800;letter-spacing:0;line-height:1.06\">Show the work behind the result.<\/h2>\n\n\n\n<p class=\"has-text-align-center has-text-color wp-block-paragraph\" style=\"color:#4B5563;font-size:17px;line-height:1.65\">Use this gallery to highlight process, environment, materials, case studies, team work, or project moments with short useful captions.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-d4b6b5b5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-border-color has-background is-layout-constrained wp-container-core-group-is-layout-ff9621b0 wp-block-group-is-layout-constrained\" style=\"border-color:#DDE7DD;border-width:1px;border-radius:24px;background-color:#FFFFFF;padding-top:14px;padding-right:14px;padding-bottom:22px;padding-left:14px\">\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" src=\"https:\/\/pd.w.org\/2026\/01\/75969730cdb02fe15.61443854-1152x2048.jpeg\" alt=\"A cozy, creative workspace with notes, drawings, a desk lamp, plants, and illustrated panels on a wooden desk.\" style=\"border-radius:18px;aspect-ratio:4\/3;object-fit:cover\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-f0138c28 wp-block-group-is-layout-constrained\" style=\"padding-right:8px;padding-left:8px\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#111827;font-size:22px;font-weight:800;letter-spacing:0;line-height:1.18\">Planning space<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#4B5563;font-size:15px;line-height:1.6\">Add a note about research, sketches, discovery work, or the early decisions that shaped the project.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-border-color has-background is-layout-constrained wp-container-core-group-is-layout-ff9621b0 wp-block-group-is-layout-constrained\" style=\"border-color:#DDE7DD;border-width:1px;border-radius:24px;background-color:#FFFFFF;padding-top:14px;padding-right:14px;padding-bottom:22px;padding-left:14px\">\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" src=\"https:\/\/pd.w.org\/2025\/07\/54687c82e4850687.95783532-1536x2048.jpeg\" alt=\"A modern office space with a long wooden desk featuring two black monitors.\" style=\"border-radius:18px;aspect-ratio:4\/3;object-fit:cover\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-f0138c28 wp-block-group-is-layout-constrained\" style=\"padding-right:8px;padding-left:8px\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#111827;font-size:22px;font-weight:800;letter-spacing:0;line-height:1.18\">Working setup<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#4B5563;font-size:15px;line-height:1.6\">Use this caption for production, collaboration, review cycles, tools, or the environment where work happens.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-border-color has-background is-layout-constrained wp-container-core-group-is-layout-ff9621b0 wp-block-group-is-layout-constrained\" style=\"border-color:#DDE7DD;border-width:1px;border-radius:24px;background-color:#FFFFFF;padding-top:14px;padding-right:14px;padding-bottom:22px;padding-left:14px\">\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" src=\"https:\/\/pd.w.org\/2026\/05\/30969fb05f0c54c16.00713945.jpeg\" alt=\"A hand holds a striped mug of tea at a white desk with a laptop and monitor, creating a focused workspace.\" style=\"border-radius:18px;aspect-ratio:4\/3;object-fit:cover\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-f0138c28 wp-block-group-is-layout-constrained\" style=\"padding-right:8px;padding-left:8px\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#111827;font-size:22px;font-weight:800;letter-spacing:0;line-height:1.18\">Focused delivery<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#4B5563;font-size:15px;line-height:1.6\">Summarize the final output, the improvement, or the practical result visitors should understand.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-c54d1b31 wp-block-group-is-layout-flex\" style=\"border-top-color:#DDE7DD;border-top-width:1px;padding-top:22px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#26352F;font-size:14px;font-weight:700\">Replace images and captions with your own project moments.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#6B7280;font-size:14px\">Best for portfolios, case studies, studios, teams, community projects, and process pages.<\/p>\n<\/div>\n<\/div>\n","protected":false},"author":9676419,"parent":1221323,"template":"","meta":{"wpop_keywords":"Galleria, PORTFOLIO, progetto, Case study, workspace, captions, processo","wpop_description":"A three-card gallery section with WordPress Photo Directory images, editable captions, and project notes for portfolios, case studies, teams, or process pages.","wpop_viewport_width":1200,"wpop_block_types":[""],"wpop_locale":"it_IT","wpop_wp_version":"","wpop_contains_block_types":"core\/column,core\/columns,core\/group,core\/heading,core\/image,core\/paragraph","footnotes":""},"pattern-categories":[4],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1224401","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-gallery"],"category_slugs":["gallery"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#F5F7F1\",\"text\":\"#17211D\"},\"spacing\":{\"padding\":{\"top\":\"72px\",\"right\":\"24px\",\"bottom\":\"72px\",\"left\":\"24px\"},\"blockGap\":\"40px\"}},\"layout\":{\"type\":\"constrained\",\"contentSize\":\"1180px\"}} -->\n<div class=\"wp-block-group alignfull has-text-color has-background\" style=\"color:#17211D;background-color:#F5F7F1;padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px\"><!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":\"14px\"}},\"layout\":{\"type\":\"constrained\",\"contentSize\":\"760px\",\"justifyContent\":\"center\"}} -->\n<div class=\"wp-block-group alignwide\"><!-- wp:paragraph {\"className\":\"has-text-color\",\"style\":{\"typography\":{\"fontSize\":\"13px\",\"fontWeight\":\"800\",\"letterSpacing\":\"0.08em\",\"textTransform\":\"uppercase\",\"textAlign\":\"center\"},\"color\":{\"text\":\"#3B7A68\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#3B7A68;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">Project gallery<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"style\":{\"typography\":{\"fontSize\":\"46px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.06\",\"letterSpacing\":\"0\",\"textAlign\":\"center\"},\"color\":{\"text\":\"#111827\"}}} -->\n<h2 class=\"wp-block-heading has-text-align-center has-text-color\" style=\"color:#111827;font-size:46px;font-weight:800;letter-spacing:0;line-height:1.06\">Show the work behind the result.<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"has-text-color\",\"style\":{\"typography\":{\"fontSize\":\"17px\",\"lineHeight\":\"1.65\",\"textAlign\":\"center\"},\"color\":{\"text\":\"#4B5563\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#4B5563;font-size:17px;line-height:1.65\">Use this gallery to highlight process, environment, materials, case studies, team work, or project moments with short useful captions.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"24px\",\"left\":\"24px\"}}}} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:group {\"style\":{\"color\":{\"background\":\"#FFFFFF\"},\"border\":{\"color\":\"#DDE7DD\",\"width\":\"1px\",\"radius\":\"24px\"},\"spacing\":{\"padding\":{\"top\":\"14px\",\"right\":\"14px\",\"bottom\":\"22px\",\"left\":\"14px\"},\"blockGap\":\"18px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-border-color has-background\" style=\"border-color:#DDE7DD;border-width:1px;border-radius:24px;background-color:#FFFFFF;padding-top:14px;padding-right:14px;padding-bottom:22px;padding-left:14px\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":\"18px\"}}} -->\n<figure class=\"wp-block-image size-large has-custom-border\"><img src=\"https:\/\/pd.w.org\/2026\/01\/75969730cdb02fe15.61443854-1152x2048.jpeg\" alt=\"A cozy, creative workspace with notes, drawings, a desk lamp, plants, and illustrated panels on a wooden desk.\" style=\"border-radius:18px;aspect-ratio:4\/3;object-fit:cover\" \/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"right\":\"8px\",\"left\":\"8px\"},\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\" style=\"padding-right:8px;padding-left:8px\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"22px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.18\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#111827\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#111827;font-size:22px;font-weight:800;letter-spacing:0;line-height:1.18\">Planning space<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.6\"},\"color\":{\"text\":\"#4B5563\"}}} -->\n<p class=\"has-text-color\" style=\"color:#4B5563;font-size:15px;line-height:1.6\">Add a note about research, sketches, discovery work, or the early decisions that shaped the project.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:group {\"style\":{\"color\":{\"background\":\"#FFFFFF\"},\"border\":{\"color\":\"#DDE7DD\",\"width\":\"1px\",\"radius\":\"24px\"},\"spacing\":{\"padding\":{\"top\":\"14px\",\"right\":\"14px\",\"bottom\":\"22px\",\"left\":\"14px\"},\"blockGap\":\"18px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-border-color has-background\" style=\"border-color:#DDE7DD;border-width:1px;border-radius:24px;background-color:#FFFFFF;padding-top:14px;padding-right:14px;padding-bottom:22px;padding-left:14px\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":\"18px\"}}} -->\n<figure class=\"wp-block-image size-large has-custom-border\"><img src=\"https:\/\/pd.w.org\/2025\/07\/54687c82e4850687.95783532-1536x2048.jpeg\" alt=\"A modern office space with a long wooden desk featuring two black monitors.\" style=\"border-radius:18px;aspect-ratio:4\/3;object-fit:cover\" \/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"right\":\"8px\",\"left\":\"8px\"},\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\" style=\"padding-right:8px;padding-left:8px\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"22px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.18\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#111827\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#111827;font-size:22px;font-weight:800;letter-spacing:0;line-height:1.18\">Working setup<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.6\"},\"color\":{\"text\":\"#4B5563\"}}} -->\n<p class=\"has-text-color\" style=\"color:#4B5563;font-size:15px;line-height:1.6\">Use this caption for production, collaboration, review cycles, tools, or the environment where work happens.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:group {\"style\":{\"color\":{\"background\":\"#FFFFFF\"},\"border\":{\"color\":\"#DDE7DD\",\"width\":\"1px\",\"radius\":\"24px\"},\"spacing\":{\"padding\":{\"top\":\"14px\",\"right\":\"14px\",\"bottom\":\"22px\",\"left\":\"14px\"},\"blockGap\":\"18px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-border-color has-background\" style=\"border-color:#DDE7DD;border-width:1px;border-radius:24px;background-color:#FFFFFF;padding-top:14px;padding-right:14px;padding-bottom:22px;padding-left:14px\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":\"18px\"}}} -->\n<figure class=\"wp-block-image size-large has-custom-border\"><img src=\"https:\/\/pd.w.org\/2026\/05\/30969fb05f0c54c16.00713945.jpeg\" alt=\"A hand holds a striped mug of tea at a white desk with a laptop and monitor, creating a focused workspace.\" style=\"border-radius:18px;aspect-ratio:4\/3;object-fit:cover\" \/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"right\":\"8px\",\"left\":\"8px\"},\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\" style=\"padding-right:8px;padding-left:8px\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"22px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.18\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#111827\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#111827;font-size:22px;font-weight:800;letter-spacing:0;line-height:1.18\">Focused delivery<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.6\"},\"color\":{\"text\":\"#4B5563\"}}} -->\n<p class=\"has-text-color\" style=\"color:#4B5563;font-size:15px;line-height:1.6\">Summarize the final output, the improvement, or the practical result visitors should understand.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:group {\"align\":\"wide\",\"style\":{\"border\":{\"top\":{\"color\":\"#DDE7DD\",\"width\":\"1px\"}},\"spacing\":{\"padding\":{\"top\":\"22px\"},\"blockGap\":\"12px\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"space-between\",\"verticalAlignment\":\"center\"}} -->\n<div class=\"wp-block-group alignwide\" style=\"border-top-color:#DDE7DD;border-top-width:1px;padding-top:22px\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"14px\",\"fontWeight\":\"700\"},\"color\":{\"text\":\"#26352F\"}}} -->\n<p class=\"has-text-color\" style=\"color:#26352F;font-size:14px;font-weight:700\">Replace images and captions with your own project moments.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"14px\"},\"color\":{\"text\":\"#6B7280\"}}} -->\n<p class=\"has-text-color\" style=\"color:#6B7280;font-size:14px\">Best for portfolios, case studies, studios, teams, community projects, and process pages.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group -->","favorite_count":0,"author_meta":{"name":"Kamran Abdul Aziz","url":"https:\/\/it.wordpress.org\/patterns\/author\/ekamran","avatar":"https:\/\/secure.gravatar.com\/avatar\/60e988ec792fd9d57b323806b34dc0166b4f604f5d3fe30a567d3c90be6b01b5?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1224401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1224401\/revisions"}],"predecessor-version":[{"id":1225660,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1224401\/revisions\/1225660"}],"author":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/ekamran"}],"wp:attachment":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1224401"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1224401"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1224401"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1224401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}