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..

Plain HTML pages in Bricks

Plain HTML pages in Bricks

How to output only raw HTML on the page with no other WordPress/Bricks (or any other active child/parent theme)/plugins baggage.
How to integrate fullPage.js with Bricks

How to integrate fullPage.js with Bricks

This tutorial provides the JavaScript and CSS codes that can be pasted in order to integrate the JS library fullPage.js inside Bricks Builder.
Categories:
Pro
Oxygen’s Focus Section in Bricks

Oxygen’s Focus Section in Bricks

These are the steps to implement Focus Section, an Oxygen’s composite element, in Bricks.
Categories:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
How to create parallax effects using Rellax.js in Bricks

How to create parallax effects using Rellax.js in Bricks

This tutorial provides the JS & PHP codes that can be pasted in order to create smooth parallax effects using the Rellax.js library inside Bricks…
Categories:
Custom Animations on Scroll without plugins in Bricks

Custom Animations on Scroll without plugins in Bricks

This tutorial provides the Javascript and CSS codes that can be pasted in order to create custom CSS animations on scroll without any third-party plugins…
Categories:
Pro
Sticky Header Only For Visitors in Bricks

Sticky Header Only For Visitors in Bricks

A user asked: Anyone know if its possible to make the sticky of the header conditional only for logged out users? This Pro tutorial shows…
Categories:
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
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: