Home v4 with Visual Composer

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

Home v4 VC Code

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

[vc_row][vc_column css=".vc_custom_1464937016974{margin-bottom: 7px !important;}"][rev_slider_vc alias="home-v3-slider"][/vc_column][/vc_row][vc_row][vc_column][electro_feature_block icon_1="ec ec-transport" text_1="Free Deliveryfrom $50 " icon_2="ec ec-customers" text_2="99% PositiveFeedbacks" icon_3="ec ec-returning" text_3="365 daysfor free return " icon_4="ec ec-payment" text_4="PaymentSecure System " icon_5="ec ec-tag" text_5="Only BestBrands "][/vc_column][/vc_row][vc_row][vc_column width="1/2"][electro_ad_block image="2723" caption_text="Catch Hottest
Deals in Cameras
Category" action_text="Shop now" action_link="#"][/vc_column][vc_column width="1/2"][electro_ad_block caption_text="Tablets,
and More" action_text="From$74999" action_link="#" image="2724"][/vc_column][/vc_row][vc_row css=".vc_custom_1464937148692{margin-bottom: 43px !important;}"][vc_column][electro_products_carousel_tabs tab_content_1="featured_products" tab_content_2="sale_products" tab_content_3="top_rated_products" nav_align="left" tab_title_1="Featured" tab_title_2="On Sale" tab_title_3="Top Rated" product_items="20" product_columns="4"][/vc_column][/vc_row][vc_row full_width="stretch_row" css=".vc_custom_1477904107431{margin-bottom: 85px !important;background: #f6f6f6 url(http://compuspeed.mu/wp-content/uploads/revslider/home-v2-slider/HomeV3ProductBackground.jpg?id=3251) !important;}" el_class="vc-products-carousel-with-image"][vc_column width="1/2"][vc_single_image image="2732" img_size="full"][/vc_column][vc_column width="1/2"][electro_vc_products_carousel shortcode_tag="products" show_custom_nav="true" is_nav="true" is_touchdrag="true" title="Home Entertainment" limit="2" columns="2" items="2"][/vc_column][/vc_row][vc_row css=".vc_custom_1464937473391{margin-bottom: 50px !important;}"][vc_column css=".vc_custom_1464937320990{padding-top: 0px !important;}"][electro_vc_products_cards_carousel show_carousel_nav="true" show_nav="true" title="Laptops & Computers" rows="2" columns="2"][/vc_column][/vc_row][vc_row css=".vc_custom_1464937553285{margin-bottom: 50px !important;}"][vc_column][electro_vc_products_6_1 title="Bestseller" cat_limit="3"][/vc_column][/vc_row][vc_row][vc_column][electro_product_list_categories title="Top Categories of this Month" limit="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 Tabs Carousel, 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 :


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

  • Slider View :

Feature Block

  • It has Feature Block
  • Here i pasted a sample of Feature Block setting.

  • Features List View :

Ads Block

  • It has two columns in the ratio 1/2 + 1/2.
  • Both the columns has Ads Block
  • Ads Block : Here i pasted a Ads Block Setting Page image.

  • Ads Block View :

Product Carousel Tabs

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

  • Product Carousel Tabs View :

Single Image and Electro Products Carousel

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

Column 1:

  • It has Single Image element
  • Here i pasted the Single Image setting image

Column 2:

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

  • Single Image and Electro Products Carousel View :

Electro Products Cards Carousel

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

  • Product Cards Carousel View :

Product 6-1 Grid

  • It has one Product 6-1 Grid element
  • Electro Products Carousel : Here i pasted a Electro Products Carousel Setting Page image.

  • Product 6-1 Grid View :

Product List Categories

  • It has one Product List Categories element
  • Product List Categories : Here i pasted a Product List Categories Setting Page image.

  • Product List Categories View :