1. In Wordpress Admin go to "Scalia Import"
2. After that click on the button "Import Main Demo Content"

3. Import process will start. Do not close the active browser tab while importing. It will take a few minutes to install and upload all content because of many demo pages and media attachments
4. Wait till 100% of import is accomplished. After that all demo content is successfully imported and you can proceed with next step "IMPORTING LAYERSLIDER" and "SCALIA MAIN THEME DEMO" (see below)

IMPORTING DEMO CONTENT OF CHILD THEMES - GENERAL STEPS

1. In Wordpress Admin Go to Tools -> Import
2. Select and install WordPress importer
   
3. After installation click on "Activate & run importer", select the appropriate XML file from "Demo_Content" directory supplied with the theme and upload it:
   
   
   • Scalia.Zaro.xml -> Demo Content of the Zaro online shop child demo
   • Scalia.One_Page.xml - > Demo Content of the One-Page child demo
   • Scalia.Scrollex.xml - > Demo Content of the Scrollex product presentation child demo
   • Scalia.Dear_Diary.xml - > Demo Content of the Dear Diary child demo
   
   It will take a few minutes to install and upload all content. If The XML file will not load or you get an error like Fatal error: Allowed memory size of... or 500 internal server error you have two options:
   • Increase allowed memory size and script exectuion time in your server's PHP settings. We would recommend memory_limit = 256M and max_execution_time = 400. If you cannot do it by yourself, contact your hoster to increase these values
   • Or just leave the "download images and attachments" box unchecked. That will give you all the pages and posts without media attachments.
   If you still have problems with importing demo content, check section RESOLVING ISSUES WITH DEMO IMPORT
   
   
   
   NOTE: do not close the active browser tab while importingDuring importing of demo content you can get messages like Media “XYZ” already exists. Please ignore this messages. If the import succeeded you will get a message All done. Have fun! at the bottom of the page.
   

1. Go to "Appearance -> Menus" page and select "Manage Locations" tab. Here select following
   
   
   • For Top Primary Menu -> Primary
     
   • For Footer Menu -> Footer
     
   
   and finally click on "Save Changes".
   

2. Next, go "Settings -> Reading", select a static page option to be displayed as your front page and choose "index" page from the select box "Front page". Save your changes.
   
3. And finally, in order to set widgetised footer just like in demo, got to Appearance -> Widgets. Select following widgets for Footer widget area:

• Contacts. Use following content for this widget:
  a) Title: CONTACTS
  
• Custom Recent Posts:
  a) Title: RECENT POSTS
  b) Number of posts: 2
  c) Category: Planning
  
• Mailchimp Sign-Up Form:
  a) Title: NEWSLETTER

1. IMPORTANT: Please install WooCommerce plugin in order to get demo content appear on your website
2. Now go to "Appearance -> Menus" page and select following:
   
   
   • For Top Primary Menu -> Top-Menu
     
   
   and finally click on "Save Menu".
   
3. Next, go "Settings -> Reading", select here Your latest posts to be displayed as your front page. Save your changes.
4. Now go to Appearance -> Theme Options -> Home Constructor. Check the option Activate Home Constructor. Now you can set up your homepage content just like on demo website. Following content blocks should be drag'n'dropped to homepage content area:
   
   • Slideshow -> LayerSlider -> Homepage Slider (be sure you have already imported Layerslider demo content, as described above)
   • Page -> Splash 1
   • Page -> Splash shop categories
   • Page -> Splash 2
   • Page -> Splash Newcomers
   • Page -> Vivamus sagittis neque et nunc
   
5. And finally, in order to set widgetised footer just like in demo, got to Appearance -> Widgets. Select following widgets for Footer widget area:

• Text. Use following content for this widget:
  a) Title: CONTACTS
  b) Content:
  <p> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. </p>
  <div class="sc-contacts">
  <div class="sc-contacts-item sc-contacts-address">19th Ave Sacramento, CA 95822, USA</div>
  <div class="sc-contacts-item sc-contacts-phone">Phone: +321 012 7896</div>
  <div class="sc-contacts-item sc-contacts-email">
  Email: <a href="mailto:youdomain@gmail.com">youdomain@gmail.com</a>
  </div>
  </div>
  
• WooCommerce Top Rated Products: a) Title: BEST SELLERS b) Number of products to show: 3
• WooCommerce Products: a) Title: ONSALE b) Number of products to show: 3 c) Show: All Products d) Order by: Date
• WooCommerce Recent Views: a) Title: RECENT REVIEWS b) Number of reviews to show: 3

1. Now go to "Appearance -> Menus" page and select following:
   
   
   • For Top Primary Menu -> Top-Menu
     
   
   and finally click on "Save Menu".
   
2. Next, go "Settings -> Reading", select here Your latest posts to be displayed as your front page. Save your changes.
3. Now go to Appearance -> Theme Options -> Home Constructor. Check the option Activate Home Constructor. Now you can set up your homepage content just like on demo website. Following content blocks should be drag'n'dropped to homepage content area:
   
   • Slideshow -> LayerSlider -> Homepage Slider (be sure you have already imported Layerslider demo content, as described above)
   • Page -> Splah page Part 1; Block ID: about
   • Page -> Splah page Part 2; Block ID: features
   • Page -> Splah page Part 3; Block ID: highlights
   • Page -> Splah page Part 4
   • Page -> Splah page Part 5; Block ID: team
   • Page -> Splah page Part 6
   • Page -> Splah page Part 7; Block ID: casestudies
   • Page -> Splah page Part 8
   • Page -> Splah page Part 9; Block ID: contact
   
4. And finally, in order to set widgetised footer just like in demo, got to Appearance -> Widgets. Select following widgets for Footer widget area:

• Contacts
• Text. Use following content for this widget:
  a) Title: -
  b) Content:
  [vc_row][vc_column width="1/1"][sc_divider margin_bottom="27"][vc_column_text] <div class="title-h4" style="text-align: center; font-size: 40px;"><span style="color: #ffffff;">Terms and conditions</span></div> [/vc_column_text][sc_divider margin_bottom="27"][vc_row_inner][vc_column_inner width="1/2"][vc_column_text]<span style="font-size: 15px; color: #ffffff;">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit. Duis sed odio sit amet nibh vulputate cursus.</span>[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text]<span style="color: #ffffff; font-size: 15px; ">Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate. </span> [/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]
That's all! You are done!




SCALIA SCROLLEX CHILD DEMO

The following steps are specific for Scalia Scrollex Child.
1. Now go to "Appearance -> Menus" page and select following:
   
   
   • For Top Primary Menu -> Top-Menu
     
   
   and finally click on "Save Menu".
   
2. Next, go "Settings -> Reading", select here Your latest posts to be displayed as your front page. Save your changes.
3. Now go to Appearance -> Theme Options -> Home Constructor. Check the option Activate Home Constructor. Now you can set up your homepage content just like on demo website. Following content blocks should be drag'n'dropped to homepage content area:
   
   • Slideshow -> LayerSlider -> Slider (be sure you have already imported Layerslider demo content, as described above)
   • Page -> About; Block ID: about
   • Page -> Design; Block ID: design
   • Page -> Features; Block ID: features
   • Page -> Gallery; Block ID: gallery
   • Page -> Order; Block ID: order
   • Page -> Newsletter; Block ID: newsletter
   • Page -> Call Us; Block ID: call-us
4. And finally, in order to set widgetised footer just like in demo, got to Appearance -> Widgets. Select following widgets for Footer widget area:
• Visual Editor. Use following content for this widget:
  a) Title: -
  b) Content:
  <div style="text-align: center;"><img class=" size-full wp-image-4426" src="http://codex-themes.com/scalia/scrollex/wp-content/uploads/2015/03/footer-logo.png" alt="footer-logo" width="81" height="34" /></div> <div class="title-h5" style="text-align: center;"><span style="color: #ffb932;">TERMS & CONDITIONS</span></div> [vc_row][vc_column width="1/3"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][/vc_row]
That's all! You are done!




SCALIA DEAR DIARY CHILD DEMO

The following steps are specific for Scalia Dear Diary Child.
1. Now go to "Appearance -> Menus" page and select following:
   
   
   • For Top Primary Menu -> Primary
     
   
   and finally click on "Save Menu".
   
2. Next, go "Settings -> Reading", select here Your latest posts to be displayed as your front page. Save your changes.
3. Now go to Appearance -> Theme Options -> Home Constructor. Check the option Activate Home Constructor. Now you can set up your homepage content just like on demo website. Following content blocks should be drag'n'dropped to homepage content area:
   
   • Page -> Splash part 1
   • Page -> Splash part 1
4. And finally, in order to set widgetised footer just like in demo, got to Appearance -> Widgets. Select following widgets for Footer widget area:
• Custom Recent Posts Use following content for this widget:
  a) Title: Recent Posts
  b) Items: 2
  
• Contacts Use following content for this widget:
  a) Title: Contacts
  
• Mailchimp SignUp Form: Use following content for this widget:
  a) Title: Newsletter
  
• Visual Editor Use following content for this widget:
  a) Title: Other Widget
  b) Content: any text you wish
  
That's all! You are done! NOTE: Make sure the wp-content > uploads folder is writeable




RESOLVING ISSUES WITH DEMO IMPORT

If you have some issues with importing demo content - for example your php settings on your server are limited / restricted and import process stops without finishing - it is recommended to make a step-by-step partial import of demo content. This method is also recommended, if you don't wish to import the whole demo content, but only some special posttypes like pages, posts, portfolios, products etc.
To start pls make sure your wordpress installation is set to default (there are no media files in media library, there are only a default sample posts and pages, set by wordpress installation). If you need to reset your wordpress to defaults, you can use following plugin - https://wordpress.org/plugins/wordpress-reset/

STEP 1

If you need to import demo media files (images from our demo website), first begin with this import:
1. In Wordpress Admin Go to Tools -> Import
2. Select and install WordPress importer
3. After installation click on "Activate & run importer"
4. Now select following demo content file from the folder "Demo_content/Main_Demo_Separate_Posttypes/": media_attachments.xml
5. Upload this file
It can take some time before the media content will be imported. Pls don't close the active tab with your import process before it is not finished. It can happen, that you will repeat these steps several times, if your import stops without finishing. Each time import of media content stops pls check your media library, you should have here approx. 1000 media files after importing

STEP 2

Now you can proceed with importing the demo files of posttypes you wish to import. The steps are the same as described above in STEP 2, but now you just select the appropriate demo content file from folder "Demo_content/Main_Demo_Separate_Posttypes/":
• pages_default.xml: Demo Pages
• posts_default.xml: Demo Blog Posts
• news_default.xml: Demo News
• portfolio_items_default.xml: Demo Portfolios
• team_default.xml: Demo Teams
• clients_default.xml: Demo Clients
• testimonial_default.xml: Demo Testimonials
• galleries_default.xml: Demo Galleries
• quickfinders_default.xml: Demo Quickfinders



STEP 3

The final step is to import menu items. Pls proceed with the same steps as described in STEP 2, but now pls select menu_default.xml to import.
That's all.




PLUGINS

In order to use Scalia in its full, please note, that following plugins SHOULD BE should be installed during the theme installation (see installation instructions above):
• SCALIA THEME ELEMENTS- essential set of all Scalia's features, functions, shortcodes & custom post types
• VISUAL COMPOSER- leading visual drg'n'drop page builder for Wordpress
• LAYERSLIDER- awesome multi-layer slideshow plugin
• PAGE WIDGETS- flexible & powerful pluging for creating sidebar content
You can take an advantage of enriching your Scalia's experience with following recommended plugins:
• SCALIA IMPORT - one-click import of demo content of main multipurpose demo website
• MAILCHIMP SIGNUP- mailchimp newsletter signup form
• CONTACT FORM 7- one of the most popular plugins for managing contact & feedback forms
• JW PLAYER PLUGIN- video player for playing self hosted videos
These plugins are included in Scalia, you don't need to purchase them extra!




TEMPLATES, CSS & JAVASCRIPT





TEMPLATES

Theme folders:

cache - TWITTER WIDGET CACHE
css - ADMIN, SKINS & ADDITIONAL STYLES
fonts - FONTS FOR ICONS & BASIC THEME TEXT FONTS
images - STYLES IMAGES
js - JAVASCRIPTS
languages - THEME TRANSLATIONS
plugins - INCLUDED PLUGINS

This theme comes with following templates:

404.php - 404 ERROR TEMPLATE
category.php - SYSTEM CATEGORY PAGE TEMPLATE
comments.php - COMMENT BLOCK TEMPLATE
footer.php - FOOTER TEMPLATE
functions.php - BASIC THEME FUNCTIONS
header.php - HEADER TEMPLATE
home.php - HOME PAGE TEMPLATE
index.php - BASIC POST/PAGE/BLOG TAMPLATE
options.php - OPTIONS FRAMEWORK
page.php - BASIC PAGE TEMPLATE
page_blog.php - BLOG FULLWIDTH PAGE TEMPLATE
page_blog_sidebar.php - BLOG WITH RIGHT SIDEBAR PAGE TEMPLATE
page_blog_sidebar_left.php - BLOG WITH RIGHT SIDEBAR PAGE TEMPLATE
page_contact.php - CONTACT PAGE TEMPLATE
page_sidebar.php - PAGE WITH RIGHT SIDEBAR TEMPLATE
page_sidebar_left.php - PAGE WITH LEFT SIDEBAR TEMPLATE
redirect-page-template.php - REDIRECT PAGE TEMPLATE
sidebar.php - BASIC SIDEBAR TEMPLATE
sidebar-blog.php - BLOG & SIMPLE POST SIDEBAR TEMPLATE
single.php - SINGLE POST TEMPLATE
single-portfolios.php - SINGLE PORTFOLIO TEMPLATE





CSS

style.css - BASIC THEME STYLE CSS
jquery-ui.min.css, jquery-ui.css - styles for jquery-ui





JAVASCRIPT & JQUERY

js\clients.js - CLIENTS
js\diagram_circle.js - DIAGRAM
js\diagram_edit.js - DIAGRAM
js\diagram_line.js - DIAGRAM
js\drop-down-menu.js - DESKTOP DROPDOWN MENU
js\gallery.js - GALLERY
js\jquery.carouFredSel.js - CAROUSEL
js\jquery.dlmenu.js - DROPDOWN MENU RESPONSIVE
js\jquery.lazyLoading.js - LAZY LOADING
js\portfolio.js - PORTFOLIO
js\quickfinder.js - QUICKFINDER
js\testimonials.js - TESTIMONIALS





USING YOUR OWN WEBFONTS

