Installation

Before all else you must setup a WordPress version on your server. After downloading the package, you will have "Engic" folder and "Engic.zip" file inside the Theme package. You can either choose to upload the Theme to your server via ftp (just upload the folder "Engic" into the folder wp-content/themes) or via WordPress upload function (Appearance > Themes > Install Themes > Upload) using the "Engic.zip" file.

Updates

Keep in mind that we provide lifetime updates and dedicated support in order to have no problems with the new versions of WP. Besides that, Engic offers new features in every new release. So please, stay updated.

How to use the Engic Theme auto Update

This is for sure the easiest and fastest way to update Engic. The only thing you have to do is to activate the theme update and enter your Themeforest username and an API key (from Envato).
Follow the steps below in order to use the auto update:

1. Go Theme Options--> Theme Update
2. Enable Theme Update
3. Insert your Themeforest username and an API key from your Envato account
4. Save changes and you're ready.

When there is a new update of Engic you will be informed (message at top) in Appearance > Themes screen and in Theme Options screen. Then you will be able to update Engic with just one-click. Don't forget to update the required plugins in case that you are prompted (read the last 5 steps in this page).

How to update Engic (old-school method)

This is the old-school method for the updates of Engic.
Follow the steps below:

1. Deactivate Engic - (activate one of the WP themes like Fourteen)
2. Delete Engic
3. Upload and install the new version of Engic, then activate it.
4. If you won't get an info message prompting you to update one or both of the required plugins of Engic (Visual Composer and Engic Extension) you're ready.

In case you prompt to update any or both of the required plugins (Visual Composer and/or Engic Extension)

1. Click on Updating Plugins
2. Check these plugins and Update
3. You're ready to go!

Import Sample Content

With Engic you have the possibility to import any of the demos with just ONE click. Just follow the steps below:

1. Install and activate the required plugin Engic Demo Data Importer
2. Go Engic Demos in the WP Dashboard
3. Select the demo you wish to import (you can additionally select to import Dummy Content, Theme Options or/and Widgets).
4. Click Import and in a few seconds you will have the whole content in your WP installation.
5. Have Fun!

Before the import make sure that you have followed the below instructions:

1. The import process will work best on a clean installation. You can use a plugin such as WordPress Reset to clear your data first.
2. Ensure all needed plugins are already installed and activated, e.g. WPBakery Visual Composer, Engic Extension, Contact Form 7 etc.
3. Keep in mind not to run importer twice without clearing your data first. You might end up with duplicate data e.g duplicate menu items and/or widgets.
4. Once you start the process, please leave it running and uninterrupted! After the import, a status will be displayed with the results!

Home & Blog Page

Create a new page from Pages > Add New. Give a title, like 'Home', add the elements and settings you wish and then publish it. Next, create another page with the title you want for your blog. You do not need any content for your main blog page. The next thing is to tell WordPress to use your pages appropriately. Go to Settings > Reading and set the 'Front page displays' to 'A static page'. Set the home page you just created as the 'Front page', and the blog page you created as the 'Posts page' and save your changes.
Your Home and Blog page are ready to go!

Menu System

Engic comes with two custom menus, one positioned in the header area(Header Menu) and the other in the copyright area(Footer Menu). To set up your custom menus simply:

1. Go to Appearance > Menus.
2. Enter your menu name.
3. Click the Create Menu button.
4. Add items to your menu by using the widgets on the left side.
5. Save your menu.
6. Click Manage Locations.
7. Attach it to the location you prefer (Header or Footer) and save again!

Mega Menu System

You can easily convert any submenu you want into mega menu by adding the class mega menu and the number of columns. For example megamenu column-2. See picture below.

Primary Menu Item

You can easily create primary menu buttons with the wording you want in any menu item of your menu. Just add in the field Navigation Label the class "primary-button". See picture below.

Labeled Menu Item

You can easily create labels with the wording you want in any menu item of your menu. Just add in the field Navigation Label the class "label". See picture below.

Anchor Menu / One Page Menu

Additionally, Engic offers the Anchor Menu per page option. Notice that, anchor menus are optimal for navigation within one page. To create such a menu in a page please do as follows.

