Introduction

Thank you for choosing Interico! This documentation page will make it easy for you to set it up. Simply follow the quick installation guide step by step, as well as check the theme's features, so you are comfortable using them.

Interico was made very simple to install and use, but if you happen to face any problems with setting up your website, kindly use the Support system and we'll assist you shortly!

1. Installation Guide

Interico is a WordPress theme, that means you need a WordPress Content Magement System (CMS) installed. If you are new to this - don't worry! Here is a famous 5 minute WordPress Install to get you started:


https://www.youtube.com/watch?v=ell0SiTZyX8


https://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install


You can download WordPress from: Official WordPress Website


Here is what the theme installation process looks like:

  1. Install WordPress CMS (if you don't have it already)
  2. Install “Interico” Theme
  3. Install Required Plugins
  4. Import Demo Content
  5. Customize!

1.1. Installing the Theme

Regular install

Go to Appearance -> Themes -> Add New -> Upload Theme, upload the interico.zip file and click Install Now.

Then, find the Interico theme in Appearance -> Themes and click Activate. Great! Next step is install the required plugins.


Child theme

If you plan to make changes to core theme files, it is best to use a child theme. It will keep you safe from losing your updates after updating the core theme files when the new version is released. The child theme is included in the download package as child theme.zip. Upload it using the same method as for the main theme and it will appear in the Appearance -> Themes section.


Install using the Envato Market plugin

If you would like to get updates regularly and be able to update the theme via the WordPress admin panel, you need to install the Envato Market plugin. It can be downloaded directly from here:


Download Envato Toolkit Plugin


Then, you have to follow their instructions:

  1. Download the envato-market.zip and unpack the archive.
  2. Upload envato-market to the /wp-content/plugins/ directory.
  3. Activate the plugin through the 'Plugins' menu in WordPress.
  4. Click the 'Envato Market' menu in WordPress and connect to the API.

Check their website for detailed description.


1.2. Plugins

You have to install the plugins right after the “Interico” WordPress theme is activated and before importing the demo content.

For the main functionality, we are using these plugins:

  • Themicart Shortcodes
  • Advanced Custom Fields Pro
  • Portfolio Post Type
  • WPBakery Page Builder
  • Contact Form 7
  • Breadcrumb NavXT
  • WooCommerce
  • WP Featherlight - lightbox for images
  • Customizer Export/Import - used for exporting and importing demo color presets. Deactivate this plugin after you are finished with the customizer import.
  • Customizer Reset - used for resetting the customizer before importing new settings. Deactivate this plugin after you are finished with the customizer import.

Here are some optional recommended plugins, which add useful functionality:

  • All in One SEO - for SEO optimization purporses
  • Simple Page Sidebars - allows to use custom sidebars for desired pages

After activating the theme, You will see a notice with the required plugins to be installed, simply tick them all, install and activate. Below are quick instructions on how to do so.


Install Plugins:

  1. Tick all plugins
  2. Bulk actions -> Install
  3. Apply

Activate Plugins:

  1. Tick all plugins
  2. Bulk actions -> Activate
  3. Apply

F.A.Q.: Some of the plugins failed to install automatically?

Find the plugins in the download package, folder named 'bundled-plugins'. Upload the .zip archives of the plugins using WordPress dashboard Plugins -> Add New -> Upload Plugin

1.3. Import Demo Content

Once the plugins are installed, now you can import the demo data. Go to Appearance -> Import Demo Data. Click Import Demo Data and wait until it's finished!


F.A.Q.: Demo failed to import?

The common reasons are server related. It's advised to add the following settings at the bottom of the .htaccess file, found in the WordPress root folder using FTP or FileManager:

memory_limit = 256M
upload_max_size = 64M
post_max_size = 64M
upload_max_filesize = 64M
max_execution_time = 300
max_input_time = 1000

If the server refuses to upload images, it's advised to check the permission and set them to 744 or 755 for the 'uploads' folder using FTP.

If the demo still cannot get imported (lost connection, etc.), then import the demo files manually by following these steps:

  1. Import demo content: navigate to WordPress dashboard -> Tools -> Import -> Install WordPress importer and once ready, upload content.xml file from /interico/inc/demo-files/
  2. To import widgets data: navigate to Plugins -> Add New -> search for plugin 'Widget Importer & Exporter' and once installed, navigate to Tools -> Widget Importer & Exporter and upload widgets.json file from /interico/inc/demo-files/
  3. Import customizer settings (only if used other than main demo): navigate to Appearance -> Customize -> Import/Export and upload chosen demo .dat file from main download package, folder 'Demos customizer import'. For example: Demo 1 - Main (Dark).dat

1.4. Import Demo Customizer Settings

After installing the demo content, the theme will have default Interico styling, which you can use with all front page demo layouts. If you wish to use other than the main demo, you can change the home page in Appearance -> Customize -> Homepage and select the desired demo from the available options.

Next, to upload the desired demo styling, go to the Appearance -> Customize -> Import/Export tab and upload the desired demo settings. You can find the settings for all of the demos in your download package folder Demos customizer import. You can try as many options are you wish, simply click on Reset on the top before importing the new settings.

Note, after resetting and importing new settings, you may have to set the main navigation. In Appearance -> Menus, choose the main menu and tick it as Primary.

1.5. Plugin Settings

After importing the content, there are a few settings you need to make in order the site to function properly.


1. Activate Page Builder for custom post types.

For WPBakery Page Builder, navigate to WPBakery Page Builder -> Role Manager -> Post types, select Custom and tick 'Projects'.

For SiteOrigin Page Builder, navigate to Settings -> Page Builder and tick the Projects, Testimonials and click Save Settings. This will allow you to use the page builder on these pages.


2. BreadcrumbNavXT settings

Go to Settings -> BreadcrumbNavXT -> Post Types. Then, select the correct root pages for the post types: Projects, Testimonials.


3. Set menu locations in widgets (only if you see 2 out of 4 columns in the footer)

Go to Appearance -> Widgets and set the correct menu locations in the widgets as in the image below. 1 - select correct menu, 2 - Click Save. Do the same for the menus that are in the 3, 4 and 5 widget areas.


4. Run WooCommerce Setup Guide (optional)


1.5. Optional Plugin: WP Featherlight

This ultralight plugin allows to easily add a simple and beautiful lightbox for your images. Using it is very quick: when adding images to your page, make sure they link to Media file. Click on an image and open the Edit options:

Then, set the link option to Media file as shown below:

You can also create a gallery with the lightbox, here is a detailed guide:

  • 1. Install the plugin ‘WP Featherlight – A Simple jQuery Lightbox’ via your WordPress admin and activate it
  • 2. Navigate to the page where you want to add your gallery
  • 3. Add new widget -> Visual Editor
  • 4. Click ‘Add Media’ -> ‘Create gallery’ (on the left)
  • 5. Select or upload the images, click ‘Create Gallery’
  • 6. On the right, select the ‘Link to’ value to ‘Media file’ from the dropdown menu (important), you can also set up the columns and thumbnail sizes there.
  • 7. Click ‘Insert Gallery’ and you will see it on your page, images opening in a nice light box.

1.6. Optional Plugin: Simple Page Sidebars

If you wish to display custom sidebar on a certain page, this plugin will help you do just that. Here are the steps in order to get different sidebars for your services pages:

  • 1. Install the plugin ‘Simple Page Sidebars’ via your WordPress admin and activate it
  • 2. Then, go to Settings -> Reading -> Select the Default sidebar, which will be replaced with your new sidebar. If you need a custom sidebar for some of your service pages, then select ‘Sidebar on Service Pages’. If it's other page, select the ‘Sidebar on About us page’.

  • 3. Go to the desired page Edit screen and find the Simple Page Sidebars options. Create a new sidebar and give it a custom name.

  • 4. Finally, go to Appearance -> Widgets, there you will find the sidebar with your given name. Insert the desired widgets and they will appear on the page.

2. Customize

In the theme customizer, click on Interico Options, it will bring a new set of sections:

  • General Styling
  • Logo
  • Top Subnav
  • Header
  • Page Title Area & Content
  • Social Media
  • Widgets Styling
  • Footer CTA
  • Footer
  • Shop
  • Settings

2.1. Customize: General Settings

In this General Settings tab, you can modify settings that are applied for general website styles, such as headings font weight, color, body text color, accent color, button radius, padding and border thickness settings and more.

2.3. Customize: Logo

In the Theme Customizer -> Interico Options -> Logo, you can upload your own logo. You need two images: one in normal resolution, recommended height: 90px. The second one is double the size, which is used for mobile devices to avoid pixelation appearing on the high DPI screens.

2.4. Customize: Top Subnav

In the Theme Customizer -> Interico Options -> Subnav, you can control the visibility, colors and content. Use the options to navigate between light and dark color schemes, as well as change the contact information to yours.

2.5. Customize: Header

In the Theme Customizer -> Interico Options -> Header, you can select light or dark color scheme, sticky options, change header shadow style, and change color for header background and text colors for each item individually.

2.6. Customize: Page Title Area

In the Theme Customizer -> Interico Options -> Page Title Area, you can change page title text and background color, as well as fullwidth background image, as shown in the image below.

In order to edit the content in the page title area, you need to enter the Edit screen of the certain page and find the fields below.

As shown in the above settings, you can upload a different background image for each of the inner page. If no image is uploaded, then the page will use the image uploaded from the customizer.

2.7. Customize Page Title Area: Video background

Setting up the video for the background is easy: simply upload the video file to your YouTube or Vimeo account and insert the link as below:

2.8. Customize: Social Media

Apply hover colors for the social media icons, as well as place correct links, which open in a new tab:

2.8. Customize: Widgets Styling

Change the colors and visibility settings for the widgets:

2.9. Customize: Footer CTA

In the Footer CTA tab, you can change the text, colors and visibility options:

2.10. Customize: Footer

In the Theme Customizer -> Interico Options -> Footer, you can change the width of the footer columns. The maximum width of all footer columns cannot be more than 100% or 12/12 columns.

The footer will display as many columns as there are widgets, which you can control at Appearance -> Widgets. If a footer column has no widget, it will not be displayed then, this way you can reduce the column count.

Next, you can modify footer colors, logo, copyright text and other settings.

2.11. Customize: Shop

Change the number of columns and items per page:

2.12. Customize: Settings

Change the 'Read More' text for service and blog item boxes, custom post type link slugs:

2.13. Permalinks

In the Theme Customizer -> Interico Options -> Settings, you can change the slug for the projects and services. For example, if you wish to rename the Projects page to Portfolio, then you would have to change the slug projects into portfolio. You can do the same if you wish to edit the slug for the services. If you need to rename the labels, open the file in the theme folder /inc/extras.php and rename the labels as you like.

After you change slugs, you must then go to Settings -> Permalinks -> Save Changes. It will update your links with the new ones.

3. Site Structure

In order to have everything organized nicely and quickly in your website, it is best if you know your site's structure beforehand. Take a few minutes and think what pages you want in the navigation and in what hierarchy.

Then, the rest is easy, just follow the instructions for each page.

3.1. Pages & Header Navigation

In order to create pages, simply navigate to Pages -> Add new:

Then, you will want to add the pages to the header main menu. Go to Appearance -> Menus. Edit the existing menu, or create your own, just don't forget to check the Primary Menu option, located under Menu Settings below.

Drag & drop the pages in your desired hierarchy, save it and it will appearn on the top header!

  • 1. Tick the desired items to add to the menu.
  • 2. Click Add to Menu, and the items will appear on the rigth side.
  • 3. Drag and drop the items in the hierarchy that you like.
  • 4. Save the menu.

3.2. Front page with FullWidth Slider

1. Navigate to Pages -> Add new:

2. On the right-hand side, choose page template: Fullwidth Slider Page

3. Sroll down and you will see the Slider options. Click on Add Slide, and the following options will show up:

Slide fields explained:

  • 1. Slide subtitle.
  • 2. Slide main heading.
  • 3. Secondary text.
  • 4. Add buttons using shortcodes.
  • 5. Select Image background.
  • 6. Select overlay color.
  • 7. Select overlay opacity.
  • 8. Headline font size.
  • 9. Content animation style.

If chosen video in field 4, the background options are as below:

Finally, choose overall slider settings:

  • 1. Select slider style
  • 2. Turn on/off auto cycle
  • 3. Set slider interval in miliseconds (1s = 1000ms)
  • 4. Choose slide transition animation between fade and slide.

3.3. Projects Page

Choose page template: Projects page. This page will contain all of your projects.

To add a Project, go to Projects -> Add New Project. This will create a single project item.

Populating your project is very simple:

  • 1. Select a category for the project. This will be work as a filter in the Projects page.
  • 2. Allows to create new category.
  • 3. Featured Image will show as your project thumbnail on the Projects page.

3.4. Add Service Items

Create a new page as shown below:

Inside the page, set the title, featured image and excerpt (optional) that will be displayed in the widget Interico: Image box as following.

To create a grid of service items as in our demos, simply create a row with desired number of columns, insert widget Interico: Image box, set the optional content and styling settings as in the example below.

Inside the page builder, the content will look as following. The example shows the first column that contains content, and the rest 3 columns display service items.

On the front end, the items will be displayed as following.

3.5. Testimonials

Add Testimonials as shown below:

In the page edidor, set the Featured image, it will show as the service image on the Services page. Set your own excerpt to be displayed in the service box as well.

  • 1. Person or company name
  • 2. Subtitle: Position or company name (optional)
  • 3. Testimonial headline, displayed in bigger characters
  • 4. Content
  • 5. Featured Image

To display the testimonial on a page, use Page builder and select the widget Interico: Testimonial Box. You can choose from 3 different testimonial styles, here is one of the styles that your single testimonial item will look like:

4. WPBakery Page Builder

Building pages is easy with the WPBakery Page Builder. Find the official video guides on the following links:


Official: WPBakery Video Tutorials
Official: Knowledge Base

As a quick introduction on how the page builder works, let's add a simple text element and control the layout for the row. Firstly, on the edit screen of a page, let's choose Backend or Frontend editor as shown below. We will be using the Frontend Editor view.

Once the page puilder view loads, click on the + sign, which will open elements window.

Then, choose the desired item, such as Text Block, click Save and you'll see it added to the content instantly.

As you will notice, the element will stretch through whole row. You can divide the row into columns by clicking on the following button:

By clicking on the Edit button, layout options will be shown for the row. In order to make it fullwidth, simply select the Row stretch to Strech Row and the row will strech thoughout the window, while keeping the content in a container. This allows to add a nice fullwidth background and keep the content in place. This technique is used throughout the Interico theme.

On the Design Options tab, you are able to change design options, such as background color, background image, margin, padding and other options.

Interico theme comes with a bunch of custom elements added to the WPBakery page builder, each containing useful options to edit style, layout and content.

  • 1. Divider - Add dashed divider to separate the sections of a page.
  • 2. Dash - Add a dash next to the heading to match the theme style.
  • 3. Subtitle - Add subtitle with/without a dash.
  • 4. Caps - Use a large character in content.
  • 5. Linear icon - Add linear icon, find the library in Linearicons.
  • 6. FontAwesome icon Add FontAwesome icon, find the library in FontAwesome.
  • 7. Button - Add button in different styles.
  • 8. Video Button - Add button that opens a video in a popup.
  • 9. Video Image - Add image that opens a video in a popup.
  • 10. Feature Box - Add feature box with an icon, in different layouts and styles.
  • 11. Testimonial Box - Add testimonial item (using testimonial post ID).
  • 12. Number Box Add number box in different styles and layouts.
  • 13. Team Member - Add team member item with style, image and content settings.
  • 14. Image Box - Add Image box in different styles and settings to display a page, product, category, other.
  • 15. Blog Posts - Add blog posts block to display 3 recent posts.
  • 16. Blog Posts Loop - Add blog posts loop in desired number of columns.
  • 17. Testimonials Slider - Add testimonials slider.
  • 18. Projects - Add projects gallery in different layouts and styles.
  • 19. Projects Slider Add horizontal projects slider.
  • 20. Advanced Google Map Add Google Map with custom marker and theme matching style.
  • 21. Tooltip Image Add image with a tooltip.

4B. Page Builder by SiteOrigin (Alternative)

Building pages is very simple using the Page Builder plugin by SiteOrigin. Open page editing screen, and click on Page Builder on the right. Below is a screenshot of a single service page layout.

  • 1. Add Widget - lets you insert a widget to build the page content.
  • 2. Add Row - create a row with columns, in which you can place the widgets.
  • 3. Layouts - copy a layout from existing pages or import/export.
  • 4. Live Editor - create content and see the changes on the same screen.
  • 5. Edit Row - modify the row's parameters, such as background color, margin, column count inside the row, etc.
  • 6. Order rows by drag & drop.

In order to start building content, firstly click on Add Row, and you will see a similar screen:

  • 1. Set number of columns in a row.
  • 2. Select width of columns
  • 3. Set width manually by dragging the line.
  • 4. Set bottom margin if you want to push down the content below the row. Default is 30px.
  • 5. Select Fullwidth Stretched if you wish to use the following widgets: Interico: Blog Posts, Interico: Testimonials. These widgets are used on the home page of our demo.

4B.1. Page Builder by SiteOrigin: Import & Export template

Import already built templates from any of the demos and modify them based on your needs. You can find all of the templates in the download package, Page builder templates folder.

Click on Layouts:

Then, select the Import/Export tab and upload the desired template. Once uploaded, you can easily remove, add or change the order of the rows. It also allows to download the existing page layout.

4B.2. Page Builder by SiteOrigin: Copy page

Instead of importing from a file, you can import an existing page. Click on Layouts, choose the appropriate tab for cloning pages, services or other. Select the desired item and click Insert.

5. Widgets (Page Builder by SiteOrigin)

Interico has 10 widgets that will help you build page layouts if using Page Builder by SiteOrigin. These widgets are used as shortcodes for WPBakery page builder, so they have similar options and this could be a general reference on how to use these elements on WPBakery Page Builder.

Some of the widgets allow inserting links, so remember that all links used in the widgets or shortcodes must start with http://. Below is a list of widgets available:

5.1. Interico: Blog Posts

Add a recent posts block, used on the demo home page.

Use Page Builder to create a row. In order to display a fullwidth row, select row layout Fullwidth Stretched. Set the widget title and select the blog page as the destination link. Also, set the padding for the row, we are using 120px padding for top and bottom, which gives it some nice white space.

5.2. Interico: Feature Box

Use this widget with an icon for displaying company or service features, contact details etc. To find the icons, visit:

The widget has the following settings:

  • 1. Layout: icon left, icon top left, icon top centered.
  • 2. Box style: white with shadow, gray or unboxed
  • 3. Linearicon: select icons from Linearicons
  • 4. FontAwesome icon: select icons from FontAwesome
  • 5. Feature title
  • 6. Feature Text
  • 7. Feature Link Text
  • 8. Link

5.3. Interico: Image Box

Use this widget for displaying services or other pages. It displays the featured image, title, content and link. Change the image size, box style and displayed content in order to achieve different box appearance. You can use this widget in a sidebar as well. The links must start with http://

The widget has the following settings:

  • 1. Select page to display: it can be a service page or any other.
  • 2. Custom heading: enter heading, otherwise it uses the title of the page.
  • 3. Content: add content below the title (optional)
  • 4. Select box style: white with shadow or gray
  • 5. Show or hide the 'Read more' link
  • 6. Featured image size: use large vertical or smaller horizontal featured image.
  • 7. Alignment: align the content inside the image box.
  • 8. Custom link text: replace the 'Read more' link text with your own.

5.4. Interico: Number Box

Use this widget for displaying services, stats, features, process, etc. It shows a nice huge number and adds some character to your website. If an URL is added, the widget can be a clickable box that leads to inner page. The links must start with http://

In our demo, we are using a Full width layout with gray #f9f9f9 or #f5f5f5 color background, together with a background image of single vertical line with the 'tiled' setting.

The widget has the following settings:

  • 1. Large number: enter large number or any other symbols.
  • 2. Heading: add heading for the number box.
  • 3. Content: add content below the title (optional)
  • 4. Link text: add link text (optional)
  • 5. Link URL: add destination link, whcih will make the number box clickable (optional)
  • 6. Select style: for light or for dark background.

5.5. Interico: Projects Gallery

Display recent projects on your home page. Use FullWidth Stretched row layout in the page builder. You can customize the colors by using the Theme Customizer.

The widget has the following settings:

  • 1. Select gallery style
  • 2. Set title (Optional)
  • 3. Select Projects Category to Display
  • 4. Number of columns (2, 3 or 4)
  • 5. Number of rows
  • 6. Gallery Button Text (Leave empty to hide)
  • 7. Gallery Button link

You can customize the colors of this widget in Appearance -> Customizer.

You can also modify the number of columns for the actual projects page. Enter the edit screen of the projects page and find the options below:

  • 1. Select gallery style
  • 2. Select color scheme
  • 3. Number of columns (2, 3 or 4)
  • 4. Show or hide gallery filters

5.6. Interico: Projects Gallery Single Category

Display recent projects of one single category, which is great for displaing similar projects of the same category in the project page. Use FullWidth Stretched row layout in the page builder.

The widget has the following settings:

  • 1. Select gallery style
  • 2. Set title (Optional)
  • 3. Select Projects Category to Display
  • 4. Number of columns (2, 3 or 4)
  • 5. Number of rows
  • 6. Gallery Button Text (Leave empty to hide)
  • 7. Gallery Button link

5.7. Interico: Projects Slider

Display recent projects as a slider with vertical items. Use FullWidth Stretched row layout in the page builder.

The widget has the following settings:

  • 1. Number of items to load
  • 2. Captions style: middle centered or bottom left
  • 3. Read more button text (Optional)
  • 4. Gallery Button Text (Leave empty to hide)
  • 5. Gallery Button link

5.8. Interico: Team Member

Use this widget to display a team member or any other type of content as it allows to insert custom image, title, description, link, etc.

The widget has the following settings:

  • 1. Heading
  • 2. Link to bio page
  • 3. Position
  • 4. Phone
  • 5. Biography
  • 6. Image

To display the image, you need to insert the image URL as in the example below. Click on Select Image, then upload or select the desired image and click the File URL to get the image URL and then click Insert into Post.

5.9. Interico: Testimonial Box

Display a single testimonial in different layouts.

The widget has the following settings:

  • 1. Select the testimonial to display
  • 2. Select testimonial style: Profile inside, profile bottom center, profile bottom center overlapped, profile bottom left

5.10. Interico: Testimonials

Display testimonials slider as on our home page. Use FullWidth Stretched row layout in the page builder.

The widget has the following settings:

  • 1. Set title
  • 2. Button text
  • 3. Button link
  • 4. Color scheme - choose between light and dark color schemes for white, dark or colored background.

6. Shortcodes & Helpers

Use the following shortcodes to generate content. Replace content with yours and you'll be good to go!

6.1. Dividers

Shortcode:
[divider]
Example:
Shortcode:

[dash]

[dash style="light"] // Use on dark background

Example:
Shortcode:

[centerdash]

[centerdash style="light"] // Use on dark background

Example:
Shortcode:

[subtitle]This is a subtitle for the heading[/subtitle]

[subtitle style="light"]This is a subtitle for the heading[/subtitle] // Use on dark background

[subtitle style="light" dash="false"]Subtitle with no dash[/subtitle] // Use on dark background, subtitle without the dash

Example:
This is a subtitle for the heading Subtitle with no dash

6.2. Caps

Shortcode:

[caps]T[/caps]his is a paragraph with capitalized character. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Example:

This is a paragraph with capitalized character. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

6.3. Icons

Shortcode:

[lnr]lnr-home[/lnr] // Linearicon

[lnr size="48" color="#0000ff"]lnr-home[/lnr] // Add size and color attributes

Example:
Shortcode:

[fa]fa-leaf[/fa] // FontAwesome

[fa size="48" color="#0000ff"]fa-leaf[/fa] // Add size and color attributes

Example:

6.4. Buttons

Shortcode:

[button]Primary Button[/button]

[button link="#"]Primary Button with a link[/button] // replace # with your URL, starting with http://

Example:

Primary Button

Button shortcode accepts these parameters:

Style:

style = "regular"

Link (must start with http://):

link = "YourURL"

Target. Use this if you want the link to open in a new browser tab.

target = "_blank"

Shortcode:
[button style="regular" link="YourURL" target="_blank"]Regular Button[/button]
Example:

Regular Button

6.5. Accordion

Shortcode:
[collapsibles]
	[collapse title="Collapse 1" state="active"]
		Your Content 1
	[/collapse]
	[collapse title="Copllapse 2"]
		Your Content 2
	[/collapse]
	[collapse title="Copllapse 3"]
		Your Content 3
	[/collapse]
[/collapsibles]
Example:

6.4. Tabs

Shortcode:
[tabs]
	[tab title="Title 1"]
		Tab Content 1
	[/tab]
	[tab title="Title 2"]
		Tab Content 2
	[/tab]
	[tab title="Title 3"]
		Tab Content 3
	[/tab]
[/tabs]
Example:

6.5. Table

Service Time Support Price
Architecture Project 1h Yes $1920
Machine Rent 2h Yes $1299
Training 40h No $6299
Consultation 1h Yes $199
Renovation Project 6h Yes $1920
[table cols="Service, Time, Support, Price" data="Architecture Project, 1h,  Yes,  $1920, Machine Rent, 2h,  Yes,  $1299, Training, 40h,  No,  $6299, Consultation, 1h,  Yes,  $199, Renovation Project, 6h,  Yes,  $1920"]

6.6. Google Map

We are using the widget: SiteOrigin Google Maps for its flexible options and ease of use.

On the contact page in the demo content, you will find the SiteOrigin Google Maps widget. There are a few options that need to be entered, such as the API key, custom marker, location, and map height if needed.

In order to get the API key from the Official Google website, follow this link:


Get API key

If you have the default demo imported, the map will already have everything set up. If you are starting from scratch, the map will have default styling. To apply the style our theme uses, simply find the tab called Styles -> Predefined Styles and add the following code in the Raw JSON styles:

[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]

6.7. Contact Form & Shadow box

Go to Contact -> Contact forms, create your form and copy the shortcode to use it with the page builder when building the content.

Your form will then look like this:

Next, you can use some classes for the widget to make it look even better. Click on the form widget and open the Attributes tab. In the Widget Class field, you can enter the following classes:

Puts form in a nice box:

form-box

Makes the submit button fullwidth:

btn-fullwidth

Your contact form now looks like this. With some centered heading entered above the shortcode, it can serve as an effective call-to-action:

Alternatively, instead of the form-box class, you can use the shadow-box class:

shadow-box

The result is as following:

Shadow box is a great way to use in the content area. Combined with another class of overlap-left or overlap-right, it is easy to achieve the look as in the example below:

Below is an example how to apply the classes in WPBakery Page Builder. Firsly, a new row is created and divided in two columns. Added the picture to the left column, and Inner Row to the right column. Then, apply class shadow-box for the inner column, and overlap-left or overlap-right for the inner row as shown in the screenshots:

The widget class looks as following (SiteOrigin):

6.8. Animation on scroll

Adding animation on scroll is made simple. It is possible to add it on a row or for an individual widget. Open the Attributes tab in the row or widget settings and add the following class:

animated

Or, you can animate individual widgets, which adds even more of interactivity. In the example below, the first item will appear with no delay, and the second item will appear 0.1s later than the first one.

If there are 3 widgets in one row, you can use animated animated-1 class for the first item, animated animated-2 for the second, and animated animated-3 for the third item. Then, each of the items will appear with a 0.1s delay. You can animate up to 10 items in one row, the last items would have classes: animate animate-10

animated animated-1 // used for animating the first item with 0.1s delay

animated animated-2 // used for animating the 2nd item with 0.2s delay

animated animated-3 // used for animating the 3rd item with 0.3s delay

animated animated-4 // used for animating the 4th item with 0.4s delay

animated animated-5 // used for animating the 5th item with 0.5s delay

animated animated-6 // used for animating the 6th item with 0.6s delay

animated animated-7 // used for animating the 7th item with 0.7s delay

animated animated-8 // used for animating the 8th item with 0.8s delay

animated animated-9 // used for animating the 9th item with 0.9s delay

animated animated-10 // used for animating the 10th item with 1s delay

That's it! Your element will now fade in while scrolling.

7. Support

Interico was made very simple to install and use, but if you happen to face any problems with setting up your website, kindly use the Support system and we'll assist you shortly!


Contact Support


Enjoy using Interico WordPress theme? Click Here to rate it