Vibrant is a classy theme for an online jewellery store.
There are eight sections (apart from the announcement bar, header and footer) in the demo homepage of the Vibrant theme. Follow the steps below to edit each of them.
- Announcement Bar
- Header
- First section – Banner
- Second section – Text
- Third section – Basic
- Fourth section – Product List
- Fifth section – Image List
- Sixth section – Image List
- Seventh section – Blog Feed
- Eighth section – Newsletter
- Footer
Announcement Bar
An announcement bar is displayed above the header which has a link to the store and coupon code.
See how to edit the announcement bar.
Header
The header contains the logo/site title (1), menu (2), social icons (3), search icon (4), cart (5) and a menu button (6).
- To change the header layout, go to Header in the Design section. See how
- To add/change the logo or site title, go to Site Title & Logo in the Design section. See how
- To add/remove an item to/from the menu, go to the Website menu. See how
- To add/remove/edit social media links, go to Social Links. See how
- To enable search in your website, go to the Settings section. See how
- To add/remove/edit the cart icon, go to Design in the Store section. See how
- To add/remove/edit the menu button, go to Header in the Design section. See how
Now that you’ve started with this beautiful theme, you’d have its demo pages in your menu.
To view or edit any of the pages, just click on it. Let’s begin with the ‘Home’ page.
- Go to the Site Menu.
- Click on Home (as shown in the image).
- This will bring you to the page editor for the ‘Home’ page.
First section – Banner
The first section contains a banner. To replace the demo images with your own and explore banner styles, click on the Manage Banner button.
- To add a new image slide, click on the Add Slides (1) button.
- To replace an image, set its focal point or edit the text and buttons on the slide, click on the edit icon (2).
- To delete a slide, click on the delete icon (3).
- To explore style options, click on the Style (4) tab.
- To explore layout options, click on the Layout (5) tab.
Click here to see how to edit a Banner section.
Second section – Text
The second section contains a quote. Here, you can add a quote along with the author’s name. Click on any text in this section to edit it.
Click here to see how to edit a Text section.
Third section – Basic
The third section contains a basic image, text and button. Here, you can click on the image/text to replace/edit it.
Click here to see how to edit a Basic section.
Fourth section – Product List
The fourth section displays a list of products from your store. Click on the Manage Products button to customize this section.
See how to edit a product list section.
Fifth section – Image List
The fifth section contains an image list. Here, you can add a list of your portfolio galleries or the services your provide.
To edit the links, change the layout or replace the demo images, click on the Manage Image List button.
- To add a new item to your image list, click on the Add Item (1) button.
- To replace an image or edit an item. click on it (2).
- To duplicate an item, click on the copy icon (3).
- To delete an item from your image list, click on the delete icon (4).
- To change the layout or explore different layouts, click on the Layout tab (5).
- To edit the style and increase/decrease number of columns, click on the Style tab (6).
- To edit/delete the headline, go to (7).
Click here to see how to edit an Image List section.
Sixth section – Image List
The sixth section contains an image list. Here, you can add a list of your portfolio galleries or the services your provide.
To edit the links, change the layout or replace the demo images, click on the Manage Image List button.
- To add a new item to your image list, click on the Add Item (1) button.
- To replace an image or edit an item. click on it (2).
- To duplicate an item, click on the copy icon (3).
- To delete an item from your image list, click on the delete icon (4).
- To change the layout or explore different layouts, click on the Layout tab (5).
- To edit the style and increase/decrease number of columns, click on the Style tab (6).
- To edit/delete the headline, go to (7).
Click here to see how to edit an Image List section.
Seventh section – Blog Feed
The seventh section displays your blog feed. Click on the Manage Blog Feed button to customize this section.
See how to edit a blog feed section.
See how to create a blog.
Eighth section – Newsletter
The eighth section contains a newsletter subscription box. To change the appearance of the newsletter section, click on the Manage Fields button.
See how to edit a newsletter section.
Footer
The footer contains the credits for your websites. You can add social icons (1), a copyright text (2) and important links here.
Click here to see how to edit the footer.