Functions and Components

This template include a ton of pre-builded animations, components, functions and an object position observer.

Observer

Every block-item can be animated easily with the the observer that is used to trigger animations while the object is displayed on the screen.

In order to create an “observed” object you need to add interactive under “Advanced” -> “Additional CSS class(es)” (on the right column of the editor) that will enable the “object position observer”

The item observer will start to add and remove classes to that object when it is visible or when the object goes off the screen.

visible: the object is inside the screen

already-see: the object has been inside the screen al least at once

---

Check the video below you will notice the interactive item classes change when the object becomes visible on the screen

---

Components

I added some components that could be useful in your website. to enable them just add a class to the block as below

Block Patterns

In the block patterns section you will find these presets:

---

Cards with icons (overlap the element to the top)

---

Cards with photos

---

Cards with Cover

---

Carousel (gallery menu)

Carousel (single image)

• 

• 

• 

• 

• 

• 

---

Carousel (multiple images)

• 

• 

• 

• 

• 

• 

---

Masonry gallery

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Block Styles

As for the block patterns i’ve prepared some block styles to give you the chance to do something even more interesting with gutenberg

Animations

Animation classes (but you may want to add/extend your own in animation in /assets/src/scss/components/animations.scss)

• fade-in: opacity animation from 0 to 100%
• slide-left: translate from -100% to 0 (right to center)
• exit-right: translate from 0 to 100% (center to left)
• enter-down: transition animation from down to original position

Parallax

Each image inside a container can be animated with parallax. To apply this effect to “additional classes box” the class interactive parallax like in the example show below

Custom Block Classes

• padded-image: distance the image from the margins (needed sometimes for transparent background images who have image margins near the image crop)

Custom Scripts

• lightbox: a single lightbox
• lightbox-gallery: a lightbox with multiple photo and navigation
• slider AND slider-single: slick carousel (show 1 image at once)
• slider AND slider-multi: slick carousel (show 3 image at once)

---

Animations examples:

Animation triggered by visibility interactive slide-left

Lightbox

add the class “lightbox” to the block and the image inside will be lightboxed when clicked

lightbox

---

The same can be done with galleries, but you need to use the class “lightbox-gallery”. In this case the lightbox will show all the gallery images into a slideshow

• 

• 

• 

• 

• 

lightbox-gallery

---

Carousel

You will find the predefined block patterns but, you need to know some further advanced features are available… you can combine lighbox (sigle and gallery) to any carousel (single or multi)

mix slick (single) + lightbox

slider slider-single lightbox

• 

• 

• 

• 

• 

---

mix slick (multi) + lightbox-gallery

slider slider-multi lightbox-gallery

• 

• 

• 

• 

• 

---

Hooks

Header Menu Filter

in this example we will add “yo” before the main menu and “mama” after the main menu

add_filter('modul_r_header_menu', function ($html) { 
    return 'yo' . $html . 'mama'; 
});

Add custom CSS to Above the fold style/ CSS Custom prop style

You may need to add some custom css to the to the very first css enqueued to fix some cls issues

add_filter('modul_r_acf_css_style', function($defaults) { 
    return $defaults. '.custom {color:red}'; 
}, 1 );

add_filter('modul_r_css_vars_style', function($css_style) { 
    return $css_style. '.custom {color:red}'; 
});

Change the svg Wave shape (introduced in v1.4.3)

you can replace the shape use as crop in the “is-style-wave-clip” passing a new svg url

add_filter('modul_r_wave_shape_uri', function () { 
    return get_stylesheet_directory_uri() . '/my/custom/wave.svg'; 
});

Filter post count shown in category (introduced in v1.4.4)

In order to change the number of post count shown in categories (masonry view) view please use this filter

add_filter('modul_r_masonry_post_count', function() {return 7;});

Replace Homepage Hero (introduced in v1.4.4)

Replace the homepage hero image, useful to add a video a slider.

add_filter('modul_r_replace_home_hero', function ($html) { 
  return '<div style="position:absolute; width:100%; height:100%; background: red;"></div>';
});