1. Add Section IDs (e.g., idname1) in Rows you want to use in your menu.
2. Create a menu with the usual way (Appearance > Menus).
3. Add as menu items custom links of the form: http://www.site.com/pagename/#idname1
4. Save menu and use it by selecting it from the Page Options of the page (Anchor Navigation Menu or Main Navigation Menu).

Set the Home Button in One Page version

You can set a home button (with the behaviour of the back to top button) by creating a custom link with the following URL: #eut-goto-header See the picture below.

Theme Options

Engic option panel is built with the famous Redux Framework and gives you many configuration options in a user-friendly environment. Go to Appearance > Theme Options from the main WordPress navigation and then you will be able to affect many core features of Engic. All the options have detailed descriptions in order to explain their purpose.

Engic Header

For a better grasp of the full potential of the theme, it is worth having a look at the philosophy behind the Header. The Header in Engic does not have predefined styles (like most themes), but the elements can be moved independently from each other. The elements one can add on Header may be the following:

1. Logos --- 3 different for the Headers (Default/Light/Dark) and another one for the Sticky Header
2. Menu --- 3 different styles
3. Menu Elements --- On/Off & Add elements
4. TopBar Area --- On/Off & Add elements in two different areas (Left/Right)

The first 3 elements above, can have their own alignment without one’s place affecting the other’s. This way, virtually dozens of combinations can turn out. If you take into account the topbar that offers 2 places (left and right) and it’s of the logic On/Off and Add elements, Engic can satisfy even the most demanding user.

Engic Layouts

In order to prove its uniqueness, Engic provides 3 completely different layouts you can select from in Theme Options > General Settings.

1. Stretched Layout
2. Boxed Layout
3. Framed Layout

The first 2 layouts above, are classic layouts but the Framed Layout is the unique one, fresh and impressive. We really believe that it suits perfectly for designers and architects.

Engic Footer

Engic provides multiple footer layouts that you can choose from. You can select various column layouts or have a single column if you wish. Go to Theme Options > Footer Options to build your footer.
Afterwards the creation of your footer layout, you will probably want to add your content. Simply go to Appearance > Widgets. Drag any of the provided widgets to the footer widget areas (Footer 1-4), order and reorder them as you wish and customise the settings.
In the Copyright Area you can add text (TinyMCE), socials and menu, centered or in the left-right corners.

Page Options

Let's create a new page by following the usual WordPress steps:

1. Go Pages > Add New
2. Give the page title
3. Add your content (use the amazing Visual Composer)

Just below the Tinymce Editor you will notice two meta boxes (sections for settings): One with the title 'Page Options' and another with the title 'Feature Section'.

---

Page Options

Here you can give a description for the page (a subtitle) you create, choose its layout (Default, Full Width, Right Sidebar, Left Sidebar), select which widget area to use and if you also prefer a fixed(sticky) or even a white box style sidebar. Additionally, you can add an anchor menu and disable areas like the page title, the topbar, the menu, the menu elements, the footer, the copyright area, and even the content area. Last but not least, you can select another header menu and/or change the menu style.

---

Feature Section

Engic gives you the chance to add one of five special elements and to integrate your header with the feature section (Header Integration option). You can select among:

1. Title
2. Image
3. Slider
4. Revolution Slider
5. Video
6. Google Map

Follow the guidelines to set up the Feature Element of your choice. In addition, it’s worth trying your site’s Header under the Feature section in any page you like. This way you can create pages of totally different style. Finally, you can define the height of your feature section. Choose a full width section or specify the height you prefer in pixels. Keep in mind that you can also enable the Title Parallax Effect and/or the Bottom Arrow.

Post Options

To create a Post, go to:

1. Posts > Add New
2. Add a title
3. Add some content
4. Add categories and some tags

Engic supports 6 custom post formats. These are: Standard, Gallery, Link, Quote, Video and Audio Post Format. You can simply choose the post format you need and follow the detailed instructions in the appeared metabox below the Tinymce editor.
Furthermore, you can set up the classic options (layout, sidebar, disable various post elements etc), just like in page options, under the 'Post Options' section.