Scalia comes with a Google Font API, allowing you to choose among tons of different fonts. However you can add your own webfonts to use on your website. To do this, go to "Appearance -> Fonts Manager". Here you can upload your own webfonts and make the appropriate settings for embedding.





PAGES





TYPES OF PAGES / PAGE TEMPLATES

Scalia is delivered with following page templates:


Default Template
This is the main template for most of the pages & portfolio items. It is used to display the page content in full-width mode or with left / right sidebars.
Blog Page
Template for displaying blog posts
Redirect Subpage
This is used to make the automatic redirect from this page to the fist subpage. This template is useful for navigation, if you like to redirect your website visitor from the toplevel menu option to the first sublevel menu option.




ADDING NEW PAGE

You can add new page to your website by clicking on Pages ➜ Add new in the leftside wordpress panel.

As usual, you have following content fields:

Title (1)
Title of your page = Title of your page's content
WYSIWYG Editor for main content (2)
Here you enter your page's content.
Template Selectbox (3)
Here you can choose a page template you wish to use
Visual Composer (4)
Both Backend & Frontend Editor Controls of Visual Composer.





PAGE OPTIONS / SETTINGS

Under the wysiwyg editor you see several panels with different page options. Note: these options are a simple way to add some additional special content to your page main content. Of course you can also add all these elements using the shortcodes (see description below)

Page Title
In this option you can make customize and make settings for the page header with title and excerpt text. Please note, that the page's title is a title of your article, and page's subline is excerpt text.



• Title Style: Scalia comes with two different styles of displaying your page title. Or you can disable your title here.
• Background Image: here you can set the background image for page title bar. You can select from the set of pre-defined styles/images by clicking on one of them, or you can upload your own image
• Background Color: if you don't wish to use an image for header's background, here you can choose some color using colorpicker
• Title Text Color: Font color for the title of the page
• Excerpt Color: Font color for the subline of the page
• Excerpt: Here you can enter excerpt / subheader text for your title
• Icon: if you wish to display an icon in your page title, here you can choose from over 400 icons. Just click on "Show icon codes", copy the code of the icon you wish to use in the lightbox icon overview and paste this code here
• Icon Color: Choose the main font color of your title icon here
• Icon Color 2: If you wish to make your icon bicolored, here you can choose the second font color for your icon
• Icon Style:Needed for bicolored icons - here you can define the angle of color splitting on your icon
• Icon Background Color: Choose the background color of your icon
• Icon Border Color: Choose the border color of your icon
• Icon Shape: You can choose between squared and rounded icon shape here
• Icon Size: In which size your icon should appear
Page Sidebar
Here you can enable a sidebar to be shown on your page. You can select whether to show right or left sidebar. Also you can enable "sticky sidebar" to make your sidebar fixed by vertical scrolling.
Page Widgets
This set of options is relevant if you have enabled a sidebar in "Page Sidebar" section. Here you can choose, whether you want to use a default sidebar (by selecting "default" setting) or customized sidebar on your page. To easily customize your page sidebar you can simply drag-and-drop any widgets of your choice from Available Widgets panel to the Page Sidebar panel. See chapter Sidebars for details.

Page Blog
Set of blog display settings for your page, if you have selected "Blog page" as template.
Lazy Loading & Bottom Margin Options
In this option you can activate or deactivate lazy loading animations for the content elements of your page. Also here you can "stick" the bottom of the page to the footer without any gaps.
Page Slideshow
Here you can define if you would like to use the slideshow on your page. See chapter Slideshows for details.
Page Quickfinder
Options for setting up and activating quickfinders on your page. See chapter Quickfinders for details.
Page Portfolio
If you want to use any portfolio overviews on your page here you can make different settings for position, layout etc. of portfolios. See chapter Portfolios for details.
Page Gallery
Settings for using galleries on your page. See chapter Galleries for details.




BUILDING PAGES

Building with Visual Composer

The easiest way of building your pages in Scalia is to use Frontend Editor of Visual Composer. Here you have the full control over layout of your content as well as all of the shortcodes and its options.



Using Shortcode Generator

Additionally in Scalia you can easily add and customize all scalia's shortcodes by using Shortcode Options panel. Here you can select a shortcode you would like to use in your content - after that you automatically gets the number of options/settings you can use to customize your shortcode element. By clicking on Insert Shortcode the appropriate shortcode will be generated basing on the selections you've made and it will be automatically inserted in your WYSIWYG editor. Detailed description of all in Scalia available shortcodes you can find in chapter Shortcodes.






Sidebars

In Scalia you can create default sidebars as well as customized sidebars for your pages. For example if you want, that a number of pages always use the same sidebar with the same widgets, you create a default sidebar. Or if you want, that some pages have completely different widgets and content, you can create customized sidebars.




TYPES OF SIDEBARS IN Scalia

There are two major sidebars in Scalia, which could be used:

Default Sidebar
• Page Sidebar: this sidebar is used for normal pages, portfolio pages, news and posts pages
• Footer Widget Area: this sidebar is used for footer area of your pages, posts etc.
Customized Sidebar
• you can create your own page and footer widget sidebars on any page you wish




DEFINING DEFAULT SIDEBARS

To define default widgets for your page sidebars, go to Appearance ➜ Widgets.
To the left you can see the big panel Available Widgets - all of these widgets you can use on your pages in sidebars (For description of widgets see chapter Widgets). To the right you see two sidebar panels - Page Sidebar and Footer Widget Sidebar. Now you can start filling your sidebars with the desired widgets - simply drag and drop the widget of your choice from Available Widgets to Page Sidebar (or if you fill your widgetised footer - to Footer Widget Area) panel. Now all the widgets you have dragged to your sidebar panels are automatically available in all default sidebars you have added in your pages.





ADDING YOUR OWN PAGE SIDEBAR / CUSTOMIZING PAGE SIDEBARS

if you want to use a customized sidebar on your page, simply use the settings in Page Widgets panel in the page or portfolio item page. Here you should select Customize (is selected by default if you create new page) and then simply drag-and-drop any widgets of your choice from Available Widgets panel to the Sidebar panel. After setting up / filling your widgets don't forget to click on [save] at the bottom of each widget to save your widget settings for this customized sidebar! For detailed description of all available widgets see chapter Widgets.





Widgets

Following widgets are available in Scalia. NOTE: almost all of the following widgets have own Title field, where you can define the title of your widget to be shown on the page.




VISUAL EDITOR

This is a full-functional WYSIWYG Editor you can use to create some information boxes in the sidebar of your pages. As in any richt text editor, you can use any formatting or any media content you wish as well as all of the Scalia shortcodes.
SEE DEMO »- Check "SIDEBAR ACCORDION" in the right sidebar





TEXT

Text is a simple textbox/infobox you can use to highlight some brief facts / information for you page article. Here you don't have any editor for formatting your text - you can do it only via HTML code.




PICTUREBOX

Picturebox is like an image infobox for your page. With this widget you can insert an image in your sidebar by selecting it from the media library or uploading it from your computer - with own title, own description and own link.
SEE DEMO »- Check first widegt in the right sidebar





PROJECT INFO / CONTACT INFO / CUSTOM ICONED FIELDS

This widget is especially useful for project/product pages, contact pages or any pages, where you wish to emphasize some brief facts using separate fields with nice icons.

There are two design styles of this widget you can choose from. This widget consists of ten fields. In each field you can define:
• Field's title: like a label of your field
• Field's value: values for this label
• Field's Icon: icon for this label. To define the desired icon just click on "Show Icon Codes", find the icon you need, copy the icon code and paste it in this field.
SEE DEMO STYLE 1»
SEE DEMO STYLE 2»





SUBMENU

Submenu widget builds automatically the submenu navigation on your page depending on the position of your page inside the website structure. In the widget settings you can select the menu, for which the submenu should be built.
SEE DEMO »





TEAM

If you wish to show your team persons in the sidebar on some pages, use this widget. Just select one or multiple team sets by clicking on checkboxes. If you have several persons in the set, they will be shown on the page with a fading in / fading out effects. For details concerning the adding and grouping your team members see chapter Team.
SEE DEMO »





TESTIMONIALS

Just like your team members, you can show testimonials of your customers in the page sidebar. Just select one or multiple testimonial sets by clicking on checkboxes. If you have several testimonials in the set, they will be shown on the page with a fading in / fading out effects. In Scalia there are two different styles of displaying testimonials in sidebar; you can choose between them in selectbox "Style"
SEE DEMO »





DIAGRAM

Diagrams are essential for demonstrating any kind of skills, developments, shares & ratios. Scalia has a built-in widget for displaying two different kinds of diagrams: bars & circles. Bar diagrams are animated and circle diagrams are interactive on mouse-over:

• Type: here you choose what kind of diagram you would like to show - lines/bars or circles.
• Skills: in this block you define one digram's value, its label and color.
• Add Skill:in order to add one more value to your diagram click on "Add Skill" and fill in the appropriate fields.
SEE DEMO »





FLICKR / PHOTOSTREAM

Using this widget you can display a photostream from Flickr in the page sidebar. In order to activate the photostream you should enter the flickr ID of the corresponding profile (you can find out your flickr ID here: HTTP://IDGETTR.COM/ You can also define the number of images you would like to show in this widget - by setting them in the field Items
SEE DEMO »





FACEBOOK PAGE

To add facebook plugin in your sidebar, use this widget. Just type the URL of your facebook profile page and you are done.






TWITTER

Display your recent tweets in the page sidebar. To enable this widget you should first create your twitter app for your website here
HTTP://DEV.TWITTER.COM/APPS

After creating and enabling your twitter app, type the following values in the widget settings to activate this widget: Consumer Key, Consumer Secret, Access Token, Access Token Secret, Twitter ID.
In the field Number of Tweets you can define the number of recent tweets you'd like to show in your sidebar.






CUSTOM RECENT POSTS / POPULAR POSTS

Show your recent or most popular blog posts in the sidebar - just select the number of posts to be shown in the widget box.




CUSTOM MENU

Create your custom navigation menu in your sidebar. Like in Submenu widget you should only choose the menu which you have created under Appearance ➜ Menus




CONTACTS

Display your contact information you have defined in theme options




MAILCHIMP SIGNUP

Adds the newsletter signup form to your sidebar




Page Builder

Scalia includes two powerful tools to make your work on page building and layouting as simple as possible. You can choose between powerful Visual Composer (the best frontend and backend drag & drop page builder for Wordpress) and built-in Shortcode Generator (which enables you to create and insert any shortcodes in just few clicks). In this chapter we will cover both page builders and explain all shortcodes used in Scalia in details.




VISUAL COMPOSER

Visual Composer is a great tool for creating page layouts and content "on-the-fly", in backend or in frontend mode by simple drag&drop of different content and page elements. Visual Composer is a required plugin and should be installed in the process of Scalia's theme installation (see Chapter "Installing Scalia")




BUILDING PAGES

Before getting started with building layouts with Visual Composer, it is necessary to take a look at its documentation here: http://kb.wpbakery.com/index.php?title=Visual_Composer. Please note, that Visual Composer inside Scalia is optimised for this theme, so all content elements and shortcodes you have here are Scalia-related.
By default, Visual Composer is enabled for Pages, Portfolio, Products, Posts & News; however you can also enable it for other post types, if you need it. To do this go to "Settings > Visual Composer” and make your selection.

To start creating new page layout you can choose wether to do it in backend or in frontend editor. We recommend to use Frontend Editor, because it is a real "What You See Is What You Get" way to build your pages. Click on "Front End Editor"

and you will be switched to Visual Composer Frontend Editor:

Here you might want to begin with adding a new content element by clicking on "Add element". After that the overview of all content elements will be displayed:

You can begin with adding a new content row in your page; choose "Row". You will be switched to your page with added row element. Now you can edit its properties like for example number of columns and layout:

In this way you can add and edit all other elements; you can combine them with each other and drag-n-drop them:

If you like to create your pages in backend mode, click on "Backend Editor" and your WYSIWYG editor change to Visual Composer canvas

Now you can begin to build your layout by clicking on "Add element" - the same way as in Fronend Editor (described above)




SHORTCODE GENERATOR

If you don't like Visual Composer or prefer to work in another way, you can take a use of Shortcode Generator Scalia comes with. Shortcode Generator enables you to create and insert any shortcodes in just few clicks. This works in three steps:
1. Put your mouse cursor at the position in content, where you wish to insert your shortcode
2. Choose the shortcode which you wish to use in the list of available shortcodes
3. Make your desired settings
4. Click on “Insert Shortcode”. That’s all! Your shortcode will be automatically generated and inserted in your content.



Following shortcodes are included in Scalia:




DIVIDER / SEPARATOR

This is probably the most importarnt element / tool to make your pages pixel perfect. With this element you can manage your horizontal margins & paddings very precisely. Another useful feature of this shortcode is to insert nice colorful content dividers SEE DEMO »
To insert divider / separator, choose this element from the list of Scalia's shortcodes here:





Style:select the style of your separator. If you wish to use divider to set horizontal margins, use preselected "1px" style

Color: select the color of your separator. Note, that Zigzag & Wave separators are made as pngs and it is not possible to set its color here

Margin top: set the top margin in px. NOTE: you can also use negative values (i.e. -27) to reduce margins!

Margin bottom: set the bottom margin in px. NOTE: you can also use negative values (i.e. -27) to reduce margins!


Shortcode Syntax:

[sc_divider margin_bottom="27" color="#ffffff" margin_top="-27" style="2"]





FONT ICONS

Scalia has a set of more than 400 built-in icons, which you can easily insert into your content.



ICON

To insert some icon into your content, use Icon shortcode.





Icon: select the icon you wish to use by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field "Icon".

Shape: select the shape of the icon

Style: in Scalia you can use bicolored icons. In this field "Style" you can select the angle of color splitting in bicolored icon. By default only one color will be applied.

Color: select the main font color of your icon using the colorpicker or typing the hex value

Color 2: select the second font color of your icon, if you wish to use bicolored icon. Your icon will then appear in two colors (color / color 2), splitted by the angle you have selected in Style field above

Background Color: choose the color of icon's background using the colorpicker or typing the hex value

Border Color: choose the color of icon's border using the colorpicker or typing the hex value

Size: select the size of your icon

Link: if you wish to link your icon, type in the desired URL here

Link target: select the link target for your icon's link here

Centered: activate this checkbox if you wish to center your icon in content

Shortcode Syntax:

[sc_icon shape="circle" style="angle-90deg" size="big" link_target="_blank" centered="1" icon="e610" color="#e52020" color_2="#ff7c3a" background_color="#ffffff" border_color="#ffffff" link="http://www.google.de"]

SEE DEMO »




TITLE WITH ICON

This shortcode is quite similar to Icon shortcode described above, but it gives an option to insert some title in combination with the icon. All settings are quite similar to the settings of Icon shortcode (see above).




ICON WITH TEXT

This shortcode is quite similar to Icon shortcode described above, but it gives an option to insert a text container, starting with icon. All settings are quite similar to the settings of Icon shortcode (see above). href="http://www.codex-themes.com/Scalia/shortcodes/font-icons/" target="_blank" class="gray">SEE DEMO »





FULLWIDTH & PARALLAX AREA

By using this shortcode you can insert and style 100% width areas with optional parallax anywhere on your page and add to this area any content & shortcodes you wih.
To insert fullwidth container, choose this element from the list of Scalia's shortcodes here:





Color:select the font color for the text content you will insert in your fullwidth area

Background Color: select the background color for your fullwidth area

Background Image: or select some image to be used as background image of fullwidth container. For parallax areas we advice to use large images in 1902 x 1200 px resolution

Background Style: choose a style of displaying background image

Background horizontal position: choose the horizontal position of your background image

Background vertical position: choose the vertical position of your background image

Parallax: enable parallax effect if you wish to use parallax

Padding top: set the top padding of the fullwidth area in pixel

Padding bottom: set the bottom padding of the fullwidth area in pixel

Padding left: set the left padding of the fullwidth area in pixel. NOTE: set this padding to "0" if you wnat to avoid any paddings to the left

Padding right: set the right padding of the fullwidth area in pixel. NOTE: set this padding to "0" if you wnat to avoid any paddings to the right

Container: enable this option if you don't want to display the content inside your fullwidth area in 100% width layout, i.e. to display your content width limited to main website content width



Styled marker: choose if you wish to dispaly a styled marker and on which position







After adding a fullwidth container, you can add any content element inside it by simply clicking on "+" symbol on it:


Shortcode Syntax:

[sc_fullwidth background_color="#f1f5f8" background_style="cover" background_position_horizontal="center" background_position_vertical="center" background_parallax="1" padding_top="120" padding_bottom="120" padding_left="0" padding_right="0" styled_marker="top" color="#7a7a7a" background_image="9185" container="1"][/sc_fullwidth]

SEE DEMO »






BUTTONS & ALERT BOXES





BUTTON


To insert a button in your content use Button Shortcode:

Link: define the link of your button

Text: define the label of your button

Title: Value for title attribute

Link Target: Value for target attribute

Color: Select the font color of the button's label

Background color:Select the background color of the button

Centered:Choose if you wish to center your button inside the content container

Separator Style:Optionally you can select an additional separator to be displayed around your button

Shortcode Syntax:

[sc_button link_target="_self" centered="1" separator_style="double" effects_enabled="1" link="http://www.google.de" text="MY BUTTON" title="Button" color="#ffffff" background_color="#39baad"]

SEE DEMO »




CUSTOMIZING DEFAULT BUTTON COLORS

If you wish to customize default button colors, use Theme Options under Appearance. Here choose Colors and Button Colors panel. Here you have following options:

Basic Text Color: Font color of button's label

Hover Text Color: Font color of button's label if hovered

Active Text Color: Font color of button's label if clicked

Basic Background Color: Button's background color

Hover Background Color: Button's background color if hovered

Active Background Color: Button's background color if clicked






CTA / ALERT BOX


To insert an CTA / alert box in your content use Alert Box Shortcode:

Icon: select the icon you wish to use in your CTA by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field "Icon".

Image: you can also use an image instead of icon to be displayed in your CTA by clicking on Image. Media library will open and here you can choose the desired image

Icon Shape: select the shape of the icon. Note, that this shape will also apply to your CTA image, if you have decided to use an image instead of an icon

Icon Style: in Scalia you can use bicolored icons. In this field "Style" you can select the angle of color splitting in bicolored icon. By default only one color will be applied.

Icon Color: select the main font color of your icon using the colorpicker or typing the hex value

Icon Color 2: select the second font color of your icon, if you wish to use bicolored icon. Your icon will then appear in two colors (color / color 2), splitted by the angle you have selected in Style field above

Icon Background Color: choose the color of icon's background using the colorpicker or typing the hex value

Icon Border Color: choose the color of icon's border using the colorpicker or typing the hex value

Icon Size: select the size of your icon



Button Link: define the link of your main CTA button

Button Text: define the label of your main CTA button

Button Title: Value for title attributeof your main CTA button

Button Link Target: Value for target attribute

Button Color: Select the font color of the button's label

Button Background color:Select the background color of the button

Button 2 Link: optionally define the link of your second CTA button

Button 2 Text: optionally define the label of your second CTA button

Button 2 Title: optionally Value for title attribute of your second CTA button

Button 2 Link Target: optionally Value for target attribute of your second CTA button

Button 2 Color: optionally Select the font color of the button's label of your second CTA button

Button 2 Background color:optionally Select the background color of your second CTA button

Background image:if you wish to use an image as background of your CTA, here you can select this image from your media library



Background color:or you can use just some color for your CTA's background

Border color:color of your CTA's border

Shadow:select this checkbox if you wish to add a shadow to your CTAr

Centered:Choose if you wish to center your icon / image / buttons inside the CTA container



Shortcode Syntax:

[sc_alert_box icon_shape="circle" icon_style="angle-90deg" icon_size="big" button_link_target="_self" button_2_link_target="_blank" background_color="#f1f5f8" shadow="1" centered="1" icon="e6e3" icon_color="#dd3333" icon_color_2="#ff9999" icon_background_color="#ffffff" icon_border_color="#ffffff" button_link="http://www.google.de" button_text="Button 1" button_title="Button 1" button_color="#ffffff" button_background_color="#37b29d" button_2_link="http://www.bing.com" button_2_text="Button 2" button_2_title="Button 2" button_2_color="#ffffff" button_2_background_color="#add81e" border_color="#d6d6d6"][/sc_alert_box]






STYLED GALLERIES




See detailed description of galleries in Chapter Galleries.

Scalia has a number of different gallery types which you can use to display your images in content by inserting a simple shortcode Gallery:

Gallery Post ID: Enter the ID number of the gallery you wish to insert. ID number you can find in Galleries - click on the desired gallery - in panel Gallery Manager you see the ID number

Gallery type: Here you can select the type of your gallery. You can choose between:

• Slider - gallery in form of slider with thumbnail bar below
• Grid - gallery in form of classic grid
Depending on which gallery type you have selected you have different options.

Layout: choose the layout of your gallery depending on the gallery type you have selected previously

Style: For grid galleries: choose the style of your grid here

No Gaps: For grid galleries: activate this option if you don't want to have gaps between images in your grid overviews

Hover type: select the onhover style here

Border style: choose the style of image borders in your grid views.
SEE DEMO OF DIFFERENT BORDER STYLES »

Title: If you would like to insert the title to your gallery, use this field and enter your gallery's title.

Shortcode Syntax:

[sc_gallery gallery_type="grid" gallery_slider_layout="fullwidth" gallery_layout="3x" gallery_style="metro" gallery_no_gaps="1" gallery_hover="zooming-blur" gallery_item_style="5" gallery_gallery="747" gallery_title="Gallery's Title"]





MAPS WITH TEXT


Maps With Text shortcode helps you to easily publish your google maps, styled in Scalia's way and optionally enhanced with content layers above the map:

Background color: here yo can set a background color for your content container above the map

Map Height: Map height in pixels

Mab embed iframe: In this field you should paste a googlemaps embed code you have created in google maps. Just follow the steps described in the shortcode dialog

Grayscale: You can set here if you wish to show your google map in grayscale

Container: Choose this option if you don't wish to display your map in 100% width if you have added it to fullwidth container

Deactivate Map Zoom By Scrolling: This option is useful especially for touch devices. If enabled, your added map will not scroll inside the iframe

Rounded Corners: Optionally add rounded colors to your map

After adding your map you can start to insert a content inside it. Just click on "+" symbol to open a shortcode dialog.


Shortcode Syntax:
[sc_map_with_text disable_scroll="1" rounded_corners="1" background_color="rgba(255,58,111,0.59)" size="500" link="YOUR IFRAME CODE HERE" grayscale="1" container="1"][/sc_map_with_text]

SEE DEMO »




NEWS & BLOG

With this shortcode you can insert your news or blog post lists anywhere in content, choosing among many different appearance styles.



Post types: select, which post types would you like to publish in this list - blog posts or/and news

Style: select the design style of presenting your blog / news list

Categories: enter the slugs of the categories you wish to publish in this list

Posts per page: how many posts should be displayed on one page

Pagination: which pagination style should be used

Shortcode Syntax:
[sc_news post_types="post" style="default" post_per_page="5" post_pagination="normal" categories="category1, category2"]






PRICING TABLES

Pricing tables shortcode helps you to insert styled pricing tables in your content. Scalia includes three pre-defined styles of pricing tables with additional customization options.
Inserting pricing tables in your page consist of three steps.



STEP 1.
Select "Pricing tables" shortcode from the shortcode list. Here you will get following options to set:

Style: Select one of three pre-defined styles for your pricing table

Button Icon: Icon to display on the button in pricing table.

Click on "Save changes". After that, click on "+" symbol in your added Pricing table element to start inserting pricing columns


STEP 2.
Select "Pricing table column" to insert a new column to your pricing table:

Column title: Type in the title of your column

Column subtitle: Type in subtitle of your column

Highlighted: choose this option if you wish that this column will be highlighted / emphasized

Top Choice: if you wish to set a marker label to your pricing column, you can write a short text here like "NEW!"

Top Corner Label Position: Activate this option if you wish to pistion your marker label in the top corner of your pricing column

Click on "Save changes" to insert your pricing column

STEP 3.
Now you can start filling your pricing column with content. To do this click on "+" symbol in your added pricing column and select the content element you wish to add.



Pricing Column Price



Currency: Type in the currency symbol to be show

Price: Enter the price to be shown

Time: Enter the period of time for the price, i.e. "per month"

Font Size: Select the font size for your price

Color: Select the font color for your price

Backgroun image: Choose a background image if you wish to use one as background for your price





Pricing Column Row



Here you can just enter any text content you wish in the Text editor. You can add as many rows as you wish


Pricing Column Footer

Here you should enter the label of your pricing table column's button and select the link












Shortcode Syntax:

[sc_pricing_table style="1" button_icon="default"][sc_pricing_column title="Column title" subtitle="Column subtitle" highlighted="1" top_choice="NEW" label_top_corner="1"][sc_pricing_price font_size="57" currency="$" price="58" time="per month" color="#dd3333" background="9185"][sc_pricing_row]Lorem ipsum dolorem[/sc_pricing_row][sc_pricing_footer href="#"]Lorem ipsum[/sc_pricing_footer][/sc_pricing_column]

SEE DEMO »




PORTFOLIOS

See detailed description of portfolios in Chapter Portfolios.

Scalia comes with different styles to display your portfolio items on your content page by using Portfolio or Portfolio Slider shortcode



Portfolio Grid


Portfolio Set Slug: choose your desired portfolio set to be displayed using the slug you have defined in Portfolios ➜ Sets

Layout: choose a grid layout for your portfolio overview

Style: choose a grid style. You can choose between justified or masonry grid styles

Columns 100% Width (1920x Screen): If you have selected 100% width layout previously, here you can set a number of columns to be displayed on Full HD screen resolution

No gaps: choose this option, if you don't wish to have a margins / gaps between yoiur portfolio items in the grid

Display Titles: here you can select how the portfolio item's title & description should be displayed. You can choose to display it under the item's featured image or on mouse hover on featured image

Hover Type: select the hover type you wish to use in your portfolio grid

Pagination: select the pagination style to apply. You can choose between a classic numbered pagination or to use "load more" pagination

Items per page: Here you can define, how many portfolio items should be displayed at once on one page.

Show date & sets: select if you wish to show dates & portfolio categories in your grid overview

Disable sharing buttons: by activating this option you can disable a scoial sharing panel in your grid overviews

Activate filter: Select if you wish to display a filter bar above your portfolio grid

Title: If you would like to insert the title to your portfolio overview, use this field and enter your portfolio's title.

Shortcode Syntax:

[sc_portfolio portfolio_layout="3x" portfolio_style="masonry" portfolio_fullwidth_columns="4" portfolio_no_gaps="1" portfolio_display_titles="hover" portfolio_hover="horizontal-sliding" portfolio_pagination="normal" portfolio_items_per_page="8,16,24" portfolio_show_info="1" portfolio_disable_socials="1" portfolio_with_filter="1" portfolios="portfolio"]





Portfolio Slider



Title: If you would like to insert the title to your portfolio overview, use this field and enter your portfolio's title.

Portfolios: choose your desired portfolio set to be displayed using the slug you have defined in Portfolios ➜ Sets

Layout: choose a layout for your portfolio slider

Columns 100% Width (1920x Screen): If you have selected 100% width layout previously, here you can set a number of columns to be displayed on Full HD screen resolution

No gaps: choose this option, if you don't wish to have a margins / gaps between yoiur portfolio items in the grid

Display Titles: here you can select how the portfolio item's title & description should be displayed. You can choose to display it under the item's featured image or on mouse hover on featured image

Hover Type: select the hover type you wish to use in your portfolio grid

Show date & sets: select if you wish to show dates & portfolio categories in your grid overview

Disable sharing buttons: by activating this option you can disable a scoial sharing panel in your grid overviews






STYLED BOXES

Styled boxes could be used to highlight some content parts, to attract the visitor’s attention to some important facts, to promote something. With this shortcode you can easily customize the colors of your box. To insert a styled box in your content use Textbox shortcode:



Title: if you wish you can enter the title of your styled box

Icon: select the icon you wish to use in your textbox title by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field "Icon".

Title Background Color: Choose or enter color code, ex. #ffffff. You can also use the built-in color picker.

Title Text Color: Choose or enter color code, ex. #ffffff.

Content Background image: if you wish to use an image as background of your textbox, here you can select this image from your media library

Background: choose the style of inserting your textbox background

Background horizontal position: choose the horizontal position of your background image

Background vertical position: choose the vertical position of your background image

Background color: or you can use just some color for your textbox background

Border color: color of your textbox border

Content Background Color: Choose or enter color code, ex. #ffffff.

Content Text Color: Choose or enter color code, ex. #ffffff



Shadow: select if you wish to add shadow to your textbox

Centered:Choose if you wish to center your content inside textbox

Shortcode Syntax:

[sc_textbox title_background_color="#aaafae" content_background_style="cover" content_background_position_horizontal="left" content_background_position_vertical="center" content_background_color="#f1f5f8" shadow="1" centered="1" title="Textbox Title" icon="e61e" title_text_color="#ffffff" content_background_image="9734" content_text_color="#d1d1d1" border_color="#878787"][/sc_textbox]

After you have inserted your textbox, you can start filling it with content by simply clicking on "+" symbol above the textbox. SEE DEMO »




STYLED IMAGES


In Scalia you can publish your images with awesome border and frames effects, making them look great and standing out. To do that use the Styled Image shortcode:

Width: Image width in pixels

Height: Image height in pixels

Choose Image: Select image from media library by clicking on Select or enter image URL

Alt: Enter image Alt-Attribute

Border Style: set the border/frame style for your image on the page.

Position: Here you can select the text alignment near your picture

Disable lightbox: activate this checkbox if you wish to disable the full-size image in lightbox

Shortcode Syntax:
[sc_image style="3" position="centered" disable_lightbox="1" width="500" height="500" src="9734" alt="alt text"]

SEE DEMO »




STYLED LISTS & TABLES

Scalia includes several shortcodes to help you with adding tables and styled lists on your pages.




STYLED TABLE

To insert a styled table, use the "Table" shortcode.



Style: choose the style you wish to use

Content: here you can edit your table as usually

Row headers for responsive: choose how to display your rows in on mobile devices

SEE DEMO »













STYLED LISTS

To insert a styled list, use the "Styled List" shortcode.



Type: choose a bullet icon you wish to use in your list

Color: choose a color for your bullet

Content: here you can edit your list as usually



Type: here you can choose the bullet style for your list: circle, check, arrow, minus

SEE DEMO »















TABS & TOURS

Tabs & tours are useful for grouping your content according its topical meaning and displaying it in a compact user-friendly form on the page.




TABS
In order to insert tabs in your content click on Tabs shortcode. Your tabs will be immediately added to your page. Now you can start editing its settings. Just click on "edit" icon on your "Tabs" panel:



Style: Scalia comes with two different tabs styles you can choose here

In order to edit the title of your tab, click on "edit" icon on your "Tab" panel:



After that you are ready to insert any content in your tab by clicking on "plus" symbol on the appropriate tab.

SEE DEMO »






TOURS

In order to insert tours in your content click on Tours shortcode. Your tours will be immediately added to your page. Now you can start editing its settings kust in the same way, as by tabs (see above).






TEAM

Team shortcode is a perfect feature to present your team inside your page content. Use Team shortcode:



Style: choose the style of displayoing your team set

Team: choose the team set to be displayed by entering the slug of team's set (see Team ➜ Sets)

Columns: select the number of columns to be displayed in the team grid

Shortcode syntax:

[sc_team style="horizontal" columns="3" team="team-slug"]

SEE DEMO »




TESTIMONIALS

Testimonials shortcode is a good to present your customers opinion about you and your work.

Set: choose the testimonial set to be displayed by entering the slug of customer's set (see Clients ➜ Sets)

Fullwith: select this option if you wish to display testimonial in fullwidth layout

Shortcode syntax:

[sc_testimonials fullwidth="1" set="clients"]

SEE DEMO »




COUNTERS

Inserting counters in your page consist of two steps.

STEP 1.
Select "Counter box" shortcode from the shortcode list. Counter box will be immediately added to your page

STEP 2.
Now click on "+" symbol on the added counter box. And the click on "Counter" shortcode







From: starting number to start counting animation, for example 0

To: final number to finish counting animation, for example 100

Text: title to be displayed under the number

Icon: select the icon you wish to use in your counter by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field "Icon".

Icon Shape: select the shape of the icon

Icon Style: in Scalia you can use bicolored icons. In this field "Style" you can select the angle of color splitting in bicolored icon. By default only one color will be applied.
Icon Color: select the main font color of your icon using the colorpicker or typing the hex value

Icon Color 2: select the second font color of your icon, if you wish to use bicolored icon. Your icon will then appear in two colors (color / color 2), splitted by the angle you have selected in Style field above

Icon Background Color: choose the color of icon's background using the colorpicker or typing the hex value

Icon Border Color: choose the color of icon's border using the colorpicker or typing the hex value

Icon Size: select the size of your icon

In the same way you can add as many counters in your counter box as you wish.

SEE DEMO »




TOGGLES & ACCORDION

Accordions are useful to publish different additional content divided or grouped in different sections. In this way you can publish a lot of information in compact form, not blowing out the size of your page and attract the visitor’s attention on some special points in your article.



In order to insert accordions in your content click on Accordion shortcode. Your accordion will be immediately added to your page. Now you can start editing its settings. Just click on "edit" icon on your "Accordion" panel

In order to edit the title of your accordion, click on "edit" icon on your "Section" panel and fill the "Title" field":

After that you are ready to insert any content in your accordion section by clicking on "plus" symbol on the appropriate tab.









SEE DEMO »















TYPOGRAPHY
Following shortcode can be used to display headings, dropcaps, quoted text and divider:



HEADINGS
Just use the simple <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> tags to display predefined styles for heading levels from 1 to 6.

You can customize your heading colors in Appearance ➜ Theme options ➜ Colors ➜ Text Colors

You can customize the fonts, sizes and line heights of your heading in Appearance ➜ Theme options ➜ Fonts



DROPCAPS
Use Dropcap shortocode to insert a dropcap:

Letter: enter the symbol (number, letter etc.) for your dropcap

Shape: select the shape of your dropcap

Style: select the style of your dropcap

Color: use this option to customize default font color of your dropcap

Border Color: use this option to customize default border color of your dropcap

Background Color: use this option to customize default background color of your dropcap

Shortcode syntax:

[sc_dropcap shape="circle" style="big" letter="L" color="#ffffff" background_color="#d1d1d1" border_color="#a0a0a0"]



QUOTED TEXT
To insert a quoted text in your page use Quoted Text shortcode:

Content: enter the text content of your quoted text in the text editor. It can be normal text, HTML code or shortcode

Shortcode syntax:

[sc_quote]lorem ipsum[/sc_quote]
SEE TYPOGRAPHY DEMO »




VIDEOS

In Scalia you can easily insert your video media at any position in your main content or in widgets – anywhere you wish. You can choose to use a youtube, vimeo or self-hosted video. You can set the size of video container and choose the border/frame you wish




YOUTUBE VIDEO


Width: Video width in pixels

Height: Video height in pixels

Video_id: Youtube video ID something like Js9Z8UQAA4E. You can find out the video ID in youtube URL address

Border Style: set the border/frame style for your video on the page.

Position: set the position of your video in your content

Shortcode syntax:

[sc_youtube style="3" position="left" width="500" height="500" video_id="7463532"]




VIMEO VIDEO

Width: Video width in pixels

Height: Video height in pixels

Video_id: Vimeo video ID something like 9380243. You can find out the video ID in vimeo URL address

Border Style: set the border/frame style for your video on the page.

Position: set the position of your video in your content

Shortcode syntax:

[sc_vimeo style="4" position="below" video_id="232342"]




SELF-HOSTED VIDEO

Width: Video width in pixels

Height: Video height in pixels

Video_src: Select your video from media library or type in the URL address of the video

Image_src: Select the preview/cover image for your video from media library

Style: set the border/frame style for your video on the page.

Position: set the position of your video in your content






QUICKFINDER


See detailed description of quickfinders in Chapter Quickfinders.

To insert quickfinders in your page content use Quickfinder shortcode:

Style: Scalia comes with three different styles of displaying your quickfinders. Here you can choose one of them

Quickfinder: choose your desired quickfinder set to be displayed using the slug you have defined in "Sets"

Shortcode syntax:

[sc_quickfinder style="default" quickfinder="quick_set"]




CLIENTS

See detailed description of clients in Chapter Clients.

To insert clients overview in your page content use Clients shortcode:

Set: choose your desired client set to be displayed using the slug you have defined in "Sets"

Style: choose whether to show your clients as grid or as slider/carousel

Autoscroll: in case you have selected "Carousel" as clients style, here you can enable autoscroll and define autoscroll speed

Rows: in case you have selected "grid" for displaying your clients, here you can select number of rows for this grid

Columns: in case you have selected "grid" for displaying your clients, here you can select number of columns for this grid

Shortcode syntax:

[sc_clients style="grid" rows="3" cols="3" set="client_set"]




DIAGRAMS


Use this shortcode to insert diagrams in your content:

Title: defines the title of your diagram

Summary: defines the summary text for your diagram

Type: choose the type of diagram to be displayed - lines/bars or circles.

Content: here you can edit the conten of your diagram by editing its shortcode

[skill title="Skill1" amount="70" color="#ff0000"]
[skill title="Skill2" amount="70" color="#ffff00"]
[skill title="Skill3" amount="70" color="#ff00ff"]
[skill title="Skill4" amount="70" color="#f0f0f0"]
• tag [skill] defines one parameter/value/skill to be displayed in diagram. You can add as much values/skills as you wish
• attribute "title" inside of tag [skill] defines the label/title of this parameter/skill
• attribute "color" defines the color whioch should be used in diagram to represent this parameter/skill
• attribute "amount" defines the value in percent of this parameter/skill




LAYERSLIDER


In Scalia you can insert a LayerSlider in any position in your content you wish - in articles or in sidebars (as widget). In order to insert LazySlider in your content, use LayerSlider button in your WYSIWYG editor. Just position the cursor on the place in your content, where you would like to insert your LayerSlider, click on this button and choose the desired slider. It will be inserted automatically.

Shortcode syntax:
[layerslider id="11"]




Portfolios





INTRODUCTION / UNDERSTANDING PORTFOLIO

Portfolios are very useful custom post types in Scalia, aimed to create and to highlight special content, different to usual pages and posts. Portfolios can be used to publish / demonstrate:
Projects / Case Studies
Portfolio can help you to emphasize the results of your company's activities in some projects or to inform your customers about the successfull stories / case studies you have gained with your business by providing your services:
• you can describe, what kind of a project you have realized
• you can insert image galleries with some project outtakes/results
• you can add the project description, focusing on your skills and provided services
• you can publish media content like videos, showing your customers the development of the project
• you can introduce the development team, responsible for this project etc...
Products / Services
In the same way as projects and case studies you can use portfolios to highlight the products and services your company provides to customers. You can create the product descriptions (portfolio items) and structure it in different product groups / categories (portfolio sets), which than can be used in navigation or product filter.
Media Content (videos, images)
Don't waste time of your customers and show them what you can - just with one click! Portfolios give you the possibility to publish different media types and make it accessible in beautiful overviews. Layers with videos from youtube, vimeo, your own hosted videos or fullsize images in stylish lightboxes - all this can be done using different portfolio types.
Content visual navigation
Or you can use portfolios to give your website visitors the better overview about your articles, pages, posts. Different layouts of portfolio overviews in Scalia are very helpful for creating comfortable navigation across your website content

In order to understand how it works it is very important to understand the nature of portfolio. Portfolio consists of two major parts:
• Portfolio items
• Portfolio sets




PORTFOLIO ITEMS

Portfolio items are custom posts. One portfolio item is like one page or one blog post - it is a single post used specially for representing your work, products, projects etc.




CREATING NEW PORTFOLIO ITEM

You can create new portfolio item using leftside wordpress menu or the button above the list of existing portfolio items (Add New Item)





TYPES OF PORTFOLIO ITEMS

There are different types of portfolio items you can use to demonstrate / publish your content:
Portfolio Page
This is a custom single post for describing / showing your project, case study, product etc. It works like a page: you can put the title, decription and images of your project, insert galleries, slideshows, related projects and so on. After creating the new portfolio item this type is selected per default.
Internal Link
Your portfolio item could be a link to some other page on your website - it is useful for redirecting the visitor from some overviews to specific articles, not situated in the same website category as the overview.
External Link
You can use any external URL to redirect your visitor to another website. It is useful for demonstrating the created projects on the web, or some galleries on external website or maybe some press releases in online magazines.
Full-Size Image
Use this in order to show your visitors some full-size images per one click. In this way you can use portfolio like a gallery - in an overview your visitors see a small thumbnails of the images, clicking on that opens the lightbox layer with original full-size image.
YouTube Video
If you want to show your visitors some youtube videos just onpage, with one click - use this type of portfolio item. By clicking on this item in portfolio overview the vistor gets a lightbox layer with youtibe video - immediately on your website's page, without redirecting to youtube website.
Vimeo Video
Use it in the same way, as YouTube Video type of portfolio item.
Self-Hosted Video
If you save all you videos directly in wordpress media library and want to stream it directly from here, use this type of portfolio item. In this case, just like in case of youtube or vimeo video, your visitor wioll get a layer with video player, streaming video content directly from your media library

In order to define the type of portfolio item use the select box Type of portfolio item in the panel General Settings in portfolio item
• Portfolio Page: you can start editing your page by entering your content and choosing the page options (see description below)
• Internal Link: use the field Link to another page or video ID to enter the relative URL (without the domain name, for example /content/page.html) of the page you would like to redirect your visitor to
• External Link: use the field Link to another page or video ID to enter the absolute URL (with http://) of the external website or webpage you would like to redirect your visitor to
• Full-Size Image: in this case the fullsize image of your Featured Image would be shown in the lightbox layer
• YouTube Video: use the field Link to another page or video ID to enter the YouTube Video ID (like for example YE7VzlLtp-4, you can find it in the youtube video's URL) of the youtube video you like to show
• Vimeo Video: use the field Link to another page or video ID to enter the Video ID (like for example 1084537, you can find it in the vimeo video's URL) of the vimeo video you like to show
• Self-Hosted Video: use the field Link to another page or video ID to enter the relative URL of the video in your media library. You can find the URL of the video, if you go in media library, choose the video and take a look at its properties

NOTE: you can assign multiple types to one item by clicking on "Add one more type"



ASSIGNING PORTFOLIO SETS FOR PORTFOLIO ITEM

In order to define, to which portfolio set the portfolio item belongs, you should select the corresponding portfolio sets in the panel Sets to the right.

You can make a multiple choice if your portfolio item suits to multiple different portfolio sets.

Of course you can create a new portfolio set from here by clicking on Add new set.





DEFINING SORT ORDER

It is possible to define the sort order of the portfolio item in one set by entering the order number in the field Sort Order in the right panel
Notice: if your portfolio item belongs to multiple portfolio sets, in all of them it will be on the same order position as entered in this field.





PORTFOLIO PAGE: CONTENT ELEMENTS & OPTIONS

Layouts / Templates

generally portfolio page has all the same layout & template settings as a usual page. To activate a sidebar on your portfolio page, just select whoch sidebar position (left or right) you would like to have in the "Page Sidebar" setting



Editing content / Using Shortcodes

Just like by any page you can start editing your portfolio page by entering the title and main text in the WYSIWYG editor. You have an option to use Visual Composer (backend and / or frontend editor) to build your portfolio page with any Scalia's shortcodes (see description of shortcodes in chapter “Page Builder”).

Making general settings

In general settings panel below the WYSIWYG editor you can define the type of portfolio item (see description above). Also you can enter the alternative title of your portfolio page to be displayed in portfolio overviews (grids & sliders) - this could be useful if your portfolio page has a very long title, which doesn't suit in to the item box in portolio overview. In addition you can set your portfolio item to be highlighted / emphasized in portfolio overviews by checking the option "Show as Highlight".







Title & Excerpt

In this option you can customize and make settings for the item's header with title and excerpt text. Please note, that the item's title is a title of your portfolio item, and item's subline is excerpt text.






• Title Style: Scalia comes with two different styles of displaying your page title. Or you can disable your title here.
• Background Image: here you can set the background image for page title bar. You can select from the set of pre-defined styles/images by clicking on one of them, or you can upload your own image
• Background Color: if you don't wish to use an image for header's background, here you can choose some color using colorpicker
• Title Text Color: Font color for the title of the page
• Excerpt Color: Font color for the subline of the page
• Excerpt: Here you can enter excerpt / subheader text for your title
• Icon: if you wish to display an icon in your page title, here you can choose from over 400 icons. Just click on "Show icon codes", copy the code of the icon you wish to use in the lightbox icon overview and paste this code here
• Icon Color: Choose the main font color of your title icon here
• Icon Color 2: If you wish to make your icon bicoloresd, here you can choose the second font color for your icon
• Icon Style:Needed for bicolored icons - here you can define the angle of color splitting on your icon
• Icon Background Color: Choose the background color of your icon
• Icon Border Color: Choose the border color of your icon
• Icon Shape: You can choose between squared and rounded icon shape here
• Icon Size: In which size your icon should appear

Excerpt could be used as a brief description or subtitle of your portfolio item in the overviews (see screenshot below)


Slideshow | Quickfinder | Additional Portfolio Sets | Gallery

You can insert additional content elements in your portfolio page by using the panels Slideshow / Quickfinder / Portfolio Sets / Gallery. It works here in the same way as it works in normal page (see above).



Sidebar | Widgets | Project Info

Like on a normal page, you can add a custom sidebar in the portfolio page and fill it with the widgets of your choice - for example contact person (Team), customers opinion (Testimonial) etc. One widget is especially interesting for using on portfolio pages - Project Info / Custom Iconed Fields. Here you can add your own data field, fill it with the corresponding values and decorate it with some icons. For detailed information about the widgets see the section Widgets
NOTE: you can use this widget anywhere on you site in the sidebar and not only on portfolio page - for example to underline some brief facts, to publish abstracts of the main content etc.






PORTFOLIO SETS

Portfolio Sets are the categories or groups of portfolio items and are useful to structure your portfolio items. In this way you can create different scopes of your activities as different portfolio sets and assign your projects/products/case studies/reviews/media content (say your portfolio items) to these different activity scopes.




CREATING NEW PORTFOLIO SET

You can create new portfolio set by going in Portfolios ➜ Sets on the leftside wordpress menu.

After that you are already on the page of creating the new portfolio set. On the right side in the table you see the list of all existing portfolio sets - you can edit their properties by clicking on the title of the corresponding portfolio set.





ELEMENTS & OPTIONS

by editing the portfolio set you have following fields:

Name
enter here the name of your portfolio set. This name will be used in the list of available portfolio sets in portfolio item (see above) Notice: this name will be also used as a filter name in portfolio overviews - in the case you publish your portfolio overview with the filter above.
Slug
slug is a userfriendly version of the name. Slug is important, because it is used in the shortcode Portfolio. So don't forget to fill it if you are creating new portfolio set.
Parent
with this select box you can group the sets in subsets and make a kind of hierarchy inside the portfolio sets. Usually it is not needed
Description
just a brief description of your set, usually it is not needed
Icon
if you want to decorate your filter in portfolio overviews with some handsome icons, just click on Show Icon Codes, choose your icon, copy its code and paste it in Icon field.

Order
here you can set the sort order position of your portfolio set. With this field you can make sorting of your portfolio sets.

That's all - don't forget to submit your changes by clicking on Add New Set




PUBLISHING / SHOWING PORTFOLIOS ON WEBSITE

There are several ways you can use and publish your portfolio overviews and pages on your website.



INSERTING PORTFOLIO SETS USING PAGE OPTIONS

You can insert a portfolio slider or portfolio grid overview on the page using the page options. Each page has several portfolio settings under Page Portfolio panel.

Following options can be set:

Portfolio Position
Here you define the postion of your portfolio overview on page:
• Slider-bar above - selected portfolio sets will be displayed as a slider above the main content of the page.
• Inside content - selected portfolio sets will be displayed as a grid overview inside the main pages content.
• Slider-bar below - selected portfolio sets will be displayed as a slider under the main content of the page.

Layout
This option defines the layout of your portfolio overview. Depending on which value you have previously selected in "Portfolio Position", you will have different values here. If you have selected "Inside content" in "Portfolio position", you will get following:
• 2x Columns - 2x columns porfolio grid
• 3x Columns - 3x columns porfolio grid
• 4x Columns - 4x columns porfolio grid
• 100% width - 100% width grid
• 1x Column List - 1x column portfolio items list
Style
Only relevant for grid overviews. Here you can choose, whether to show your grid as justified or as masonry grid.
Columns 100% Width (1920x Screen)
If you have selected 100% width layout previously, here you can set a number of columns to be displayed on Full HD screen resolution
No gaps
choose this option, if you don't wish to have a margins / gaps between yoiur portfolio items in the grid
Display Titles
here you can select how the portfolio item's title & description should be displayed. You can choose to display it under the item's featured image or on mouse hover on featured image
Hover Type
select the hover type you wish to use in your portfolio grid
Pagination
select the pagination style to apply. You can choose between a classic numbered pagination or to use "load more" pagination
Items per page
Here you can define, how many portfolio items should be displayed at once on one page
Title
If you would like to insert the title to your portfolio overview, use this field and enter your portfolio's title.
Show date & sets
elect if you wish to show dates & portfolio categories in your grid overview
Disable sharing buttons
by activating this option you can disable a scoial sharing panel in your grid overviews
Select Portfolios
here you see the list of all portfolio sets you have created under "Sets". NOTE: if some set do not have any portfolio items, it will not be displayed in this list. You can choose one or more sets at once to combine different items with each other. In this way you can create several portfolio overviews with different topics. You should select at least one set to display your portfolio overview on page.
Activate Filter
if you would like to display several different portfolios on one page, you can activate this filter in order to provide the possibility of quick filtering your portfolio items for your website visitors. For example if you have selected "SET 1" and "SET 2" to be displayed on your page, using the filter option will enable your visitors to navigate throug your sets with one click.




INSERTING PORTFOLIO SETS USING SHORTCODES

If you prefer to stay flexible and insert your portfolios on any position inside your page's content, just use the portfolio shortcode. For detailed description see chapter Page Builder -> Portfolios above.



PROJECT INFO / CONTACT INFO / CUSTOM ICONED FIELDS WIDGET
In order to better inform your visitors about some specific project highlights or infos it is recommended to use the project info widget.

To activate the project info widget go to Page Sidebar panel in page options below, choose the Project Info / Contact Info / Custom Iconed Fields widget from the list and drag it to the right panel Page Sidebar. Then open this panel "Project Info / Contact Info / Custom Iconed Fields“. Now you can fill your widget with general title - it is title of your widget, for instance "Project Highlights". Under the general title you can see a group of ten customizible fields, which you can use for your description.

There are two design styles of this widget you can choose from. This widget consists of ten fields. In each field you can define:
• Field's title: like a label of your field
• Field's value: values for this label
• Field's Icon: icon for this label. To define the desired icon just click on "Show Icon Codes", find the icon you need, copy the icon code and paste it in this field.
SEE DEMO STYLE 1»
SEE DEMO STYLE 2»

When you are finished with filling your project information in this widget, please DON'T FORGET to click on "Save" button at the bottom of the widget in order to save your content! . And only after saving you widget you can publish your article.





CUSTOMIZING PORTFOLIO STYLES

Just like all other elements of Scalia theme you can easily customize your portfolio styles using the theme option panel of Scalia. To open the admin panel go to Appearance ➜ Theme Options.





CUSTOMIZING FONTS

You can customize the fonts which are used to display the title text and description text of one portfolio item in portfolio overviews. To do this go to "Fonts" and use following panels:

Portfolio Title Font

Portfolio Description Font

Here you can choose standard fonts as well as a plenty of google fonts and their styles




CUSTOMIZING COLORS

In order to customize all main portfolio colors navigate to "Colors" and open "Portfolio Colors" panel.
Following color settings could be customize:


Portfolio Slider Arrow
Color of an arrow for sliding the porfolio items in portfolio slider.
Portfolio Overview Title Background
Color used for backgrounds of portfolio item's title and description only in portfolio overviews used inside content (on-page)
Portfolio Overview Title Text
Color of portfolio item's title text in overviews (inside content).
Portfolio Overview Description Text
Color of portfolio item's description text in overviews (inside content).




CUSTOMIZING PAGINATION COLORS

To change the color of pager buttons used for navigation through portfolio overviews inside content, go to "Colors" and open "Bullets, Icons, Dropcaps & Pagination" panel. Then use following options:





CUSTOMIZING ICON COLORS

If you use some icons in your portfolio sets or in "Project Info / Custom Iconed Fields" widget (see above) you might wish to customize the color of these icons. To do this use following options in "Bullets, Icons, Dropcaps & Pagination" panel:

Icons Font





Quickfinders





INTRODUCTION / UNDERSTANDING QUICKFINDERS

Quickfinders are images (icons, pictures, graphics) used to help user to navigate on the website or to highlight some special advantages/properties of the products or services. So quickfinders could be thought in two ways:
Navigation Support
In addition or instead of classic menu navigation you can use the graphical representation of subpages in form of some icons or thumbnail images with title and short description. It helps your website visitors to find quickly the subpages / subsections /information they need.
Advantages/Properties Overview
If you want to illustrate some special highlights of your products or services on the page, you can use quickfinders in form of icons to attract the visitor attention to these key issues among another page's content



Like Portfolios, Quickfinders consist of two major parts:

Quickfinder items

Quickfinder sets





QUICKFINDER ITEMS





CREATING NEW QUICKFINDER ITEM

You can create new quickfinder item using leftside wordpress menu or the button above the list of existing quickfinder items. By creating a new quickfinder item you should fill following content fields:

Title
This is the title of the quickfinder item, which will be shown under the quickfinder item in the overview
Featured Image
In Scalia you can freely choose whether to use images or icons to depict your quickfinder item. If you wish to insert image for an image quickfinder use this field "Featured Image". Here you can upload/choose an image used to depict the quickfinder item in the overview on the page. Here you can use any graphics you wish.

Quickfinder Item Description
Here you can enter the short description for your Quickfinder item. It will be shown under the title
Link
If you use Quickfinder item in some set as navigation support (see above), here you can enter the URL of the page, which should be associated with this quickfinder item
Icon
If you wish to display an icon as your quickfinder element, here you can choose from over 400 icons. Just click on "Show icon codes", copy the code of the icon you wish to use in the lightbox icon overview and paste this code here
Icon Color
Choose the main font color of your quickfinder icon here
Icon Color 2
If you wish to make your icon bicolored, here you can choose the second font color for your icon
Icon Style
Needed for bicolored icons - here you can define the angle of color splitting on your icon
Icon Background Color
Choose the background color of your icon
Icon Border Color
Choose the border color of your icon
Icon Shape
You can choose between squared and rounded icon shape here. NOTE: this shape will be also applied on your image if you have chosen to use featured image as your quickfinder element
Icon Size
In which size your icon should appear. NOTE: this size will be also applied on your image if you have chosen to use featured image as your quickfinder element
Quickfinder
Here you can assign the given quickfinder item to some existing or new quickfinder set (see below)




ASSIGNING QUICKFINDER SETS FOR QUICKFINDER ITEM

In order to define, to which quickfinder set this quickfinder item belongs, you should select the corresponding quickfinder sets in the panel "Quickfinders" to the right.

You can make a multiple choice if your quickfinder item suits to multiple different quickfinder sets.

Of course you can create a new quickfinder set from here by clicking on "Add new set".




DEFINING THE SORT ORDER

It is possible to define the sort order of the quickfinder item in one set by entering the order number in the field "Sort Order" in the right panel. Notice: if your quickfinder item belongs to multiple quickfinder sets, in all of them it will be on the same order position as entered in this field.




QUICKFINDER SETS

Quickfinder Sets are the categories or groups of quickfinder items and are useful to group/structure your quickfinder items. Actually to say in other way, quickfinder set is your quickfinder you wish to insert in your page. So you can organize different subpages or different services/product highlights as quickfinder items in one quickfinder navigation and publish it on a page.




CREATING NEW QUICKFINDER SET

You can create new quickfinder set by going in Quickfinders ➜ Sets on the leftside wordpress menu.

After that you are already on the page of creating the new quickfinder set. On the right side in the table you see the list of all existing quickfinder sets - you can edit their properties by clicking on the title of the corresponding set.

By editing the quickfinder set you have following fields:
Name
enter here the name of your quickfinder set. This name will be used in the list of available quickfinder sets in quickfinder item (see above)
Slug
slug is a userfriendly version of the name. Slug is important, because it is used in the shortcode "Quickfinder". So don't forget to fill it if you are creating new quickfinder set.

Description
just a brief description of your set, usually it is not needed




PUBLISHING / INSERTING QUICKFINDER ON A PAGE

There are several ways you can insert and publish your quickfinders on the pages of your website.




INSERTING QUICKFINDER SETS USING PAGE OPTIONS

You can insert a quickfinder bar or in-content quickfinder on the page using the page options. Each page has several quickfinder settings under Page Quickfinder panel.


Following options can be set:

Quickfinder Position
Here you define the postion of your quickfinder on page:
• Quickfinder bar above - selected quickfinder set will be displayed as a bar/panel on own background above the main content part of a page (just after the main navigation bar on top).
• Inside content - selected quickfinder set will be displayed inside the main pages content.
• Quickfinder bar below - selected quickfinder set will be displayed as a bar/panel on own background below the main content part of a page.
Select Quickfinder
here you see the select box with the list of all quickfinder sets you have created under "Quickfinders". NOTE: if some set do not have any quickfinder items, it will not be displayed in this list.
Quickfinder style
In Scalia you have three different styles of presenting your quickfinders on the page you can choose from.
Vertical Quickfinder Connector Color
This option is relevant for "Vertical Style 1" or "Vertical Style 2" of presenting your quickfinders. Here you can choose a color of the vertical connector




INSERTING QUICKFINDER SETS USING SHORTCODES

If you prefer to stay flexible and insert your quickfinders on any position inside your page's content, just use the quickfinder shortcode with Visual Composer or with Shortcode Generator. See the description of quickfinder shortcode in this chapter







CUSTOMIZING QUICKFINDER STYLES

You can easily customize your quickfinder styles using the theme option panel of Scalia (Admin Panel). To open the admin panel go to Appearance ➜ Theme Options.





CUSTOMIZING QUICKFINDER FONTS

You can customize the fonts which are used to display the title text and description text of one quickfinder item in quickfinders. To do this go to "Fonts" and use following panels:

Quickfinder Title Font
Quickfinder Description Font

Here you can choose standard fonts as well as a plenty of google fonts and their styles





CUSTOMIZING COLORS

In order to customize all main quickfinder colors navigate to "Colors" and open "Quickfinder Colors" panel. Following color settings could be customize:


Quickfinder Bar Background
The color of the background used beneath the quickfinder-bars.
Quickfinder Bar Title Text
Color of quickfinder item's title text in quickfinder bar
Quickfinder Bar Description Text
Color of quickfinder item's description text in quickfinder bar
Quickfinder Title Text
Color of quickfinder item's title text in overviews inside content
Quickfinder Description Text
Color of quickfinder item's description text in overviews inside content




Galleries

Galleries are essential part of any business website. They give the possibility to illustrate some topics or information with a set of images, grouped together in a nice overviews of thumbnails with fullsize on-click lightboxes. In Scalia there are different kinds of galleries you can use on your pages in a flexible way.



CREATING NEW GALLERY




ADDING NEW GALLERY

To add new gallery go to "Galleries" in the leftside WP navigation and choose "Add New Gallery" (1).

Now you should enter the title of your gallery (2) and then click on "Add images" (3) in order to add images to your gallery.






ADDING IMAGES TO A GALLERY / SORTING / EDITING

Click on "Add Images" button and new layer with media library will appear. Now you can choose images from your media library or upload them from your computer. Note: you can choose multiple images by holding "Shift" or "Control" button on your keyboard and clicking on appropriate images. Also in the same way you can choose images for multiple upload from your computer.


In the right sidebar in media layer you can edit different image properties. Here you can enter the meta information (title, alt).
• If you want a title to be appeared on your image in the gallery, use the field "Caption".
• If you want to insert a short description to your image to be appeared in the gallery, use the field "Description".
• If you want to highlight this image in your gallery (i.e. to display it larger as other images in the gallery), check the option Show as Highlight
• By clicking on "Edit image" button you have a possibility to resize, crop, rotate, move your image or create a custom thumbnail.
After making your selection and editing image properties click on "Add images". After that the selected images will be added to your gallery.
Now you have the possibility to define the sort order of your images in the gallery just per drag-and-drop:


If you want to remove some specific images from your gallery, click on "X" icon in the top right corner of the image.
If you want to edit properties of specific image from your gallery, just click on it. New tab will be opened, where you can edit image properties. After editing just save your changes and close this tab.





SAVING YOUR GALLERY

When you are done creating and editing your new gallery, click on "Publish" button in the right sidebar. Your gallery will be saved and image thumbnails will be created and shown instead of original scaled images. Note: after saving your gallery you will get an ID - you will need this ID for using your gallery in gallery shortcode.





PUBLISHING / INSERTING GALLERIES ON A PAGE

There are several ways how you can insert and publish your galleries on the pages of your website.



INSERTING GALLERIES USING PAGE OPTIONS

You can insert a gallery on the page using the page options. Each page (including portfolio page) has several gallery settings under "Page Gallery" panel.
Following options can be set:


Gallery
Choose gallery you wish to show on your page
Gallery position
Here you define the postion of your gallery on page:
• Gallery above - selected gallery will be displayed above the main content part of a page.
• Gallery below - selected gallery will be displayed below the main content part of a page.
Gallery type
Here you can select the layout of your gallery:
• Slider - selected gallery will be displayed as slider
• Grid - selected gallery will be displayed as grid
Layout
In case you have selected "Grid" in "Gallery type", you can choose between following grid options:
• 3x columns - selected gallery will be displayed as 3x columns grid
• 4x columns - selected gallery will be displayed as 4x grid
• 100% width - selected gallery will be displayed as 100% width grid
Style
In case you have selected "Grid" in "Gallery type", you can choose between following styles:
• Justified grid - selected gallery will be displayed as justified grid
• Masonry grid - selected gallery will be displayed as masonry grid
• Metro style - selected gallery will be displayed in metro style
No Gaps
For grid galleries: select this option if you wish to have no gaps / margins between images in your grid
Hover Type
Select the on hover style for your gallery.
Border Style
Select border style for your gallery.




INSERTING GALLERIES USING SHORTCODES

If you prefer to stay flexible and insert your galleries on any position inside your page's content, just use the "Styled Galleries" shortcode with Visual Composer or with Shortcode Generator. See the description of galleries shortcode in this chapter







CUSTOMIZING GALLERIES STYLES

You can easily customize your galleries styles using the theme option panel of Scalia (Admin Panel). To open the admin panel go to Appearance ➜ Theme Options.





CUSTOMIZING GALLERIES FONTS

You can customize the fonts which are used to display the title text and description text on the images inside your gallery. To do this go to "Fonts" and use following panels:

Gallery Title Font

Gallery Description Font





CUSTOMIZING COLORS

In order to customize all main gallery colors navigate to "Colors" and open "Slideshow, Gallery And Image Box Colors" panel.








Slideshows



Slideshows are useful for teasing some special informations, highlights, promotions and activities using nice and attractive key visuals just in the header part of your page. For example you can use the slideshow on your homepage to immediately catch your visitors attention and to guide them directly to the needed information / pages. In slideshows you can combine the visual message (using some attractive images) with text message (using some significant slogans) and link it with the pages you like.

Scalia is delivered with two different types of sliders




LAYERSLIDER

LayerSlider is a premium wordpress slider plugin, created by Kreatura Media. You can find the documentation on how to set up and use this slider in the LayerSlider WP admin area. Note, that this documentation is context-based, so help topics change depending on the layeslider admin page you have selected. You can access diffenrent help topics with the "Help" menu item on the top right corner of the page.

The advantage of using the LayerSlider is a power of visual effects it brings in your slideshow. However it is a bit more complicated in understanding, setting up and managing as more "minimalistic" Nivoslider (see below).

If you are an experienced user and would like to gain the most from the power of LayerSlider, so it is your choice number one! However if you prefer more minimalistic slider, also equiped with beautiful transitions and much more easier in setting up, so we would recommend to use Nivoslider




NIVOSLIDER

Nivoslider is a built-in slider plugin of Scalia. It consists of two major elements:

Slides

Slideshows

Slide is a single element of the slideshow which includes an image and an optional text (slogan)




ADDING NEW SLIDE

You can create new slide using leftside wordpress menu or the button above the list of existing slides.



By creating a new slide you should fill following content fields:
Title
This is the title of the slide, which could be shown on the slide in slideshow
Excerpt
This is a description text, which could be shown on the slide under the title in slideshow
Slide Settings: Slide Link
Here you can link your slide with some internal or external page / url
Slide Settings: Slide text position
Here you define, whether the text (title and excerpt) should be shown on your slide and if yes - in which position:
• None: no text will be displayed on the slide
• Left: Text will be displayed on the leftside of the slide image
• Right: Text will be displayed on the rightside of the slide image
Featured Image
Here you select the image for your slide via Media Library




ASSIGNING SLIDESHOWS FOR A SLIDE

Here you select the slideshow, which should be assigned to this slide. You can assign multiple slideshows to the slide, so it will be shown in different slideshows. Of course you can create a new slideshow just from here by simply clicking on "Add new slideshow"




DEFINING THE SORT ORDER

It is possible to define the sort order of the slide in a slideshow by entering the order number in the field "Sort Order" in the right panel Notice: if your slide belongs to multiple slideshows, in all of them it will be on the same order position as entered in this field.




CREATING NEW SLIDESHOW

You can create new slideshow by going in Slideshows ➜ Slideshow on the leftside wordpress menu. After that you are already on the page of creating the new slideshow. On the right side in the table you see the list of all existing slideshows - you can edit their properties by clicking on the title of the corresponding slideshow.
By editing the slideshow you have following fields:
Name
enter here the name of your slideshow. This name will be used in the list of available slideshows in slides and in page options (see above)
Slug
slug is a userfriendly version of the name.
Description
just a brief description of your set, usually it is not needed

After clicking on "Add New Slideshow" your new slideshow will be saved.




PUBLISHING / INSERTING SLIDESHOW ON A PAGE

You can insert a slideshow on the page using the page options under "Page Slideshow" panel.




• Slideshow Type: select the slider type you would like to insert on your page (Lyaerslider or Nivoslider)
• Select Slideshow: after that select the slideshow you like to see on your page.




DEFINING NIVOSLIDER SETTINGS

You can define different parameters like change effect, visibility time etc. for you slideshow using the theme option panel of Scalia (Admin Panel). To open the admin panel go to Appearance ➜ Theme Options. Here you should select "NivoSlider Options" to get the slideshow settings. You can define following parameters:

Effect
choose an effect you would like to use for sliding / image changes
Slices
choose number of slices for slices effects
Box Cols & Box Rows
choose number of columns and rows for box effects
Animation Speed ( x 100 milliseconds )
animation speed for slide effects
Pause Time ( x 1000 milliseconds )
for how long one slide will be shown before chaning to another
Direction Navigation
arrows will be used as navigation symbols
Control Navigation
small radio buttons in slide footer will be shown as navigation symbols




CUSTOMIZING NIVOSLIDER STYLES

You can easily customize your slideshow styles using the theme option panel of Scalia (Admin Panel). To open the admin panel go to Appearance ➜ Theme Options.




CUSTOMIZING SLIDESHOW FONTS


You can customize the fonts which are used to display the title text and excerpt/description text on the slide images in your slideshow . To do this go to "Fonts" and use following panels:

Slideshow Title Font

Slideshow Description Font





CUSTOMIZING COLORS

In order to customize slideshow text colors use settings in style.css of Scalia (to find here: wp-content\themes\Scalia\style.css)
Beginning from row 529 you can define the colors for title and description on a slide:

.slideshow .nivo­caption .title 
    background­color: #000; 
    background­color: rgba(0, 18, 28, 0.77); 
    color: #f1f5f8; 
.slideshow .nivo­caption .description
    background­color: #fff; 
    background­color: rgba(241, 245, 248, 0.77); 
    color: #0b1217; 





Clients

"Clients" are useful to show your "Hall Of Fame": Clients/customers, for whom you have made projects, provided services etc. The usual way to do this is to show an overview of your customers logos/identities.

However you can alos use any images to depict your customers - logos, icons, photos etc.

Like Quickfinders, Clients consist of two major parts:

Clients

Sets





Client





CREATING NEW CLIENT


You can create new client using leftside wordpress menu or the button above the list of existing clients. By creating a new client item you should fill following content fields:
Title
This is the name of your customer
Client Image
Here you can upload an image, depicting your customer (logo or photo)


Client Description
Here you can enter the short description for your Client item.
Client link
Here you can enter the URL of the page, which should be associated with this Client
Sets
Here you can assign the given client to some existing or new client set (see below)




ASSIGNING SETS FOR CLIENTS

In order to define, to which set this client item belongs, you should select the corresponding sets in the panel "Sets" to the right.

You can make a multiple choice if your client item suits to multiple different sets.

Of course you can create a new client set from here by clicking on "Add new set".




DEFINING THE SORT ORDER

It is possible to define the sort order of the client item in one set by entering the order number in the field "Sort Order" in the right panel. Notice: if your client item belongs to multiple quickfinder sets, in all of them it will be on the same order position as entered in this field.




PUBLISHING / INSERTING CLIENTS ON A PAGE

You can easily insert your client overviews as carousel or as grid in any position of your content by using "Clients" shortcode with Visual Composer or Shortcode Generator. The detailed description of "Clients" shortcode you will find in chapter "Page Builder -> Clients".






Blog





ADDING NEW BLOG POST

Just like in any wordpress installation you can create new blog post by choosing "Posts" and then "Add New" in leftside wordpress menu. A page for adding new blog post will open. Here you have:

Title
Title of your blog post
Text Editor
Content of your blog post. Here you can use all of the Scalia shortcodes by using Visual Composer or Shortcode Generator
Blog Item Settings
• In Type of post item you can define, whether your blog post should contain a video lightbox when clicking on featured image in the blog list or not. To enable video you can choose between youtube, vimeo or self-hosted video. If you don't want to enable video lightbox on featured image, just left "Default".
• Show Featured Image option gives you a possibility to enable/disable displaying of post's featured image inside the post itself
Page Title
Here you can set multiple options for your blog post title including excerpt. It works in the same way, as in pages (see chapter "Pages -> Adding New Page")
Categories
Here you can define, to which post categories belongs your post. You can add new blog categories in Posts ➜ Categories or directly here in Categories panel by clicking on "Add New Category"
Tags
In this panel you can tag your post. This feature is useful for "Tag Cloud" widget and for blog search
Featured Image
If you want to equip your blog post with some title image, which will appear in the list of blog posts and on the top of your blog post, use "Set featured image" to select an image from media library or to upload it from your hdd

Highlighting blog post
In addition you can set if your blog post should be highlighted / emphasized in blog list by checking the option "Show as Highlight".

After you are finished click on "Publish" to publish your blog post

NOTE: As on any page you can make additional page settings by using the panels like "Page Slideshow", "Page Portfolio" etc. For detailed description of using the page's settings see chapter "Pages".




DEFINING THE BLOG POST SIDEBAR

Enabling sidebar

As on any page, you can use default or customized sidebar inside your blog post. To enable sidebar in your blog post, set its position in Page Sidebar panel -> Sidebar Position. Here you can also enable sticky sidebar.

Customizing sidebar

You can easily define the widgets to be displayed on your blog post by using using the settings in Page Widgets panel. Here you should select Customize (is selected by default if you create new post) and then simply drag-and-drop any widgets of your choice from Available Widgets panel to the Sidebar panel. After setting up / filling your widgets don't forget to click on [save] at the bottom of each widget to save your widget settings for this customized sidebar! For detailed description of all available widgets see chapter Widgets.






CREATING A LIST PAGE FOR BLOG POSTS

In order to display your blog posts in a list form consisting of post teasers (title, excerpt, read more) do following:
1. Create a new page by going to Pages ➜ Add new
2. Select the Blog Page template to the right in panel "Page Attributes". Use the selectbox "Template".

3. Make blog list settings in section Page Blog. Here you have:
   • Blog Style: select the appearance style for your blog list
   • Post per page: enter the number of blog posts to be displayed on one page
   • Pagination: choose pagination style you wish to use
   • Ignore sticky posts: select this option if you don't want to display sticky posts as highlighted post items
   • Select Categories: here you can make multiple choice of blog categoies to be displayed in your blog list
   • Post types: here you can choose, which post types you wish to show in your list. You can choose between posts and news (description of news see below)
NOTE: as on any page here you can define your own Sidebar by making the desired settings in "Page Sidebar" panel. For detailed description of customizing the page's sidebar see chapter "Pages". As on any page you can make additional page settings by using the panels like "Page Slideshow", "Page Portfolio" etc. For detailed description of using the page's settings see chapter "Pages".




INSERTING BLOG LIST IN PAGE CONTENT

You can insert blog lists in different styles in any position of your content by using "News & Blog" shortcode with Visual Composer or Shortcode Generator. The detailed description of "News & Blog" shortcode you will find in chapter "Page Builder -> News & Blog Posts".






CUSTOMIZING BLOG SETTINGS

In order to customize some of blog settings use Theme Options of Scalia. Go to Appearance ➜ Theme Options and you will get our Admin Panel. Here select "Blog & News" to get the blog options:

Show author
Here you define whether to show the author's info in your blog posts or not
Excerpt length
Number of symbols to be shown in blog excerpt on the list page




Team

Team feature is a perfect tool to present your team inside your page content or in sidebar. For example if you have a product or service page and would like to present direct contact persons responsible for the customer communication concerning this product or service, use this tool as a shortcode or as a widget.



ADDING NEW PERSON

To add new person to your teams, go to Team ➜ Add New Person in the leftside wordpress menu. You will get a page for adding the new person. Here you can define:

Title
it is a person's title, which is used intern only for wordpress admin, for example in persons list
Text Editor
here you can enter some brief description or some quoted text concerning your person. This text will be displayed in one of team styles

In Person Settings you define the visible public settings, which will be displayed in person's information on the website:

Name:
Person's name

Position:
Position of person in your team / company

Phone:
telephone number for direct contact

Email:
email address for direct contact. If you don't want to display the email directly on your webpage, you can hide it by choosing "Hide Email option - in this case instead of email address the link to contact will be displayed

Link:
here you can link your team person
Teams
In panel Teams to the right you can select, to which teams in your company this person belongs. You can create new teams by going to "Team ➜ Sets" or directly here by clicking on "Add New Set". You can make multiple selection if this person works in multiple teams.

Featured Image is a picture of your contact person, which will be shown on the website while displaying teams. Click on “Set featured image” to select your person's image from the media library or from your local hdd.




ADDING NEW TEAM

To add new team use Team ➜ Teams in the leftside wordpress menu. Sets are teams. Here you can define following data:
Name
team's name. Is used for team's widget, where you can select teams to be displayed
Slug
slug is used in team shortcode, so be sure to fill this field properly with URL-friendly version of the team's name
Description
brief description of the team, is used only intern
After you are finished with filling the team's data click on "Add New Set" and you are done - your new team will appear in the list of available teams in the right table.




PUBLISHING TEAM ON A PAGE

You can easily insert your team overviews in different styles in any position of your content by using "Team" shortcode with Visual Composer or Shortcode Generator. The detailed description of "Team" shortcode you will find in chapter "Page Builder -> Team".






USING TEAM WIDGET

You can also publish / display your team in a page sidebar or blog post sidebar on your website.

To activate the team widget go to "Page Sidebar" panel in page options below, choose the Team widget from the list of "Available Widgets" and rag it to the right panel "Page Sidebar". Then open this widget "Team" by clicking on its title. Now you can fill your widget with general title -it is title of your widget, for instance "Key Accounts". Under the general title you can select the team sets which you would like to show in your team widget. You can select multiple teams to be displayed.

When you are finished with setting up your widget, please DON'T FORGET to click on "Save" button at the widget's bottom in order to save your content. Only after saving you widget you can publish your article.




Testimonials

Testimonials are the perfect way to show your website visitors the opinion of your customers about the work you can provide. It is a good mean of convincing your potential customers about how good you are. Scalia allows to use testimonial widgets to show testimonials.




ADDING NEW TESTIMONIAL

To add new testimonial, go to Testimonials ➜ Add New Testimonial in the leftside wordpress menu. You will get a page for adding the new testimonial. Here you can define:

Title
it is a testimonial's title, which is used intern only for wordpress admin, for example in testimonial lists
Text Editor
here you can enter the quoted text or brief description concerning your testimonial. It will be displayed in your testimonial on page

In Testimonial Settings you define the visible public settings, which will be displayed in testimonial's information on the website:

Name: Name of the person, who has written this testimonial

Position: Position of this person in your customer's company

Company: Company's name of your customer

Link to Company: URL of your customer's website

Testimonial Sets
In panel "Testimonial Sets" to the right you can select, to which testimonial sets this testimonial belongs. You can create new sets by going to Testimonials ➜ Sets or directly here by clicking on "Add New Set". You can make multiple selection if this testimonial should be assigned to multiple sets.

"Featured Image" is a picture of your testimonial's contact person, which will be shown on the website while displaying teams.




ADDING NEW TESTIMONIAL SET

Testimonial sets are are useful to group a number of topical related testimonials in one set in order to show it on the certain website page. For example if you are editing a page with some industry specific product / service description, it would be beneficial to show a set of testimonials from this industry.

To add new testimonial set use Testimonials ➜ Sets in the leftside wordpress menu. Here you can define following data:
Name
set's name. Is used for testimonial widget, where you can select testimonial sets to be displayed
Slug
slug is a URL-friendly version of the sets's name
Description
brief description of the set, is used only intern
After you are finished with filling the set's data click on "Add New Set" and you are done - your new testimonial set will apper in the list of available sets in the right table.




PUBLISHING TESTIMONIAL ON A PAGE

You can easily insert your testimonials in different styles in any position of your content by using "Testimonials" shortcode with Visual Composer or Shortcode Generator. The detailed description of "Team" shortcode you will find in chapter "Page Builder -> Testimonials".






USING TESTIMONIAL WIDGET

Just like your team members, you can show testimonials of your customers in the page sidebar. Just select one or multiple testimonial sets by clicking on checkboxes. If you have several testimonials in the set, they will be shown on the page with a fading in / fading out effects. In Scalia there are two different styles of displaying testimonials in sidebar; you can choose between them in selectbox "Style". When you are finished with setting up your widget, please DON'T FORGET to click on "Save" button at the widget's bottom in order to save your content. Only after saving you widget you can publish your article.
SEE DEMO »





News




ADDING NEWS

You can create new "News" post by choosing "News" and then "Add New News" in leftside wordpress menu. A page for adding new "news" post will open. Here you can define:

Title
Title of your news post
Text Editor
Content of your news post. Here you can use all of the Scalia shortcodes by using Visual Composer or Shortcode Generator
Page Title
Here you can set multiple options for your news post title including excerpt. It works in the same way, as in pages (see chapter "Pages -> Adding New Page")
News Sets
Here you can define, to which news sets belongs your news post. You can add new sets in News ➜ News Sets or directly here in News Sets panel by clicking on "Add New News Set"
Featured Image
If you want to equip your news post with some title image, which will appear in the news list, use "Set featured image" to select an image from media library or to upload it from your hdd

After you are finished click on "Publish" to publish your news post

NOTE: As on any page you can make additional page settings by using the panels like "Page Slideshow", "Page Portfolio" etc. For detailed description of using the page's settings see chapter "Pages".




INSERTING NEWS LIST IN PAGE CONTENT

You can insert news lists in different styles in any position of your content by using "News & Blog" shortcode with Visual Composer or Shortcode Generator. The detailed description of "News & Blog" shortcode you will find in chapter "Page Builder -> News & Blog Posts".






WPML

If you need to make your website multilingual, WPML could be the best solution to do it. WPML is the set of plugins, allowing you to easily translate your website in other languages. Scalia was carefully tested and is fully compatible with WPML. In order to use WPML you need to purchase the license for this plugin here http://wpml.org/purchase/
On the WPML.org website you can find very detailed documentation about using this plugin, check this link http://wpml.org/documentation/getting-started-guide/. After purchasing WPML you will get free support from WPML team, you can use their support forum here http://wpml.org/forums/forum/english-support/.
Below you will find some specific aspects of using WPML with Scalia.




FIRST STEPS / SETTING UP WMPL

1. Install and activate following core WPML Plugins:
• WPML Multilingual CMS
• WPML String Translation
• WPML Translation Management
2. Go to "WPML->Languages" and make initial WPML setup. Check WPML documentation for general description here http://wpml.org/documentation/getting-started-guide/.
3. For "Language URL format" we recommend to choose the first option "Different languages in directories". In order to get this properly work, you will need to adjust your .htaccess file in your WP website root-directory on FTP as follows:

# BEGIN WP
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WP





LANGUAGE SWITCHER

In Scalia you have a pre-defined location for language selector:
• In the main menu on the top
  
In order to enable language selector in the top menu, go to "WPML -> Languages", section "Language switcher options" and make following selection:

To display language selector at the bottom of the website choose following:





USING Scalia-STYLED COUNTRY FLAGS

Scalia is provided with the set of country flags, styled in flat style suitable for Scalia design. You can find all flags in folder PSD, "Flags". You can use these flags to display them in languge selector. To do this:
1. Go to "WMPL -> Languages", here look for "Site Languages" and click on "Edit languages". You will get this page:
   
2. Here you can upload Scalia flags using "Upload flag" option in column "Flag"
3. As WPML resizes all flag images to its default size, you need to overwrite these automatic resize by copying your original PNG flags using FTP in folder "wp-content/uploads/flags" on your hosting




TRANSLATING PAGES & POSTS

Go to "Pages" -> "All Pages". You see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page. Using these icons you can add a new language version of this page or edit the exiting one. The easiest way to start is to edit the original language page and here to check "duplicate" checkbox in "translate" box and then to click on "Duplicate". In this way you create a copy of your page in other language version with all the content from original language, so you can easily translate it.

You’ll probably be interested in the process of batch duplication of pages and posts. To use this feature, go to WPML->Translation Management, and from the Translation Dashboard, select the filter you want (Pages/Posts), and click ‘Display’. Select the pages or posts you want to translate or duplicate (you can select them all by clicking the checkbox besides the ‘Title’ header or footer):

Then, at the bottom of the page, choose languages for which you want to translate or duplicate, and ‘Submit Documents’:

In general, with WPML you can always choose between ‘translating’ or ‘duplicating’ content. If you do the former but want to import content from the original you can always use the buttons to ‘copy content from the original’ in their edit page; if you do the latter, you can always choose later ‘Translate independently’ so that you can save your edits. Try both procedures to see which one you find better for your workflow.




TRANSLATING QUICKFINDERS, PORTFOLIOS, TESTIMONIALS, TEAMS ETC.

Scalia comes with a rich set of custom post types such as portfolios, quickfinders, testimonials etc. and custom taxonomies. In order to get a similar interface & workflow for translation/duplication as for posts and pages (see description above), you need to go to WPML->Translation Management, and select the tab ‘Multilingual Content Setup’. At the bottom of the page you’ll see:

You need to select ‘translate’ for the custom post types you want to make translatable.




TRANSLATING HOMEPAGE

If you choose to use some specific static page or blog list to be shown on your homepage, you just need do translate this page /posts as it was described above.
If you prefer to use Home Constructor to build your homepage, be sure, that all of your content elements you would like to use on your translated homepage, are already translated. So, please, before using Home Constructor in another language version, translate your quickfinders, portfolios etc. which you use on your homepage. For process of translating pages, quickfinders etc. see description above.
NOTE: Home Constructor is language-independent. That means, that you can build different homepages in different content languages. Form example in English version you can use quickfinders, and in German language you can skip them.
To build your homepage in another language do the following:
1. Go to "Appearance" - "Theme Options"
2. Choose another language version in your WP Admin in the top menu
3. Select "Home Constructor"

Here you will see, that your homepage content is empty and you can start configuring it for the chosen language version. Proceed in the same way, as you have done it before for your initial language version (see detailed description in Chapter "SETTING UP HOMEPAGE"). Choose content elements, drag-n-drop them into homepage area and arrange it in the way you'll like it. (as noted above, you can build your homepage for another language version in other way, as for your initial language, because Home Constructor works separately with different language versions.)
For each content element choose content from selectboxes, which you would like to see on your homepage. Note, that in selectboxes you see only translated versions of your content for this language specifically. That means, that for example in German version of Home Constructor you see only German pages, portfolio sets, quickfinders etc., and no English pages, portfolios, quickfidners etc. Home Construtor filters automatically the needed language versions and shows it in selectboxes. That's why it is important, that you translate your content before building the localized language version with Home Constructor.




TRANSLATING MENUS

WPML can synchronize menus. This means that if some entries, for example some pages, posts or categories, are in the English menu, WPML can generate and keep in synch menus for other languages pointing to the translated versions of these pages, posts or categories.
NOTE: before synchronising menus be sure you have translated all of the pages you would like to appear in the new language version. Only translated pages will be synchronised!
Go to Appearance->Menus and look at "Synchronize menu" link on the top.

By clicking on it you will get following screen:

By clicking on the Sync button at the bottom of the page (with its informative legends by its side) you’ll be presented with a set of menu items that can be translated; select them all, and go ahead to apply the changes. After the synching operation you can individually edit the menus in each language from WordPress "Appearance->Menus".




TRANSLATING THEME SPECIFIC STRINGS

After translating your website content you would be probably interested in translating some theme specific phrases or words like "Next" button in testimonial or "Follow Us" title in "Follow & Contact Us" area. To do this, proceed as follows:
1. Go to "WPML -> Theme and plugins localization"
2. In the first section "Select how to localize the theme" choose "Translate by WPML." and then "Save"
3. In section "Select how to get translations for WordPress core" select "I will download translations for WordPress and save .mo files in wp-includes/languages", then "Save"
   
4. Scroll down. At the bottom of section "Strings in the theme" you will find a checkbox "Load translations if found in the .mo files. (it will not override existing translations)" - activate and and hit the button "Scan the theme for strings"
   
5. Now go to "WPML -> String Translation". Here you will find all of the theme specific strings you can now translate.
   




WOOCOMMERCE

Scalia is fully compatible with WooCommerce and includes templates integration. To get started with creating your online shop, you need to install the free WooCommerce Plugin here http://www.woothemes.com/woocommerce/. This documenation on using WooCommerce covers only the theme specific points you need to get started. To get full documentation on using WooCommerce use following links:
• WooCommerce Documentation
• WooComerce Community Forums
• WooComerce Built-In Shortcodes




FIRST STEPS / SETTING UP WOOCOMMERCE

1. Install and activate following plugin:
   • WooCommerce
   While installing WooCommerce click the “Install WooComemrce Pages” button in the purple bar to install all the default pages. WooCommerce automatically creates the necessary pages. If you need to reassign the pages to different WooCommerce page designations, you can do so in the WooCommerce settings page.
2. Go to "WooCommerce->Settings" and make initial WooCommerce setup. Check WooCommerce documentation for general description here http://docs.woothemes.com/documentation/plugins/woocommerce/woocommerce-user-guide/getting-started/.




CREATING YOUR PRODUCTS

Follow the steps described in WooCommerce Documentation
1. Click on "Products - Add Product” in WP Menu. Enter a name for your product at the top of the page.
2. Enter the product description text into the post content field, this will be all the product information.
3. The “Product Data” box is where you enter all the product details (price, SKU, shipping, and more).
4. The “Product Short Description” box which will be the short intro copy that shows next to your main images.
5. Set your main “Featured Image” in the right sidebar Featured Image box. This has to be done for every product.
6. To use a gallery of images, insert more images in the “Product Gallery” box.
7. Enter your categories in the “Product Categories” box and your Enter your tags in the “Product Tags” box.
8. When all your data is entered, click “Publish” and the item will now show on your main shop page.




Creating One-Page Site

In Scalia you have an option to create simple one-page site. It is a sort of sites like this one: http://codex-themes.com/scalia/one-page/. If you click on main menu items above, you will be slightly scrolled down to the needed section.

The process of making one-page site is very simple and consist of two steps:


STEP 1

Create your homepage using Theme Options -> Home Constructor (see description of Home Constructor here). By adding your content blocks to the homepage pls notice, that you have a field "Block ID". In this field you can enter any unique block identifier you wish.



STEP 2

After you are done with building your homepage in Home Constructor, save your changes and go to Appearance -> Menus. Here make your main menu using "Links" type of menu items. Pls note, that as "URL" you should type in the appropriate "Block ID" you have used in Home Constructor in Step 1 previously.







Creating Mega Menus

Scalia comes with built-in mega menu options. With this feature you can create stunning & impressive flyout menus with grouped structures for better usability.




STEP 1

Go to Appearance -> Menus. Create your menus as described in this section, subsection "Menus".

NOTE: In order to make mega menus, your menu structure must contain min. 3 levels, where your:

1. first level represents your main menu item
2. second level would be a title of the grouped submenu items
3. third level would coontain the actual submenu items




STEP 2

Now open your first level menu item. Here you can make general settings for your mega meni. You will see following options:

Enable Mega Menu
With this option you enable the mega menu view.
Mega Menu Masonry Style
By default mega menus in Scalia have justified grid. With this option you can enable masonry grid
Number of columns
Here you can define the number of columns to be displayed in your mega menu
Background image
If you wish to use a background image in your mega menu, here you can define this image. In our example it is something like this http://codex-themes.com/scalia/wp-content/uploads/2015/01/galleries_megamenu_image2.jpg
Position
Here you set the position of the background image you have chosen previously
Padding
In these field you can set paddings for your mega menu




STEP 3

Now open your second level menu item.

Icon
If you wish to set an icon for your submenu title, you can make it here by selecting the icon code and pasting it in this field.
Column width
Define the width of your first column in mega menu layout
Don't link
If you don't want to make your submenu title clickable, here you can deactivate it
Don't show
In case you don't want to display the submenu title, here you can hide it
This item should start a new row
If enabled, this option moves this submenu title to the new row in your mega menu layout




STEP 4

The last step - go to the third level menu item.

Icon
If you wish to set an icon for your menu item, you can make it here by selecting the icon code and pasting it in this field.
Label
This option enables you to add some highlighted markers/labels like "NEW", "HOT" etc. to your menu item.


That's all. Now make the same with the rest of your menu items and save your mega menu.










Mobile Menus


Scalia transforms your menus to responsive style automatically, so you don't need to make some special settings at this point. The only thing you might know is, that in responsive menu all menu items, which have submenu items, are not clickable by default. So if you click on such menu item, it will open the submenu without loading the actual page.

If you don't need this behaviour for some of your menu items (i.e. you wish to make them clickable), use this option in your menu item (in "Appearance -> Menus"):
Make clickable on mobile
If enabled, after you click on this menu item on mobile device, you will see an additional option "Show this page" in mobile menu. In this way your website visitor can decide, whether he would like to see this page or to go further to submenu items.




Font Icons

Scalia is delivered with a huge set of ready-to-use font icons. Still you have always an option to add your own font icons or to modify the existing icons. First, if you run main scalia parent theme, we recommend to install and use main child theme for making these changes (check scalia-default-child.zip). It is needed for further Scalia updates in future. Otherwise, if you will make these changes directly in Scalia parent theme, they will be lost after next update.

Adding new social icons

If you wish to add or to replace social icons, which are positioned in top area and footer of the theme, proceed with these steps:

PART 1: Adding new icons
1. Find the file "scalia-socials.svg" in folder "fonts" (in Scalia theme) and import this file to https://icomoon.io/app/#/select
   
2. Add to the end of this imported set new icons from icomoon, which you wish to have. After that, select all icons and click on "Generate Font"
   
3. Click on "Codes" and make "Reset codes" beginning from
   
4. Click on "Preferences". Make "Font Name" scalia-socials and click on "Font Download"
   
PART 2: Updating font file
1. Upload the folder "Fonts" from the zip-file you have downloaded from icomoon in your child theme folder per FTP
2. Open "style.css" of the child theme and add:
   
   @font-face {
   font-family: 'scalia-socials';
   src:url('fonts/scalia-socials.eot?-yiqymz');
   src:url('fonts/scalia-socials.eot?#iefix-yiqymz') format('embedded-opentype'),
   url('fonts/scalia-socials.woff?-yiqymz') format('woff'),
   url('fonts/scalia-socials.ttf?-yiqymz') format('truetype'),
   url('fonts/scalia-socials.svg?-yiqymz#scalia-socials') format('svg');
   font-weight: normal;
   font-style: normal;
   }
   
If you don't want to use child theme, just replace the existing "scalia-socials" fonts (svg, eot, woff, ttf) in folder "fonts" in Scalia theme with the downloaded ones (it is recommended to make backup of the existing font files before replacing).
PART 3: Adding icons in Top Area
1. In functions.php add:
   
   add_action('scalia_print_socials', 'my_scalia_print_socials');
   function my_scalia_print_socials() {
   ?>
   <div class="socials-item custom-social-icon-1"><a href="http://link-to-social-1.com" title="Custom social 1">Custom social 1</a></div>
   <div class="socials-item custom-social-icon-2"><a href="http://link-to-social-2.com" title="Custom social 2">Custom social 2</a></div>
   <div class="socials-item custom-social-icon-3"><a href="http://link-to-social-3.com" title="Custom social 3">Custom social 3</a></div>
   <?php }
   
   in href pls place the URLs you wish to have
   
   
2. Enter this custom css in Theme Options - General:
   
   .socials-item.custom-social-icon-1 a:after {
   content: '\e609';
   }
   .socials-item.custom-social-icon-2 a:after {
   content: '\e60a';
   }
   .socials-item.custom-social-icon-3 a:after {
   content: '\e603';
   }
   
PART 4: Adding icons in footer
1. In functions.php add:
   
   add_action('scalia_footer_socials', 'my_scalia_footer_socials');
   function my_scalia_footer_socials() {
   ?>
   <div class="socials-item custom-social-icon-1"><a href="http://link-to-social-1.com" title="Custom social 1">Custom social 1</a></div>
   <div class="socials-item custom-social-icon-2"><a href="http://link-to-social-2.com" title="Custom social 2">Custom social 2</a></div>
   <div class="socials-item custom-social-icon-3"><a href="http://link-to-social-3.com" title="Custom social 3">Custom social 3</a></div>
   <?php }
   
   in href pls place the URLs you wish to have
   
   
2. Enter this custom css in Theme Options - General:
   
   .footer-socials-item.custom-social-icon-1 a:after {
   content: '\e609';
   }
   .footer-socials-item.custom-social-icon-2 a:after {
   content: '\e60a';
   }
   .footer-socials-item.custom-social-icon-3 a:after {
   content: '\e603';
   
That's all.



Adding new font icons for content elements

PART 1: Creating icon font
1. Go to https://icomoon.io/app/#/select and import here the file "scalia-user-icons.svg" from the folder "fonts" of Scalia theme
   
2. At the end of this icon set add your new icons which you can choose from icomoon set. After that select all icons and click on "Generate Font"
   
3. After that click on "Codes". Here make "Reset Codes" beginning from e601.
   
4. After that click on "Preferences". Make Font Name scalia-user-icons and download the font file via "Font Download"
   
PART 2: Adding icon font in theme

We would recommend to use scalia main child theme for these modifictaions (if you use main Scalia theme)

1. Install child (check in folder Child_Themes / scalia-default-child.zip)
2. Per FTP copy to the child's folder the folder /fonts/ from the ZIP you have downloaded from icomoon
3. In the beginning of the file style.css of the child theme add following:
   @font-face {
   font-family: 'scalia-user-icons';
   src:url('fonts/scalia-user-icons.eot?-yiqymz');
   src:url('fonts/scalia-user-icons.eot?#iefix-yiqymz') format('embedded-opentype'),
   url('fonts/scalia-user-icons.woff?-yiqymz') format('woff'),
   url('fonts/scalia-user-icons.ttf?-yiqymz') format('truetype'),
   url('fonts/scalia-user-icons.svg?-yiqymz#scalia-user-icons') format('svg');
   font-weight: normal;
   font-style: normal;
   }
   
That's all. If you don't use the child theme, so just replace the files in folder /fonts/ with the files you have downloaded from Icomoon.






Legal Notes





DISCLAIMER

Scalia was tested to work in different browsers and wordpress versions (see Theme's Page on themeforest.net). However we cannot guarantee, that Scalia will function with all third party plugins and server environments. We cannot provide support solving any conflicts with third party plugins.




CREDITS

Please be advised that all preview data (text and media) is for preview purposes only and is not included in the product or covered by the product's license. The responsibility for any content used on a website lies solely with the website owner. If any media (including images, videos, audio, or text) requiring its own license has been used, it is the responsibility of the website owner to purchase the appropriate license for that media.
Icons:
Free icon packs from http://icomoon.io/ and Font Awesome

Images on theme demo website:

Graphicriver.net (regular license), IDs: 6691601, 6993268, 7345815, 3484320, 6468313, 5705964

Photodune.net (regular license), IDs: 4555418, 3256414, 1689745, 914953, 6734927, 5848717, 5578933, 1373187, 1837889, 3307270, 5248341, 3979249, 1861062, 4555418, 369318, 358198, 353390, 5757567, 5652496, 2360811, 4807316, 1714557, 4016845, 5345409, 3419961, 514671, 5692739, 4807316

Images With Creative Commons Attribution License 3.0
Unsplash.com
Thestocks.im
Pixabay.com
Mazwai.com
Pixeden.com

Shutterstock.com (regular license), IDs: 179473799, 161730896, 166441373, 212589148, 153626741, 225388861, 183006680, 228152602, 183009029, 133300961, 182603093, 183009773, 128238317, 113168935, 114041509, 148724891, 159326039, 132366848, 230047054, 189842585, 230780998, 126492314, 173727986, 154766285, 197558105, 182603069, 214814665, 196294955, 206695300, 212621287, 159672671, 147893546, 141236470, 238047637, 88315597, 51719998, 133786706, 233683780, 184342181, 215470309, 99256976, 152291621, 96103796, 218526937, 155808509, 231299968, 207559387, 170924099

Fonts:
http://www.google.com/fonts/

Coding:
Jquery http://jquery.com/

JS:

html5.js
/**
* @preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/

jquery.carouFredSel.js
/*
* jQuery carouFredSel 6.2.1
* Demo's and documentation:
* caroufredsel.dev7studios.com
*
* Copyright (c) 2013 Fred Heusschen
* www.frebsite.nl
*
* Dual licensed under the MIT and GPL licenses.
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*/

jquery.galleriffic.js
/**
* jQuery Galleriffic plugin
*
* Copyright (c) 2008 Trent Foley (http://trentacular.com)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Much thanks to primary contributer Ponticlaro http://www.ponticlaro.com)
*/

colorpicker
/**
*
* Color picker
* Author: Stefan Petre www.eyecon.ro
*
* Dual licensed under the MIT and GPL licenses
*
*/

fancyBox
/*!
* fancyBox - jQuery Plugin
* version: 2.1.4 (Thu, 10 Jan 2013)
* @requires jQuery v1.6 or later
*
* Examples at http://fancyapps.com/fancybox/
* License: www.fancyapps.com/fancybox/#license
*
* Copyright 2012 Janis Skarnelis - janis@fancyapps.com
*
*/

jquery-ui
/*! jQuery UI - v1.10.2 - 2013-03-14
* http://jqueryui.com
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.ui.effect.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effect-scale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js, jquery.ui.menu.js, jquery.ui.position.js, jquery.ui.progressbar.js, jquery.ui.slider.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */

tinymce-widget
/*
Version: 1.1.1
Author: Black Studio
Author URI: http://www.blackstudio.it
License: GPL2
*/

nivo-slider
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

LayerSlider WP
/*
* Plugin Name: LayerSlider WP
* License: Extended License * Plugin URI: http://codecanyon.net/user/kreatura/
* Description: LayerSlider is the most advanced responsive WordPress slider plugin with the famous Parallax * Effect and over 200 2D & 3D transitions.
* Version: 5
* Author: Kreatura Media
* Author URI: http://kreaturamedia.com/

Visual Composer
/* Plugin Name: WPBakery Visual Composer * Plugin URI: http://vc.wpbakery.com
* License: Extended License
* Description: Drag and drop page builder for WordPress. Take full control over your WordPress site, build any layout you can imagine – no programming knowledge required.
* Version: 4.4.2
* Author: Michael M - WPBakery.com
* Author URI: http://wpbakery.com