Our brands

Guide Ves Pencil Magento2

Getting Started

Getting Started

Ves Pencil comes with modern, elegant, professional product-oriented design, the theme lets you showcase your items at it’s best.

Are you seeking theme for magento 2? Ves Pencil is designed for magento 2 with tons of improvements in performance and scales. Also, it delivers engaging and rich user experience on any devices. Thus customer can shop anytime anywhere

Ves Pencil is one of our responsive magento 2 themes. This magento 2 theme created with new magento 2 UI and integrate bootstrap 3.3.6 layout components. Also, it is inherited from magento 2 blank theme

Compatibility:

Venus theme is fully compatible with Magento Community Edition 2.0.0, 2.0.2, 2.0.4, 2.0.6, 2.0.7, 2.1.0, 2.1.x

Demo Link: http://demo4coder.com/pencil/landing

Purchase It Now

Theme Configuration

Homepage Configuration

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

I. Pencil Home Page Default:

link demo

II. Pencil Home Page 2:

link demo

III. Pencil Home Page 3:

link demo

IV. Pencil 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.

Go to back-end > Ves Pagebuilder > Manager page profile > Edit profile name “Pencil Home Page Default”

In the back-end, we used the widget, namely “Content Carousel” on page builder profile. To change image slider, please Go to back-end > Ves Pagebuilder > Manager page profile > Choose to edit desired homepage > Edit ““Content Carousel” widget.

  1. Pencil Default Slider 1
  2. Pencil Default Slider 2,
  3. Pencil Default Slider 3

Note: Ves Pencil 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 page builder profile

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

{{widget type="Ves\BaseWidget\Block\Widget\Image" file="wysiwyg/ves_pencil/p_banner5.jpg" image_size="100%" alignment="left" popup_type="colorbox" link="women.html"}}

+ How To Config In The Backend

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

>> The number shown on the title of product carousel is configured here, and style css on theme

>> In this widget,  we use template in the following path file

app\design\frontend\Venustheme\pencil\Ves_Productlist\templates\widget\owlcarousel\items.phtml

Choose template format:

+ Item Settings:

>> Front-end show item:

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

+ Config to show button navigation:

How To Config in the back-end :

Go to admin > Ves Pagebuilder > Manager Page profile > Edit “Pencil Home Page 2” > Design Tab > Edit widget “Product list: Tabs by rules”

In this widget, you can config it like “3.Product carousel” element but it has different options here:

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

In the “Row Setting” >> Open “Layout” Tab >> Add css “margin-bottom: 30px” like below image

As the same value bootstrap guide: 30px

Header Configuration

Ves Pencil provides 2 header styles, you can choose one of them here.

Backend config:

To Config Header Default, Go to Admin Panel >> VES THEMESETTINGS >> Header >> General Settings >> Choose ” Default” Header Layout

Code html at this path file

app\design\frontend\Venustheme\pencil\Ves_Themesettings\templates\header\default.phtml

Backend config:

To Config Header 1, Go to Admin Panel >> VES THEMESETTING >> Header >> General Settings >> Choose ” Default 1″ Header Layout

Code html at this path file

app\design\frontend\Venustheme\pencil\Ves_Themesettings\templates\header\default1.phtml

To change Logo, Go to Admin Panel > Content > Configuration > Edit theme_name

After that, you need to open “Header” Tab > Upload your logo(GIF, PNG, JPG, or SVG file type) with the uploader

Footer Profiles

The frontend show:

How To Config footer profiles in backend

Go to back-end > Ves Themesetting > Footer > Choose CMS static block : “Pencil Block Footer Top

Content / Blocks / Content cms block name “Pencil Block Footer Top”:

<div class="page-main">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 hidden-xs">
            <div class="logo-footer"><a href="{{store url=""}}"><img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/logo-footer.png"}}" alt="" /> </a></div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
            <div class="block block-link">
                <div class="block-title"><strong><span>Infomation</span></strong></div>
                <div class="block-content">
                    <ul class="links">
                        <li class="nav item"><a href="{{store url="about-us"}}">About us</a></li>
                        <li class="nav item"><a href="{{store url="contact"}}">Our Locations</a></li>
                        <li class="nav item"><a href="{{store url="contact"}}">Contact Us</a></li>
                        <li class="nav item"><a href="{{store url="order-and-return"}}">Orders and Returns</a></li>
                        <li class="nav item"><a href="{{store url="our-company"}}">Our Company</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
            <div class="block block-link">
                <div class="block-title"><strong><span>Account</span></strong></div>
                <div class="block-content">
                    <ul class="links">
                        <li class="nav item"><a href="{{store url="wishlist"}}">Wishlist</a></li>
                        <li class="nav item"><a href="{{store url="customer/account"}}">Your account</a></li>
                        <li class="nav item"><a href="{{store url="checkout"}}">Checkout</a></li>
                        <li class="nav item"><a href="{{store url="customer/account/login"}}">Login</a></li>
                        <li class="nav item"><a href="{{store url="customer/account/create"}}">Register</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
            <div class="block block-link">
                <div class="block-title"><strong><span>Follow Us</span></strong></div>
                <div class="block-content">
                    <ul class="list-social">
                        <li class="icon-social"><a class="facebook" href="https://www.facebook.com/venustheme/"> <em class="fa fa-facebook">&nbsp;</em> </a></li>
                        <li class="icon-social"><a class="google" href="https://plus.google.com/+VenusTheme"> <em class="fa fa-google-plus">&nbsp;</em></a></li>
                        <li class="icon-social"><a class="twitter" href="https://twitter.com/venustheme"> <em class="fa fa-twitter">&nbsp;</em> </a></li>
                        <li class="icon-social"><a class="youtube" href="https://www.youtube.com/user/venustheme"> <em class="fa fa-youtube">&nbsp;</em> </a></li>
                        <li class="icon-social"><a class="skype" href="{{store url=""}}"> <em class="fa fa-skype">&nbsp;</em> </a></li>
                        <li class="icon-social"><a class="pinterest" href="{{store url=""}}"> <em class="fa fa-pinterest">&nbsp;</em> </a></li>
                        <li class="icon-social"><a class="instagram" href="{{store url=""}}"> <em class="fa fa-instagram">&nbsp;</em> </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            {{block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe" as="subscribe" before="-" template="subscribe.phtml"/}}
        </div>
    </div>
</div>

 

How To Edit Copyright and Payment logo

Go to path file: app\design\frontend\Venustheme\pencil\Ves_Themesettings\templates\html\footer\copyright.phtml

 

1. How TO Change Copyright:

Go to back-end > Content >  Design > Configuration > Edit theme name “Venustheme – Pencil” like below image. Then Open Footer Tab > Copyright

 

 

2. Change logo paypal

Go to back-end > Content > Blocks > Edit block name: “pencil-icon-pay”

 

 

 

 

Admin Theme Settings

Config Generals

In this tab, you are able to:

– Choose maximum page width on dropdown or change value input

– Choose skin color store view

– Choose director support LTR or RTL Languages

– Enable or disable panel tool

– Config body background, padding

– Add custom google font for body

– Config color text body, text link, text link hover

– Config button color, background and hover, focus

 

Please Go to Admin Panel > Ves ThemeSettings > General

Ves Pencil provides Custom Page Width (960px, 1024 px, 1280px, 1360px, 1440px, 1680px,…), and Maximum Page Width mode, you can choose the one that you prefer. You can apply this option to any home versions.

Config header

1. General tab: Choose Header Layout : “Default”

2. Top Link tab: Show link my account, sign in, create an account, and custom link

On front-end, it is shown like below image:

 

 

3. Search tab:
– Enable: Yes or No
– Custom style
– Add maximum width of search box
– Change format button search

How it is shown on front-end:

 

4. Language Switcher and Currency Switcher tab:

This block setting group custom code in this file

app\design\frontend\Venustheme\pencil\Magento_Theme\templates\html\setting.phtml

How it is show on front-end:

<div class="setting-links" id="setting-links<?php echo $id?>">
    <div class="actions dropdown options setting-links-options">
        <div class="action toggle switcher-trigger" id="setting-links-trigger<?php echo $id?>">
            <i class="fa fa-cog">&nbsp;</i> <?php echo __('Setting') ?>
        </div>

        <ul class="dropdown setting-links-dropdown" data-mage-init='{"dropdownDialog":{
        "appendTo":"#setting-links<?php echo $id?> > .options",
        "triggerTarget":"#setting-links-trigger<?php echo $id?>",
        "closeOnMouseLeave": false,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":null}}'>
            <?php if($currency_custom): ?>
            <li class="switcher-currency-wrapper">
                <?php echo $this->getChildHtml('currency_custom') ?>
            </li>
            <?php endif; ?>
            <?php if($store_language_custom): ?>
            <li class="switcher-language-wrapper">
                <?php echo $this->getChildHtml('store_language_custom') ?>
            </li>
            <?php endif; ?>
        </ul>
        
    </div>
</div>

 

 5. Sticky Header tab:

Config “Scroll To Fixed” header ( keep header when scrolling window). You can choose all sticky elements (all header )or choose specify element

 6. Top cart tab:

– There are 4 options for you to show Top Cart, you can choose to show what you want

  • Text Only
  • Icon Class Only
  • Text + Icon Class
  • Icon Class + Text

frontend show:

Config Footer

Venustheme allows you to config various footer sections: Footer top, Footer center, Footer Bottom

app\design\frontend\Venustheme\pencil\Ves_Themesettings\layout\default.xml

 

<!-- Footer Container -->
        <referenceContainer name="footer-container">
            <container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="ves-footer">
                <container name="footer-top" label="Footer Top" htmlTag="div" htmlClass="footer-top">
                    <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.top" template="Ves_Themesettings::html/footer/footer-top.phtml"/>
                </container>
                <container name="footer-center" label="Footer Center" htmlTag="div" htmlClass="footer-center" after="footer-top">
                    <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.center" template="Ves_Themesettings::html/footer/footer-center.phtml"/>
                </container>
                <container name="footer-bottom" label="Footer Bottom" htmlTag="div" htmlClass="footer-bottom" after="footer-center">
                    <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.bottom" template="Ves_Themesettings::html/footer/footer-bottom.phtml"/>
                </container>
                <remove name="form.subscribe"/>
                <block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
            </container>
        </referenceContainer>
        <!-- End Footer Container -->

 

You can configure the options related to the footer section in Ves Themesettings > Footer

– General Settings:

+ You can custom style if use value Yes, change text color and link color on footer

+ You can style background color or set background image, patent for footer by option “Outer Container”

+ You can enable or disable text copy right, and you can custom text copy-right at option “Copyright”

 

– Footer Top setting:

+ You can enable or disable position

+ You can choose static block or custom html redirect on text editor

+ You can custom style if use value Yes: Text color, Link color, Link hover color

+ You can style “Outer Container”, ” Inner Content” – Main content at here

 

– For Footer Center Setting, Footer Bottom setting, you can config it like Footer Top setting. But in case the theme do NOT have, please set ” Enable Footer Center” or ” Enable Footer Bottom” to :NO

 

Config Category page

Venus theme provides several types of category layout. You can choose one as your choice.
+ Go to the Admin Panel > Products > Inventory > Categories.
+ Select “Default Category” in the treeview area at the left side.
+ Click “Add Subcategory” button, then input Category name, Description, etc. Notes: set the options “Is Active” to “Yes”, “Include in Navigation Menu” to “Yes” in “General Information” tab.
+ If you want to display banner image, please set image in “Content” tab: upload image or choose cms block

 

+ In order to display banner with static block, please set “Display Mode” to “Static block and products” and CMS Block in “Display Settings” tab.

 

+ You can change layout category on Design tab:

+ Click “Save Category” button, to update your changes.

Go to Admin Panel > Ves Themesetting > Category page:
1. General tab:
– Show name, description, image of category
– Show Top toolbar and Bottom Toolbar
2. Product settings tab:
– Show element for each product item:
+ Config to select element of each product: name, description, price, review, lable sale or new, ect
+ Config format button add to cart, quickview, add to wishlist, add to compare
+ Config product image: image size, swap image

Config Product View Page

– Name config:
– Other elements:
+ Config enable / disable elements by change value Yes / No

+ Specify you can change position of thumnail slider : horizonal or vetical, Top or bottom

– Config show tab
– Custom tab
+ Tab By Product Attribute Code
+ Tab By CMS Block
+ Tab By Static Html Content

– Config Related Products : number items and item show on responsive


– Frontend show:

– Config Upsel product : number items and item show on responsive

– Frontend show:

Config Contact Page

Link page: demo4coder.com/pencil/contact

How To config: Go To Ves Themesetting > Contact page:

 

+ Contact Form tab:

 

+ Google map tab:

– You can change address, Longitude, Latitude

– You can add contact information : email, address, telephone, fax, custom html about us, etc…

 

+ Edit Form :

You can edit form at this path file:

app\design\frontend\Venustheme\pencil\Magento_Contact\templates\form.phtml

 

 

 

Config Cart Page

Blocks Diagram

Static Blocks Diagram

This is all CMS static blocks we are using on the theme Ves Pencil.

To Open Cms Static Blocks, Go To Admin Panel > Content > Blocks

 

1. “Pencil GiftCart Block ” show in category page: http://demo4coder/pencil/women.html

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="block block-info"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales01.jpg"}}" alt="" /> <span class="content"> <span class="info">Give it away now</span> <strong class="title">A gift card always beats a blind guess</strong> <span class="more button">Virtual Gift Cards</span> </span> </a></div>
</div>
</div>

 

 

2. “Pencil Sale Block” show in category page: http://demo4coder/pencil/training.html

 

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="block block-info"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales02.jpg"}}" alt="" /> <span class="content"> <span class="info">Men Deals</span> <strong class="title">Pristine prices on pants, tanks and bras.</strong> <span class="more button">Shop Men Deals</span> </span> </a></div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="block block-info block-info-2columns"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales03.jpg"}}" alt="" /> <span class="content"> <strong class="title">Men Bargains</strong> <span class="info">Stretch your budget with active attire</span> <span class="more button">Shop Men Deals</span> </span> </a></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="block block-info block-info-2columns"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales04.jpg"}}" alt="" /> <span class="content"> <strong class="title">Luma Gear Steals</strong> <span class="info">Your best efforts deserve a deal</span> <span class="more button">Shop Luma Gear</span> </span> </a></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="block block-info block-info-3columns"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales05.jpg"}}" alt="" /> <span class="content"> <strong class="title">20% OFF</strong> <span class="info">Every $200-plus purchase!</span> </span> </a></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="block block-info block-info-3columns"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales06.jpg"}}" alt="" /> <span class="content"> <strong class="title">Spend $50 or more shipping is free!</strong> <span class="info">Buy more, save more</span> </span> </a></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="block block-info block-info-3columns"><a href="{{store url=""}}"> <img class="img-responsive" src="{{media url="wysiwyg/ves_pencil/banner-sales07.jpg"}}" alt="" /> <span class="content"> <strong class="title">You can't have too many tees</strong> <span class="info">4 tees for the price of 3. Right now</span> </span> </a></div>
</div>
</div>

 

3. “Pencil Block Footer Top”,  “Pencil footer image pay” show on Page Footer:

 

4.  “Pencil Default Slider 1”, “Pencil Default Slider 2”, “Pencil Default Slider 3” are using widget “Content carousel” on homepage “Pencil Home Page Default”

 

5. “Pencil Home2 Slider 1”, “Pencil Home2 Slider 2”, “Pencil Home2 Slider 3” are  using widget “Content carousel” on homepage “Pencil Home Page 2”:

 

 

6. “Pencil Home3 Slider 1”, “Pencil Home3 Slider 2”, “”Pencil Home3 Slider 3” are  using widget “Content carousel” on homepage “Pencil Home Page 3”:

 

7. “Pencil Home4 Slider 1”, “Pencil Home4 Slider 2”, “Pencil Home4 Slider 3”, “Pencil Home4 Slider 4” are  using widget “Content carousel” on homepage “Pencil Home Page 4”:

 

 

Extensions

Ves Blog

1. How To Change URL link:

Go to Admin Panel > VENUSTHEME EXTENSIONS > Ves Blog > General Settings

 

 

2. How To Change page layout for each blog category

Go to Admin Panel > Ves Blog > Categories > Category Management > Edit 1 category or add new category

On Design tab : you can choose page layout for category

 

3. How To Custom Category Blog Page:  Show grid, list or Masonry View Mode

Go to Admin Panel > Ves Blog > Categories > Category Management > Edit 1 category or add new category > Design tab:

 

You can config to show blog item on responsive at here

List view mode: htpp://demo4coder.com/pencil/blog/magento-news.html

Grid view mode: http://demo4coder.com/pencil/blog/best-practice.html

Masonry view mode:  http://demo4coder.com/pencil/blog/best-practice.html

 

Ves Megamenu

Ves megamenu provides powerful and most advanced menu, we’re going to describe detailed instructions how to use this powerful menu features as our demo site.

For general menu settings, please go to Admin Panel > Ves Megamenu > Menu Management like below image and then follow the below instructions. It shows you how to config:

 

 1. Horizontal menu:

Menu item” FEATURES”

How to config menu item, namely “Features” on back-end :

  1. – add submemu
  2. – setting width dropdown: 600px
  3. – Setting Main Content Type: Child menu item
  4. – Setting Child Menu Column: 3 columns

 

 

Menu item” WOMEN”

How to config menu item, namely “Women” on back-end

– Add submenu

– Add dropdown width: 100%

– add html on header block:

<div class="pull-left">
<ul class="links">
<li>Recommended:</li>
<li><a href="#">Configurable</a></li>
<li><a href="#">Galaxy S3</a></li>
<li><a href="#">Galaxy S4</a></li>
<li><a href="#">iPhone 5</a></li>
</ul>
</div>
<div class="pull-right">
<ul class="links">
<li><a href="#">Galaxy S4</a></li>
<li><a href="#">iPhone 5</a></li>
</ul>
</div>

– Add left block width: 20% and content:

 

<p><img src="{{media url="wysiwyg/ves_pencil/banner1.jpg"}}" alt="" width="370" height="320" /></p>
<h3>Featured Category</h3>
<p>This is a custom block ready to display any content. You can add blocks to any category in the catalog...</p>
<p>&nbsp;</p>
<p><strong><a href="http://localhost/ves_pencil/admin/cms/wysiwyg/directive/___directive/e3tzdG9yZSB1cmw9IndvbWVuLmh0bWwifX0,/key/41400a407ff7453926ef640794fe7ca32e4465b44438337672bedc3c3c582d6c/">View Category <em class="fa fa-long-arrow-right">&nbsp;</em></a></strong></p>

– Add Main content width : 50%

Setting Main Content Type: Child menu item

Setting Child Menu Column: 3 columns

 

– Add Right Block width 30% and widget to content:

 

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" widget_title="Latest Products" product_source="latest" categories="20" number_item="8" column="2" enable_owlcarousel="1" number_item_percolumn="1" autoplay="1" autoplay_timeout="3000" autoplay_hoverpause="1" dots="1" nav="1" loop="1" show_name="1" show_short_description="1" show_price="1" show_review="1" show_new_label="1" show_sale_label="1" show_image="1" image_width="200" image_height="259" show_compare="1" show_wishlist="1" show_addtocart="1"}}</div>

– Add Bottom block width html content:

 

<div class="pull-left">
<ul class="links">
<li>Recommended:</li>
<li><a href="#">Configurable</a></li>
<li><a href="#">Galaxy S3</a></li>
<li><a href="#">Galaxy S4</a></li>
<li><a href="#">iPhone 5</a></li>
</ul>
</div>
<div class="pull-right">
<ul class="links">
<li><a href="#">Galaxy S4</a></li>
<li><a href="#">iPhone 5</a></li>
</ul>
</div>

 

Menu Item “Fashion”

How to config menu item, namely “Fashion” on back-end

– Add submenu

– On each submenu, Main Content dropdown, add width Ves-Megamenu:Product

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" product_source="latest" categories="11" number_item="4" column="4" number_item_percolumn="1"  show_price="1" show_name="1" show_review="1" show_new_label="1" show_sale_label="1" show_image="1" image_width="200" image_height="260" show_compare="1" show_wishlist="1" show_addtocart="1"}}</div>

You can change categories for each submenu item

 

2. Vertical menu:

 

 

Icon for each menu item is configured:

– You can setting show icon change value “yes”

– Upload icon image

– Choose position for icon show

How to config Vertical Menu on back-end

 

 

How To Create Simple Menu & Change Top Menu – Magento 2 Mega Menu Tutorials 

How To Create 6 Menu Types – Drag & Drop Magento 2 Mega Menu Tutorials

How To Style Your Menu without editing css file – Magento 2 Mega Menu Tutorials

 

 

FAQ

General Questions

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