Our brands

Homepage Configuration

Ves Melody have 4 different homepages built by Ves Page Builder module.

I. Melody Home Page Default:

link demo

II. Melody Home Page 2:

link demo

III. Melody Home Page 3:

link demo

IV. Melody Home Page 4:

link demo

To configure the default home page for your store, go to Store > Configuration > General > Web > Default Pages tab, select the desired page in the CMS Home Page field and save configuration.

To configure the home page for other store, please select your Store View and select the desired page in the CMS Home Page field

Go to back-end > Venustheme > Ves Pages Builder > Edit profile name “Melody_layout1_home”

At here we called Blocks Builder Profile you can check and edit them in admin > Venustheme > Ves Pages Builder > Manage Elements

In the back-end, we used the widget, namely “Ves Image Slider”. To change image slider, please Go to back-end > Venustheme > Ves Pages Builder > Manage Elements > Choose to edit desired block (ex: Melody_home1_widget_slidershow) > Edit “Ves Image Slider” widget.

add class melody-slider to the image is received style in Melody theme.

  1. Melody_layout1_home_imageslider_1
  2. Melody_layout1_home_imageslider_2
  3. Melody_layout1_home_imageslider_3

Note: Ves Melody Image Slider are using CMS static block. Hence, if you want to change image slider, please go to Admin Panel > Content > Blocks > Choose Desired CMS Static Block you want to edit.

+ In the back-end, we used the widget, namely “Single Image” on block builder profile

+ You can edit widget and change image in this popup by choosing “Edit” Button

add class melody-image to the image is received style in Melody theme.

Enable Image Description: Yes and add description into textarea Image Description

in Shortcode you can see:

{{widget type="Ves\BaseWidget\Block\Widget\Image" file="wysiwyg/ves_melody/store2/home-banner/1.jpg" image_size="100%" alignment="center" show_description="1" html="PGgxPlRoZSBiYXNzIHZpb2xpbjwvaDE+CjxwPldoZW4gdmlvbGluIG1lZXRzIGJhbGxldDwvcD4KPGEgaHJlZj0iIyIgdGl0bGU9IlNob3AgTm93ISIgY2xhc3M9ImJ1dHRvbiI+U0hPUCBOT1chPC9hPg==" popup_type="colorbox" link="#"}}

Config image banner with row-success (the banner will overwrite the content above)

config in Page builder profile:

select Row style: Success

Config image banner with other style

to config you add the class melody-image-v1 in block builder profile:

Config in block builder profile (Manage Elements):

Add the class: melody-html to the block is received style in Melody theme.

5.1 Banner HTML with melody-html-v1 class (color all text: white)

Add the class melody-html-v1 for block builder

5.2 HTML with melody-title class (ex: melody_home3_widget_bestseller)

Not add the class melody-html and add the class melody-title in widget

5.3 HTML with melody-title-v1 class (color title: white)

Add the class melody-title-v1 in widget

+ How To Config In The Backend (in block builder profile: melody_home1_widget_product2)

>> In the back-end, we used the widget, namely “Product list: Tabs by categories”. To config product carousel, please open the widget “Product list: Tabs by categories” and edit it

Add the class: melody-product to the block is received style in Melody theme.

Add the class hidden-etabs if you only select one categories.

>> you can re-select source for widget.

>> In this widget,  we use default template in the following path file: app\design\frontend\Venustheme\melody\Ves_Productlist\templates\widget\owlcarousel\items.phtml

+ Config Item Settings to Show/Hidden the elements:

+  Config Carousel Settings: select Type and count Number Item in the widget.

+  You can config the number of row, and product items on each device responsively:

+ Config to show/hidden navigation:

Product with other style

Add the class melody-product-v1 for block builder

How To Config in the back-end (block builder: melody_home1_widget_categories1)

Add the class: melody-categories to the block is received style in Melody theme.

How To Config in the back-end (block builder: melody_home3_widget_testimonials)

Add the class: melody-testimonials to the block is received style in Melody theme.

How To Config in the back-end (ex: melody_home2_widget_blog)

Add the class: melody-blog to the block is received style in Melody theme.

Config:

Set the number post items on each device responsively and config show/hidden navigation:

Post Settings: config to show/hidden elements in this widget.

How To Config in the back-end (block builder: melody_home3_widget_ourservice)

Add the class: melody-ourservice to the block is received style in Melody theme.

In page builder, you can choose “setting” button to make space for each row

In the “Row Setting” >> Open “Layout” Tab >> Add css margin or padding like below image

Share this Post!

0 Comment

Do NOT follow this link or you will be banned from the site!