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)

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Cards with photos

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Cards with Cover

Title

Title

Title


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

Media and text

center image

Media and text

half width image

Media and text

Full height media and text

Media and text

container cut crosswise

Media and text

container cut crosswise

cover clipped crosswise

cover clipped with wave shape

to replace the wave shape used for featured image and cover blocks -> add_filter(‘modul_r_header_wave_shape’, function () { return get_template_directory_uri() . ‘/inc/images/wave.svg’; });

JUST
AN
EXAMPLE

if you add the class “block-overlap-top” this is what will happen

Title

THE COVER BLOCK COULD HAVE PARALLAX EFFECT EVEN INSIDE CARDS

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

One shot animation

HEY WAIT! This is one shot animation… And is triggered only one time. Use interactive animated exit-right long-delay to create an exit animation like this

body of water between mountains

Background Parallax

(for media and text block you don’t need “Crop image to fill entire column”)

interactive parallax

red and blue hot air balloon floating on air on body of water during night time

Fade-in Animation

interactive fade-in

Enter-down animation with delay

interactive enter-down fade-in long-delay

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

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

warning DEV ZONE! editing function.php may break your website, do it only if you are sure of what you are doing.

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>';
});

Post navigation

You might be interested in...

One response to Functions and Components

Comments

Your email address will not be published. Required fields are marked *