FOCL Help Center›FOCL Galleries›Design, homepage & branding

Design and publish with Homepage Studio

Updated 4 Nov 2026

Homepage editing is desktop-only. Homepage and Homepage Studio do not appear in the phone navigation. Open Galleries on your computer to edit, preview or publish your homepage. Visitors can still view your published homepage on their phones. The editor’s Phone and Both views let you design mobile layouts from your computer.

Homepage Studio designs your public portfolio page. It is separate from Cover Studio, which designs the cover of one client gallery. Homepage Studio is available to Galleries users without an extra Studio-plan requirement; the editor itself is still marked Beta. Custom domains and other plan-specific features keep their own requirements.

Homepage Studio is an optional drag-and-drop editor. The Classic homepage has its own Customize Classic controls for cover photos, styles, galleries, and contact details. Choose Open Studio in the Homepage Studio section at the top of Homepage for templates and freely arranged layouts. This opens the Studio editor directly. If you have unsaved Classic changes, Save & open Studio saves them first. Existing Studio homepages have the same Open Homepage Studio action on their overview. Your current public homepage stays unchanged while you edit a private draft. Set up your portfolio homepage explains the classic workspace and switching between editors.

Find your tools

The left rail has Templates, Sections, Photos, Layouts, Styles, and Saved. Click text, photos or a section on the canvas to open its controls in that panel. History, Preview, and Publish homepage are in the header. Desktop, Phone, Both, Auto-layout phone, pan and zoom are at the bottom. Help replays the tour and beta guidance, opens Support Center, and offers Back to classic.

Favorite templates

In Templates, click the heart beside any built-in template, then choose Favorites to see your shortlist. Click a filled heart to remove it. Favorites are saved to your signed-in account and appear on your other devices. Hearting a template never changes your draft or published homepage. If saving a favorite fails, the heart returns to its previous state and you can retry.

Saved is separate: use it to save your own edited page designs. Favorites bookmark built-in templates, including the 16 new designs under New: Trace / Grid, Afterhours, Imprint, Elsewhere, Floodlight, Axis, Coda, Umbra, Observed, Intermission, Lumen, Nightfall, Margin, Verbatim, Kept, and Silverline. Trace / Grid combines Trace’s opening with a three-column square gallery grid. Every new design has its own phone composition. Preview a template and choose Use this template to apply it to your private draft; publish when ready.

Choose a starting point

Open Templates to explore complete designs or start with Blank canvas. The New filter includes the latest designs, including Trace / Grid, Afterhours, Imprint, and Obsidian-inspired Umbra. Each includes editable sections and a separate phone composition. Earlier designs, including Atelier, Vesper, Fête, Portico, and Trace, remain available. Selecting a template previews the whole page without changing your draft. Choose Use this template to apply it. This replaces your page composition; Undo brings your previous design back.

Arrange your page

Open Sections and choose Add section to pick a cover, introduction, gallery grid, full photograph, contact section, or blank canvas from visual cards. The page scrolls to your new section and highlights it. Click the section on the page to open its controls.

Reorder directly on the page by dragging empty section background or the grip beside its name. Neighboring sections make room as you drag, and the canvas scrolls when you reach an edge. Release to place it; Escape cancels, and Undo restores the previous order. On a touchscreen, hold the grip briefly, then drag. For keyboard control, focus the grip and press Space, use Up/Down, then Space to drop or Escape to cancel.

The section’s three-dot menu contains photos, Try layout, Move up/down, and Delete. Design layout stays beside the name. The small + between sections expands to Add section on hover or focus. You can still drag rows in the Sections outline, use its arrows, hide sections, or duplicate them in their settings.

Click words to edit their text, font, size, and color in the left panel. Click a photograph to replace that image. Click a section’s background to change its color under Appearance. Choosing a row in Sections takes you to that section and keeps the outline open for arranging. Use Design layout on the section to open its layer editor for moving and resizing elements.

Design every section

The section editor lets you add and arrange text, photographs, shapes, and buttons; choose fonts and colors; resize and rotate layers; and use saved blocks, images, and brand kits from Section → My library. Switch between Desktop and Phone at the bottom to create separate compositions. The floating toolbar has selection, pan, and Background controls; Section holds snapping, rulers, and guides.

Choose Homepage, Done, or press Escape to return to the page. Your section edits remain in the page draft, including when a save needs attention.

Click a photograph or an Add photo placeholder, or use Photos in the left rail. The photo chooser offers Upload from computer and photographs from your galleries. The same action is available inside the section editor. In section properties you can set desktop and phone heights. After adding a button, set its Button destination to a website, email address using mailto:, phone number using tel:, or another page section.

