Vivid documentation

Congrats on your new theme! You’ve made a great choice, and we’re sure you’ll be happy with this theme.

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.

2. 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.

3. Next, add your page’s title.

4. 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:

1. Start by clicking on the top left blue plus button .
2. Next, select Patterns, and then hit the Explore button. This will bring up the pattern library.

3. 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.

5. 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.

1. From your dashboard, head to Settings > Reading.

2. In the top section of the page where it says Your homepage displays, select the “A static page” radio button.
3. 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.
4. 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.

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.

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

2. 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.

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.

1. Start by heading to the Site Editor under Appearance > Editor.
2. Next, under Templates, click on Index.
3. 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.

4. 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.

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.

1. Start by creating a new page. From your dashboard, click Pages > Add new.
2. Next, add a title.
3. From the top-left menu, click the blue sign.
4. Under the search box, click the Patterns menu, then Explore.

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

5. Next, scroll through the patterns until you see one you’d like to use.
6. 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.
7. You can now modify each pattern’s content and layout to fit your site and content perfectly.

Changing Vivid’s Colours