Are you looking for an elegant, powerful, and incredibly versatile Responsive Woocommerce WordPress theme to set up a website? Have a look at Robusta, a stunning, fully customizable, web solution designed to take your online store, blog, or portfolio to the next level..
DESIGNED TO SELL
Nowadays, when most business owners turn to the Internet to sell their products and services, having a powerful, yet simple to use online store is absolutely vital if you take your business seriously. This is why Robusta comes with WooCommerce, the most popular eCommerce plugin that makes managing your online store and handling shipping, payments and even taxes easier than ever. We also included WooCommerce Currency Switcher, a WooCommerce plugin that allows you to switch to different currencies and get their rates converted in the real time.
FULLY CUSTOMIZABLE THEME THAT ADAPTS TO YOU
Robusta is the ultimate web tool that allows you to truly express yourself and set up a website that conveys the brand of your business. We also included Visual Composer – an intuitive plugin that helps you set up any layout you can imagine. And the best part: even absolute beginners will love using it, as it allows you to create even the most complex layouts without having to write a single line of code. Revolution Slider – create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with convenient drag&drop backend to your very needs. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
IMPRESSIVE – EVERYWHERE AND EVERY TIME
It’s one thing to develop a responsive theme, but it’s something else entirely to develop a theme that leaves your visitors breathless, regardless of the device they’re using to access the internet. Robusta is a fully responsive theme that seamlessly adapts to any screen size and unleashes the full potential of each pixel thanks to Bootstrap 3 – a powerful framework that guarantees an impressive performance. Even the smallest elements have been tweaked to perfection, turning your website into a crisp, detailed visual experience to behold.
Theme Features
Responsive – This theme is responsive to give a perfect user experience on all devices.
One Click Demo Import – Easiest and fastest way to build your website, one click import pages, post, blog, products, revolution slider, widgets, theme options and more!
Boxed or full width layout – This can be set globally or even per page!
Built on Twitter Bootstrap – Robusta uses Twitter Bootstrap. This means that a range of shortcodes are automatically supported. For ease of use you can use the Visual Composer, Easy Bootstrap Shortcode or any other plugins to easily add visuals to your website.
WooCommerce plugin included – This is the most popular WordPress eCommerce plugin. And it's available for free. Packed full of features, perfectly integrated into your self-hosted WordPress website.
Slider Revolution plugin included – This theme includes the Slider Revolution plugin, saving you $18.
Visual Composer plugin included – This theme includes the Visual Composer plugin, saving you $33.
Contact Form 7 plugin – this theme includes Contact Form 7 plugin which allows you to manage all your contact forms.
Built with Less .css
Shortcode Support.
Demo content included!
Unlimited Color Options.
Moveable & Unlimited Sidebars – Move the sidebar to the left, the right, or hide it entirely for a full width page or post! (global or page/post specific).
Designed with HTML5 and CSS3.
Customizable Design & Code.
All installed Extensions are included.
Cross Browser Support.
Header Stick - Sticky Header is a godsend for those people who are tired of scrolling up from the bottom of the webpage to select an other menu item. Richer's main menu with logo will be following when you scroll and always be at the top of the screen. Now the viewers of your site will be thankful for the fast and easy navigation. And of course, this sticky header feature can be easily enabled/disabled in options panel of your theme.
Detailed Documentation Included.
Full Support.
+ many more features.
More features coming soon.
Installing the Theme
Installing Robusta Theme
Note: Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.
This video tutorial is similarity to Robusta Theme. You can watch it on how to install Wordpress.
You can install this WordPress theme using two installation methods:
Using WordPress Administration Panel.
Copying theme files via FTP.
METHOD 1
Using robusta.zip found in ZIP file you downloaded from Themeforest you should perform the following steps:
Login to WP admin.
Go to Appearance > Themes Option and click on it to load new page.
Select Add New tab at the top of the panel to load new page.
Click on Upload Theme option at the top of the panel to load new page.
Click on Choose File button and locate robusta.zip on your file system.
Click on Install Now.
Once installation is complete you can activate Robusta theme.
After activating Robusta theme, click Begin installing plugins.
(1) Click on square radio button of Plugin to select all plugins. (2) Select Install then (3) click Apply
Click on Return to Required Plugins Installer
(1) Click on square radio button of Plugin to select all plugins. (2) Select Activate then (3) click Apply
METHOD 2
Note: If you are using FileZilla, make sure to fix it as described below before you copy the files:
Using Robusta directory found inside of robusta.zip file located inside ZIP file you downloaded from Themeforest you should perform the following steps:
Using FTP client you should login to server where your WordPress web site is hosted.
Using FTP client you should navigate to /wp-content/themes/directory under your WordPress web site’s root directory.
Using FTP client upload Robusta directory to themes directory on remote server.
Once installation is complete you can activate Robusta theme.
This video tutorial is similarity to Robusta Theme. It will show you how to install new Robusta Theme.
Importing Demo Content
Importing demo partial data
Install plugin:
Install Wordpress Importer Plugin.
Install Widget Data - Setting Import/Export Plugin.
Content import:
From the WordPress menu, select Tools > Import > Wordpress
Click Install Now
Click Choose File then select sample.xml
Click Upload File and Import
You can create new user with login name (1) or assign posts to an exiting user (2). (3) for Download and import file attachments. Finally, click Submit to finish importing sample data process.
Widget setting import:
Select file widget_data.json from package.
Import completed.
Revolution slider import:
Please repeat the same way in importing for 2 dance-club-slide.zip và home-slide2.zip. It has 3 zip slider files.
Click button import.
Select file slider-home.zip from package.
Import completed.
Options import:
Open and copy content file option.json for import from package.
Import completed.
Choose HomePage:
Select front page display.
Assign menu.
Upgrading Robusta Theme
Note:If you are using FileZilla, make sure to fix it as described below before you copy the files:
Copy/Replace the content of Robusta folder to /wp-content/themes/robusta folder of your web site.
Feel free to ask us any questions about using features Robusta theme offers.
Increasing the upload_max_filesize in WordPress via php.ini
The default upload file size for WordPress is 2 MB, which is a problem if you want to upload a large media files. If you get this error, "The uploaded file exceeds the upload_max_filesize directive in php.ini", follow these steps:
Locate the php.ini file inside the wp-admin directory.
Find this line in the php.ini file "upload_max_filesize = 2M" and replace it with a higher value (e.g. "upload_max_filesize = 64M").
You may also want to increase your max post size. Look for this line in your php.ini file "post_max_size" and increase it as well.
Save the changes to the file inside your wp-admin directory.
Try the upload again.
If you still have issues, look for this file in your root directory and make the same changes.
Increasing the upload_max_filesize in WordPress via.htaccess
If you get this error, "The uploaded file exceeds the upload_max_filesize directive in php.ini", follow these steps:
Locate the .htaccess file inside the root directory or installed folder.
Open or create the .htaccess file in the root folder and add the following code:
Note: Please, click Import button and wait about 2 - 3 minutes. If it spins, please, click again then waiting about 2 - 3 minutes. Importing will be done successfully.
This video tutorial is similarity to Robusta Theme. It will show you how to Activate Plugins and Import Data Robusta Theme with just one click.
If you would like to learn the best practice of using Robusta theme, you can import content from our demo web site. Importing theme is performed using XML file located in theme ZIP file downloaded from Themeforest and following these steps:
Theme Options
The options panel is home to all of the theme's extensive configuration options. To view the panel, navigate to 'Theme Options' in the left-hand menu. Here you have the ability to alter many core aspects that make up how your theme looks and behaves. Any of the options that have some ambiguities to them conveniently have descriptions to explain their purpose.
Editing & Creating Content
Changing Your Favicon:
Select the Theme Options > Favicon option from your WordPress admin.
Click on the Upload button to bring up the WordPress image uploader.
Choose the image if you've already uploaded it or upload the image for the first time.
Click on the Save All Changes button to save your new theme settings.
Note: You can create a favicon using Photoshop. Create a 16x16 pixels image and save it as favicon.png or favicon.gif.
This video tutorial is similarity to Robusta Theme. It will show you how to change the logo on your new Robusta installation.
Changing Your Logo:
Select the Theme Options > Logo option from your WordPress admin.
Click on the Upload button to bring up the WordPress image uploader.
Choose the image if you've already uploaded it or upload the image for the first time.
Click on the Save All Changes button to save your new theme settings.
Note: You should use a .png image
Changing Your Header:
Select the Theme Options > Header option from your WordPress admin.
Choose header layout for your site (3).
Enable a fixed header when scrolling (4).
Select manage location of menu in this header: Main or Auto(5).
Click on the Save Changes button to save your new theme settings.
Changing Your Menu Header:
Select the Theme Options > Menu Header V1 option from your WordPress admin.
First Level and Sub Level have same options that is setting font and padding. Typography option with each property can be called individually.
Click on the Save Changes button to save your new theme settings.
Menu Header V2 options are similar to above.
Styling Options:
Select the Theme Options > Styling Options option from your WordPress admin.
You can choose Primary Color (These are colors that cannot be created through the mixing of other colors. They are colors in their own right.) and Secondary Colors (Primary colors can be mixed together to produce Secondary Colors) for several items, ex: link hovers, highlights, and more. (default: #00B5A6).
Click on the Save Changes button to save your new theme settings.
Typography:
The Typography option allows you to change the font aspects of your site, such as font size, family, and weight.
Select the Theme Options > Styling Options option from your WordPress admin.
You can specify the body, H1 to H6 font properties by changing value of Font family, Font subsets, Font size, Font weight & style, etc.
Click on the Save Changes button to save your new theme settings.
Title Bar:
Select the Theme Options > Title Bar option from your WordPress admin.
You can change the value of margin, padding in Title Margin and Title Padding
You can change background with image, color, etc in Title Background
Set color for Title Bar Heading, Title Bar Link and Title Bar Text.
Enter delimiter of page breadcrumb in title bar in Delimiter
Click on the Save Changes button to save your new theme settings.
Footer:
Select the Theme Options > Footer option from your WordPress admin.
Footer Top & Footer Bottom give you many options about Background, Margin, Padding, Text Color, etc. You can change color or number for these options to custom your site footer.
Footer Top/ Bottom Columns: Select the number of columns you wish. Here we have 4 options for Footer Top and 2 options for Footer Bottom.
Footer Top/ Bottom Column 1: Enter class bootstrap and extra class. Ex: col-xs-12 col-sm-6 col-md-3 col-lg-3 el-class.
Similar to the rest Column options.
Click on the Save Changes button to save your new theme settings.
Post Settings:
Select the Theme Options > Post Setting > Title Bar option from your WordPress admin.
You can show or hidden page title and page breadcrumb in page title by clicking on "On" or "Off" button.
Click on the Save Changes button to save your new theme settings.
Select the Theme Options > Post Setting > Blog Post option from your WordPress admin.
Select Layout: You can either choose to display your blog posts in a grid or a full width layout.
Content Column: Enter class bootstrap and extra class to create as many content columns as you wish.
Sidebar Right: Select sidebar right in blog.
Sidebar Right Column: Enter class bootstrap and extra class to create as many Sidebar right columns as you wish.
Show Featured Image: This option allows you to choose whether or not you would like thumbnail images to appear in your blog module.
Show Title: Choose whether or not you would like to display the title of each blog post.
Show Meta: Choose whether or not you would like to display the meta of each blog post.
Show Excerpt: Showing or not the excerpt will only display your excerpt text.
Read More Text: Your blog module will appear with a label "Read more" in the builder. The label allows you to enter the text in blog.
Click on the Save Changes button to save your new theme settings.
Select the Theme Options > Post Setting > Single Post option from your WordPress admin.
Show Description: Choose whether or not you would like to display the description of each single post.
Show Navigation: Choose whether or not you would like to display navigation of each single post.
Show Tags: Choose whether or not you would like to display tags of each single post.
Show Author: Choose whether or not you would like to display the author of each single post.
Show Comment: Choose whether or not you would like to display comment of each single post.
The rest options below are similar to Blog post's options above.
Click on the Save Changes button to save your new theme settings.
Page Settings:
Select the Theme Options > Page Setting option from your WordPress admin.
Choose whether or not you would like to display page title, page breadcrumb and page comment of your page.
Click on the Save Changes button to save your new theme settings.
Custom CSS:
Select the Theme Options > Custom CSS option from your WordPress admin.
Add new CSS class or JS to your website, add it in this text box. This will add/overwrite the theme CSS,JS, so please be careful!
Click on the Save Changes button to save your new theme settings.
Import/ Export:
Select the Theme Options > Import/Export option from your WordPress admin.
One Click Demo Import – Easiest and fastest way to build your website, one click import pages, post, blog, products, revolution slider, widgets, theme options and more!
Click on the Save Changes button to save your new theme settings.
Widgets
Robusta Theme comes with following custom widgets:
Sidebar - here you can add anything to the left side of page.
Left Sidebar , Right Sidebar, Header Top Widget 1, Header Top Widget 2, Header 2 Top Widget 1,Header 2 Top Widget 2 - here you can add content to footer columns (1-4)
Flexibility customized font
By default, the template loads this font from Standard Font, you can change the font with the one that suits you best.
Shortcodes
Pages/Posts are built using shortcodes accessed by clicking medicare menu in the top right of the Add new Element . All shortcodes are in menu listed alphabetically.Head Section.
Revolution Slider
Create a responsive (mobile friendly) or full width slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page!
Customize this slider with our convenient drag & drop back-end to your every needs. This plugin features tons of unique transition effects, an image pre-loader, video embedding, auto-play that stops on user interaction and lots of easy to set options to create your own effects.
From the plugin's main admin page, select New Slider.
Enter a Slider Title and Alias
.
* The slider's Title can be anything, but the Alias should not have any special characters or spaces (but dashes and underscores are ok).
* Before saving, you can select several of the slider's settings from this page. But choosing these settings are not required to officially create a new slider, as they can be adjusted afterward.
Slider Setting Options
1.General Settings
1.1 Slider Show
Stop Slide on Hover: Stop slider progress when the user hovers their mouse over the slider.
Stop Slider After..
+ Amount of Loops: Stop the slider after all slides have looped a set amount of times.
+ At Slide: Stop the slider at a specific slide.
Shuffle / Random Mode: Stop slider progress when use hovers their mouse over the slider.
Loop Single Slide: Stop slider progress when use hovers their mouse over the slider.
Stop Slider out of Viewport: Stop slider when the page is scrolled and the slider is no longer visible.
+ Out of Viewport: Wait - Only start the slider when its scrolled into view (useful for sliders further down the page). Pause - Pause the slider when its scrolled out of view.
+ Area out of Viewport: A percentage of the slider that needs to be inside/outside the viewport before slider starts or pauses.
1.2 Defaults
Set the default individual slide settings. For example, let’s say you always want your individual slides to start off with a “Slide to Top” transition. Adjusting the “Transitions” value will set it up so all new slides have have a “Slide to Top” transition by default. Or if you already have individual slides created, you can change the value of “Transitions” and then select its checkbox, and then click the “Overwrite Selected Settings on all Slides” button, and the main transition for all existing slides will be changed to the new default value.
1.3 Progress Bar
The timer line that illustrates the amount of time before the next slide is shown. If active, choose the progress bar’s position (top or bottom of slider), its height in pixels, and also its color and transparency level.
1.4 First Slide
Alternative 1st Slide: Normally the slider will always start with slide #1. But if you’d like your slider to start with a different slide, enter the slide’s number here.
First Transition Active: Sometimes when your slider first starts, it’s more elegant to have a different transition such as a simple fade at the very beginning. Use this option if you’d like to specify a special, initial transition for the very first slide. When set, the special transition will only be executed on the very first slide once. Then once the slider loops, the original slide will default back to its individual slide transition settings.
1.5 Misc
Next Slide on Focus: Browser behaviour varies when switching between windows/tabs (JavaScript stops executing, etc.). But the “Next Slide on Focus” option will often correct slider issues related to switching between tabs and windows.
2. Layout & Visual
2.1 Appearance
Shadow Type: Shadows will be shown beneath the slider. Choose between 6 different styles, or choose “No Shadow” (the default option). And preview the Shadow Type as shown in the Primer section above.
Dotted Overlay Size: Dotted overlays are transparent grid-like graphics that will be placed above the slides, giving the slider a “mesh” type look (4 styles available). Preview the options as shown in the Primer section above.
Slider Background: The slider’s main background. Normally if your individual slides have their own background images, the slider’s main background would only be visible when the slider first loads, and before the first slide displays. But setting a background here for the slider itself is particularly useful for when you’re using “Transparent” slides (slides with no background image). Choose a solid color or set an image as the background. Apply some padding to give your slider a border. And set specific background image options such as Background Fit, Background Repeat, and Background Position.
2.2 Spinner
The slider's animated preloader graphic: The spinner will be shown when the slider first loads, and also for additional slides if LazyLoad is being used. Choose between 6 different spinner styles, or choose “Off” for no spinner.
2.3 Mobile
Disable Slider on Mobile: Choose to disable the entire slider on mobile devices. If disabled, you can replace the slider with a simple fallback image.
Disable Ken Burn on Mobile: The Ken Burns effect is an advanced animation that looks great on desktop computers, but for mobile devices, providing a more simple slider can sometimes be a better user-experience. Depending on your preference, toggle the KenBurns effect on and off for mobile with this setting.
Hide Element Under Width: Choose to hide the entire slider, individual layers, or all layers when the screen size is below a specific pixel width (i.e. 640px, etc.). Hiding layers is useful for when lots of content displays nicely on desktop, but there isn’t really enough real estate (screen space) to fit everything on mobile. “Predefined Layers” are specific layers you’ve designed to “hide” under the pixel width set here for this setting.
2.4 Position
Position on the page: The default alignment for the slider. Options are “left”, “center” or “right”.
Margin Top, Margin Bottom: Add some space above or below the slider in relation to other content on the page. Both positive and negative numbers supported.
Position: Under the position toggle you can edit the alignment and the margins of the slider.
Appearance: From here you can choose a slider shadow, show or hide the slide timer, add a dotted overlay, select a slider background color, add a slider border and/or upload a custom slider background image (complete with fit, repeat and positioning options).
Spinner: Use this option to choose which loading image you want to use for your slider. There are 5 spinners to choose from.
Mobile Visibility: You can choose to hide your responsive slider (or certain layers) on small browsers or devices. Use the mobile visibility options to set a minimum browser size (note: this option is only for the responsive slider layout).
3. Navigation
3.1 Arrows
Enable Arrows / Arrow Style: Choose to enable/disable navigation arrows, and if enabled, choose between 15 different pre-built styles.
Visibility: Always Show: Yes = Show navigation element at all times. No = Only show navigation element on mouse hover
Hide Under Width: Disable navigation element below a certain screen width. For example, thumbnails look great on desktop, but are often better hidden on smaller screens.
Hide Over Width: Disable navigation element above a certain screen width.
Combining these two options is particularly useful for switching between two different navigation types depending on the screen size: Tabs -> Hide Below Width -> 850px Bullets -> Hide Over Width -> 850px RESULT: Tabs will be shown above 850px screen size (desktop) Bullets will be shown below 850px screen size (mobile)
+Horizontal Align: Align navigation to the left, right or center of the slider.
+Horizontal Offset:Apply a left/right margin to the navigation in relation to its horizontal alignment (positive and negative numbers supported).
+Vertical Align: Align navigation to the top, bottom or middle of the slider.
+Vertical Offset: Apply a top/bottom margin to the navigation in relation to its vertical alignment (positive and negative numbers supported).
3.2 Bullets
Enable Bullets / Bullet Style: Choose to enable/disable navigation arrows, and if enabled, choose between 15 different pre-built styles.
Space / Direction: Set the spacing between the bullets in pixels, and choose if the bullets should be displayed horizontally (bullets displayed side by side) or vertically (bullets placed on top of one another) .
Visibility, Position: See "Common Navigation Options" above.
3.4 Tabs / Thumbs
Wrapping Container:
+Wrapper Padding: Space between edge of slider and edge of thumbs/tabs container.
+Span Wrapper: "ON": thumbs/tabs will always be stretched across the full size of the slider. "OFF": thumbs/tabs will be stretched to the slider’s Layers Grid.
+Wrapper Color / Opacity: Adjust the color and opacity of the tab/thumbs section. Will only be visible if either “Space” or “Wrapper Padding” exists.
Style, Visible Amount, Space & Direction:
+Style: Choose between 7 different pre-built styles.
+Visible Amount: The amount of thumbs or tabs that will be visibly shown. For example, if you have 7 slides, but only want 3 thumbnails to be displayed, technically the thumb strip will still contain 7 items, but only 3 thumbs will be visible at any given time, and the additional thumbs will only be shown on mouse-movement.
+Space / Direction: Set the spacing between the tabs/thumbs in pixels, and choose if the they should be displayed horizontally (side by side) or vertically (placed on top of one another) .
Width, Height, Min. Width: Set the tab/thumb width and height. The width will act as a “Max Width”, and the “Height” will resize proportionally. For example, let’s say the slider itself was resized down by 50% for mobile. If the thumb width/height were set to 100×50, the thumb size would also be resized down by 50%, and the new thumb width/height would be 50×25. However, this is where the “Min Width” value is useful. For example, let’s say the thumb width/height were set to 100×50. If the “Min Width” were also set to “100px”, the thumbnails would never resize down.
Visibility, Position: See "Common Navigation Options above".
3.5 Touch
Touch Enabled: Choose to enable/disable touch navigation for mobile. If enabled, swiping the slider left or right with your finger will change slides back and forth.
Drag Block Vertical: Allow for the page to be scrolled vertically when “touch” is enabled. For example, when “ON” is applied, “swiping” the slider in a vertical direction will also scroll the page itself. But when set to “OFF”, the page itself will not be scrolled when swiping the slider in a vertical direction.
Swipe Threshold, Min. Finger:
+Threshold: The swipe action sensitivity. A smaller number would mean that only a short “swipe” is needed for the slide to change. A larger number would mean that a more elaborate “swipe” would need to take place for the slide to change.
+Min. Finger: The number of fingers needed for a “swipe” action to be registered. “1” finger is usually best, as that’s what most users are used to, but depending on your site you can require that users use two fingers to “swipe”, etc.
Swipe Direction:
+Horizontal: Traditional left-to-right touch-swipe navigation.
+Vertical: Useful for when your slide animations are set to “Slide Vertical (Next/Previous)”. In this case, swiping up or down would change the slides.
3.6 Misc
Keyboard Navigation: Choose to enable arrow keys to navigate between slides.
Key Direction:
+Vertical: Up and down keys will act as “next / previous” controls for the slider.
+Horizontal: Left and right keys will act as “next / previous” controls for the slider.
Mouse Scroll Direction: Capture mouse-wheel movement to change between slides.
4. Parallax
Parallax can be used to apply movement to slide content based on mouse or scrolling.
Enable Parallax / Disable on Mobile: Choose to enable the parallax effect for the slider, and if enabled, choose to disable the effect for mobile only (since parallax is based on mouse movement and page scrolling, parallax usually works best on desktop computers).
Mouse Sensibility:
+Event:: Choose “Mouse Move”, “Scroll Position” (page scrolling) or “Move & Scroll” (first two combined).
+Parallax Origin: “Mouse Enter Point” – Parallax is based on where the mouse first entered the slider. “Slider Center” – Parallax is always based on the very center point of the slider (usually the best option).
+Animation Speed: The transition duration for the content’s movement. Use a lower number such as “750” for fast movement, and a higher number such as “2000” for smoother motion.
Parallax Levels: Each individual layer can be assigned a “Parallax Level”. And you can define up to ten different “levels”. Applying different levels to different slide layers is what gives the content its “depth” in relation to other parallax layers. In this example, you’ll notice that some content layers have less movement than others. This is because the different layers have different “Parallax Levels” assigned. When choosing your parallax level values, a smaller number would mean less movement, and a higher number would allow for a larger amount of movement.
5. Problem Handlings
5.1 Fallbacks
For compatibility with older mobile devices and legacy IE, you can choose to simplify the slider’s functionality or replace it with an alternative image.
Simplify on iOS4/IE8: Animations will be set to simple “fade” for older iOS and IE, which will will dramatically improve performance for these environments.
Use Alternative Image: Choose to use an alternative image in place of the slider for mobile devices, IE8, or both. When an alternative image is used, enter the image’s absolute url into the “Alternative Image” field.
5..2 Troubleshooting
Use the troubleshooting options to solve common conflicts with other plugins and themes.
jQuery No Conflict Mode: Using jQuery noConflict is considered best practice for WordPress, and Slider Revolution uses this by default. But sometimes another theme or plugin may not be built using this best practice, which can often cause a conflict. In these cases, setting this option to “OFF” can sometimes resolve this issue.
Put JS Includes to Body: Often solves conflicts with “minify” plugins and also certain themes that don’t call “wp_head()” properly.
Output Filters Protection: Sometimes a theme runs special filters over the page’s content (against WP best practices), which results in breaking the slider’s HTML markup (if you view the slider’s HTML source in your browser, you’ll often find “
” tags injected throughout the slider’s markup). The “Output Filters Protection” option will attempt to combat this conflict. “By Echo Output” will often place the slider above all other content on the page, which is fine for sliders that are originally placed above the other page’s content to begin with, but when the slider is meant to be shown below other page content, “By Compressing Output” is best.
Debug Mode: Adds visual debug information when testing the frontend version of the slider.
6. Google Fonts
Chances are your theme is already loading Google Fonts that you can use for your slider’s text, but you can also load whatever new Google Fonts you want for your sliders. To get started, click the Add New Font button.
Next, visit the Google Fonts website and choose a font you wish to use. Then click the Quick Use icon.
Then copy the font slug from the url as shown in the following screenshot (after the “font=” part, and without the single quote character).
Then paste the Google Font slug into the slider’s Add New Font field.
And now the Google Font will be available for your slider’s Layer text.
Click Save settings.
Create a new slide:
To create a new slide, hover your mouse over the Add Slide box and then choose one of the options listed below:
Add Blank Slide: Create a new slide with default settings.
Add Bulk Slides: Create multiple slides at once, based on a selection of media gallery images of your choice. And a new slide will be created for each image you’ve chosen, with the selected image set as the slide’s main background image.
Click the Change Image button to select an image you’ve already uploaded, or to upload a new image for the slide.
Select Slide Image from Upload File or Media Library then click Insert
Click on Save Slide to finish.
ADD SLIDER TO MY PAGE
I’ve created a slider, but how do I add it to my page?
The Shortcode Method
From the WordPress menu, select Pages and then Edit for the page you want to add the slider to. Then follow the steps are shown in the screenshot below:
For example, if you want to edit About Us Page, select your Slider from the Dropdown Box.
After selecting your Slider, the Shortcode will automatically appear inside the editor.
With Visual Composer
If you happen to have Visual Composer installed, Revolution Slider can be added from one of Visual Composer’s content options.
Follow the steps are shown in the screenshots below:
Then click Add element button.
Then choose Revolution Slider item.
Add text used as Widget Title (1)
Select your Revolution Slider (2)
Add a class name you wish to style particular content element differently and remember refer to it in your CSS file (3)
Click Save Changes to finish your editing (4)
Enter text of link Read More. It means when you click on this text, it will lead to all post. For example: See more.
And after all we got like this:
The Widget Method
Your theme will have to support widgets in order for this to work. Often widgets are reserved for “Sidebar” content, but your theme may also use widgets for predefined areas of a page, such as “Homepage Slider”. To use the widget method, from the WordPress main menu, hover your mouse over the “Appearance” menu item and then select “Widgets”. In your list of “Available Widgets”, you’ll see one of the options is “Revolution Slider” as shown in the screenshots below:
Click and drag the Revolution Slider into one of your predefined available widget content areas:
You also can rearrange the order of these items.
Then open the Revolution Slider tab and choose your options:
Enter Title (1)
Choose Slider you wish to use (2)
Check this box for Homepage usage only (3)
Or enter a list of page ID's that should include the slider (4)
Click Save (5).
Visual Composer
Visual Composer is the most popular drag and drop editor for Wordpress.
WooCommerce is the most popular WordPress eCommerce plugin. And it's available for free. Packed full of features, perfectly integrated into your self-hosted WordPress website.
WooCommerce Transform your WordPress website into a thorough-bred eCommerce store. Delivering enterprise-level quality and features whilst backed by a name you can trust. Say "hello" to the WooCommerce eCommerce plugin.
WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.
With endless flexibility and access to hundreds of free and premium WordPress extensions, WooCommerce now powers 30% of all online stores -- more than any other platform.
Sell anything, anywhere
Ship wherever you like
Extensive payment options
You control it all -- forever
Define your style with Storefront
Built with developers in mind
Extensions galore
Join our growing community
If you need dedicated support for this component, please visit: Documentation
WooCommerce 101 Video Series
Contact Form 7
Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
Contact
A contact page is one of the “must-have” pages of any personal or business website. Contact Form7 WordPress plugin makes it easy to create custom forms. Contact Form 7 is a free contact form plugin for WordPress with over 19 million downloads. This clearly tells us about it’s popularity and ease of use.
Create A New Contact Form Using Contact Form 7
Go to WordPress Admin > Contact > Add New.
Click Add New to use the default language (English United States) or select other languges.
Enter Contact form title in the new item box. This title is just a label for a contact form and is used only for administrative purposes. You can use any title you like, e.g. “Job Application Form,” “Form for Event 2014/02/14″ and so on.
Shortcode for this contact form. Copy this code and paste it into your post, page or text widget content where you want to place this contact form.
You can save, duplicate or delete this contact form here.
Form editing field (1): You can customize form content here using HTML and form-tags. Line breaks and blank lines in this field are automatically formatted with and
HTML tags.
Tag generators (2): By using these tag generators, you can generate form-tags without knowledge of them.
You can edit a mail template for mail that is to be sent as a result of a form submission. You can use mail-tags in these fields.
Mail (2) is another mail section which is optional. If you want to send a different mail to different user you can use Mail 2 section. This section works same as Mail section. To use this section simply check the Use Mail (2) box.
You can edit messages that are used for various situations, including “Validation errors occurred,” “Please fill in the required field,” etc.
Note that only plain text is available here. HTML tags and entities are not allowed to use in the message fields.
You can add customization code snippets here. For details, see Additional Settings..
Click Save after any customizing.
Add Testimonial
Go to WordPress Admin > Testimonial > Add New.
Enter the name of the customer or client in the post title field.
Add their feedback in the post body.
You can also add a photo or other image using the featured image field. This image will be displayed alongside the feedback. If you want to link back to the website or social media profile of the person who provided the testimonial, you can enter the address in the Website Link field.
Adding a link is a good idea as it allows your visitors to verify and find out more about your clients and customers, helping to increase your social proof and credibility and the value of the testimonials.
Excerpt option allows you to summarize of feedback.
Choose whether or not you would like others to write comment.
Choose whether or not you would like to allow link notifications from other blogs (pingbacks and trackbacks).
Select or add new Testimonial Category and Testimonial Tag.
Provide the featured image. The image should have minimum width of 670px and minimum height of 500px.
You can Save draft, have a Preview before Publishing officially.
Blog
Posts are entries that display in reverse order on your home page. Posts usually have comments fields beneath them and are included in your site's RSS feed.
To write a Post/ News/ Blog:
Go to WordPress Admin > Posts > Add New.
Enter title page
Enter text contents. You also can insert Read More tag.
A summary or brief teaser of your post featured on the front page of your site as well as on the category, archives, and search non-single post pages. Note that the Excerpt does not usually appear by default. It only appears in your post if you have modified the template file listing the post to use the_excerpt() instead of the_content() to display the Excerpt instead of the full content of a post. If so, WordPress will automatically use as the Excerpt the first 55 words of your post content or the content before the !--more--quicktag. If you use the "Excerpt" field when editing the post, this will be used no matter what.
Post Formats is a theme feature introduced with Version 3.1. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. The Post Formats feature provides a standardized list of formats that are available to all themes that support the feature. Themes are not required to support every format on the list. New formats cannot be introduced by themes or even plugins. The standardization of this list provides both compatibility between numerous themes and an avenue for external blogging tools to access this feature in a consistent fashion. In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.
Here are some general guidelines:
- Standard: is the default post format, your everyday blog post. You can also add video, images, galleries, and whatever else you would like to a regular text post.
- Video: A single video or video playlist. The first video tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
- Audio: An audio file or playlist. Could be used for Podcasting.
- Quote: A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
- Link: A link to another site. Themes may wish to use the first a href=”” tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
- Gallery: A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
Select or Add New CategoryThe general topic the post can be classified in. Generally, bloggers have 7-10 categories for their content. Readers can browse specific categories to see all posts in the category. To add a new category, click the "+Add New Category" link in this section. You can manage your categories by going to Administration Panels > Posts > Categories.
You may Add Tag for your post. Post Tag refers to micro-categories for your blog, similar to including index entries for a page. Posts with similar tags are linked together when a user clicks one of the tags. Tags have to be enabled with the right code in your theme for them to appear in your post. Add new tags to the post by typing the tag into the box and clicking "Add".
Provide the featured image. The image should have minimum width of 670px and minimum height of 500px.
You can choose image from Upload Files or Media Library then click Insert.
You may click Save Draft or Preview before clicking Publish to finish.
To edit Posts in a Page
Go to WordPress Admin > Pages > All Pages > Blog > Edit.
We got this:
Click Edit button in the Box row.
And we got this:
In Blog Settings > General, select appropriate Category.
Put the number in Count of how many posts will be displayed on each page.
Choose show or hidden the Pagination. WordPress has the ability to split lists of posts or a single post into multiple pages for "paged" navigation. You can set how many posts to list on each page on the Reading screen (wp-admin > Settings > Reading). The “Blog pages show at most” value will be used by WordPress unless your theme overrides it, such as when it is using a custom query. When multiple loops (posts lists) are used in a theme template file only one loop, the main loop, can be paginated.
Display your posts in some order types. For example: title, date, ID or none.
Add a class name you wish to style particular content element differently and remember refer to it in your CSS file.
In Blog Settings > Template, choose whether or not you want to show Title, Meta, Excerpt, Action.
Enter Excerpt Length & Excerpt More you wish.
Enter text of link Read More. It means when you click on this text, it will lead to all post. For example: See more.
Click Save Changes to finish your editing.
Add New Page
Go to WordPress Admin > Pages > Add New.
Enter title page
The Page Attributes module (in WP Admin) allows you to set Page Parents and Templates, and to change the Order of your pages.
You can arrange your pages in hierarchies.
Some themes have additional templates that you can use to create pages with additional features or custom layouts. You can see if your current theme has any additional templates by checking the Template section of the Page Attributes module. The most common templates are for archives, links, and contact pages.
You can change the order that your pages are displayed in by using the Order field of the Page Attributes module.
For example, if you wanted About to appear first, you’d need to do the following:
- Go to Pages -> All Pages in your dashboard.
- Find the page About and click the title.
- Locate the Page Attributes module to the right of the editor.
- Put the number 1 in the box for Order. This tells WordPress to display this page first on your blog.
- Click the Update button.
Repeat the process for your other pages, but use higher numbers for the Order field: 2, 3, etc. This tells WordPress to display these pages second and third on your blog.
If you’re using the Pages Widget, be sure to set the Sort by option to Page Order after setting a custom order for your pages. Then click Save.
Enter text contents.
Provide featured image.
You can choose image from Upload Files or Media Library then click Insert.
You may click Save Draft or Preview before clicking Publish to finish.
Final Words
Scripts
Support center: https://gaventheme.ticksy.com
If you have any questions or whenever you meet troubles with the theme, please submit a ticket and validate your purchase code, we will follow all your questions better and make your information private absolutely.
Please, give us a chance to support you. Have a good time:) Again, thank you for purchasing our theme!