Page Title with Intro

 Page Title 
section class="anita-section"
    div class="anita-page-title-wrap"
        h1 class="anita-page-title"Page Title/h1
        div class="anita-page-intro anita-offset-left--33"
            pPage intro description/p
        /div
    /div
/section

Counters

 Counter Element 
div class="anita-counter" data-delay="3000"    
    div class="anita-counter-number"
        99
    /div
    div class="anita-counter-label"
        Item Label
    /div
/div

In the data-delay parameter, you can set the time in milliseconds that will be passed to get to the specified number.

Grid Gallery

 Grid Gallery 
div class="anita-grid-gallery-wrapper"    
    div class="anita-grid-gallery anita-grid--2cols anita-zoom-hover"
         Grid Item 01 
        div class="anita-grid-gallery-item"
            a href="img/page-about/studio01.jpg" class="anita-lightbox-link" data-size="1240x830" data-gallery="studio"
                img src="img/null.png" class="anita-lazy" data-src="img/page-about/studio01.jpg" alt="Studio 01" width="1240" height="830"
            /a
        /div
         Grid Item 02 
        ...
    /div
/div

Let's take a look at parameters, classes, and important things. In the tag div class="anita-grid-gallery"/, which is main grid gallery container, you can use the following additional classes:

Inside the tag a in the href attribute, you should define the URL to the large image which opens in the Lightbox. The class anita-lightbox-link is required to make this link to open the Lightbox. The data-size attribute is another required thing, where you should specify the original image size in pixels, in the way "width x height". And finally, the data-gallery attribute is used to combine gallery items into the same gallery for the Lightbox.

Go to the img. In our template, we have implemented lazy loading for images. To mark the image as lazy loading, you should add the class anita-lazy, specify the URL to your thumbnail image in the data-src attribute, and set the src attribute value to the empty image, like img/null.png, which is prepacked in our template. One more required thing is to set two attributes: width and height.

Cards Carousel (Team Carousel)

 Cards Carousel 
div class="anita-cards-carousel-wrap"    
    div class="anita-team-carousel anita-owl-container owl-carousel owl-theme"
         Card Item 01 
        div class="anita-carousel-card"
            div class="anita-carousel-card__image"
                img src="img/page-about/team01.jpg" alt="Anita Garcia"
            /div
            div class="anita-carousel-card__content"
                div class="anita-carousel-card__heading"
                    h5sup01./supAnita Garcia/h5
                /div
                div class="anita-carousel-card__caption"
                    Photographer, Founder
                /div
            /div
        /div
         Card Item 02 
        ...
    /div
/div

Before and After

 Before and After 
div class="anita-before-after anita-scrollEW" data-image-before="img/page-about/before.jpg" data-img-after="img/page-about/after.jpg"    
    img src="img/page-about/before.jpg" alt="Photo Processing" width="1920" height="1200"
/div

For the data-image-before attribute, you must set the URL of the source image, and for the data-image-after attribute, you must set the URL of the final image. The URL of the source image is also used in the src attribute of the img tag. As in a previous examples, width and height attributes are required for the img tag. Also, we strongly recommend using both images of the same size to avoid any visual issues.

Price Table Item

 Price Item 
div class="anita-price-item" 
     Price Item Head 
    div class="anita-price-item--head"
        div class="anita-price-item--heading"
            Personal & Portraits
        /div
        div class="anita-price-item--price-wrap"
            div class="anita-price-item--price-descr"
                Starting From
            /div
            div class="anita-price-item--price"
                $149.99
            /div
        /div
    /div
     Price Item Content 
    div class="anita-price-item--content"
        div class="anita-price-item--list-heading"
            What is included
        /div
        ul class="anita-price-item--list"
            li
                30 minutes session
            /li
            li
                Make-up artist
            /li
            li
                15 digital images
            /li
            li
                Photo release
            /li
            li
                SD-card with Hi-res + strong$24.99/strong
            /li
        /ul
    /div
     Price Item Footer 
    div class="anita-price-item--footer"
        a href="#"class="anita-price-item-button anita-button"Explore Works/a
    /div
/div

Column with Background Image

 Column with Background Image 
div class="anita-data-background" data-src="img/page-services/service01.jpg"/div

This element is used to show the image on the side of the price table item. All you need is to specify the URL of the image in the data-src attribute.

Toggle Sections

 Toggle Sections 
div class="anita-toggles-wrap"
     Toggle Item 01 
    div class="anita-toggles-item"
        div class="anita-toggles-item--title"
            sup01./sup Item Title
        /div
        div class="anita-toggles-item--content"
            pItem toggled content/p
        /div
    /div

     Toggle Item 02 
    ...
/div

Testimonials Grid

 Testimonials Grid 
div class="anita-testimonials-grid anita-testimonials-3cols anita-masonry"
     Testimonials Item 01 
    div class="anita-testimonials-item"
        div class="anita-testimonials-item_inner"
            div class="anita-testimonials-item__author"
                div class="anita-testimonials-item__author-image"
                    img src="img/avatars/testimonial01.jpg" alt="Customer Name"
                /div
                div class="anita-testimonials-item__author-name"
                    h6
                        Customer Name
                    /h6
                    spanOccupation/span
                /div
            /div
            div class="anita-testimonials-item__content"
                div class="anita-testimonials-item__stars anita-stars4"/div
                pCustomer review text goes here./p
            /div
        /div
    /div

     Testimonials Item 02 
    ...
/div

In the parent tag div class="anita-testimonials-grid"/ the class anita-masonry is important to turn the grid into the masonry layout. The class anita-testimonials-3cols set the columns number to show. You can use the following classes anita-testimonials-2cols, anita-testimonials-3cols, anita-testimonials-4cols, and anita-testimonials-5cols.