Our brands

Guide Ves Frido Magento2



Getting Started

Getting Started

Seeking theme to turn your store into a high-fashion collection. Frido is the best choice for you. This Impressive Magento 2 Fashion theme designed to attract your customers at the first sight. With amazing design & dozen of stunning features, It best fits for your premium online stores like fashion store, accessories store, boutique shop, men & women collections, kid clothing, shoe store, etc.

With 8+ stunning premade homepages, 3+ category Layout Styles and Drag & Drop Mega Menu, Store owner can create a beautiful website in the blink of an eye.

Frido is organized in a flexible, customer-friendly way; hence, the desired page can be reached in the blink of an eye. Especially, including extended product page along with Ajax Filter, Product Hover Effect and quick view, it appeals effectively customers attention focus on and finds out quickly the desired product they want. Don’t worry anymore, thanks to Frido, your customer will have a great shopping experience on your site.

Frido is one of our responsive Magento 2 themes. This Magento 2 theme created with new Magento 2 UI and integrate bootstrap 4.0.0 layout components. Also, it is inherited from Magento 2 blank theme

Advanced Guide: Developer Guide For Magento 2

Compatibility:

Frido is fully compatible with Magento Community Edition 2.0.0, 2.0.x, 2.1.0, 2.1.x, 2.2.x

Demo Link: http://server1.demo4coder.com/frido/landing

Purchase It Now

Theme Configuration

Child Theme Configuration

Please create child theme folder in app/design/frontend/company_name/theme_name
ex:

etc/view.xml:-This file is used to specify product image dimensions, thumbnails etc.Magento_Theme:- This directory is used to override existing Magento’s theme files.Magento_Theme/layout/default.xml:- By default, Magento2 assumes that your theme’s logo file should be: /web/media/logo.svg If you want some other file for logo, then you must declare it in thedefault.xml file. This file is also used to override default theme’s settings.media/preview.png:- The preview of the current theme.web :- This directory contains all the theme’s static data like images, styles, javascript, fonts etc.registration.php :- This file is required to register our theme to Magento2 system.theme.xml :- This is a compulsory file that defines our theme name, its parent and optionally theme’s preview image.composer.json :- If you plan to distribute the theme using a composer package will make it easier for people to install the custom theme, you can specify any required packages in which composer can install/update for the user to ensure the theme installs correctly. Creating theme files, Let us now create our files one by one. Creating theme files, Let us now create our files one by one.theme.xml ( app/design/frontend/Venustheme/frido_child/theme.xml )

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Venustheme Frido</title>
	<parent>Venustheme/frido</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

registration.php ( app/design/frontend/Venustheme/ezboozt_child/registration.php )

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Venustheme/frido_child',
    __DIR__
);

composer.json ( app/design/frontend/Venustheme/frido_child/composer.json )

{
 "name": "magento/theme-frontend-frido_child",
 "description": "N/A",
 "require": {
 "php": "~5.5.0|~5.6.0|~7.0.0",
 "magento/theme-frontend-frido": "100.2.*",
 "magento/framework": "101.0.*"
 },
 "type": "magento2-theme",
 "version": "100.2.2",
 "license": [
 "OSL-3.0",
 "AFL-3.0"
 ],
 "autoload": {
 "files": [
 "registration.php"
 ]
 }
 }

Please go to Admin -> Content -> Configuration

Then open Design Configuration -> choose the Frido child


* Important: After you choose a new theme or new theme child, you need reindex data and run the command below via SSH:

php bin/magento setup:static-content:deploy

Footer Profiles

Frido provides 6 footer styles, you can choose one of them here.

#Footer V1:

#Footer V2:

#Footer V3:

#Footer V4:

#Footer V5:

#Footer V6:

To Config Other Footer, Go to Admin Panel >> VenusTheme >> VES THEMESETTING >> Footer>> Footer Top Settings >> Choose CMS Static Block >> Choose Your Footer Block (ex: Footer V1, Footer V2, Footer V3, Footer V4, Footer V5, Footer V6)