Portfolio Options

To create a Portfolio Item, go to:

1. Portfolio > Add New
2. Add a title
3. Add some content (you can use Visual Composer)
4. Add description for the title
5. Add more details for the sidebar
6. Add categories and item fields(extra info in a list style)
7. Upload a featured image for your item

These are the basic settings you need to promote a work item in a very simple way. Furthermore, just below the editor, Engic provides for the portfolio items the same settings (besides the possibility of an anchor menu) with the single pages. Finally, you can set some more advanced options for your portfolio media. Let’s see them briefly:

Featured Image

This is when you simply want only one image for your item (in overview and single view).

Classic Gallery

Add the images you prefer and you’ll have a gallery for your item.

Vertical Gallery

Add the images you prefer and you’ll have a vertical gallery for your item.

Slider

Add the images you prefer and you’ll get a slider presentation for your item.

YouTube/Vimeo

Add the video you prefer from YouTube/Vimeo and you’ll have it in the media section.

HTML5 Video

You can also add (after upload it) an HTML5 Video.

None

That means you disable the media and you prefer to use the feature section or the builder or simply no media.

Portfolio Link Options

This is an extra functionality that Engic offers and works in combination with the portfolio element (via the Visual Composer). If you choose the Custom Link Type in the portfolio element, you can define the link mode for each one of your portfolio items individually. So, select among:

1. Portfolio Item --- links to the single item page
2. Custom Link --- set the custom link you prefer
3. None --- no link option

Feature Section

Last but not least, you can use the Feature Section in your single portfolio items just like in pages. That means you can add the following elements above the portfolio title : Title (custom), Image, Video, Slider, Revolution Slider or Map. Either in full screen mode or with custom height.

Rows & Columns

Setting your Rows

It is very important for the user to know the options Engic offers in Rows in order to place correctly the elements given. Options are plenty; let’s have a look:

General

Section ID

Give a name for the section (row). This will be useful if you need an anchor menu (see Anchor Menus in this documentation).

Font Color

Choose the color for your fonts so texts will be readable.

Heading Color

Set the color for your headings(H1-H6). Select among default, light, dark or one of the primary colors.

Extra Class

In case that you like to use one of your classes.

Section Options

Section Type

Select among 3 different row types.

1. Fullwidth Background - the background will be stretched
2. InContainer - the background for this row will be in the container of Engic (1170px)
3. Fullwidth Element - the content of this row will be stretched and not just the background

Section Window Height

Select if you like your section has the window height.

Background Type

Select the background for your section (row). You can use none, color, image, hosted video or video YouTube. Here you can set the parallax effect in case you use a background image.

Top Padding

You can easily increase the padding top of your section (row).

Bottom Padding

You can easily increase the padding bottom of your section (row).

Bottom Margin

Set the margin-bottom of your section (row). For example you must set 0px if you like to collapse it with the next section (row).

Header Section

Check this box if the row you create is the first section just below header. This option ensures that there will be no gap between your header and your first section.

Footer Section

Check this box for your last section, the section just above footer. This option ensures that there will be no gap between your footer and your last section.

Inner Columns

Equal Column Height

If selected columns will have equal heights. Recommended for multiple columns with different background colors.

Equal Height Columns and Middle Content

If selected column content will have equal height and centered vertically.

Tablet Portrait Equal Column Height / Middle Content

Select if you wish to keep or disable the Equal Column Height / Middle Content.

Columns Gap

Select gap between columns in row.

Responsiveness

Here you can hide any row/section you prefer on devices. You can hide rows on tablet, both landscape and portrait orientation, and on mobiles. Let's see these options:

Desktop Visibility

If selected, the row will be hidden on desktops/laptops.

Tablet Landscape Visibility

If selected, the row will be hidden on tablet devices with landscape orientation.

Tablet Portrait Visibility

If selected, the row will be hidden on tablet devices with portrait orientation.

Mobile Visibility

If selected, the row will be hidden on mobile devices.

Setting your Columns

General

Here you can add and Element ID and/or an Extra class.

