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:
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.
Add your text, set the animation you like and your quote text is ready to be published.
Two styles for dropcaps. Add your text, choose your style, set the animation and save.
You can simply create a list with the Font Awesome web icon font you prefer and choose the icon color as well.
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).
The slogan element creates a slogan with two buttons. Simply add title, subtitle, text, line-style and buttons(1 or 2).
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.
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.
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 address you like and your map is ready. Upload the marker you like, set the height and type. Don’t miss to expand your map to full width if you wish.
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.
Simply add tabs as needed until you are ready.
Simply add the vertical tabbed content you wish.
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.
You can easily create a blog page or just insert a blog section in a page. Select the categories and the style you wish.
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.
In the majority of the elements you can define CSS animations with time delay.
In each element you can set the margin-bottom so you can easily define your spaces. Keep in mind that the default margin is 30px.