To get more details, please watch this video:

To edit these Footer Block content, please go to selectAdmin Panel > Content > Blocks necessary static block. You can modify footer content by custom HTML based on sample content.

Homepage Configuration

Frido have 6 extensions with 8 homepages

 

#Overview:

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 the configuration.

To get more details, please watch this video:

iframe>

Go to back-end > Content > Pages > Edit profile name “ex: Frido Home Page 2

To change the layout of the page, go to Content > Pages, select the page, select one of the options in the Layout field and click Save Page button:

To edit the content of the home page, add “block” or remove “block” in the “Layout Update XML” field and click Save Page button.
To edit the content of this block, Go to back-end > Content > Blocks > Edit profile name “ex: block-slider1

To get more details, please watch this video:

To edit these slider content, please go to Admin Panel > Content > Elements > Blocks, select necessary static block. You can modify slider content by custom HTML based on sample content.

To make the slide image clickable, you can use this HTML as a block content:

<a href="#"><img src="{{media url="wysiwyg/ves_fila/slider-3.jpg'}}" alt="Sample slide" /></a>

Config Generals

In this tab, you are able to:

– Choose maximum page width on drop-down or change value input

– Choose a skin color store view

– Choose director support LTR or RTL Languages

– Enable or disable the 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 > VenusTheme > Ves ThemeSettings > General

Frido 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.

We created skins in the Frido: You can view it in the folder:

..\Venustheme\frido\Ves_Themesettings\web\css\skins\

Header Configuration

Frido provides 6 header styles, you can choose one of them here.

#Header1:

#header2:


#header3:

#header4:

#header5:

#header6:

>> How To Config Other Header

To Config Other Header, Go to Admin Panel >> VenusTheme >> VES THEMESETTING >> Header >> General Settings >> Choose Your Header Layout

  1. Default: default.phtml (header default)
  2. Default2: default2.phtml (header 2)
  3. Default3: default3.phtml (header 3)
  4. Default4: default4.phtml (header 4)
  5. Default5: default5.phtml (header 5)
  6. Default6: default6.phtml (header 6)


To get more details, please watch this video:

Code HTML in this path file

app\design\frontend\Venustheme\name_theme\Ves_Themesettings\templates\header\default.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

Config Contact Page

Link page: server1.demo4coder.com/frido/contact

How To config: Go To VenusTheme > Ves Theme Settings > 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 for us, etc…

 

+ Edit Form :

You can edit form in this patch file:

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

Admin Theme Settings

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

You can add a custom top link:
3. Search tab:
– Enable: Yes or No
– Custom style
– Add maximum width of the search box
– Change the format button search

4. Language Switcher and Currency Switcher tab:

This block setting group custom code in this file

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

How it is shown on front-end:
5. Sticky Header tab:

Config “Scroll To Fixed” header ( keep header when scrolling window). You can choose all sticky elements (all header )or choose to specify an 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

Config Product View Page

+ Config enable / disable elements by change value Yes / No

– Config show tab- Custom tab

+ Tab By Product Attribute Code

+ Tab By CMS Block

+ Tab By Static Html Content

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

– Frontend show:

Frido provides 3+ Product Category Layout Styles, you can choose one of them here.

– Grid Full Width

– Full Width Banner

– Right Sidebar

+ Config enable / disable elements by change value Yes / No

Config Contact Page

Config in admin panel > Venustheme > Settings > VES Theme settings  > Cart page:

+ Config number product for cross-selling on cart page:

Front-end showing

Note: config show / hidden element (name, price, review…) as related, upsell

 

Blocks Diagram

Static Blocks Diagram

This is all CMS static blocks we are using on the Frido.
To Open Cms Static Blocks, Go To Admin Panel > Content > Blocks

How to use a CMS static block:
To get more details, please watch this video:

Below is some sample content.

1. Block Slider

Block Slider 1

<div class="ves-wrap">
<div class="block block-carousel carousel-v1">
<div class="block-content">
<div id="slider1" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-1.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-2.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider1");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 2

<div class="ves-wrap">
<div class="block block-carousel carousel-v2">
<div class="block-content">
<div id="slider2" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-3.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>Spring</h2>
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">Just for you</p>
<a class="ves-btn d-inline first-item" href="{{store url='#'}}">Men Collection</a>
<a class="ves-btn d-inline" href="{{store url='#'}}">Women Collection</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-4.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>Spring</h2>
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">Just for you</p>
<a class="ves-btn d-inline first-item" href="{{store url='#'}}">Men Collection</a>
<a class="ves-btn d-inline" href="{{store url='#'}}">Women Collection</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider2");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 3

<div class="ves-wrap">
<div class="block block-carousel carousel-v3">
<div class="block-content">
<div id="slider3" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-5.jpg"}}" alt="" />
</a>
<div class="item-content style-left">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-6.jpg"}}" alt="" />
</a>
<div class="item-content style-right">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider3");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 4

<div class="ves-wrap">
<div class="block block-carousel carousel-v4">
<div class="block-content">
<div id="slider4" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-7.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>SS-18</h2>
<p style="margin-bottom: 30px;">#Short Cayman Islands</p>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-8.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>SS-18</h2>
<p style="margin-bottom: 30px;">#Short Cayman Islands</p>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider4");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 5

<div class="block block-carousel carousel-v5">
<div class="block-content">
<div id="slider5" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-9.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="letter-spacing: 4px;margin-bottom: -40px; font-size: 16px;">#T-shirt</p>
<h2>Linen</h2>
<p style="font-size: 20px; color: #777; text-align: right;margin-top: -20px;margin-bottom: 50px;">2018’s expressions of individuality</p>
<a class="btn btn-lg btn-outline-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-10.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="letter-spacing: 4px;margin-bottom: -40px; font-size: 16px;">#T-shirt</p>
<h2>Linen</h2>
<p style="font-size: 20px; color: #777; text-align: right;margin-top: -20px;margin-bottom: 50px;">2018’s expressions of individuality</p>
<a class="btn btn-lg btn-outline-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider5");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>

Block Slider 6

<div class="ves-wrap">
<div class="block block-carousel carousel-v6">
<div class="block-content">
<div id="slider6" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-11.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="font-size: 16px;margin-bottom: 20px;letter-spacing: 2px;">Just for you, just because</p>
<h2><span>Enjoin</span>50%<sup>off</sup></h2>
<p class="text-uppercase" style="font-size: 22px;margin-bottom: 40px;letter-spacing: 2px;" >Your next order</p>
<a class="btn btn-lg btn-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-12.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="font-size: 16px;margin-bottom: 20px;letter-spacing: 2px;">Just for you, just because</p>
<h2><span>Enjoin</span>50%<sup>off</sup></h2>
<p class="text-uppercase" style="font-size: 22px;margin-bottom: 40px;letter-spacing: 2px;" >Your next order</p>
<a class="btn btn-lg btn-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider6");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 7

<div class="ves-wrap">
<div class="block block-carousel carousel-v7">
<div class="block-content">
<div id="slider7" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-13.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="d-none d-sm-block d-md-block d-lg-block">handy craft</p>
<h2>Exclusive Bags</h2>
<a class="btn btn-lg btn-outline-dark" style="margin-bottom: 10px;" href="{{store url='#'}}">Shop Men</a><br>
<a class="btn btn-lg btn-outline-dark" href="{{store url='#'}}">Shop Women</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-14.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="d-none d-sm-block d-md-block d-lg-block">handy craft</p>
<h2>Exclusive Bags</h2>
<a class="btn btn-lg btn-outline-dark" style="margin-bottom: 10px;" href="{{store url='#'}}">Shop Men</a><br>
<a class="btn btn-lg btn-outline-dark" href="{{store url='#'}}">Shop Women</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider7");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 8

