Vivid Theme Documentation

Congrats on your new theme! You’ve made a great choice with Vivid.

Below is a quick guide to help you get it installed.

1. Start by downloading your theme for your WooCommerce Dashboard.
   https://woocommerce.com/my-account/downloads/
2. Next, from your WordPress dashboard. From here, go to Appearance > Themes. From the top of the screen, click the “Add new” button.

3. On the Add Themes screen, click the Upload Theme button at the top of the screen.

4. From the next screen, click the Browse you see in the middle of the screen.

5. This will open up a window for you to browse your computer. Now go find the zip file you downloaded in step 1. Make sure it’s still zipped!

6. Next, select the zipped theme file and click Open.
7. You’ll now see your theme’s file name. Click the Install Now button.

8. And finally, you’ll see a “Theme installed successfully” message. Now click Activate.

And voilà, your new theme is installed. You’ll now see a message for you to go to Vivid’s Settings page for additional help and importing demo content.

With the import wizard, you can get your site setup up quickly with the content available on our demo sites. We have three available. Vivid default, Vivid Green and Vivid Orange. Here’s how to set this up.

1. From your dashboard, go to Vivid Settings > Vivid Demo Content. This will bring you straight into the wizard. Click Start to get to the second screen. If you don’t have WooCommerce installed, this is the step that will do it for you.

2. On the third screen, you can select which content you wish to import (Vivid, Vivid Green or Vivid Orange) from the drop-down. Click Import, and you’re done!

Patterns are another powerful and easy way to kickstart your content. Vivid comes bundled with almost 40 patterns, including full-page patterns for your Homepage, About and Contact pages. You can insert them anywhere in your site, whether it’s a post, a page, or the Site Editor.

1. From the top-left menu of your post, page or site editor, click the blue + sign.
2. 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.

Adding a logo and site navigation is done directly in the Site Editor. To get started, from your dashboard, head over to Appearance > Editor.

There are several ways to edit your logo. Here is one way to do it from inside the homepage template.

1. From the Site Editor, click anywhere inside the homepage. This will bring you inside the editor.
2. Next, click on the header. You will now get a pop-up on the bottom-left of the screen which says Edit your template to edit this block. Now click on the Edit Template link.
3. Next, click on the logo block and click Replace. You’ll now have the option to insert your logo from the Media Library or to upload it.

Adding a navigation to the header is done similarly to the logo.

1. From the Header template, select the navigation block. To be sure you have the right block selected, you can look at the block List View in the upper-left-hand side of the editor screen.

2. Next, click on the three vertical dots next to the menu in the Block settings sidebar on the right. You’ll now see either a list of existing menus or you can click on Create new menu to create a new one.

As with the header, the footer logo (if there is one) and navigation are done in the Site Editor. Please follow the same steps as outlined in the Header Setup section

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

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.

You can also apply the shapes to the Image block or the Media/Text block by applying a block style.

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.

Vivid comes with six different colour variations. Each one can be used out of the box or further customized right in the Site Editor. To set a new colour variation from your dashboard, go to Appearance > Editor. Next click on Styles.

You’ll now see all variations available. Simply click on the desired style and press save at the bottom left of the sidebar.

If you wish to further fine-tune your site’s colours, you can do so from the Styles menu inside the template editor.

Vivid offers you a built-in way of setting fade-in animations on all your blocks including images and headings.

1. To apply the animation, simply click on the desired block within your post or page editor.
2. Toggle on the “Add Fade-in Effect” from the Settings tab.
3. You’ll now see all the available settings for the fade-in effect. Those are:
   • Movement in px: This will be how much the elements will move set in pixels. Select value between 0px (no movement) and 200px.
   • Delay in seconds: This setting allows you to delay the animation once the block is in view.
   • Duration in seconds: This setting determins how long the animation will last.

4. After configuring all three settings, you can click the Preview Animation button at the top of the settings box to see how it looks.