Now that we have done with the header, footer, and basic things, we can look at the content part. All page content, including the footer, is placed inside the main tag.
Most pages start with the div wrapper placed right into the main tag. But in some cases, or if you need to put the full-width sections, you can append it right into the main tag before or after the div.
Inside the div, you can also place a full-width section with boxed or stretched layouts. To make a full-width section with a boxed layout (for instance, to add some background image to the full-width block but keep the content area the same size as other sections), you can add the is-fullwidth class to the section tag. And, to stretch the inner content to full width, you can add one more class called is-stretched.
Let's take a closer look at the code:
...
Page MainmaindivHero Sectionsectiondiv
...
/div/sectionContent Section 01section
...
/sectionFullwidth Section with Background and Boxed Contentsection
...
/sectionFullwidth Section with Stretched Contentsection
...
/sectionSection without bottom spacingsection
...
/section/divFooter
...
/main
...
All sections have a top and bottom spacing. If you need to remove any of that spacing, you can do that with the help of the data-padding attribute. It can hold the following values: top (to keep only the spacing above), bottom (to leave only the spacing below), and none (to disable all section spacings).
Also, you can adjust the bottom spacing with the additional classes. You can find more information about top and bottom spacings in the Grid System chapter.
Smooth Scrolling
You can activate a smooth scrolling option in the main.js file. At the beginning of that, there is an option called smoothScroll. It can be one of two values: true or false. To activate the smooth scroll, you should change its value to true.
Enabling this option may cause a poor experience for some users, especially when using some peripherals with smooth scrolling, such as touchpads. It may also disrupt accessibility features for users who rely on assistive technology to navigate the Internet.
Backlights and Dividers
Each section can also have a backlight effect or a content divider. You can add both to a single section, but in that case, these elements should be on opposite sides, so you cannot place the divider and the backlight effect at the top of the same section. You can use the following classes to achieve these effects:
Backlight
backlight-top - backlight effect at the section top.
backlight-bottom - backlight effect at the section bottom.
backlight-both - backlight effect at the section top and bottom.
Example of the bottom Backlight effect.
Divider
divider-top - place a divider at the section top.
divider-bottom - place a divider at the section bottom.
divider-both - place a divider at the section top and bottom.
Example of the divider.
Sticky Elements
Sticky Elements may be really useful in the case of a two-column layout, where one part is a title with a short description, for example, and the second one is a long gallery.
To create this effect, you need to add the div wrapper inside the long container for the short content:
...
divColumn for the Short contentdivSticky Wrapperdivh2Block Title/h2pBlock Description/p/div/divColumn for the Long contentdivLong content goes here
...
/div/div
...
By default, the element will stick when it reaches the middle of the screen (item height is accounted for). But for your needs, you can change a sticking point to the top or bottom of the screen using the data-sticky-position attribute with the following values:
top - Sticks an item at the top of the screen.
header - Sticks an item right down below the header.
center - Sticks an item at the middle of the screen (Default Value).
bottom - Sticks an item at the bottom of the screen.
The Sticky Block may not be compatible with some blocks affected by transform or position CSS properties from other sources. It also applies to parent styles.
Parallax Effects
In our template, there are two types of parallax effect: the parallax for a scrolling element (it scrolls faster or slower than other content) and the parallax effect for images, when an image slowly scrolls inside the container which creates some depth effect, especially in combination with smooth scrolling.
You can change an element scroll speed to achieve the parallax effect with help of the data-speed attribute. The value of 1 will make it scroll at 100% speed, the same speed as the entire content. A lower value will make it scroll slower, and a higher value will scroll this block faster to create a parallax effect. Also, you can use the responsive values to make adjustment for different screen resolutions:
data-l-speed - for small screens, like laptops (screen size lower than 1366px).
data-t-speed - for tablets (screen size lower than 1200px).
data-tp-speed - for tablets in portrait layout (screen size lower than 960px).
data-m-speed - for mobile phones.
To add the parallax effect to images, you should wrap an image with the bringer-parallax-media class. Also, you can add this class for any parent container with elements and blocks that contain images.
Images Lazy Loading
Lazy image loading can help a website load faster because images will only load when they appear in the viewport.
To mark an image for lazy loading, you should add the bringer-lazy class to it, specify the image URL in the data-src attribute instead of the classic src, and the src attribute must be equal to img/null.png. Also, it is strongly recommended to specify the image's original size in width and height attributes:
...
img
...
Expand on Scroll
One more additional thing in our template is the Expand on Scroll blocks. This effect may be valuable for large images or videos. Let's take a look at the code example for the image expanded on scroll:
...
divimg/div
...
As you can see from the example, all you need is to add a bringer-expand-on-scroll class for a parent div
The Expand on Scroll effect may not be compatible with blocks affected by transform properties from other sources. In such cases, you can try to wrap the block you need with another one or apply the class to another item.
12.a Basic Elements
In this section, we will look at the basic elements that are the basis for other content elements. These elements include Block Item, Grid, Bento Grid, Carousel, and Masked Block. Each of them will be used in the Content Elements section and can be mixed with each other.
Block Item
This is a basic element that is commonly used as a stand-alone content block or in the mix with other elements. This element includes the background color, rounded borders, and light effect (if the global backlight option is on). To add such a block, all you need is to use the bringer-block class on a div tag.
Also, in the template code, you can find some additional options used in combination with the bringer-block (but also can be used for other blocks):
stg-aspect-square - this class will make the block in 1/1 aspect ratio.
stg-vertical-space-between - this class will arrange inner content at the top and the bottom of the block (if there are two children tags inside).
...
Simple Content Blockdiv
...
/divSquare Content Block painted with the Accent colordiv
...
/divSquare Content Block with title at the top and description at the bottomdivh4Block Title/h4pBlock Description/p/div
...
Grid
This element is used to create grid-based containers, for instance, to display portfolio works, testimonials, or any other card-based items in a strong grid layout. In our template, you can use up to 6 columns. Also, the same as the rows and columns, it supports prefixes for responsive adjustment. Here is the classes list that you can use for the container to make it the Grid container:
The Subgrid can be useful when you need to make a relation between children inside a grid item. For instance, if you have a grid of items with the title and description, and you want the description to always start on the same line for all grid items, no matter how high the title of each element is. To implement that, you can add the bringer-subgrid-item class to the Grid container children items inside :
...
Subgrid ExampledivItem 01divh4Normal Title/h4pBlock Description/p/divBlock02divh4This title is much longerbrthan in other blocks./h4pBlock Description/p/divBlock03divh4Normal Title/h4pBlock Description/p/div
...
/div
Subgrid items example.
Bento Grid
A Bento grid is a block in a grid layout that contains one large, one medium, and two small blocks. The order of the blocks may vary depending on the use case, but it is important to maintain the number of elements, classes, and structure. The parent container must have the bringer-bento-grid class, and children's blocks must be is-large (for a large block), is-medium (for a medium block), and is-small for small blocks:
The Carousel is another multiusage element for different content elements, like portfolio works, team members, testimonials, price tables, etc. To add the carousel container to the page, you can use the following basic markup:
The carousel item requires the swiper-slide class. Other classes are optional and may vary depending on the carousel element. For example, to create the Price Table carousel, you can use the Price Table Card element as a carousel item but add the swiper-slide class to its div container.
For the div tag, you can use the following optional attributes to tweak your carousel:
data-duration - defines an animation speed (in milliseconds).
data-count - visible items count. It may contain a float value, like 3.5. Also, you can use the data-t-count, data-tp-count, and data-m-count to adjust responsive values.
data-centered - with this option, you can set items centering. It may contain only values 0(not centered) or 1(is centered).
Masked Block
With this container element, you can cut a part of the container, like a block with background color, image, or video, and put some other content, like text, image, button, or any other content, inside. Let's take a look at the general markup and talk in more detail about the structure:
...
Masked BlockdivThe media block with a cutdivvideo/video/divThe content of the cutoutdivdiv
Text block content goes here
/div/div/div
Block with a cut top right corner example.
You can change the div position with the following classes:
at-top-left
at-middle-left
at-bottom-left
at-top-center
at-middle-center
at-bottom-center
at-top-right
at-middle-right
at-bottom-right
12.b Content Elements
In this section, we will tell you about the content page Elements which you can use in building pages. These elements can be used in any part of the content area. So, without a long foreword, let's get right into it.
Image Slider
Before we will dive into the code example, let's talk about the basics. Each slider starts with the div wrapper container, where you put the slider itself and navigation. There are two navigation types: placed on the left and right edges (with smooth cutting) or placed together at the corner. The code structure is the same for both cases, but some classes are different, so we will show you examples for both cases.
But before that, let's take a look at the attribute options that can be applied to the div slider container:
data-duration - defines the transition speed (in milliseconds). The default value is 500ms.
data-effect - defines the transition effect, which can be one of the three values: slide, fade, or coverflow.
data-autoplay - add this attribute to enable autoplay. Inside it, you should specify the transition delay (in milliseconds).
And now, let's take a look at the code structure for both slider variants:
As you can see, in the second case, we use the Masked Block container for the slider wrapper, where the navigation is placed as the cutout place content.
Counters
Counterdivdiv
24
/divdiv
Counter Label
/div/div
The Counter element can help when you want to animate digital value counting from zero to the specified value. As you can see in the code sample, there is the required attribute data-delay on the element wrapper. Here, you can adjust the animation speed.
Also, you can add some text or symbol before or after the counter number with the data-prefix and data-suffix attributes.
Price Table Itemdivh6Card Title/h6pCard Description Text/pdivdivStarting at/divh2$999/h2/divdivWhat is included/divulliFeature List Item 01/liliFeature List Item 02/liliFeature List Item 03/liliFeature List Item 04/li/ulaOrder Now/a/div
Marquee
Marqueedivdivullih2Item Title 01/h2/lilih2Item Title 02/h2/lilih2Item Title 03/h2/lilih2Item Title 04/h2/li/ul/div/div
You can use the data-speed attribute to change the element scroll speed.
Testimonials Card
Testimonials Card Itemdivdiv
Testimonials text content goes here
/divdivdivh6Author Name/h6spanAuthor Meta/span/divdivspan/span/div/div/div
You should remove the swiper-slide class from the div if you use this card outside the carousel (for instance, in the grid container, or any other use case).