<div class="ves-wrap">
<div class="block block-carousel carousel-v1">
<div class="block-content">
<div id="slider8" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-15.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sunny & Sandy</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-16.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sunny & Sandy</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider8");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

2. Block Product

Block Product 1

Block Product 2

Block Product 3

Block Product 4

Block Product 5

Block Product 6

Block Product 7

Block Product 8

Block Product 9

3. Block Banner

Block Banner 1

<div class="ves-wrap" style="margin-bottom: 5%;">
<div class="block block-images">
<div class="block-content">
<a href="{{store url='fashion.html'}}"><img src="{{media url="wysiwyg/ves_fila/banner-02.jpg"}}" alt=""/></a>
</div>
</div>
</div>

Block Banner 2

<div class="ves-wrap" style="margin-bottom: 4%;overflow: hidden;">
<div class="block block-images images-v2">
<div class="container">
<div class="text-html a-center border-top">
<h3>Event 300 new arrivals</h3>
<h4><span>25-59%</span> off the Line Collection</h4>
<a class="ves-btn" href="http://localhost/fila/fashion.html/">Shop now</a>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='Clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-03.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='Clothings.html'}}">Clothings</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-04.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Bags</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 3

<div class="ves-wrap" style="margin-bottom: 4%;">
<div class="block block-images images-v3">
<div class="block-content">
<a href="{{store url='Clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-05.jpg"}}" alt=""/>
</a>
<div class="des a-center">
<h4>Kaki vintage jacket</h4>
<a class="ves-btn" href="http://localhost/fila/fashion.html/">View Collection</a>
</div>
</div>
</div>
</div>

Block Banner 4

<div class="ves-wrap" style="margin: 5% 0;">
<div class="container">
<div class="block block-images images-v4">
<div class="block-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-06.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">#Bags</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-07.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">#Tops</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-08.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">#Shoes</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 5

<div class="ves-wrap" style="margin-bottom: 4%;">
<div class="block block-images images-v3">
<div class="block-content">
<a href="{{store url='Clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-09.jpg"}}" alt=""/>
</a>
<div class="des a-center">
<h4>Kaki vintage jacket</h4>
<a class="ves-btn" href="http://localhost/fila/fashion.html/">View Collection</a>
</div>
</div>
</div>
</div>

Block Banner 6

<div class="ves-wrap" style="margin-top: 5%; margin-bottom: 5%">
<div class="block block-images images-v6">
<div class="block-content">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-10.jpg"}}" alt=""/>
</a>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="block block-html html-v3">
<div class="block-content a-center">
<h2>Just for you, just because</h2>
<div class="html-content">
Enjoin <span> 50% </span> <sup> off </sup>
<p>Your next order</p>
</div>
<div class="action-button">
<a href="#" class="btn btn-lg btn-dark"><span>Shop now</span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-11.jpg"}}" alt=""/>
</a>
</div>
</div>
</div>
</div>
</div>

Block Banner 7

<div class="ves-wrap" style="margin-top: 3%; margin-bottom: 4%">
<div class="block block-images images-v7">
<div class="block-content">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-12.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">Clothings</a></h4>
<div class="count-items">6 items</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-13.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Bags</a></h4>
<div class="count-items">8 items</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-14.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">Shoes</a></h4>
<div class="count-items">10 items</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-15.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Accessories</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 8

<div class="ves-wrap" style="margin-top: 3%; margin-bottom: 4%">
<div class="block block-images images-v8">
<div class="block-content">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-16.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">#Clothings</a></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-17.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">#Bags</a></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-18.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">#Shoes</a></h4>
</div>
</div>
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-19.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">#Sunglass</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 9

