Opens in a new tab
3rd Sep '22
/
1 comment

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by whatamesh.vercel.app.

Step 1

Upload Gradient.js to the child theme's assets/js directory ("assets" and "js" folders will not be present by default, you'll need to create them using a FTP client or a file manager plugin).

Step 2

Edit the child theme's functions.php.

Locate

/** * Register/enqueue custom scripts and styles */ add_action( 'wp_enqueue_scripts', function() { // Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder) if ( ! bricks_is_builder_main() ) { wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) ); } );

Below

wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );

add:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Categories:
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…
Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
GSAP in Bricks: a concrete example

GSAP in Bricks: a concrete example

In this tutorial, we're going to create a custom timeline with different popular GSAP animations and integrate it into the Bricks Builder. Introduction We released…
Categories:
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
Pro
New Ribbon for Posts in Bricks

New Ribbon for Posts in Bricks

This Pro tutorial provides the steps to display a "New" ribbon for posts that were published in the last x days in Bricks. Update: Added…
Categories:
Tags:
Pro
“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…
Categories:
How to add SVG icon as list item bullets

How to add SVG icon as list item bullets

Add this sample CSS: Replace brxe-list with the class of your ul element. Here's how you can generate the value of background-image property: Copy your…
Categories:
Tags:
Pro
Codrops Dynamic Shape Overlay in Bricks

Codrops Dynamic Shape Overlay in Bricks

This Pro tutorial provides the steps to implement Codrops' SVG shape overlay in Bricks. We shall display a WordPress menu in the overlay after an…
Categories: