Installation
Installation
Our theme is easy to install. First download the theme from ThemeForest. It will be packed as a zipped file. You can choose to either import this into your server or control panel, or you can choose to extract the contents of the zipped file and upload the ‘kallyas.zip’ file to WordPress. Both are completely explained below.
Please note that installation steps or options may differ on your server depending on the WordPress version that you use. The installation steps explained below have been tested on WordPress 4.1.
Installation overview
Here is a quick overview of the installation steps that you have to follow. Please follow these steps in order to minimize the probability of something going wrong:
- Install our theme
- Install the plugins recommended by the theme
- Install WooCommerce plugin if needed
- Install dummy data
- Import Revolution Slider slides
Installing by importing using ftp or a control panel
This method will work for any server that has either an FTP account set up or another method of copying files to server. For example, if you have SSH (Secure Shell) access, you can choose to use FTP, SFTP, SSL-FTP, or SCP (among other options) to transfer your files from your personal computer to your web server. If you are using a control panel, such as cPanel or DirectAdmin, you can use it to conveniently upload the file to server.
You must upload the kallyas.zip file (after extracting the content from the zipped file to your Desktop) into wp-content/themes location. Once you have done so, you will need to extract the contents of the zip file into wp-content/themes. Assuming you have done this correctly, a new directory will be made in this parent directory named kallyas. You can now delete the zip file if you think it necessary to save space.
Now, go to your WordPress administration panel (http://yoursite.com/wp-admin) and go to WordPress Menu > Appearance > Themes. You will need to be logged in as the administrator to see this menu. In default installations, the administrator username is “admin”. You may have modified this during the WordPress installation. If you do not know your administrator password, you may need to check your MySQL database or (in some cases) with your web hosting provider.
You should see Kallyas Theme in your non-active theme list. If you do not, you may have uploaded and extracted the contents of the zip file incorrectly. You will then need to go back and retake the steps.
To activate the theme, simply click Activate at the bottom of the theme description. Now the theme becomes active and you can start using our magnificent theme.
Installing with wordpress administration panel
This method of installation may seem easier to most people. It can all be done from the WordPress administration panel, without manually uploading the file to your server. You must be logged in as the administrator to use this method. In default installations, the administrator username is “admin”. You may have modified this during the WordPress installation. If you do not know your administrator password, you may need to check your MySQL database or (in some cases) with your web hosting provider.
Go to WordPress Menu > Appearance > Themes and click on Add New button located on top of the screen.
Click on Upload Theme button, located on top of the screen.
You should now see a standard upload form. Use it to upload the kallyas.zip file that you extracted from the ThemeForest download package. Wait for the file to upload and then go back to WordPress Menu > Appearance > Themes. You should see Kallyas Theme in your non-active theme list. If you do not, the upload may not have worked successfully. Try refreshing or uploading again the file to solve the problem.
If all went well, you can now activate the theme by clicking Activate button located at the bottom of the theme description. Now the theme becomes active and you can start using our magnificent theme.
Installing recommended plugins
After installing our theme, you are required to install additional plugins: Revolution Slider and Cute slider. The plugins are already included in the theme so you can easily install them. Revolution Slider plugin is one of the most popular sliders on the web; it has unlimited effects and is fully customizable. You can use it to create sliders that you can incorporate later into your pages.
You are also presented with an option to install the Woocommerce Plugin. This is required if you intend to use the shop features of our theme. This plugin will be installed from the WordPress repository.
Go to WordPress Menu. On top of the screen of any admin page you will find instructions for installing or updating the plugins.
If you do not see any notice at the top of the screen, then you can access the Install Plugins option at WordPress Menu > Addons.
Here you will find a list of plugins and you will be presented with the options for installing the plugins or updating them in case there is an update available.
Please choose Install or Update as required by the plugin and then follow the on screen instructions.
Installing the dummy data on your server
After installing the theme, you can immediately start building your site. However, it would be a lot easier if you do not start working from scratch, but from our example pages. If you wish to use our example pages, you’ll have to install the dummy data that this theme provides.
WARNING! DO NOT INSTALL the dummy data on your live website. It may be possible that your current data get corrupted. We strongly recommend installing the dummy data on a clean WordPress install.
Installing the dummy data is extremely easy. After you install the theme and additional plugins, go to WordPress Menu > Kallyas Options > Advanced and press the Install dummy data button. Wait for the process to complete. Please be aware that it can take up to 5 minutes to install the dummy data.
Installing the child theme
This theme comes with a preinstalled child theme. Why use a child theme? If you modify our theme files and it is updated, your changes made to the theme files will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes. Therefore, if you are a WordPress savvy and wish to modify stuff to our theme, please use the child theme to do so.
To install the child theme, repeat the steps you made with the main theme, but this time using the kallyas-child folder from the download package. It is important to leave this name unchanged. After installing the child theme, activate it instead of the main theme.
For further reference about the child themes, please read the WordPress documentation located at http://codex.wordpress.org/Child_Themes
Please note that some things may “disappear” after installing the child theme. For example, the main menu. There is nothing to be worry about this. In order to resolve this, just go to Appearance > Menus menu and re-asign your menus.
Updating the theme
Warning: Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.
We may periodically release new updates to this theme in order to add new features or fix bugs.
This theme comes with a built-in update system. You will be notified in the standard WordPress way of any theme update (In Dashboard > Updates). In order to do this, some info must be added in the theme’s optiosn panel. You can find more info about this in the Theme options documentation. Please follow the instructions to update the theme. We are careful to make the updates with backward compatibility and thus no content or options will be lost after performing a theme update.
Of course, you can perform a manual update of the theme if you wish so. Download the package from Themeforest and follow the steps from the installation. As an extra step, we recommend deleting the old theme files before placing the new ones.
PageBuilder
Introduction
Since version 4.0, Kallyas has been equiped with a brand new Visual Page Builder:
Because the new Page Builder is completely different than the one used in the previous versions, it is not enabled by default when you create a new page or post:
which means that you will have to click the “Enable page builder” button in order to be able to use it.
Once you have set the post to use the new Page Builder, you can go ahead and use it:
Elements are grouped by category as you can see in the above screenshot, on the lower left hand side. For easiness we’ve added a search box you can use to search for an element:
You have also the possibility of turning off the Page Builder at any time, by clicking the “Disable page builder” button:
To add elements to the page, all you have to do is drag and drop them on the page as in example below:
Section and Columns
The section element is a full width element that an be used as a container for column elements.
A Column element is added by default, and you can see it when you hover the section element:
At this point you can configure the number of columns for the “Column” element. The default value is 12, which means full width.
Section options
As you can see in the image below, Sections are very configurable:
Column options
As sections, Columns are customizable too:
Templates
Templates are another new feature of the new Page Builder. You can use it to save a fully customized page as a template and use it as a template for other pages that share the same layout or elements.
Once you have set the template, every time you add a new page you can use this template and avoid recreating it from scratch to match the other page.
Save elements
Another feature of the new Page Builder is the possibility of saving elements altogether. To save the element you need to click the “Save” icon as shown below:
Once you configured the element you can choose to save it so you can use it later on on other pages:
Elements options
Live Options
Most of the elements will have certain options that will feature a “live” icon:
The “Live” icon means that the element will react immediately to the change of that option.
Another common option that implements the “live” functionality is the style option, that can be used to dynamically set the style of an element:
Column
Options
Option name | Description |
---|---|
Column offset | Here you can define an offset for this column |
Control Size on Large screens | Select a size for this column on large devices (Desktops)(>= 1200px). By default the md/sm column sizes are applied to large screens too, this option only forces another column width on large screens. |
Size on small screens | Select a size for this column on small devices (Tablets)(>= 768px) |
Size on extra small screens | Select a size for this column on extra small devices (Phones)(<768px) |
3D Cute Slider
Create and display a 3D Cute Slider element
Options
Option nameDescription
Background Style | Select the background style you want to use. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Select slider | Select the desired slider you want to use. Please note that the slider can be created from inside the Cute Slider option. |
Top padding | Select the top padding ( in pixels ) for this section. |
Bottom padding | Select the bottom padding ( in pixels ) for this section. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Example
Accordion
Create and display an Accordion element
Options
Option name | Description |
---|---|
Title | Enter a title for your Accordion element |
Accordion Style | Please select the style you want to use. |
Accordions | Here you can create your desired accordions. |
Example
Action Box
Create and display an Action Box element
Options
Option name | Description |
---|---|
ID: eluid8248b4ad | In case you need some custom styling use as a css selector .eluid8248b4ad . |
Element Style | Please select the style you want to use. |
Action Box Title | Enter a title for your action box |
Action Box Subtitle | Enter a subtitle for the action box |
Action Box Button Text | Please enter a text that will appear inside your action box button. |
Action Box link | Please choose the link you want to use for your action box button. |
Action Box Secondary Button Text | Please enter a text that will appear inside your action box secondary button. |
Action Box Secondary link | Please choose the link you want to use for your action box secondary button. |
Example
Big Social Blocks
Create and display a list of blocks containing social icons icons and links.
Options
Option name | Description |
---|---|
Select style | Select a style for the blocks |
Background Type | Select the background type. |
Background Color | Select the default background color of the blocks. |
Elements color theme | In case you have a dark backgound you might surely want a light themed color. |
Icon Blocks | Add Icon Block. |
Example
Blog Archive
Create and display the current post content
Options
Option name | Description |
---|---|
Blog columns | Select the number of columns to use |
Categories | Select your desired categories for post items to be displayed. |
Number of items per page | Please choose the desired number of items that will be shown on a page |
Example
Buttons
Create and display as many buttons as you want
Options
Option name | Description |
---|---|
Element Alignment | Please select the alignment of the buttons. |
Button | Add Button. |
Example
Call Out Banner
Create and display a Call Out Banner element
Options
Option name | Description |
---|---|
Style | Please select the style you want to use. |
Main Title | Enter a title for your Call Out Banner element |
Secondary Title | Enter a secondary title for your Call Out Banner element |
Button Text | Please enter a text that will appear on the right button. |
Button Hover Image | Please select an image that will appear when hovering the mouse over the button. If no image is chosen the default OK image will be used |
Button link | Please choose the link you want to use for your button. |
Example
Circle Title Text Box
Create and display a Circle Title Text Box element
Options
Option name | Description |
---|---|
Style | Please select the style you want to use. |
Circle Text Title | Please enter a SMALL word that will appear on the left circle beside the main title. |
Main Title | Please enter a main title for this box. |
Content | Please enter a content for this box. |
Circle Background Color | Select the background color for the circle. |
Circle Text Color | Select the text color for the circle. |
Example
Circular Catalogue Carousel
Create and display a Circular Catalogue Carousel element
Options
Option name | Description |
---|---|
Autoplay carousel? | Does the carousel autoplay itself? |
Timout duration | The amount of milliseconds the carousel will pause |
Slides | Here you can create your Circular Content Slides. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Circular Content Style 1
Create and display a Circular Content Style 1 element
Options
Option name | Description |
---|---|
Slide height | Please enter a height number in pixels ( for example : 450 ) |
Autoplay carousel? | Does the carousel autoplay itself? |
Timout duration | The amount of milliseconds the carousel will pause |
Slides | Here you can create your Circular Content Slides. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Circular Content Style 2
Create and display a Circular Content Style 2 element
Options
Option name | Description |
---|---|
Autoplay carousel? | Does the carousel autoplay itself? |
Timout duration | The amount of milliseconds the carousel will pause |
Slides | Here you can create your Circular Content Slides. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Contact form
This element will generate a contact form
Options
Option name | Description |
---|---|
Description | Please enter a description for this element |
Email address | Please enter the email adress where you want the form submissions to be sent. |
Submit button label | Enter a text for the submit button label. |
Email subject text | Please enter your desired text that will appear as the subject of the received email |
Mail sent message | Please enter your desired text that will appear after the form is successfully sent |
Show captcha | Select yes if you want to add a captcha field. |
Labels or Placeholders? | Choose what to display, |
Here you can create your contact form fields |
Example
CSS3 Panels
Create and display a CSS3 Panels element
Options
Option name | Description |
---|---|
Slider Height | Please enter a numerical value in pixels for your slider height. |
Image Effect | Select an effect for normal and hover states. |
Caption Effect | Specify the caption effect. |
Panel Resize on hover | Resize the panel on hover? |
CSS Panels | Here you can create your CSS3 Panels. |
Example
Custom container
This element will generate a custom container in which you can add elements
Options
Option name | Description |
---|---|
Background color | Here you can choose a custom background color for this container. |
Background image | Please choose a background image for this section. |
Equaliser padding | Equalizer padding should only be used inside a full-width container and will help to display a proper alignment of the element’s left or right edge in context to the site’s container left and/or right boundries. Make sure you select ‘First’ only if the column is the first in the row. Select ‘Last’ if the element is on the last column from the row. |
Top padding | Select the top padding (in percent) for this container. |
Right padding | Select the right padding (in percent) for this container. |
Bottom padding | Select the bottom padding (in percent) for this container. |
Left padding | Select the left padding (in percent) for this container. |
Border style | Select a border style you wish to use for this container. |
Border width | Select the border width you wish to use for this container. |
Border color | Here you can override the background color for this section. |
Corner radius | Select a corner radius (in pixels) for this container. |
Gutter Size | Select the gutter distance between columns |
Custom Header Layout
Create and display a Custom Header Layout element
Options
Option name | Description |
---|---|
Show Page Title | Select if you want to show the page title or not. |
Override Title | Override the default page title. |
Show Page Subtitle | Select if you want to show the page subtitle or not. |
Override SubTitle | Override the default page subtitle. |
Show Breadcrumbs | Select if you want to show the breadcrumbs or not. |
Show Date | Select if you want to show the current date under breadcrumbs or not. |
Header Height | Please enter your desired height in pixels for this header. |
Top padding | Select the top padding ( in pixels ) for this section. |
Bottom padding | Select the bottom padding ( in pixels ) for this section. |
Header Style | Select the header style you want to use for this page. Please note that header styles can be created from the theme’s admin page . |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Example
Devices Images
Create and display a Devices Images element
Options
Option name | Description |
---|---|
Main image type | Select the main image type |
Image for Laptop | Add an image to display inside the laptop |
Image for App Frame | Add an image to display inside the App frame |
Image for Iphone | Add an image to display inside the smartphone |
Direction | Select the direction of the images. |
Max. Height | Maximum height (px) |
Width | Frame width |
Height | Frame height |
Devices Type | Select the type of devices images. The vector types looks more cartoonish. |
Appear on scroll? | Start invisible and appear on scroll, when in viewport? |
Appear Effect | Select the appear effect. |
Delay appearance (milliseconds) | Delay the appearance? If multiple icon boxes, you can delay each one to appear sequentially. The numbers are in milliseconds. |
Example
Documentation element
Create and display a Documentation element
Options
Option name | Description |
---|---|
Number of items | Please enter the desired number of items that you want to be shown under each category. |
Documentation Header
Create and display a Documentation Header element
Options
Option name | Description |
---|---|
Header Style | Select the header style you want to use for this page. Please note that header styles can be created from the theme’s admin page. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Fancy Slider
Create and display a Fancy Slider element
Options
Option name | Description |
---|---|
Slides Height | Add a general height for the slides in px. |
Autoplay carousel? | Does the carousel autoplay itself? |
Timout duration | The amount of milliseconds the carousel will pause |
Choose Navigation type | Choose either arrows or bullets |
Move the controls inside? | The option will reposition the controls (arrows or bullets) inside or outside the slider. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Top padding | Select the top padding ( in pixels ) for this section. |
Bottom padding | Select the bottom padding ( in pixels ) for this section. |
Slides | Here you can create your Fancy Slider Slides. |
Example
Features Boxes
Create and display a Features Boxes element
Options
Option name | Description |
---|---|
Title | Enter a title for your Features element |
Secondary title | Enter a secondary title for your Features Element. Please note that this description will only appear if you choose to use the style 2. |
Description | Enter a description for your Features Element. Please note that this description will only appear if you choose to use the style 2. |
Features Box Style | Please select the style you want to use. |
Features Box Columns | Please select the desired number of columns to use. |
Features Boxes | Here you can create your desired features boxes. |
Features Boxes 2
Create and display a Features Boxes 2 element
Options
Option name | Description |
---|---|
Title | Enter a title for your Features element |
Features Boxes | Here you can create your desired features boxes. |
Flickr Feed
Create and display a Flickr Feed element
Options
Option name | Description |
---|---|
Title | Please enter a title for this element |
Flickr ID | Please enter your Flickr ID |
Image Size | Select the desired image size for the Flickr images |
Images to load | Please enter the number of images that you want to display |
Example
Google Map
This element will generate a Google Map
Options
Option name | Description |
---|---|
single_multiple_maps | Here you can add your map locations. |
Zoom level | Select the start zoom level you want to use for this map ( default is 14 ) |
Map Type | Select the desired map type you want to use. |
Add directions box | Select if you want to add a textbox in which the user can enter a departure location and get directions to the office location (first one if there are more than one). |
Directions box text | Please enter the direction box text you want to use. |
Show overview map | Select if you wish to add the overview map option |
Show street view | Select if you wish to add the street view option |
Show map type | Select if you wish to add the map type option |
Info bubble type | Please select the info type |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Panel Image | Display an image into the info panel. |
Panel Title | Title in panel. |
Panel Content | Content in panel. |
Background Style | Select the background style you want to use. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Map Height | Please select value in pixels for the map height. |
Map custom style | Use a custom map style. You can get custom styles from http://snazzymaps.com. |
Normal map style | Paste your custom style here (Javascript style array). You can get custom styles from http://snazzymaps.com. |
Active map style (when a popup is visible) | Paste your custom style here (Javascript style array). You can get custom styles from http://snazzymaps.com. |
Allow Mousewheel | Select if you want to allow map zooming using the mouse scroll (may interfere with page scroll). |
Map localization | Force the map localization to a specific language |
Example
Grid Image Boxes
Create and display an Grid Image Boxes element.
Options
Option name | Description |
---|---|
Boxes Height | Fixed height of the boxes, in px. |
Icon Size | Select the size of the icon. |
Icon Boxes per ROW | Select how many icon boxes to appear per row. |
Grid Style | Select a style for the grid. |
Hover Style | Select the style should be applied on hover. |
Title first? | Display the title first? |
Icon Box | Add Icon Box. |
Background Color | Add a background color to the box. |
Icon Color (Only for Icon Font) | Color of the icon. |
Icon Hover Color | Hover Color of the icon. |
Title settings | Specify the typography properties for the title. |
Description text settings | Specify the typography properties for the description text. |
Example
Grid based Photo Gallery
Create and display a Grid based Photo Gallery element
Options
Option name | Description |
---|---|
Number of columns | Select the desired number of columns for the grid. |
Images Height Ratio | Select the desired image height ratio. |
Images | Here you can add your desired images. |
Example
Historic element
Create and display a Historic element
Options
Option name | Description |
---|---|
Start text | Please enter a text that will appear as a start |
Events | Here you can add your desired events. |
Example
Horizontal Tabs
Create and display a Horizontal Tabs element
Options
Option name | Description |
---|---|
Tabs Style | Using this option you can choose the desired tabs style. |
Tabs | Here you can add your desired tabs. |
Example
Hover Box
Create and display a Hover Box element
Options
Option name | Description |
---|---|
Title | Please enter a title for this box. |
Subtitle | Please enter a subtitle for this box. |
Description | Please enter a description for this box. |
Add Image | Please select an image for this box. |
Box Link | Please choose the link you want to use. |
Hover Box Style | Please select the style you want to use. |
Box Background-color | Select a color. |
Content Style | Select the desired alignment for the content |
Remove right margin? | Please choose if you don’t want a right margin. |
Example
ICarousel
Create and display an ICarousel element
Options
Option name | Description |
---|---|
Element Height (container) | Custom height (px) |
Carousel Height (front img) | Carousel’s height. The height is only for the main image (px) |
Carousel Width (front img) | Carousel’s wid. The width is only for the main image (px) |
Autoplay? | Autoplay the carousel? |
Timeout duration | Timeout duration in miliseconds. The time between slides |
Perspective | The 3D perspective option. (Min 0 & Max 100); |
Slides Spaces | Spaces between slides |
Visible Slides | How many slides will be shown (Must be an odd number) |
Direction | Carousel direction when change |
Keyboard navigation | Enable keyboard navigation? |
Mousewheel navigation | Enable mousewheel navigation? |
Timer Type | Timer Style |
Timer Opacity. | Timer’s Opacity. |
Timer diameter/width | Timer diameter or width for the bar type. For example by default it’s a 220px width for Bar style |
Timer Color | Set a color for the timer |
Timer position | Set the timer’s position? |
Timer X position threshold. | Timer X position offset. |
Timer Y position threshold. | Timer Y position offset. |
Slides | Here you can create your iCarousel Slides. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Icon Box
Create and display an Icon Box element containing an icon, title description with different settings
Options
Option name | Description |
---|---|
Title | Title text. |
Description | Description text. |
Link Type | Link type of the icon box. |
The link | Add a link here. For call to action button, title is used as anchor text. |
Icon Type | Type of the icon. |
Image Icon | Upload an Icon Image. |
Select Icon | Select an icon to display. |
Shaped Background Icon? | Display the icon in a shape with hover effects? Available only for icon fonts to control the hover color. |
Icon Color | Color of the icon. |
Shape Background Color | Background Color of the shape behind the icon. |
Icon Hover Color | Hover Color of the icon. |
Shape Background Hover Color | Hover background color of the shape behind the icon. |
Icon Size | Select the size of the icon. |
Image Size | Select the size of the image. |
Icon Padding (Shaped) | Select the size of the icon. |
Box Alignment | Alignment for the content inside the box. |
Text color theme | Choose text color scheme |
Floated Style? | Is the box left or right floated? Don’t confuse with alignment. |
Title settings | Specify the typography properties for the title. |
Title first? | Display the title first? |
Description text settings | Specify the typography properties for the description text. |
Icon Opacity | Select the opacity of the icon. |
——- Hover Stage Points | Use the feature to display a target point onto a Stage object element. First create the Stage element and customise it, then, copy the ID below. |
Point Target Stage ID | Copy the ID from the Stage element you want to add points to. |
Point Coordinates | This will add an animated dot onto the stage image with the X and Y coordinates you provide. In px add “x, y” coordinates – X being distance from left and Y distance from top. |
Point Tootip | Add a custom tooltip text. Leave empty if you don’t want to display a tooltip. |
Appear on scroll? | Start invisible and appear on scroll, when in viewport? |
Delay appearance (milliseconds) | Delay the appearance? If multiple icon boxes, you can delay each one to appear sequentially. The numbers are in milliseconds. |
Example
Image Box
Create and display an Image Box element
Options
Option name | Description |
---|---|
Image Box Title | Enter a title for your Image box |
Image Box Text | Please enter a text that will appear inside your action Image button. |
Image | Please select an image that will appear above the title. |
Image Box Style | Please select the style you want to use. |
Image Box Title Style | Please select the style you want to use. |
Link text | Enter a that will appear as link over the image. |
Image Box link | Please choose the link you want to use for your Image box button. |
Example
Image Gallery
Create and display an Image Gallery element
Options
Option name | Description |
---|---|
Title | Please enter a title for this gallery. |
Images | Here you can add your desired images. |
Info Box
Create and display an Info Box element
Options
Option name | Description |
---|---|
Title | Please enter the Info Box title |
Subtitle | Please enter the Info Box subtitle |
Select style | Select the desired style for this element |
Text color scheme | Select the desired style for this element |
Select background color | Select a color to apply as background color. |
Select background image | Please select an image to use as background image. |
Button 2 text | Please enter a text that will appear as button |
Button 2 link | Please choose the link you want to use. |
Button text | Please enter a text that will appear as button |
Button link | Please choose the link you want to use. |
Example
iOS Slider
Create and display an iOS Slider element
Options
Option name | Description |
---|---|
Fullscreen | Chose wether the slider should be fixed height or fullscreen. |
Slider Height | Enter a numeric value for the slider height.Please note that the value will be used as percentage. The default value is 39%. This option works if Fullscreen is disabled. |
Autoplay? | Autoplay slider? |
Transition Speed | Enter a numeric value for the transition speed (default: 5000) |
Slider Navigation | Choose what type of navigation you want to use for your slide. |
Add Fade Effect? | Choose if you want to add a bottom fade effect to your slider. |
Color for the fading background | Pick a color |
Use fixed width slider? | Choose if you want to use a full width slider or a fixed width one. |
Use fixed position (scroll) slider? | Choose if you want your slider to be fixed on the page when you scroll down |
Add scrolling effect? | Choose if you want the slider to have a scrolling effect on the entire slider and captions. The captions will fade while the slider will slowly move downwards upon scrolling. This options works only if the slider is positioned at the very top opf the page!! |
Slider Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Slides | Here you can create your iOS Slider Slides. |
Example
Keywords Element
Create and display a Keywords Element element
Options
Option name | Description |
---|---|
Keyword Box Style | Please select the style you want to use. |
Background image | Select a background image for this element |
Background Color | Here you can choose the background color for this element. |
Content | Please enter the Keywords content |
Example
Laptop Slider
Create and display a Laptop Slider element
Options
Option name | Description |
---|---|
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Slider Title | Here you can enter a main title that will appear above the slider. |
Slider Display | Select how to display the slider. |
Main title | This title will appear on the left side. |
Main Description | This description will appear on the left side. |
Primary Button | Here you can add data for the primary button. In case the general slider style is ‘Just Laptop’, this link will be used to add a link to the title of the slide. |
Secondary Button | Here you can add data for the secondary button. |
Enable bullets? | Enable bullets for the slides? |
Enable Control Arrows? | Enable next & prev arrows? |
Transition Timeout | Enter a numeric value automatic timeout between slides (default: 5000) |
Text Theme Colors | Select the color theming. Perhaps you want a light background with dark text or viceversa. |
Slides | Here you can create your Laptop Slider Slides. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Add bottom mask? | Add a bottom mask? |
Example
Latest Posts
Create and display a Latest Posts element
Options
Option name | Description |
---|---|
Title | Enter a title for your Latest Posts element |
Blog page Link | Enter the link to your blog page |
Blog Category | Select the blog category to show items |
Example
Latest Posts Carousel
THis element will display a Latest Posts Carousel
Options
Option name | Description |
---|---|
Title | Enter a title for the latest posts carousel |
Posts Category | Select the category to show items |
Number of items | Please enter how many items you want to load. |
Example
Media Container
Create and display a Media Container element
Options
Option name | Description |
---|---|
Link Type | Add a center button? |
Button Text | Add a text inside the button. If no text is added, an icon will be displayed. |
Button Style | Select a button style |
Alternative border animation – box width | set a width for the alternative border animation. |
Link Target | Add a center button? |
Link URL | Add a link for the link. |
Modal image link | Add an image for the modal. |
Height LG – Large breakpoint | Set the height of the media container for large breakpoint ‘> 1200px’ |
Height MD – Medium breakpoint | Set the height of the media container for medium breakpoint ‘> 992px’ and ‘< 1199px' |
Height SM – Small breakpoint | Set the height of the media container for small breakpoint ‘> 768px’ and ‘< 991px' |
Height XS – Extra small breakpoint | Set the height of the media container for extra small breakpoint ‘< 767px' |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Embed Iframe link | Add a link |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Enable Gloss Overlay | Display a gloss over the background |
Example
Nivo Slider
THis element will create a Nivo SLider.
Options
Option name | Description |
---|---|
Slides Height | Select a slider height. Removing the height will add an auto flag which will keep the default images heights. |
Slider Transition | Select the desired transition that you want to use for this slider. |
Automatic Transition | Select yes if you want the slider to auto advance to each slide, or no, in order to manually change the slide. |
Slider Pause Time | How long each slide will show ( default is 5000 ). |
Slides | Here you can create your Nivo Slider Slides. |
Shadow style | Select the desired shadow that you want to use for this slider. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Partners and Testimonials
Display a block with partners logos and testimonials
Options
Option name | Description |
---|---|
ID: eluid5ccbe16d | In case you need some custom styling use as a css selector .eluid5ccbe16d . |
General text color theme | Select the color theme for the texts |
Testimonials | Add testimonials. |
Partners/Clients side title | Add a title (or not) |
Partners | Add partners/logos. |
Example
Partners Logos
Create and display a Partners Logos element
Options
Option name | Description |
---|---|
Title | Please enter the title for this element. |
Title Style | Please select the style you want to use for this title. |
Logos | Here you can add your partners logos. |
Example
Photo Gallery
Create and display a Photo Gallery element
Options
Option name | Description |
---|---|
Number of columns | Select the desired number of columns for the images. |
Images Height | Select the desired image height in pixels. |
Images | Here you can add your desired images. |
PHP Code
Create and display a PHP Code element.
Options
Option name | Description |
---|---|
PHP Code | Please enter the PHP code to be executed. You need to be very careful to write this code properly because it will be executed as it is and it can potentially break your website. |
Warning! This is a very powerful element because it gives you the possibility of executing PHP code directly into the page where it is included. be careful when using this element because if the code is not properly written it might break your website!
Portfolio archive
Create and display a Portfolio archive element
Options
Option name | Description |
---|---|
Archive style | Please choose the desired archive style to display. |
Frame Style | Please choose which frame style to apply. |
Portfolio Category | Select the portfolio category to show items |
Number of portfolio Items Per Page | Please enter how many portfolio items you want to load on a page. |
Number of columns | Please enter how many portfolio items you want to load on a page. |
Example
Portfolio item content
Portfolio Slider
Create and display a Portfolio Slider element
Options
Option name | Description |
---|---|
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Slider Main Title | Here you can enter a description that will appear above the slider. |
Slider Description | Here you can enter a description that will appear above the slider. |
Sliding Direction | Select the desired sliding direction. |
Parallax scrolling effect? | Choose if you want the slider to have a scrolling effect on the slider. This options works only if the slider is positioned at the very top opf the page!! |
Slides | Here you can create your Portfolio Slider Slides. |
Slider Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Pricing Table
Create and display a Pricing Table element
Options
Option name | Description |
---|---|
Columns | Please select the number of pricing tables to display. |
Colors | Please select a color theme for the table elements. |
Pricing Tables | Here you can create your desired pricing tables. |
Example
Recent Work
Create and display your Recent Work
Options
Option name | Description |
---|---|
Recent Works Items Height | Enter a height for the carousel items |
Style | Please select the style you want to use. |
Recent Works Title | Enter a title for your Recent Works element |
Recent Works Description | Please enter a description that will appear bellow the title. |
Portfolio page link | Please enter the link to your portfolio page. |
Portfolio text button | Please enter the text for the link to your portfolio page. |
Portfolio Category | Select the portfolio category to show items |
Number of portfolio Items | Please enter how many portfolio items you want to load. |
Example
Revolution Slider
Create and display a Revolution Slider element
Options
Option name | Description |
---|---|
Background Style | Select the background style you want to use. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Select slider | Select the desired slider you want to use. Please note that the slider can be created from inside the Revolution Slider options page. |
Use Paralax effect | Select yes if you have used the parallax classes when you created your slider. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Example
Screenshots Box
Create and display a Screenshots Box element
Options
Option name | Description |
---|---|
Title | Please enter title for this box. |
Style | Please select the style you want to use. |
Link Text | Please enter a text that will appear as a button link. |
Button Link | Please choose the link you want to use. |
Features | Here you can add your desired features. |
Images | Here you can add your screenshots images. |
Example
Search Box
Create and display a Search Box.
Options
Option name | Description |
---|---|
Search Box Style | Choose a style |
Placeholder Effect | Choose the placeholder’s effect |
Search Input text | Add a placeholder text inside the search input. |
Button text type | Choose the button text or icon |
Button text | Add a text inside the button |
Button width (px) | Add a button width |
Form height | Specify the form height |
Example
Service Box
Create and display a Service Box.
Options
Option name | Description |
---|---|
Service Box Style | Select the style of this services box. |
Service Box Title | Enter a title for your Service box |
Service Box Text Description | Enter a text for your Service box |
Service Box Features | Please enter your features one on a line.This will create your features list with an arrow on the right. |
Icon Type | Type of the icon. |
Image Icon | Upload an Icon Image. |
Image Hover Icon | Upload an Icon Image for the hover transition. |
Icon Size | Select the size of the icon. |
Select Icon | Select an icon to display. |
Example
Services Element
Shop Features
Display the Shop Features
Options
Option name | Description |
---|---|
Title | The title for this element. |
Features | Here you can add your shop features. |
Example
Shop Limited Offers
Display Shop Limited Offers
Options
Option name | Description |
---|---|
Element Title | Enter a title for this element |
Shop Category | Select the shop category to show items |
Number of products | Please enter how many products you want to load. |
Autoplay carousel? | Does the carousel autoplay itself? |
Timeout duration | The amount of milliseconds the carousel will pause |
Example
Shop Products Presentation
Display Shop Products.
Options
Option name | Description |
---|---|
Display style | Select the display layout. |
Show Latest Products | Select yes if you want to show the latest products. |
Latest Products Title | Please enter a title for the latest products. If no title is set, the default title will be shown ( LATEST PRODUCTS ) |
Show Best Selling Products | Select yes if you want to show the best selling products. |
Best Selling Title | Please enter a title for the best selling products. If no title is set , the default title will be shown ( BEST SELLING PRODUCTS ) |
Show Featured Products | Select yes if you want to show the featured products. |
Featured Products Title | Please enter a title for the featured products. If no title is set, the default title will be shown ( FEATURED PRODUCTS ) |
Shop Category | Select the shop category to show items |
Number of products | Please enter how many products you want to load. |
Example
Simple Slider
Display a Simple Slider (formerly known as Flex Slider).
Options
Option name | Description |
---|---|
Slider height (px) | Add a height for the slider. Empty means automatic height. |
Slider style | Select a style for the slider. |
Slider Transition | Select the desired transition that you want to use for this slider. |
Slider Speed | Adjust the speed between sliding timeout. |
Autoplay carousel? | Does the carousel autoplay itself? |
Slider Navigation | Display arrows? |
Slider Bullets | Display navigation bullets?. |
Show Thumbnails? | Select if yes if you want to display thumbnails of images on the right side of the slider. Will replace bullets. |
Shadow style | Select the desired shadow that you want to use for this slider. |
Slides | Here you can create your Flex Slider Slides. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Skills
Create and display a Skills element
Options
Option name | Description |
---|---|
Main center text | Add a text that’s going to be placed inside the center |
Diagram Width & Height | Select the diagram width and height |
Diagram font-size | Select the diagram text font-size |
Center main color | Select the center color of the diagram |
Center text color | Select the center text color of the diagram. |
Enable Legend | Enable legend? |
Legend title | Add a text that’s going to be placed into the legend box |
Legend Alignment | Select the alignment of the legend |
Skill | Here you can add skills. |
Example
Stage Image Box
Create and display an Stage Image Box element. To be used with Icon Boxes.
Options
Option name | Description |
---|---|
ID: eluid74fe906e | To be used in combination with Icon Boxes to display associative points. Copy this ID to the iconbox you’ll be using. |
Stage Image | Upload an image that will be placed in the middle |
Img Alt | Add an alternative text for the image (SEO purposes) |
Point Color | The color of the points. |
Top padding | Select the top padding ( in pixels ) for this section. |
Bottom padding | Select the bottom padding ( in pixels ) for this section. |
Example
STATIC CONTENT – Boxes
Display a STATIC CONTENT – Boxes element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Title | Please enter a title for your boxes. |
Box 1 Title | Please enter a title for your first box. |
Box 1 image | Select an image for this Box |
Box 1 Description | Please enter a description text for your first box. |
Box 2 Title | Please enter a title for your first box. |
Box 2 image | Select an image for this Box |
Box 2 Description | Please enter a description text for your first box. |
Box 3 Title | Please enter a title for your first box. |
Box 3 image | Select an image for this Box |
Box 3 Description | Please enter a description text for your first box. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
STATIC CONTENT – Default
Display a STATIC CONTENT – Default element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Main title | Please enter a main title. |
Subtitle | Please enter a subtitle |
Alignment | Select the alignment of the content |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
STATIC CONTENT – Event Countdown
Display a STATIC CONTENT – Event Countdown element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Title | Please enter a title. |
Video | Please enter the link for your desired video (youtube or vimeo ). |
Video Description | Please enter a description for this video that will appear above the video. |
Date | Here you can select the date until the countdown finishes. |
Mailchimp List ID | Please enter your Mailchimp list id. In order to make Mailchimp work, you should also add your Mailchimp api key in the theme’s admin page. |
Use normal or colored social icons? | Here you can choose to use the normal social icons or the colored version of each icon. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Social Icons | Here you can add your desired social icons. |
Example
STATIC CONTENT – Product Loupe
Display a STATIC CONTENT – Product Loupe element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Title | Please enter a title. |
Featured image | Select an image that will appear on the right side. Recommended size 1000px x 630px . |
Features list | Please enter a title. |
Button 1 Text | Please enter a text for the first button. |
Button 1 link | Here you can add a link to the first button |
Button 1 icon | Select your desired icon that will appear on the left side of the button text. |
Button 1 style | Select the desired style for your button. |
Button 1 icon style | Select the desired style for your icon. |
Text between buttons | Here you can add a text that will appear between your buttons |
Button 2 Text | Please enter a text for the second button. |
Button 2 link | Here you can add a link to the second button |
Button 2 icon | Select your desired icon that will appear on the left side of the button text. |
Button 2 style | Select the desired style for your button. |
Button 2 icon style | Select the desired style for your icon. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
STATIC CONTENT – Reservation Form
Display a STATIC CONTENT – Reservation Form element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Main title | Please enter a main title. |
Subtitle | Please enter a subtitle |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Month field | Please enter the name for the month field that holds the month when the url to the endpoint is generated. |
Day field | Please enter the name for the day field that holds the day when the url to the endpoint is generated. |
Nights field | Please enter the name for the nights field that holds the nights when the url to the endpoint is generated. |
Guests field | Please enter the name for the guests field that holds the guests when the url to the endpoint is generated. |
Endpoint URL | Please enter the link to the endpoint which will display the search results based on the retrieved values. Ex: http://your.endpoint.url/ |
Example
STATIC CONTENT – Showroom Carousel
Display a STATIC CONTENT – Showroom Carousel element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Text content | Please enter a content. |
Primary Button | Add a link, text and select the target for this link |
Secondary Button | Add a link, text and select the target for this link |
Carousel Speed | Set the carousel speed in milliseconds (ms). 1000ms = 1s |
Enable Pagination? | Do you want to enable the carousels pagination? |
Carousel | Here you can add your carousel items. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
STATIC CONTENT – Simple Text
Display a STATIC CONTENT – Simple Text element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Text | Please enter your desired text. |
Button Text | Please enter a text that will appear as a button bellow your text. |
Button Style | Select a button style. |
Text color theme | Please choose a color theme. |
Button link | Please choose the link you want to use for your button. |
Enable Faded Mask? | Add a faded mask at the bottom? |
Enable Boxed Mask? | Enable Boxed Mask with content over Static content? |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Example
STATIC CONTENT – Text and Register
Display a STATIC CONTENT – Text and Register element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Main title | Please enter a main title. |
Subtitle | Please enter a subtitle |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Note that this element will only be displayed for non-authenticated visitors!
Example
STATIC CONTENT – Text and Video
Display a STATIC CONTENT – Text and Video element
Options
Option name | Description |
---|---|
Background Style | Select the background style you want to use. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Main title | Please enter a main title. |
Subtitle | Please enter a subtitle |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Video | Please enter the link for your desired video ( youtube or vimeo ). |
Video Description | Please enter a description for this video that will appear above the video. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. |
Example
STATIC CONTENT – Video element
Display a STATIC CONTENT – Video element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Title | Please enter a title for your boxes. |
Video Link | Please enter the link to the video you want to embed ( Vimeo or Youtube ). |
Video Description | Please enter a text that will appear under the video link. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
STATIC CONTENT – Text Pop
Display a STATIC CONTENT – Text Pop element
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Line 1 Text | Please enter a text for the first line. |
Line 2 Text | Please enter a text for the second line. |
Line 3 Text | Please enter a text for the third line. |
Line 4 Text | Please enter a text for the fourth line. |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
STATIC CONTENT – Video Background
Display a STATIC CONTENT – Video Background
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Line 1 Title | Please enter a title that will appear on the first line. |
Line 2 Title | Please enter a title that will appear on the second line. |
Caption align | Select where to align the captions. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Video link | Please enter the video link as seen in the browser address bar for the desired video. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Example
STATIC CONTENT – Weather Box
Display a STATIC CONTENT – Weather Box
Options
Option name | Description |
---|---|
Element Height | Please read! Enter a numeric value for the slider height. This option works if Fullscreen is disabled. If you don’t add any height, the height will be automatically rely on the content inside the element. |
Enable fullscreen? | Do you want to display the static content as fullscreen? |
Enable scrolling effect? | Do you want to enable the scrolling effects? Might cause performance issues. This options works only if the slider is positioned at the very top opf the page!! |
Parallax Scrolling effect type? | Select the effect type |
Main title | Please enter a main title. |
Subtitle | Please enter a subtitle |
Button Main Text | Please enter a main text for this button |
Button Link Text | Please enter a text that will appear on the right side of the button |
Button link | Please enter a link that will appear on the right side of the button |
Enable Weather? | Enable displaying the weather forecast? |
Location WOEID | Add the location WOEID. You can get one here, or search Google for WOEID to find where to get one. |
Real Location | Add the real location to improve accuracy. City, County, Country etc. |
Display unit | Choose what unit to display the weather info |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Statistics
Display Statistics
Options
Option name | Description |
---|---|
Style | Please select the style you want to use. |
Text theme color | Please select the color theme. |
Bar Color | Color of the separator bar. |
Icons Size | Select the size of the icon. |
Statistics | Here you can create your desired statistics. |
Example
Stats Box
Display Stats Box
Options
Option name | Description |
---|---|
Title | The title for this box |
Tab icon | Select your desired icon that will appear on the left side of the title. |
Stats Boxes | Here you can add your desired stats boxes. |
Example
Steps Box
Display a Steps Box element
Options
Option name | Description |
---|---|
Select style | Please choose a style you want to use. |
Element Height | Select the minimum height of the element. |
Right side background color | Please select the right side background color. |
Icons Size | Select the size of the icon. |
Title | Please enter a title that will appear on the first box |
Subtitle | Please enter a subtitle that will appear on the first box |
Description | Please enter a description that will appear on the first box |
Link Text | Please enter a text that will appear as link in the first box under the description. |
Bottom Link | Please choose the link you want to use. |
Steps | Here you can create your desired Steps. |
Example
Team Box
Display a Team Box element
Options
Option name | Description |
---|---|
Name | Please enter a name for this team member |
Position | Please enter a position for this team member |
Description | Please enter a description for this team member |
Member image | Please select an image for this team member |
Member image Width | Please select the width of the image for this image |
Member image Height | Please select the height of the image for this image |
Image link | Please choose the link you want to use for the image. |
Social Icons | Here you can add your desired social icons. |
Example
Testimonial Box
Display a Testimonial Box
Options
Option name | Description |
---|---|
Testimonial style | Select the desired style for this testimonial element |
Background Color | Here you can choose the background color for this element. |
Quote style | Select the desired style for quotes |
Author | Please enter the quote author name |
Author Company | Please enter the quote author company/function |
Author Quote | Please enter the quote for this author |
Author logo | Please select a logo for this author. |
Example
Testimonial Fader
Display a Testimonial Fader element
Options
Option name | Description |
---|---|
Title | The Testimonials Fader title |
Description | The description for this element |
Transition Speed | T numeric value for the transition speed. Default is 5000 |
Testimonials | Here you can add your testimonials. |
Example
Testimonial Slider
Display a Testimonial Slider element
Options
Option name | Description |
---|---|
Title | The Testimonials Fader title |
Transition Speed | The numeric value for the transition speed. Default is 2500 |
Testimonials | Here you can add your testimonials. |
Example
Text Box
Display a Text Box
Options
Option name | Description |
---|---|
Content | Please enter the box content |
Title | Please enter the title for this box |
Title style | Select the desired style for the title of this box |
Top padding | Select the top padding ( in pixels ) for this section. |
Bottom padding | Select the bottom padding ( in pixels ) for this section. |
Title Element
Display a title and or subtitle
Options
Option name | Description |
---|---|
Title | Add the title. Shorcodes and HTML code allowed |
Sub Title | Add a sub-title. Shorcodes and HTML code allowed |
Alignment | Select the alignment |
Text color theme | Select a theme text color. In case you have a dark background you most definitely want a light colored text |
Top padding | Select the top padding ( in pixels ) for this section. |
Bottom padding | Select the bottom padding ( in pixels ) for this section. |
Add a symbol? | Add any symbol?. |
Symbol Color | Select symbol color. |
Symbol Custom Color | Select symbol color. |
Icon | Add icon. |
Icon Size | Select the icon size in px. |
Symbol position | Select the symbol’s position. |
Some text maybe? | Add a text paragraph. |
Title Heading | Select a title heading. The title will be wrapped in this tag |
Title settings | Specify the typography properties for the title. |
Sub-Title settings | Specify the typography properties for the sub-title. |
Example
Vertical Tabs
Display a Vertical Tabs element
Options
Option name | Description |
---|---|
Select style | Select the desired style for this element |
Tabs | Here you can add your desired tabs. |
Example
Video Box
Display a Video Box element
Options
Option name | Description |
---|---|
Video URL | Please enter a link to your desired video ( Youtube and Vimeo ). |
Image | Please select an image that you want to display.If no image is selected, the video will be shown directly. |
Video title | Please enter a title that will appear over the play icon. This will only be shown if you select an image. |
Example
Wow Slider
Display a Wow Slider
Options
Option name | Description |
---|---|
Slides Height | Select a slider height. Removing the height will add an auto flag which will keep the default images heights. |
Slider Transition | Select the desired transition that you want to use for this slider. |
Caption style | Select caption style |
Autoplay? | Autoplay the carousel? |
Timeout duration | Timeout duration in miliseconds. The time between slides |
Slides | Here you can create your Wow Slider Slides. |
Shadow style | Select the desired shadow that you want to use for this slider. |
Element Background Style | Select the background style you want to use for this slider. Please note that styles can be created from the unlimited headers options in the theme admin’s page. |
Background Source Type | Please select the source type of the background. |
Background image | Please choose a background image for this section. |
Slide Video Youtube ID | Add an Youtube ID |
Mp4 video source | Add the MP4 video source for your local video |
Ogg/Ogv video source | Add the OGG video source for your local video |
Webm video source | Add the WEBM video source for your local video |
Video poster | Using this option you can add your desired video poster that will be shown on unsuported devices. |
Autoplay video? | Enable autoplay for video? |
Loop video? | Enable looping the video? |
Start mute? | Start the video with muted audio? |
Video controls | Enable video controls? |
Video controls position | Video controls position in the slide |
Background colored overlay | Add slide color overlay over the image or video to darken or enlight? |
Overlay background color | Pick a color |
Overlay’s opacity. | Overlay background colors opacity level. |
Overlay Gradient 2nd Bg. Color | Pick a color |
Gradient Overlay’s 2nd Opacity. | Overlay gradient 2nd background color opacity level. |
Bottom masks override | The new masks are svg based, vectorial and color adapted. Disclaimer: may now work perfectly for all elements! |
Example
Widgets
Widgets
Kallyas provides 10 custom widgets that you can use in your website. They can be found in the “Appearance > Widgets” page:
All of them are configurable and very easy to use. All you have to do is drag and drop them into the selected sidebar:
This is the full list of widgets that come with Kallyas:
- Archives (Displays a monthly archive of your website’s posts)
- Categories (Displays a list or dropdown of your website’s categories)
- Contact Widget (This widget will display your content with a “Say Hello” image on the top right)
- Flickr Widget (This widget will display a list of images from Flickr to your website)
- Recent Posts (This widget will display a list of the most recent posts on your site)
- Mailchimp Newsletter (This widget will add a mailchimp newsletter to your site)
- Side by side Menu (This widget will add one of your custom menus as a widget.This widget will display two menu items on a row )
- Social Buttons Widget (This widget will display your desired social buttons)
- Tag Cloud (This widget will display your most used tags in cloud format)
- Twitter Widget (This widget will display your recent tweets)
Shortcodes
Shortcodes
Kallyas provides a great number of shortcodes you can use in your pages, posts, products, portfolio items or documentation pages. To make it easier for you to use them, we’ve added a button to the editor:
You can see the rounded button with the letter “K” inside it only when the editor is in “Visual” mode. Once you click it, the folowing list is presented to you and then you can simply click on the element you want to generate to add it to your page’s content.
Portfolio
Setting up portfolio
Setting up your portfolio is extremely easy. Navigate to your website’s admin area and click on the “Portfolio Items” from the left hand side menu, as you can see in the screenshot below:
After that, you can start adding portfolio items and create categories for them. By default, your portfolio will available at this URL: http://your-website/portfolio, but that can be changed. We’ll show you how to do that in the next section.
Using custom permalinks for portfolio
In this section you will learn how easy it is to change the permalinks that point to your portfolio. In the previous section we were saying that your portfolio would be, by default, available at this address: http://your-website.name/portfolio; but that can be changed to anything you want.
For example, if you want to rename your Portfolio to Showcase, all you have to do is go to General Settings and click on Permalinks. Locate the “Portfolio Slugs” section and update it as you can see in the below picture:
Save settings. Now that you’ve changed the portfolio slug, it will be available at this address: http://your-website.name/showcase.
That’s all there is to it!
Setting up blog
Setting up blog
To setup your blog, is very easy. Navigate to Settings > Reading and select the page you would like to use as the blog page, as you can see in the image below:
Once you save the settings, you can access the blog at this address: http://your-website.name/blog.
Kallyas provides more options to customize the blog page’s appearance and they can be found under Kallyas Options > Blog Options:
As you can see in this image, these are the default values the theme uses to display the blog page.
You can customize the layout by using the “Blog Columns” option to set how the number of columns:
In this example, we have used a 3 columns layout.
The “Archive Page Title” sets the title of the page that will be displayed in the page header. This is a translatable string so if you’re using the WPML plugin you will find this text there, available for translation.
The “Archive page subtitle” sets the page’s subtitle and, if provided, it will be displayed right beneath the “Archive Page Title“. This is also translatable.
The “Use full width image” option refers to how the featured image of the blog entries will be displayed. The “Use default layout” will display blog entries like this:
while “Use full width image” will display them like this:
The “Use first attached image” option, if set to a value of “Yes“, will use the first image found in a blog post as featured image if no featured image is set for that post.
Using child theme
Using child theme
Kallyas was built with extensibility in mind, which means that it can act either as a standalone theme or as a parent theme. When used as a parent theme it will give you a great deal of extensibility because you can extend the Kallyas theme to a whole new level.
By using a child theme, you can change some of the functionality the Kallyas theme provides, this way you can ensure the theme is performing the exact way you want it to. If you don’t know much about Child Themes, here is a good article from WordPress team: https://codex.wordpress.org/Child_Themes.
When using a Child theme, basically you extend or rewrite parts of the parent theme, in our case the Kallyas theme. For some developers and site owners this is an important functionality because some of them might want to execute a different code at a certain time, or extend the default functionality from the parent theme.
Since version 4.0, we have better organized the code so you can find very easy what you’re looking for. We have now grouped all WordPress hooks and custom functionality in various files:
- th-action-hooks.php – This file holds all theme’s functions bound to various action hooks
- th-custom-hooks.php – This file holds all theme’s custom hooks
- th-filter-hooks.php – This file holds all theme’s functions bound to various filter hooks
- theme-functions-override.php – This file holds all theme’s functions bound to various hooks that can be overridden in child themes
Adding custom css
Adding custom css
Kallyas provides now a powerful feature called “Custom CSS“. This is available on both front-end and back-end.
In the front-end, it is located at the bottom of the page, and visible only if the post or page is edited with the new Page Builder, as you can see in the image below:
All the style rules added in this section will be saved and later on dynamically added in the header of the page. So these style rules will be visible for this page only.
If you want to customize the theme at a larger scale, you can use the “Custom CSS” form available in the theme’s options under the “Advanced options” section:
All the style rules added in this section will be saved into a css file called “zn_dynamic.css” which is located in the “wp-content/uploads” directory. This file will be loaded on every page of your website.
Page specific options
Page specific options
To better manipulate the layout of a post or page we have added a set of options that will be available when editing a post or page.
“Post Layout Options” allows you to specify whether or not the page will have a sidebar. You can either set it to the left of the content or to the right.
“Select sidebar” dropdown will give you the possibility of choosing what sidebar to be displayed. THis dropdown will list all sidebars created in the theme.
“Show Social Share Buttons?” allows you to control the displaying of the Social Media links, like G+ or Twitter.
“Hide page subheader?” allows you to hide the page subheader, including the sliders (if any was set globally).
Additional help
Configure MailChimp
Kallyas is using MailChimp for subscription forms. In order to be able to use this functionality you must first enter your MailChimp Api Key in the Theme Options page:
These two articles will give you more info about how to get your API key:
- http://kb.mailchimp.com/accounts/management/about-api-keys
- https://support.leadpages.net/hc/en-us/articles/203522270-How-do-I-find-my-MailChimp-API-token-or-key-
You will also need to create a List on your MailChimp account page. The lists you create there will automatically be retrieved by Kallyas once you add your MailChimp API key. The lists are displayed in to places:
Kallyas options > Coming Soon:
Appearance > Widgets > [Kallyas] Mailchimp Newsletter:
This article will guide you through the process of creating a List:
- http://kb.mailchimp.com/lists/growth/create-a-new-list
Google Analytics
To add Google Analytics in your website, you need to go to Kallyas options and add the code from Google Analytics:
These article will show you how to find your Google Analytics code:
- https://support.google.com/analytics/answer/1032385?hl=en
Facebook API key
In order to be able to use and display Facebook buttons on your website you need to add your Facebook API key in the Theme Options as you see in the below image:
This article will show you how to get your API key:
- http://www.shoutmeloud.com/how-to-acquire-your-facebook-api-key.html
Configure reCaptcha
To be able to use ReCaptcha on your website you need to add your ReCaptcha API key in the Theme Options:
This article will walk you trough the process of getting the API key:
- https://developers.google.com/recaptcha/docs/start?hl=en
Automatic updates
Kallyas can provide you with an easy way to update the theme. To be able to use this functionality you must first provide your Themeforest username and API key in the Theme Options:
These are the steps to get your API key:
- Log into your ThemeForest account and click your username in the top right corner to access the dropdown. Then, select the “Settings” link (Image 1).
- After the “My Account” page loads, click the “API Keys” tab on the left side (Image 2).