<div class="ves-wrap" style="margin: 5% 0">
<div class="container">
<div class="block block-images images-v9">
<div class="block-content">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-20.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">Boys</a></h4>
</div>
</div>
</div>
<div class="offset-lg-1 offset-md-1 offset-sm-1 col-lg-5 col-md-5 col-sm-5 d-flex align-items-center">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-21.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Girls</a></h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="d-flex justify-content-center col-lg-12 col-md-12 col-sm-12">
<div class="category-thumb item-bottom">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-22.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">Accessories</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

3. Block Other

Block Blog 1

Block Html 1

<div class="ves-wrap" style="margin: 5% 0;">
<div class="container">
<div class="block block-html html-v3 border">
<div class="block-content a-center">
<h2>Just for you, just because</h2>
<div class="html-content">
Enjoin <span> 50% </span> <sup> off </sup>
<p>Your next order</p>
</div>
<div class="action-button">
<a href="#" class="btn btn-lg btn-dark"><span>Shop now</span></a>
</div>
</div>
</div>
</div>
</div>

Block Instagram V1

<div class="ves-wrap">
<div class="block block-instagram">
<div class="block-title">
<strong>INSTAGRAM</strong>
<a href="#" title="Sofia Fashion">@Sofia_fashion</a>
</div>
<div class="block-content">
<div class="content-instagram">
<ul class="row">
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-01.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-02.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-03.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-04.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-05.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-06.jpg"}}" alt="" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

Block Top Promotion

<div class="top-promotion">
<p>Free delivery from $120. <a href="#">Shop Now</a></p>
</div>

Block Top Social Link

<ul class="top-social">
<li class="top-social__items"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="top-social__items"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="top-social__items"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="top-social__items"><a href="#"><i class="fab fa-vk"></i></a></li>
</ul>

<div class="top-left_phone"><p>+01 234 567 89</p></div>

Block Top Category

<div class="block-top-category">
<img src="{{media url="wysiwyg/ves_fila/banner-23.jpg"}}" alt=""/>
<div class="box-popup" style="position: absolute;left: 18%; bottom: 35%;">
<div class="item-hover">
<div class="icon"><span class="icon-Icon_Add"></span></div>
<div class="content-popup">
<div class="arrow-up"></div>
<h3 class="p-title">Zara babykleding</h3>
<div class="p-price">$39.00</div>
<a class="view-more" href="#" title="View More">+ VIEW MORE</a>
</div>
</div>
</div>
<div class="box-popup" style="position: absolute;left: 48%; top: 30%;">
<div class="item-hover">
<div class="icon"><span class="icon-Icon_Add"></span></div>
<div class="content-popup">
<div class="arrow-up"></div>
<h3 class="p-title">Sustainable Carafe</h3>
<div class="p-price">$24.00</div>
<a class="view-more" href="#" title="View More">+ VIEW MORE</a>
</div>
</div>
</div>
<div class="box-popup" style="position: absolute;right: 17%; bottom: 40%;">
<div class="item-hover">
<div class="icon"><span class="icon-Icon_Add"></span></div>
<div class="content-popup">
<div class="arrow-up"></div>
<h3 class="p-title">Sweeper and Funnel</h3>
<div class="p-price">$27.00</div>
<a class="view-more" href="#" title="View More">+ VIEW MORE</a>
</div>
</div>
</div>
</div>

Extensions

Blog Extension

1. How To Change URL link:

Go to Admin Panel > Venustheme > Settings > Venustheme Extensions > Blog

2. Config show/hidden elements on post page (detail post)

Show on frontend:

 

3. Config show/hidden elements on the Category page

Show on frontend

 

4. How To Change page layout for each blog category

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


On Design tab: you can choose page layout for category

 

5. 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:

Megamenu

Frido includes the fantastic Megamenu in an additional module called Ves MegaMenu. The Megamenu module comes with a custom admin interface through which you can create powerful Menu. No coding is required. Follow these steps to create a module:

Front-end:

Back-end:

– Create a new Menu item:

– General Information:

– Header:

– Left Block:

– Main content:

– Right block:

– Bottom block:

– Custom design for a menu item:

Top

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