Pages

Covering the use of our Pages

If you read our documentation up until this point, then using pages will be really simple for you, as these are built in large parts using the Components Available and styled using the Utility Classes providing them a tone of flexibility, and ease of use and editing only by using utility classes and copy pasting componet blocks inside.

With this being said, the following pages only require you to open, and edit them using copy and paste blocks, or adjust your style or content for your specific use case. These pages we will not be covering in the documentation but we will include links towards the components that we used to build them, so you can better understand what's inside.

• About us - Built using basic Height Control Cards and Utility Classes for typography
• Careers - Built using Images with Utility Classes for shadow and rounded corners and Buttons
• Event Cards - Built using basic Height Control Cards
• Event Details - Built using basic Height Control Cards
• FAQ's - Built using the Search Component and Collapse Component
• Instant Articles - Built using Sidebars for the article, Height Control Cards inside Columns and Color Utilities
• System Status - Built using Classic Alerts
• Settings & Account Pages - Built using List Groups and Toggle Switches
• Terms of Service - Built using Expanding Cards and basic typography
• Team - Built using Columns, Icons and Utility Classes for shadows, borders and colors.
• Timeline - Built using FontAwesome icons and copy and paste blocks with content.
• V-Card - Built using copy paste v-card element.
• Cards - Built using Height Control Cards and Utility Classes for shadows, borders and colors.
• Wallet - Built using Tabs combined with Classic Alerts and List Groups
• Profile Pages - Built using Expanding & Fixed Width Cards combined with Columns and Thumbnail Image Galleries (explained below)
• Login 1, Register 1, Forgot - Built using Inputs combined with Expanding Cards
• Portfolio Pages and Product Pages - Built using Expanding & Fixed Width Cards and Columns styled using Utility Classes
• Instant Portfolios - Built using Full Screen Menus and Columns styled using Utility Classes

Full Screen Pages, Starters & Walkthroughs

Beautifully Designed using Fixed Height Cards

These are the most important pages we need to explain, because they are super easy to use but can have a small set of things that must be mentioned. First, let's mention the full screen pages.

• Login 2
• Error 2
• Register 2
• Maintenance
• Forgot 2
• splash-ALL_VERSIONS
• splash-walk-ALL_VERSIONS

All these pages work on the same simple concept. We will not include the code that each page has, as each full screen page includes the code below, and within this code, there will be simple components, input fields, buttons and images. These can be used in however way you wish by copy pasting them from the Components Documentations or from the component-VALUE.html you want.

The code above will generate a full screen page. Let's explain in detail.
Line 1 - defines the card as a cover, meaning, a full screen card as explained in the Height Control Cards.
Line 3 to 5 - Is the card position on the screen. When using covers, you can use as many cards divs as you want. Simply duplicate these lines and replace card-POSITION with card-top / card-center and card-bottom. You can add content in all 3 parts of the screen.
You can adjust the content position left and right that by using float-left or float-right classes inside line 4.
Line 7 is the dark overlay that will appear over the image but under the card-top/card-center/card-bottom. You can adjust the transparency / darkness of the overlay by using the Opacity Utility Classes

Line 8 and Line 1 - Infinite Effect or Classic Images

For Infinite Background Effect - use line 8 in the code above and remove bg-VALUE from line 1. Simply replace the image in line 8 with your own. Keep the preload-img class because images that can scroll in infinite effects will be much wider than normal images and can weigh down the code. The preload-img makes sure the image doesn't affect page load times.
For Static, Classic Image - use the bg-VALUE (explained in reusable background utility classes ) and delete line 8.

I want to use Carousels/Sliders here? Like in splash-walk pages.

Note: Carousels/Sliders do not support infinite background effects.

Super simple! In case you want to use a full screen slider/ carousel you will use the code above as a single slide. So, take the code above, and paste it inside the following code.
Once you've placed the card code mentioned earlier inside the code above, simply duplicate the card to create another slide. Each individual card will have its own background image and its own position of elements inside.

Learn more about carousels by reading the Carousel Component Documentation and how to use cards in the Fixed Height Card documentaiton.

Galleries

We use a modified version of Lightbox to achieve PWA compatibility, preloading and ease of use in our product. While the galleries are simple copy and paste images inside columns in the case of Rounded and Square thumbs, we've included a few galleries that we'll explain here to avoid any confusion.

How do I show an image in Galleries?

To trigger a lightbox, all you have to do is use the attribute data-lightbox="your-gallery", where, your-gallery must be identical to other buttons if you want to be able to swipe through images once the button is tapped. If you want to use individual images or group these into galleries, you can use a different name for your-gallery. This is the code that will generate any image as a lightbox. This code shows images in full screen.
Notice that we use the data-lightbox as mentioned earlier, and also href, which will be the location of the image that will appear in full screen, and the attribute title will appear at the top of the image when in full screen.

