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
Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…
Categories:
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Categories:
Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Categories:
Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 2)

How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 2)

This tutorial provides the PHP & JS codes that can be pasted in order to create a flying effect on map markers each time your…
Create a App-Like Navigation in Bricks

Create a App-Like Navigation in Bricks

I've promised a few folks in the Facebook group to create a tutorial on how to create an app-like navigation in Bricks like in the…
Categories:
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
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: