Home v1 with Visual Composer

Home v1 of Electro is built using Visual Composer.It has 7 rows. The Visual Composer Backend editor of the page look like this

Home v1 VC Code

Please switch your editor to classic mode and paste the code given here :

[vc_row][vc_column css=".vc_custom_1464938514718{margin-bottom: 7px !important;}"][rev_slider_vc alias="home-v1-slider"][/vc_column][/vc_row][vc_row][vc_column width="1/3"][electro_ad_block image="391" action_text="Shop now" action_link="#" ad_text="Catch big Deals on the cameras"][/vc_column][vc_column width="1/3"][electro_ad_block image="391" ad_text="Tablets, Smartphones and more" action_text="Upto 70" action_link="#"][/vc_column][vc_column width="1/3"][electro_ad_block image="391" ad_text="Shop the Hottest products" action_text="Shop Now" action_link="#"][/vc_column][/vc_row][vc_row][vc_column width="1/3"][electro_vc_product_onsale show_savings="true" title="Special Offer" savings_text="Save"][/vc_column][vc_column width="2/3"][electro_product_tabs tab_content_1="featured_products" tab_content_2="sale_products" tab_content_3="top_rated_products" tab_title_1="Featured" tab_title_2="On Sale" tab_title_3="Top Rated" product_items="6" product_columns="3"][/vc_column][/vc_row][vc_row][vc_column][electro_products_2_1_2 title="Best Deals" cat_limit="7"][/vc_column][/vc_row][vc_row css=".vc_custom_1464938991826{margin-bottom: 0px !important;}"][vc_column][electro_vc_products_cards_carousel show_nav="true" show_top_text="true" show_categories="true" title="Best Sellers" rows="2" columns="3" limit="20" cat_limit="3"][/vc_column][/vc_row][vc_row css=".vc_custom_1464938705241{margin-bottom: 49px !important;}"][vc_column][vc_single_image image="3101" img_size="full"][/vc_column][/vc_row][vc_row][vc_column][electro_vc_products_carousel shortcode_tag="recent_products" show_custom_nav="true" is_nav="true" is_dots="true" is_touchdrag="true" title="Recently Added" limit="20" columns="6" items="6"][/vc_column][/vc_row]

After pasting the code, you can simply switch to Backend Editor to view the screen just like in the screenshot above.

The Details

Page Content

you can add your own content between existing blocks in home pages. Home pages can be constructed either via Page Attributes ( which is default ) or via Visual Composer ( which can be added easily ).

  • Page Attributes : For ex : If you want to add a text box under the ad blocks, you can adjust the priority of “Page Content” in General block and make it appear after the ad blocks.
  • Page Content Setting : Here is the screenshot for your reference

Likewise you can move the page content anywhere. You can change the priority number to insert the content wherever you wish.

  • Page Content View :

Slider

  • Revolution Slider Setting : Here i pasted a Revolution Slider Setting Page image.

  • Slider View :

Ads Block

  • It has three columns in ratio 1/3 + 1/3 + 1/3.
  • All the columns has Ads Block setting .
  • Here i pasted a sample of Ads Block setting.

  • Ads Block View :

Electro On Sale Product and Product Tabs Block

  • It has two columns in the ratio 1/3 + 2/3

Column 1 (1/3)

  • It has Electro On Sale Product setting
  • Electro On Sale Product : Here i pasted a Electro On Sale Product setting Page image.


Column 2 (2/3)

  • It has Product Tabs setting
  • Product Tabs : Here i pasted a Product Tabs setting Page image.

  • Electro On Sale Product and Product Tabs View :

Product 2-1-2 Grid

  • It has Product 2-1-2 Grid block
  • Product 2-1-2 Grid : Here i pasted a Product 2-1-2 Grid Setting Page image.

  • 2-1-2 Products Block View :

Electro Products Cards Carousel

  • It has one Electro Products Cards Carousel
  • Electro Products Cards Carousel : Here i pasted a Electro Products Cards Carousel Setting Page image.

  • Product Cards Carousel View :

Single Image

  • It has one Single Image element
  • Single Image : Here i pasted a Single Image Setting Page image.

  • Single Image View :

Electro Products Carousel

  • It has one Electro Products Carousel element
  • Electro Products Carousel : Here i pasted a Electro Products Carousel Setting Page image.

  • Electro Products Carousel View :