Show service box with icon, number, image, title and description with stylish presets and unlimited styling options.

• Layout – Horizontal or vertical service box
• Title – Service box bold title
• Description – Service box description or custom shortcode
• Position – Horizontal position of icon, left or right
• Link – The URL where the link from the button leads to
• Icon type – Service box icon type icon, image, number, etc.
• Icon – Choose your favorite icon from library
• Image – Upload your service box icon or logo
• Number – Insert number or letter instead icon for service box
• Hover effect? – Overall hover effect for service box
• Icon styling – Icon styling color, background, size, etc.
• Other Styling – Overall, title, description styling color, background, etc.
• Separator – If you set layout to vertical then you can add separator icon or line
• Advanced tab – Responsive, Animation, Parallax, etc.

Show popup modal box on page loads or by click on custom button or link, Popup can contains any element inside itself and its fully customizable.

• Unique ID – This is important field and you need to put specific ID e.g. my_popup_1
• Visibility mode? – If you want to show popup on page loads you can set this option
• Extra class – Extra class for who need to add custom CSS for this element
• Scrollbar? – If you have long text or contnet in popup, then you can limit height of popup
• Overlay background – Overally background color behind popup modal box
• Popup Styling – Popup content area styling background, color, size, etc.
• Close icon Styling – Popup close icon styling color, background, border radius, etc.

Content box is a magical element, It haven’t any content by defualt but you can add anything inside it and make different styling to overall content box styling, such as background, color, border, CSS hover effect, etc. You can find example in our theme demo preview.

• Box type – You can set default box content or split box with image and content
• Clickable box? – The URL where the link from the button leads to
• Image – If you set box type to split box then you can set image here
• Image position – Split box image and content position left | right | top | bottom
• Hide box arrow? – Split box have arrow on image, You can hide it by check this field
• Default effect – By default you can set CSS effect and it works without mouse hover
• Hover effect – Also you can set hover effect for content box, there are over 12 effects
• Container Styling – You can style content box background, colors, border, etc.
• Background layer – Custom background shape with offset to out sides of container
• Back Box? – Hidden content on back box and only display hidden content on mouse hover
• Back box Title – Title of content on back box
• Back box Content – Content of back box
• Back box Button Title – Button of content on back box
• Back box Button Link – The URL where the link from the button leads to
• Back box Content position – There are 9 back box content positon, You can choose
• Back box Hover effect – 10 custom effects
• Back box Container Styling – You can style back box background, color, border, etc.
• Back box Content Styling – Content of back box styling such as color, font, etc.
• Back box Title Styling – You can change back box title size, color, font family, etc.
• Back box Button Styling – Styling of back box button background, color, border, hover, etc.
• Background stretch – If you set box type to default then set background color of container
• Scrollable height – If you have long content in content box, you can set custom height size
• Scrollbar Color – If you set custom scrollable height size, then you can set scrollbar color
• Advanced tab – Responsive, Animation, Parallax, etc.

This is an example tutorial and you can do it on any pages, Create a new page from Dashboard > Pages > Add New like below shot:

Now go to the Frontend Editor and add button element then set unique button URL with hash like below, #my_popup_1

Now add Popup Modal Box element and set same unique ID for it without hash

Click on the Popup hashtag in the page to open popup modal box, then you can add any elements inside it, like below

• How to load popup on all pages? – Create a new custom page and name it for example popup, then add popup element and inside it add other elements. Then publish page. Now go to Theme Options > Header > Header and add custom page element and choose your popup page, Now all pages have your popup content and you can call it with hashtag link.