Type
Get it
Preview
Overview
Bold Editorial is a portfolio template for photographers, directors and art directors who want the work up front.
The homepage is a full-screen slideshow of your project covers with a flash between pictures. Click a cover to stop it and show the title, click the title and it moves into the project page. Every project page is built from blocks in the CMS: single pictures, pairs, video, text, smaller and offset, in any order.
After paying you get a remix link that copies the template into your Framer account. Questions: inquiries@supercliche.com
// Home, Project, About, Contact and 404 pages, designed for desktop, tablet and phone.
// Projects collection with a Blocks list for flexible project pages.
// One Site Settings item for your name or SVG logo, email, location, agency and social links. Empty fields hide themselves.
// Two colour styles and 12 text styles, so the whole site changes from one place.
// Fullscreen picture viewer, page entrance animations and reduced-motion support.
Everything you need to make it yours. No code needed.
// Your name, logo, email, location, agency and social links: CMS → Site Settings (one item).
// Projects: CMS → Projects, one item per project. The template ships with 10 sample projects.
// The red and the background: colour styles Text Color and Background.
// Fonts and sizes: the 12 text styles.
// The top bar on every page: the layout template Main Layout.
// Slideshow speed, flash and look: Home page → select Hero Slideshow → settings panel.
// About text, the line on Contact and the 404 text: click the text on the canvas and type.
The sample text in the template explains each feature. Read it once, then replace it with your own words, photos and video.
Open CMS → Site Settings and fill in the form. Everything appears across the site automatically.
// Your Name shows top left on every page. Upload an SVG in Logo and it replaces the name.
// The logo is recoloured to Text Color and shown as one solid shape. Use an SVG with a transparent background.
// Logo Height is the height in pixels on desktop. It scales down on phones by itself.
// Paste full social links starting with https://. Leave any field empty and it disappears from the site.
The whole site uses two colour styles: Text Color (#D61900) and Background (#F3F0EF). Change one and every page, line, logo and cursor follows.
If you pick your own, keep at least 4.5:1 contrast between them, since the small text uses both. Very light text colours get lost over bright photos on the home page.
All text on the pages uses one of 12 text styles (Display, Project Title, Slide Title, Heading, Menu Icon, Nav, Menu Link, Text Link, Body, Label, Label Strong, Meta). Change the font or size inside a style and every text using it updates, on every breakpoint.
A few parts are components with their own Font setting: Name or Logo (in Main Layout), Hero Slideshow (Title Font and Link Font), Close, Block Content, Contact Details, Back to Top and Fullscreen Pictures. Change the text styles first, then type the same font name in those settings.
Open CMS → Projects and add an item. Its page is created automatically and it joins the home slideshow.
// Title: shown huge on the project page and the slideshow. Keep it short, it stays on one line.
// Cover Picture: use a horizontal picture, at least 2400px wide. It’s cropped from the top, so heads stay in frame.
// Client, Year, Role, Description, Credits (one per line) and Small Picture fill the project header.
// Write alt text for every picture. Screen readers and search engines use it.
// The order in the CMS is the slideshow order. Drafts don’t appear on the live site.
Each project has a list called Blocks. Every block is one row on the page. What it shows depends on what you fill in:
// Picture only: one full-width picture, never cropped.
// Picture and Second Picture (Side by Side): two pictures in a row.
// Video: an MP4 that plays silently on a loop. Keep it short, around 720p.
// Text only: a text block.
// Picture or Video plus Text: a picture with a caption.
// Make Smaller: the block takes 60% of the width. Place on the Right moves it to the right.
The look of the blocks is set once for every project: on the project page, select Block Content and change its settings.
On the Home page, select Hero Slideshow. Its settings include Seconds per Picture, Flash Strength (0 = Off), Flash Length, Flash Color, Play Automatically, Click a Picture to Open It, Background While Playing, Space Around Open Picture, Background When Open, Opening Speed and Title Color.
Double-click it to edit the slide design in the frame called “Slides (edit cover, title & button here)”. Don’t rename the Slide, Image or Caption layers inside it.
// About is plain text on the canvas. Click a line and type. Duplicate a text layer to add a paragraph.
// On Contact only the first line is edited on the page. Everything under it comes from Site Settings.
// 404 shows when an address doesn’t exist, with a link back home.
// The big X closes the page and goes back home. If you change a title size, set the X’s Size to match.
// Replace the site title and description in Framer’s site settings with your own, and upload your own social image.
// Each page has one main heading. On Home that’s your name, controlled by the Site Name as H1 switch on Main Layout. Leave it on for Home only.
// Visitors who turn off animations on their device get the site without the movement.
Some features find their layers by name. Moving or restyling them is fine, renaming them breaks the feature:
// Site Header (Main Layout).
// Project Title, Project Cover, Small Picture, Tags, Close, Text Column, Blocks, Footer (Project page).
// Title Row, Text (About, Contact, 404).
// Slide, Image, Caption (inside Hero Slideshow).
// Don’t delete the invisible helpers Project Intro, Page Intro Animation, Fullscreen Pictures and Link Glow.
Click Publish, then click through the live site: a slideshow picture, its title, a project page, a fullscreen picture, the X, About, Contact and a made-up address for the 404. Check on a phone too.
The slideshow, animations, fullscreen pictures and glow only run in preview and on the live site. The canvas shows a still version so you can edit comfortably.
// A new project isn’t in the slideshow: check it isn’t a Draft, has a Cover Picture, and that you published.
// The logo is a solid block: remove the filled background rectangle from the SVG.
// A title wraps on phone: shorten it or lower the phone size in the Project Title text style.
// Some text didn’t change font: it’s a component with its own Font setting.
// Something stayed red after a colour change: select it and pick Text Color from the colour styles.
// An animation stopped working: a layer from the list above was renamed or deleted. Rename it back or undo.
Still stuck? Email inquiries@supercliche.com.