Features How to Use Cursor Effect in BricksBuilder Using BricksFly Estimated reading: 4 minutes 151 views Customizing your website’s cursor makes the browsing experience more engaging and memorable for visitors, helping your site stand out and show your brand’s unique style. Cursor offers useful features to improve interactivity and visual appeal, ensuring every movement feels smooth and well-crafted. Requirement Make sure you have installed: Bricks Theme BricksFly Pro Activate Cursor in BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Extension tab. Under General Extensions ➜ Site Settings, toggle on Cursor. Step 1: Enable Cursor and Adjust Settings Click the BricksFly icon in the top left corner of the Bricks Builder editor panel, then go to Site Settings ➜ Cursor and toggle on Enable Custom Cursor to display all available settings. Cursor Size Next, set the cursor size based on your preference. For example, it’s set to 45 here, but you can choose any value that works best for you. Cursor Follower Size Then, set the cursor follower size based on your preference. For example, it’s set to 10 here. Step 2: Customize Cursor Colors You can change the cursor and follower colors to match your website’s look. It helps keep your design consistent and eye-catching. Cursor Color In this example, the cursor color is purple, but feel free to pick the color that suits you best. Cursor Follower Color Similarly, the cursor follower color is set to purple here, but you can pick any color that works for you. Step 3: Set Cursor Blend Style Try different blend modes to give your cursor a unique look. Blend Mode Normal: Choosing Normal means no special effect is used. The cursor just appears as it is and covers anything behind it. Multiply: Choosing Multiply will apply an effect that mixes the cursor and background colors, making the result look darker. Screen: It makes the background lighter by changing and blending the colors in a special way. Overlay: It mixes dark and light effects to keep both the bright and shadow areas of the background visible. Darken: Selected Darken will only show the darker parts where the cursor and background overlap. Lighten: Selected Lighten will only show the lighter areas where the cursor and background meet. Color Dodge: Choosing Color Dodge will make the background brighter using the cursor’s color, making light areas stand out more. Saturation: It uses the cursor’s color strength but keeps the background’s brightness and overall color the same. Color: Apply the cursor’s color and strength while keeping the background’s brightness the same. Difference: It takes away the cursor’s colors from the background, making strong or opposite color effects. Exclusion: Works like Difference, but the colors blend more gently and look less sharp. Hue: Keeps the cursor’s color shade but changes its brightness and intensity to match the background. Luminosity: Changes the background’s color based on how bright the cursor is. For example, it’s set to ‘Normal’ here, but you can choose any option you prefer. Disable Cursor BreakPoint Disable Cursor Breakpoint setting controls the screen size at which the custom cursor is disabled. Once you select a breakpoint, the cursor will be disabled on that breakpoint and all smaller screen sizes. Available options include Mobile, Tablet, Desktop, and None. In this example, Mobile is selected. This means the custom cursor will remain active on desktop, tablet, and mobile landscape screens but will be disabled on mobile portrait devices. After that, click ‘Save Changes’ and close the settings. Then, click ‘Preview’ to see the result. Final Result You did it Congrats! You’ve finished customizing your website’s cursor with Cursor Extensions. By turning on the cursor, setting its size, picking colors, and trying out different blend styles, you’ve given your site a unique, interactive look that makes it more engaging and attractive. Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