In the example shown above, there will be a long text, and when you tap it, it will open a the image. You can use this for buttons, cards, text, icons and anyother element that is wrapped inside an anchor (a href)

How do I create Round and Square Gallery images?

As can be seen inside the round-thumbs and square-thumbs media pages we've included, these work on the concept explained above, only instead of a text, we use an image inside it. These are placed inside columns using the Columns Component offered by Bootstrap and the Utility Classes for making the shadows and rounded corners.

How do I create a Filterable Gallery?

Let's dive in the code, and explain it step by step. the code above can be scrolled. it contains more out of view text. drag your mouse over it or shift + scroll to view full width

We wrap both our filter elements and the gallery itself in the card system. Notice that inside here we have a content class. This is used to create a nice margin between the gallery images / filterable buttons and the outside of the card. We modified the distance between these using the Utility Spacing Classes. These are very important in elements like these since they allow you to fine tune distances between elements.

Line 1 - is the card that will hold the controls for the filterable gallery.
Line 2 - is the content class, this is used to give the space between the controls and card.
Line 3 - This is the list of gallery controls we used.
Line 4 - is the main "All" button, that will show all categories by default when the page is loaded. Also, notice that this has a data-filter="all" attribute. This attribute, together with the attributes on Lines 5,6,7 will be connected to the images that they show when tapped.
Lines 8, 9, 10 - close the gallery controls, content and card boxes.
Line 11 - is a separete card for the gallery images.
Line 12 - is the content for the gallery images. Notice we have the mb-3 parameter here to create a space under the images so they align with the card design.
Line 13 - is where we keep our gallery images. This wrapper is necessary.

Let's take now a single image group from the code. This group can be duplicated to create more images

Line 14 - is a Category item, using a Lightbox image, that also has a special attribute added to it. Notice this has the class filtr-item and the data-category="1. This data-category will match the same number as Line 6, meaning, when you click / tap "Food" category in line 6, you will only see this image and the others will hide. You can create however many images you want, to show for a specific category, as long as they all have the same data-category="your-category" attribute, they will all show when that category is tapped.
Line 15 - is the actual thumbnail image that will be shown. Check the Images Components to see how you can use these.
Line 16 - closes the category item.
Lines 17 - 19 and Lines 20 - 22 are the exact same as above, but these are targeting a different data-category. Lines 23, 24, 25 close the category wrapper, content and card.

In essence, in the case of the Filterable Gallery you simply copy and paste the entire code above wherever you wish, and duplicate the category buttons and groups to create more, while adjusting the data-category to match the images as you want.

How do I create a Switch View Gallery?

Let's dive in the code, and explain it step by step. The code above is the switch view gallery. This works on a simple principle.
View 1 - shows a 3 thumbnail view
View 2 - shows a 2 thumbnail view
View 3 - shows a 1 large image/screen view with captions
------
Line 1 holds the gallery view icons
Line 2 is the currently selected view. To change it, simply move color-highlight to line 3 or 4.
Line 3 is the second view activation
Line 4 is the third view activation
Line 5 is the clearfix for the floating icons.
Line 6 closes the div that houses the buttons for the switch views.
Line 7 is the content wrapper that holds the switchable items. Notice here we have a spacing utility, that will reduce the top and bottom margin to pull this content closer to the card exterior
Line 8 is the wrapper that has the CSS properties that will adapt views depending on what you select. You can set this to a default view by replacing gallery-view-1 with 2 or 3.
Line 9 to 16 and Line 17 to 24 are 2 individual gallery views. Notice that these are a Lightbox element, with an image inside and a caption to hold the content. You can simply duplicate these lines to create more view elements.
Line 25 closes the view wrapper.
Line 26 closes the content wrapper

How do I create a Gallery Collection?

A gallery collection is a div that holds anchors inside with 4 images at a time. Simply duplicate the a below and replace the icon with your icon and you're good to go!

Can't find something?

We're always here to help out! Please send us a message!

As we mentioned before, we didn't skip parts of the documentation because we're lazy. We spent days writing this and covering all possible aspects, but it is possible that either we missed something important to you, or you simply don't know how to do it. But no worries!

Please don't hesitate to open a ticket on our item support forum! We have the fastest reply time (based on customer reviews) on ThemeForest and always answers to questions in under 2 hours unless we're sleeping or spending time with our families.

Enabled has been around for more than 12 years on Envato, and we always love and cherish all our customers, so please don't hestitate to let us know if you need help! We'll gladly assist!


Contact Support