[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"article-\u002Fgalleries-and-sharing\u002Fcustomize-your-gallery":3,"surround-\u002Fgalleries-and-sharing\u002Fcustomize-your-gallery":280},{"id":4,"title":5,"body":6,"category":270,"description":271,"extension":272,"meta":273,"navigation":274,"order":263,"path":275,"seo":276,"stem":277,"updated":278,"__hash__":279},"docs\u002Fgalleries-and-sharing\u002Fcustomize-your-gallery.md","Customize your gallery",{"type":7,"value":8,"toc":261},"minimark",[9,22,39,53,60,65,97,101,106,167,171,182,224,228,235,241,245],[10,11,12,13,17,18,21],"p",{},"Every client and every project has its own ",[14,15,16],"strong",{},"Design"," page: a live preview of the gallery with a sidebar of style options. Changes apply to the preview immediately; nothing is published until you click ",[14,19,20],{},"Save",".",[23,24,25,33],"ul",{},[26,27,28,29,32],"li",{},"The ",[14,30,31],{},"client Design page"," styles the page listing the client's projects.",[26,34,28,35,38],{},[14,36,37],{},"project Design page"," styles the photo gallery itself.",[10,40,41,42,44,45,48,49,52],{},"Open a client or project and go to its ",[14,43,16],{}," page. The sidebar is titled ",[14,46,47],{},"Client Page"," or ",[14,50,51],{},"Project Page"," accordingly.",[10,54,55],{},[56,57],"img",{"alt":58,"src":59},"A project Design page with the Cover options and live preview","\u002Fimages\u002Fhelp\u002Fgalleries-and-sharing\u002Fproject-design.webp",[61,62,64],"h2",{"id":63},"the-editor","The editor",[23,66,67,73,79,85],{},[26,68,69,72],{},[14,70,71],{},"Undo\u002Fredo",": Ctrl+Z and Ctrl+Shift+Z (⌘ on Mac), with buttons at the top of the preview.",[26,74,75,78],{},[14,76,77],{},"Desktop View \u002F Mobile View",": toggle to check both sizes; there's also a fullscreen preview (Ctrl+Shift+F).",[26,80,81,84],{},[14,82,83],{},"Save \u002F Cancel",": appear in the sidebar once you've changed something.",[26,86,87,88,91,92,21],{},"The link icon copies the page's live URL, and the templates icon opens the ",[14,89,90],{},"Apply Template"," panel; see ",[93,94,96],"a",{"href":95},"\u002Fgalleries-and-sharing\u002Fexplore-gallery-templates","Explore gallery templates",[61,98,100],{"id":99},"cover","Cover",[10,102,28,103,105],{},[14,104,100],{}," group styles the hero at the top of the page:",[23,107,108,124,134,139,145,155,161],{},[26,109,110,113,114,117,118,48,121,21],{},[14,111,112],{},"Type",": ",[14,115,116],{},"Image",", ",[14,119,120],{},"Color",[14,122,123],{},"None",[26,125,126,129,130,133],{},[14,127,128],{},"Layout",": how the title sits on the cover; click the brush icon to open the ",[14,131,132],{},"Cover Style"," panel and pick a layout.",[26,135,136,138],{},[14,137,116],{},": for image covers, pick the photo via the image search icon and drag the focal point ring to frame it. The shaded band shows what the hero keeps in view.",[26,140,141,144],{},[14,142,143],{},"Height",": the cover's height as a percentage of the screen.",[26,146,147,150,151,154],{},[14,148,149],{},"Background Color"," (color covers) or ",[14,152,153],{},"Overlay Color"," (image covers): solid colors or gradients from the color picker.",[26,156,157,160],{},[14,158,159],{},"Scroll Arrow",": on tall covers, shows an arrow inviting visitors to scroll.",[26,162,163,166],{},[14,164,165],{},"Project Date",": on project pages, shows or hides the date on the cover.",[61,168,170],{"id":169},"projects-and-images","Projects and Images",[10,172,173,174,177,178,181],{},"The second group is ",[14,175,176],{},"Projects"," on a client page and ",[14,179,180],{},"Images"," on a project page:",[23,183,184,190,196,202,208,214],{},[26,185,186,189],{},[14,187,188],{},"Background",": Light or Dark page background (project pages).",[26,191,192,195],{},[14,193,194],{},"Display Order",": how projects or photos are sorted.",[26,197,198,201],{},[14,199,200],{},"Layout Type",": vertical (masonry), square or horizontal grids for photos.",[26,203,204,207],{},[14,205,206],{},"Columns",": how many columns the grid uses (up to 5 for project tiles, 10 for photos).",[26,209,210,213],{},[14,211,212],{},"Image Spacing \u002F Column Spacing",": the gap between items.",[26,215,216,219,220,223],{},[14,217,218],{},"Project Details",": on client pages, show or hide each project's name and date, and pick the ",[14,221,222],{},"Project Detail Style"," (like overlaid on the tile).",[61,225,227],{"id":226},"typography-and-site-wide-styling","Typography and site-wide styling",[10,229,230,231,21],{},"Gallery pages inherit fonts and heading styles from your website's style guide, so the whole site stays consistent. Set those in the website builder. See ",[93,232,234],{"href":233},"\u002Fwebsite-builder\u002Fwebsite-basics","Website basics",[236,237,238],"blockquote",{},[10,239,240],{},"Styling the same look repeatedly? Save it as a template and apply it to new clients and projects in one click.",[61,242,244],{"id":243},"related","Related",[23,246,247,251,257],{},[26,248,249],{},[93,250,96],{"href":95},[26,252,253],{},[93,254,256],{"href":255},"\u002Fclients-and-projects\u002Flabels-and-focal-points","Labels and focal points",[26,258,259],{},[93,260,234],{"href":233},{"title":262,"searchDepth":263,"depth":263,"links":264},"",2,[265,266,267,268,269],{"id":63,"depth":263,"text":64},{"id":99,"depth":263,"text":100},{"id":169,"depth":263,"text":170},{"id":226,"depth":263,"text":227},{"id":243,"depth":263,"text":244},"galleries-and-sharing","Style client and project gallery pages, from covers and colors to layout and spacing, with a live preview.","md",{},true,"\u002Fgalleries-and-sharing\u002Fcustomize-your-gallery",{"title":5,"description":271},"galleries-and-sharing\u002Fcustomize-your-gallery","2026-09-19","dzwF5q0KEsLXhC2B8BzBV-s_1CEjp6ZeeMdIO5gmgzw",[281,283],{"path":95,"title":96,"order":282},1,{"path":284,"title":285,"order":286},"\u002Fgalleries-and-sharing\u002Fshare-a-gallery","Share a gallery",3,1789936982163]