Design Options

Here you can set background colors, paddings, margins and borders for the columns content.

Width & Responsiveness

First of all, you can change the width of your column. Additionally, you are able to set the responsive behaviour of your column in various devices or even to hide elements. Analytically:

Desktop

Set the responsive behavior for the column on desktops/laptops.

Tablet Landscape

Set the responsive behavior for the column on tablet devices with landscape orientation.

Tablet Portrait

Set the responsive behavior for the column on tablet devices with portrait orientation.

Mobile

Set the column to full width of hide it on mobile devices.

Elements

Engic comes with the Visual Composer (value $28), a visual layout builder that allows you to forget about syntax of shortcodes and create multiple layouts within minutes without writing a single line of code! You can edit, delete, increase and decrease size of each item. Furthermore, you can reorder the elements,copy-paste and save templates. It has very simple and instinctive interface!

Let's take a brief look at the elements:

1. Titles

This element will create a title that you can use to introduce a new section in a page or even an element. You can set the alignment, the header you prefer and the line-style(if you use a line).

2. Text Block

Add the text you like by using the classic TinyMCE. Additionally, style your text as Leader text or Subtitle text to create more interesting text areas.

3. Dividers - Gaps

With this element you can create a divider to better separate your elements and sections. Additionally, you can split you pages by using full-width dividers.

4. Empty Space

With this element you can empty space between the elements.

5. Custom Heading

This is what you read. You are able to select any Google font you like, set the size, the tag, align, color, line height and set the link URL.

6. Quotes

Add your text, set the animation you like and your quote text is ready to be published.

7. Dropcaps

Two styles for dropcaps. Add your text, choose your style, set the animation and save.

8. Lists

You can simply create a list with the Font Awesome web icon font you prefer and choose the icon color as well.

9. Buttons

The button element is an easy way to add a styled button to your page. Just choose the appropriate type(simple, outline), size, color and shape, fill out the other fields (text, link) and off you go!

10. Icon Box

Another element with multiple options. Firstly, select the icon size, type and shape. Secondly, you can use any icon from 5 different libraries (Font Awesome, Line Icons, Entypo etc), upload a png icon or even write a character(letter or number)! Give title, text, link, align, colors, advanced hover (if you like) and enjoy it!

11. Media Box

Media for Engic means image, video or map. Combine one of these with title, text, link and you're ready!

12. Image Text

With this element you can simply upload an image(with a video popup if you like), title, text and button(any type).

13. Slogan

The slogan element creates a slogan with two buttons. Simply add title, subtitle, text, line-style and buttons(1 or 2).

14. Call-Out

With call-out element you're able to choose your preferred style, give a title, your test, button and off you go.

15. Single Image

Upload a single image and give the align, animation, link you wish. Additionally, you can use a popup video.

16. Slider

This element is not just a simple slider. Upload your images, select the navigation, the image size, speed control and more! Keep in mind that you can expand element to full width.

17. Gallery

The Gallery element has 3 different styles for showing your image galleries. Fitrows, Masonry and Carousel with multiple options for hovers, overlays, columns and more. You can also create full width galleries.

18. Message Box

With this element you create a message text with an icon (any of the font libraries) and background color.

19. Google Map

Give the Latitude/Longitude, set the zoom you wish for your map. Upload the marker you like, set the map height.

20. Video

You can just add a video(YouTube, Vimeo), even full width video.

21. Accordion - Toggle

This element creates an accordion panel that expands when the user clicks on the title to reveal more information.

22. Tabs

Simply add tabs as needed until you are ready.

23. Tours

Simply add the vertical tabbed content you wish.

24. Testimonial

This element creates a nicely slider out of your testimonials items. Go Testimonial > Testimonial Items and create your testimonials. Afterwards, add the tesimonial element and define the various settings like categories, speed, navigation and more.

25. Pricing tables

Pricing tables is used to display any subscription options in an appropriate column. Create the tables you wish (don't overdone with this,4 tables per row are enough) and add your data.

26. Progress Bars

This element creates horizontal bars that get animated in accord with the percent given; the best way to show your skills in a visual way.

27. Counter Element

This element can be used to quickly create animations that display numerical data in a more interesting way. You can add icon if you want and a title.

28. Social Share

With this element you can simply add social media icons anywhere in your pages.

29. Team Member

This element takes in a quick profile for a team member/employee and formats it attractively. Add the information you wish and select between two styles.

30. Blog

You can easily create a blog page or just insert a blog section in a page. Select the categories and the style you wish.

31. Portfolio

This element is just like Blog element. Make a nicely presentation of your portfolio. Simply select the style and categories you like.

32. Contact Form

With this element you can simply use any Contact Form 7 you've created. When using the Contact Form, the default layout is to have one field per row. However, you can have multiple fields in the same row by adding some HTML markup. For example:

With Columns One Third / Three fields in the same row

<div class="eut-one-third">Your Name (required) [text* your-name]</div>
<div class="eut-one-third">Your Email (required) [email* your-email]</div>
<div class="eut-one-third eut-last-column">Subject [text your-subject]</div>
[textarea your-message]
<p>[submit "Send your message"]</p>

With Columns One Half / Two fields in the same row and centered submit button

<div class="eut-one-half">Your Name (required) [text* your-name]</div>
<div class="eut-one-half eut-last-column">Your Email (required) [email* your-email]</div>
[textarea your-message]
<p class="eut-align-center">[submit "Send your message"]</p>

33. Pie Chart

With this element you can create appealing pie charts with multiple options.

34. Typed Text

Add your prefix text, your suffix text and add-style the Typed Text which makes your text moves. Interesting enough?

35 Expandable Info

This is something really special. Combine image(logo) with hidden text and button to create very appealing and interesting areas in order to show off your partners or anything else you wish.

Sidebars / Widgets

Sidebar Position

First of all, you can define your default layout (full width, left or right) separately for pages, blog page, single posts and single portfolios items via the option panel of Engic. Notice that you can select your layout for pages, posts and portfolios, independently in page options, post options and portfolio options.

Widget Areas

There are 4+2 predefined Widget Areas included in Engic: These are four Footer Sidebars, the Main Sidebar and the Portfolio Sidebar.

Create custom Widget Areas

You also have the option to create your own sidebars:

1. Go to Appearance > Sidebars
2. Write a name for the widget area and click Add New
3. The new widget will be created, click Save Changes and it's ready

Image Sizes

Below you can see the default image sizes from the functions.php file. It is worth noting that since version 1.8 of Engic anyone can change these settings under Theme Options > Media Sizes and use the Regenerate Thumbnails plugin in order to recreate the image sizes. This is an option that offers to any user the flexibility to fully control the image sizes. As anyone can easily understand, the sizes of your images depends on multiple factors, such as your site and elements width, sidebars and many others. It is up to you!

$size_large_landscape_wide = engic_eutf_option( 'size_large_landscape_wide', array( 'width' => '1170', 'height' => '658') );
$size_small_landscape_wide = engic_eutf_option( 'size_small_landscape_wide', array( 'width' => '800', 'height' => '450') );
$size_small_landscape = engic_eutf_option( 'size_small_landscape', array( 'width' => '800', 'height' => '600') );
$size_small_portrait = engic_eutf_option( 'size_small_portrait', array( 'width' => '600', 'height' => '800') );
$size_small_square = engic_eutf_option( 'size_small_square', array( 'width' => '600', 'height' => '600') );
$size_medium_portrait = engic_eutf_option( 'size_medium_portrait', array( 'width' => '560', 'height' => '1120') );
$size_medium_square = engic_eutf_option( 'size_medium_square', array( 'width' => '1120', 'height' => '1120') );
$size_fullscreen = engic_eutf_option( 'size_fullscreen', array( 'width' => '1920', 'height' => '1920') );


We are not going to change the default image sizes as we do not want to affect old installations. However, based on the WordPress feature to use the scrsets of your images for better performance our recommended sizes are the following.

Landscape Wide Large: 1170x658
Landscape Wide: 480x270
Landscape: 480x360
Portrait: 480x640
Square: 480x480
Portrait Large: 675x900
Square Large: 900x900
Fullscreen: 1920x1920

Remember that you always need to Regenerate Thumbnails when you change the image sizes.

SEO - Search Engine Optimization

Engic is built with SEO best-practices in mind. We use heading tags (H1,H2,H3...) for titles, main content and logo which is good practice for search engine site. It goes without saying that Engic uses valid HTML5 code and CSS3. Search engines would love the clean code of Engic. Additionally, Engic uses internal site linking, which is vital for search engines (two predefined navigation menus, related portfolios etc). Engic is also full compatible with the two most popular WP Seo plugins, All in One SEO and WordPress SEO by Yoast, in case you need something more specific for your site optimization. Be sure that we have done our best for your site google ranking.

Translation & WPML Multilingual Plugin

Engic is WPML ready in case you need it. We also offer one predefined position for the language selector, in the top bar of our Theme (if it’s enabled). Alternatively, you can add it in the header menu. So you’re able to easily use the WPML without deforming the basic theme style.

Purchasing and Installing WPML

If you finally decide to use WPML (the most famous multilingual WP Plugin) you can purchase it from here. After installing and activating both Engic and WPML you can find a getting started guide in Getting started with WPML.

How to set and translate main features of Engic

1. Using translation management. Read more details
2. Translation Management & Features. Read more details
3. Translating URL slugs. Read more details

How to translate strings coming from Engic

1. How to scan the strings of Engic. Read more details
2. How to translate the strings of Engic. Read more details

WPML language switcher and Engic

Engic also offers predefined position for the language switcher, in the top bar of our Theme. Additionally, you can add the language switcher in the header menu or if you need to adjust a custom language switcher. There is a specific reference in here.

Conclusion

Undoubtedly, Euthemians team recommends the usage of WPML with Engic if you wish to make your WP site runs multilingual with the easiest and safest way.

How to translate the strings without WPML

First of all, we recommend to use the PO Edit to edit and/or translate the static strings of Engic. When you install it follow the steps below:

1. Go to /engic/languages/ folder, duplicate the en_US.po file and rename it using the appropriate language code (for example if you translate to French you need to re-name it as fr_FR.po). You can find all the codes here.
2. Then open the renamed .po file with PO Edit. Translate the strings in your language into the “Translation” column.
3. Click to save the file when you finish the translation. Then an .mo file will be created in the same directory (just like en_US.mo file).
4. Upload these 2 files in /engic/languages/ folder.
5. Finally, you need to go to Settings > General and at the bottom of this page select your preferred language.

Interested in translating a language for Engic?

We would be grateful if you could help us translating Engic in multiple languages. If your language isn’t included in Engic and you translate it on your own, we’d really appreciate it if you could send it to us. In addition, we will include it in the next update of Engic, so you won’t have to re-upload it. Finally, this will also help out many other users of Engic.

CSS & JavaScript files

CSS files used in this template:

1. basic.css this is the basic css file It contains css reset, typography, text aligns and many more.
2. grid.css contains the grid css.
3. theme-style.css contains the basic styles for theme.
4. elements.css contains the basic styles for elements, widgets.
5. responsive.css contains the responsive behavior of Engic.
6. font-awesome.min.css contains the font-awesome style.

Engic Theme imports the following JavaScript files.

1. isotope.pkgd.min.js
2. afterresize.js
3. smoothscrolling.js
4. plugins.js
   • imagesLoaded
   • Magnific Popup
   • Transit
   • Retina.js
   • CountUp.js
   • FitVids
   • appear
   • OwlCarousel
   • jquery.nicescroll
   • easy-pie-chart
5. modernizr.custom.js
6. maps.js
7. main.js

Sources and Credits

The images included in preview are for demonstration purposes only. Most of them have been purchased from Shutterstock. In case that you import dummy data, you will have placeholders instead of images. For the Engic's videos, special credits to Mikeel Araña.

1. Redux Framework
2. Visual Composer
3. Revolution Slider
4. WooCommerce Shop Plugin
5. Font Awesome
6. Owl Carousel
7. Magnific popup
8. CSS Animations