Documentation

Home » Documentation » Vivid documentation

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.

WordPress dashboard add new page menu open
  1. 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.
Vivid theme pattern pop-up
  1. Next, add your page’s title.
WordPress editor, add title field highlighted.
  1. 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.
WordPress editor publish button highlighted.
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 Blue plus to add pattern or block. .
  2. Next, select Patterns, and then hit the Explore button. This will bring up the pattern library.
WordPress editor with pattern and explore button highlighted.
  1. Select Full Page Pattern from the pattern category list. Once you’ve found the pattern you want to use, simply click on it.
WordPress Pattern library window

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

WordPress editor, add title field highlighted.
  1. 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.
WordPress editor publish button highlighted
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.
WordPress dashboard with Settings menu and reading highlighted
  1. In the top section of the page where it says Your homepage displays, select the “A static page” radio button.
  2. 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.
  3. Hit the Save Changes button at the bottom of the page.
Reading Setting page in WordPress dashboard

Vivid image shapes

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

Arch image shape example

Arch shape

Circle with semi-circle image shape example

Circle semi-circle shape

Oblong image shape example

Oblong shape

Semi-circles image shape example

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.

WordPress editor highlighting template button
  1. From the right settings menu, click on the “Single” button right next to Template.
WordPress editor highlighting template drop-down
  1. 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.

  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.
Selecting Featured Image in Index template file.
  1. From the Styles tab, select the desired shape.

With the new site editor, adding your site’s navigation is done directly in the template editor.

Adding a header menu

💥 Sanity Tip

It’s sometimes hard to click around in the tiny navigation box. We highly recommend using the List View menu button WordPress Editor List View 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.

  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 Blue plus button sign.
  4. Under the search box, click the Patterns menu, then Explore.
WordPress editor with pattern and explore button highlighted
  1. From here, you can select the pattern category from the list on the left.
Vivid pattern library
  1. Next, scroll through the patterns until you see one you’d like to use.
  2. 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.
  3. 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!