Vivid documentation
Congrats on your new theme! You’ve made a great choice, and we’re sure you’ll be happy with this theme.
Our documentation is a work in progress!
We’re adding new things weekly. Need to know how to do something now? Send us a message. We’ll be happy to walk through it!
Vivid is a Block theme, meaning the entire site’s layout and look is under your control. It’s a site builder built right into WordPress.
Installing Vivid
Installing Vivid for the first time? Head over to our Getting Started page, where you’ll find detailed instructions on how to do that.
Setting up your homepage
Vivid offers pre-built templates for your homepage. These are just starting points, so be sure to change things up to suit your own content. And, of course, you can always build your page using the various pattern included or come up with your own design.
Step 1 – Creating a homepage and adding content
Starting from a brand new page
1. From your dashboard, click on Pages > Add New.

- Once in the editor, you will get a popup offering several choices for a full-page template. Select the one you want and click on it. This will insert the entire pattern into your page.

- Next, add your page’s title.

- Update your content as needed. Then once you’re ready, hit the publish button. You can also save it as a draft and come back to it later.

Starting from an already existing page
If you are starting from an already created page, you won’t get the pop-up. Here’s how to get things set up:
- Start by clicking on the top left blue plus button
.
- Next, select Patterns, and then hit the Explore button. This will bring up the pattern library.

- Select Full Page Pattern from the pattern category list. Once you’ve found the pattern you want to use, simply click on it.

4. If you haven’t already, add your page title.

- Update your content as needed, then hit the Publish button once you’re ready. You can also save it as a draft and come back to it later.

Step 2 – Setting your page as your homepage
Once you’ve got all your content ready, you have one more step before your page is shared on your site as the homepage.
- From your dashboard, head to Settings > Reading.

- In the top section of the page where it says Your homepage displays, select the “A static page” radio button.
- Next to the “Homepage” drop-down, select the page you just created in the previous step. If you have a blog page, you can set that here too.
- Hit the Save Changes button at the bottom of the page.

Vivid image shapes
Vivid’s standout feature allows you to bring your content to life with different image shapes.

Arch shape

Circle semi-circle shape

Oblong shape

Semi-circles shape
Image shapes on posts and pages feature images
Customize the shape of each of your posts to fit your style. By default, single post pages feature an oblong shape, but you can easily change the shape by selecting a different template.

- From the right settings menu, click on the “Single” button right next to Template.

- You’ll now see a drop-down where you can select which image shape you’d like to set for your featured image. Note that this will only be visible on the front end, so make sure to click the preview button at the top for you to review it.
✨ Helpful Tip
The editor’s right sidebar shows two types of settings depending you have selected. Page/Post and Block. For templates, make sure you have the Page/Post tab selected.

Image shapes on images anywhere on your page
You can also apply the shapes to the Image block or the Media/Text block by applying a block style.
Image shapes on the blog page
Blog page images can easily be changed with the Site Editor. Keep in mind that for this template, all images will have the same shape.
- Start by heading to the Site Editor under Appearance > Editor.
- Next, under Templates, click on Index.
- If you’re using the default blog layout, the images will be hidden (like on the front end) but show up when you hover over the post title. Once it’s hovered, click on it. Make sure you have the Featured Image block selected either from the List View on the left or the bottom breadcrumbs.

- From the Styles tab, select the desired shape.
Setting up your site header
Adding navigation (video)
With the new site editor, adding your site’s navigation is done directly in the template editor.
💥 Sanity Tip
It’s sometimes hard to click around in the tiny navigation box. We highly recommend using the List View menu button on the top left for an easier experience. You can more easily select all your header items.
Setting up your site logo (video)
Vivid has a spot to show your logo in both the default header and footer.
Adding content
Vivid comes bundled with almost 40 patterns. The patterns will allow you to insert content into your pages with just a few clicks.
Not sure what a pattern is? Check out this handy guide.
- Start by creating a new page. From your dashboard, click Pages > Add new.
- Next, add a title.
- From the top-left menu, click the blue
sign.
- Under the search box, click the Patterns menu, then Explore.

- From here, you can select the pattern category from the list on the left.

- Next, scroll through the patterns until you see one you’d like to use.
- Once you’ve found the right one, click on the pattern to insert it into your page. The pop-up will automatically close and bring you back to the editor.
- You can now modify each pattern’s content and layout to fit your site and content perfectly.
Changing Vivid’s Colours
Our documentation is a work in progress!
We’re adding new things weekly. Need to know how to do something now? Send us a message. We’ll be happy to walk through it!