How to setup sample profile?

The Ves Image Slider extension we included a sample slider profile in the module package. You should download latest version of Ves Image Slider extension in our site: http://landofcoder.com/

Demo Sample Slider Profile: http://newdemo.demo4coder.com/m2/demo-ves-image-slider/

Follow there steps to setup the sample slider profile:

Step1: Decompress the module package, then decompress the file “Sample_Ves_ImageSlider_unzip.zip“. We will get the sample file and folders:

Step2: Go to admin > Venustheme > Setup > Import, then browse the sample JSON profile and click on button Import configuration

Step3: Upload folders: app/ and pub/ of sample profile into webroot folder of your site to override 2 folders in your site.

Step4: Clean cache of your site.

View the page: http://your domain/demo-ves-image-slider/

*Note: If the page not show the image slider, you should edit the cms page “Demo Ves Image Slider” in admin > Content > Elements > Page. Then edit the widget “CMS Block”, choose the cms static block “Demo Image Slider Widget“, save the widget and save the cms page again.

TIP:

  • The static block “Demo Image Slider Widget” we are using widget shortcode as this:

<div>{{widget type="Ves\ImageSlider\Block\Widget\Sliders" addition_class="demo-slider-01" autoplay="1" autoplay_timeout="3000" autoplay_speed="900" nav_speed="800" dots_speed="800" autoplay_hover="1" dots="1" loop="1" touchdrag="1" mousedrag="1" pulldrag="1" block_1="custom_content" html_1="PGEgaHJlZj0iIyI+PGltZyBzcmM9Int7bWVkaWEgdXJsPSJ3eXNpd3lnL3Zlc19wYWdlYnVpbGRlci9ob21lMDEvc2xpZGVyc2hvdy8xLmpwZyJ9fSIgYWx0PSIiIC8+PC9hPgo8ZGl2IGNsYXNzPSJzbGlkZXJzaG93LWluZm8iPgo8aDM+VG9kYXkgU3BlY2lhbDwvaDM+CjxwPkFkZCBhIHN0eWxpc2ggdG91Y2ggdG8geW91ciBsaXZpbmcgc3BhY2U8L3A+CjxhIGNsYXNzPSJidXR0b24gYnRuIiBocmVmPSIjIj5TSE9QIE5PVzwvYT4KPC9kaXY+" block_2="custom_content" html_2="PHA+PGEgaHJlZj0iIyI+PGltZyBzcmM9Int7bWVkaWEgdXJsPSJ3eXNpd3lnL3Zlc19wYWdlYnVpbGRlci9ob21lMDEvc2xpZGVyc2hvdy8yLmpwZyJ9fSIgYWx0PSIiIC8+PC9hPjwvcD4KPGRpdiBjbGFzcz0ic2xpZGVyc2hvdy1pbmZvIj4KPGgzPlRvZGF5IFNwZWNpYWw8L2gzPgo8cD5BZGQgYSBzdHlsaXNoIHRvdWNoIHRvIHlvdXIgbGl2aW5nIHNwYWNlPC9wPgo8YSBjbGFzcz0iYnV0dG9uIGJ0biIgaHJlZj0iIyI+U0hPUCBOT1c8L2E+PC9kaXY+" block_3="custom_content" html_3="PHA+PGEgaHJlZj0iIyI+PGltZyBzcmM9Int7bWVkaWEgdXJsPSJ3eXNpd3lnL3Zlc19wYWdlYnVpbGRlci9ob21lMDEvc2xpZGVyc2hvdy8zLmpwZyJ9fSIgYWx0PSIiIC8+PC9hPjwvcD4KPGRpdiBjbGFzcz0ic2xpZGVyc2hvdy1pbmZvIj4KPGgzPlRvZGF5IFNwZWNpYWw8L2gzPgo8cD5BZGQgYSBzdHlsaXNoIHRvdWNoIHRvIHlvdXIgbGl2aW5nIHNwYWNlPC9wPgo8YSBjbGFzcz0iYnV0dG9uIGJ0biIgaHJlZj0iIyI+U0hPUCBOT1c8L2E+PC9kaXY+"}}</div>

  • The cms page “Demo Ves Image” we should add custom layout xml as this to load sample css file (you can load sample css file of the module by layout xml in your custom theme):

<head>
	<css src="Ves_ImageSlider::css/sample.css" />
        <css src="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" src_type="url"/>
</head>

1. CMS Page “Demo Image Slider Widget”:

2. CMS Static Block “Demo Ves Image“:

PreviousHow to add content over slide image?NextMagento 2 Step Recommendation

Last updated