Vignette Theme

Thank you for choosing Vignette theme to build your WooCommerce website.

1. In your Dashboard go to Appearance > Themes.
2. Click on the Add New button on top.
3. Click Upload New button on top.
4. In the new interface click Choose File and browse your computer to locate vignette.zip file you downloaded.
5. Click Install Now.
6. After installation Activate the theme.

1. WooCommerce Blocks: The official WooCommerce blocks plugin is required to display the modal cart and product carousels. It includes many other necessary blocks for any website.
2. Icon Block: A simple little block that allows you to add a custom SVG icon or graphic.
3. Contact Form 7: The plugin is recommended for creating contact forms.

Vignette comes with a setup wizard that enables you to create the demo layout with a just a few clicks.

1. After installing the theme, in your Dashboard go to Appearance > Theme Setup.
2. The setup wizard will ask you to install and activate necessary plugins, and import the demo content. Please be patient while WordPress imports all the content.
3. After the setup ends, all you need to do is assign the menu’s to their respective navigation blocks.

Vignette is a full site editing theme, thus you can edit most elements from the front end. In your Dashboard go to Appearance > Editor and there you can select and edit any element you like, change their color, font etc.

You can edit the global styles, to change the elements throughout the websites as shown in the picture below

Specific elements can be edited by selecting the template part you want to edit, like large header, small header or footer.

In case you want to configure the theme manually instead of importing the demo content.

1. Create a page and assign Page (Large Header) template to it.
2. In your Dashboard go to Settings > Reading and assign the page to display in front and another page to display the latest posts.
3. Add blocks and patterns you like to the page.

1. Partners block pattern.
2. Three product carousel sliders.
3. Features block pattern.
4. Process block pattern.
5. Four-column block, each column containing a featured category. In the block settings button is set as an outline and the category description is disabled.

Vignette comes with some pre-designed patterns that you can include in any page or post.

1. Partners: Display a title block and some logos.
2. Featured products carousel: Displays a carousel with products you can hand pick.
3. New products carousel: Displays a carousel with new products.
4. On sale products carousel: Displays a carousel with on sale products.
5. Features pattern: Cover block with a background image (or video) that highlights some information about your business in three columns.
6. Process, text and video: Text in the left and a video (or image) in the right.
7. Team members: Display your team members in four columns.

Here’s how you can add a block pattern to a page.

1. When editing a page or post click the ‘+’ button to add a new block.
2. Click the Browse All button.
3. Click the Patterns tab in the blocks section.
4. From the dropdown select the patterns that belong to Vignette.
5. Select any of the available patterns and it will be added to your page.

We have included the ability to include up to three product carousels in any page of your website using shortcodes. Each carousel is a block pattern. Add them to any page or post as explained above.

You can define the number of products displayed in each carousel by selecting the amount of rows in each blocks settings. The carousels use Product Grid block from WooCommerce Blocks plugin. You can replace the block grid of a carousel with another one, say Product Grid from a category to have the carousel display products from only one category.

Vignette comes with different page templates to help you achieve a different look for any page.

1. Default: This template creates a page with a simple header in the top.
2. Page (Large Header): This template uses a large header that has a background image, text and call to action button. You can replace the image or with another one, or a video instead. Used only for the front page of the website.
3. Page (Small Header): This template uses a small header that uses the featured image of said page as background.
4. Blank: As the name says, this is a blank canvas that you can use any of of the template parts and patterns to achieve a different look.

If you import the demo content there will be three pre-designed pages included. Home, About us and Contact.

Template parts are pre-designed sections that are included in page templates to organize and add structure to the theme to avoid having to repeat code. To edit a template part in your Dashboard go to Appearance > Editor > Template Parts. Note that when you edit a template part it will change in all sections of your website. You can always reset customizations if you make a mistake.

Template parts included in this theme are Header (Large), Header (Small), Header and Footer.

Vignette enables you to animate any block using css3 animations when entering the screen, by adding classes to that block.

In the Advanced section of any block settings add the ‘animated‘ class. This class will tell the theme this block will animate. You need to combine this with another class to define which animation you will be using like ‘fadeIn‘.

Available animations are:

Fade effect

fadeIn fadeInRight fadeInLeft fadeInUp fadeInDown fadeInUpShort fadeInDownShort fadeInRightShort fadeInLeftShort

Flip & Rotate

flip flipInX flipInY rotateIn rotateInUpLeft rotateInUpRight rotateInDownLeft rotateDownUpRight rollIn lightSpeedInRight lightSpeedInLeft

Bounce

bounceIn bounceInRight bounceInLeft bounceInUp bounceInDown

Attention seekers

growIn shake shakeUp wiggle swing tada wobble pulse

Delay animations

Add the following classes to delay any animation, measured in milliseconds.

delay-250 delay-500 delay-750 delay-1000 delay-1250 delay-1500 delay-1750 delay-2000 delay-2250 delay-2500 delay-2750 delay-3000 delay-3250 delay-3500

Animation speed

Use below classes to slow down animation

slow slower slowest

To animate a page separator like in our demo, in block settings select the separator to display as a wide line and the classes ‘animated widthOut’ to it.