Pinch on the canvas to zoom. You can also use +, −, the percentage menu, or Center canvas at the bottom. Scroll to move through the page, or use the hand tool to drag it.

Build a photo layout

Choose Layouts in the left rail, or Sections → Build a photo layout. Select photos from a gallery or upload them, then compare layouts before adding the section. You can add more photos or go back to photo selection without canceling. Optional text becomes editable layers in the new section. Dropping photos onto the page also starts a photo layout; dropping one onto an existing photo replaces that slot.

For an existing section, choose Try another layout in its settings to preview other arrangements. Applying a layout is undoable.

Review the phone layout

Choose Both at the bottom to see desktop and phone side by side. Phone positions and photo crops can change without changing desktop; words and colors are shared. Auto-layout phone at the bottom prepares a phone arrangement for review. Choose Use phone layout to keep it or Cancel to leave your draft unchanged.

Show your work

A gallery section displays published galleries that have Show on homepage enabled in their gallery settings. Include all eligible galleries or select individual galleries. Change columns for desktop and phone, spacing, cover proportions, typography, titles, and dates. Drag gallery covers on the page or use Gallery order in that section’s controls to change their order; this stays in your homepage draft until you publish.

Templates start with curated photographs you can click to replace. Gallery cards use your own gallery covers, titles, and links. If you have no eligible galleries yet, labeled sample cards show the layout in the editor. They are never published. Empty gallery sections are hidden from visitor previews and your public page until galleries are available. Selecting no galleries deliberately leaves the section empty.

Unpublished galleries and galleries excluded from your homepage do not appear on your public page.

Colors, fonts, navigation and page settings

Studio and Pro can connect a custom gallery domain for the published homepage and client galleries. Set it up under Settings → Brand & galleries → Your domain in the Galleries studio. This is separate from the homepage’s public address setting below, and it leaves your existing main website in place.

Styles → Colors changes Page background and Page text across navigation, sections and footer, preserving contrast in reversed sections. Click an individual section’s background to change only that section.

Built-in templates include coordinated typography. Under Styles → Custom typography, Match fonts to hero previews complementary headings and body text around your hero title. Compare before/after and choose Apply fonts or Cancel. Individual text remains editable. These homepage styles do not change your gallery covers, gallery color presets or delivery emails.

Select Sections → Navigation, or Styles → Edit page navigation, to customize the studio name or logo, links, alignment, colors, and scrolling behavior. Link directly to a section or an external address.

Choose Styles in the left rail to edit the page background, font, footer text and appearance, public address, optional password, and search title and description. Address and password changes take effect when you publish.

Save and preview

Changes save automatically to a private draft. Watch the save status in the header. If a save fails, your edits remain in the editor; use Retry save, or Download draft to keep a JSON backup. Import a backup from Styles → Draft backup.

Open Saved in the left rail to save your complete page as a reusable template. Enter a name and choose Save current page as template. Selecting a saved design previews it before Use this template replaces the page draft; Undo is available. Deleting a saved template does not delete your current page. These page templates are separate from the blocks and brand kits available inside the section editor.

Use Preview to view your current draft without selection outlines. Switch between Desktop, Phone, and Both at the bottom to review the layouts. Preview does not publish your changes.

Version history

Choose History in the header to see automatic checkpoints, saved about every five minutes of changed work. Your previous draft is also kept before template changes, and each changed publication is recorded. The latest 100 routine autosaves are kept; named entries, published pages, and safety copies stay.

Compare two entries or an earlier entry and your current draft. Name this version adds an optional label. Restore to draft asks for confirmation, keeps a safety copy of your current draft, and restores the selected design. Your live page stays unchanged until you publish. Photos are referenced, not duplicated; gallery grids use your currently available galleries.

History starts with this update. It cannot recover versions overwritten before history was introduced.

Publish

Choose Publish homepage, check the address, then confirm Publish homepage. Your current draft becomes the version visitors see. Later edits remain private until you publish again.

Set a destination for each visible button and update any navigation links pointing to deleted or hidden sections before publishing. You also need a page address and at least one visible section.

To take the page offline, open Publish homepage and choose Unpublish homepage. Your draft is retained.

An existing homepage keeps its previous public design until you publish the new page. After publishing, return to Homepage to see your Studio design. Preview shows that same published design; Open Homepage Studio reopens the editor. To switch back, choose Revert to classic, review the classic preview, then confirm. Your Studio draft, public address, password, and online/offline status are retained.

Was this article helpful?