如何在WPBakery搭建的WordPress站点实现Firewatch视差特效

Let’s break down how to fix the style conflict with WPBakery first, then cover simpler ways to add custom elements without relying on it.

1. Resolving WPBakery Style Overrides #

WPBakery injects its own container classes (like .vc_row or .vc_column_container) that override your custom styles with default padding, margins, and overflow rules—this is almost certainly why your parallax layers are showing up as blank. Here’s how to fix it:

a. Boost Your CSS Specificity #

WPBakery’s styles have high specificity, so you need to make your parallax rules more targeted. Wrap your CSS in a parent selector that matches the ID of your WPBakery custom HTML element (you can grab this ID via browser dev tools or the element’s settings in the editor):

/* Updated CSS with higher specificity to beat WPBakery defaults */
#your-wpbakery-element-id .body { margin: -5px !important; }
#your-wpbakery-element-id .keyart, 
#your-wpbakery-element-id .keyart_layer { 
    height: 1000px !important; 
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
#your-wpbakery-element-id #parallax { display: block !important; }
#your-wpbakery-element-id .keyart { position: relative; z-index: 10 !important; }
#your-wpbakery-element-id .keyart_layer { 
    background-position: bottom center !important;
    background-size: auto 1038px !important;
    background-repeat: repeat-x !important;
    width: 100% !important;
    position: absolute !important;
}
#your-wpbakery-element-id .keyart_layer.parallax { position: fixed !important; }
#your-wpbakery-element-id #keyart-0 { 
    background-image: url("https://i.imgur.com/1faPCRE.png") !important;
    background-color: #ffaf1b !important;
}
/* Repeat this pattern for all remaining keyart layers */

Pro tip: Use !important sparingly, but it’s necessary here to override WPBakery’s hardcoded styles.

b. Fix JavaScript Initialization #

WPBakery sometimes loads content dynamically, so document.body.onload might fire before your parallax layers exist. Switch to DOMContentLoaded to ensure your script runs after the full DOM is ready:

function castParallax() { 
    const opThresh = 350; 
    const opFactor = 750; 
    window.addEventListener("scroll", () => { 
        const top = window.pageYOffset; 
        const layers = document.getElementsByClassName("parallax"); 
        for (let i = 0; i < layers.length; i++) { 
            const layer = layers[i]; 
            const speed = layer.getAttribute('data-speed'); 
            const yPos = -(top * speed / 100); 
            layer.style.transform = `translate3d(0px, ${yPos}px, 0px)`;
        } 
    }); 
}

// Wait for all DOM elements to load before running
document.addEventListener('DOMContentLoaded', castParallax);

c. Tweak WPBakery Element Settings #

Don’t forget to adjust the element itself in the editor:

• Edit your custom HTML element, go to Design Options.
• Set all Padding and Margin values to 0.
• Set Overflow to visible (WPBakery often sets it to hidden by default).
• Check the parent row/column too—make sure they don’t have padding or overflow that’s constraining your parallax.

2. Adding Custom Elements Without WPBakery #

If you want to avoid these conflicts entirely, here are three easy methods that don’t require PHP knowledge:

a. Custom HTML Widget #

Most themes support header widget areas—use this to drop in your parallax directly:

1. Go to Appearance > Widgets.
2. Drag a "Custom HTML" widget to your header widget area (or any area where you want the parallax to appear).
3. Paste your full parallax code: wrap CSS in <style> tags, JS in <script> tags, and include the HTML structure.
4. Adjust the widget’s settings to remove default padding/margins.

b. Reusable Shortcode with a Plugin #

Use a plugin like Shortcoder to create a reusable shortcode for your parallax:

1. Install and activate Shortcoder.
2. Go to Shortcoder > Add New.
3. Name your shortcode (e.g., firewatch_parallax).
4. Paste your HTML in the "Content" tab, CSS in the "CSS" tab, and JS in the "JS" tab.
5. Save, then insert [firewatch_parallax] into any page, post, or text widget.

c. Theme Customizer + Code Plugin #

For a more integrated header:

1. Add your parallax CSS to Appearance > Customize > Additional CSS.
2. Use a plugin like Simple Custom CSS and JS to add your JavaScript (set it to load in the footer for better performance).
3. If your theme has a header builder, add a custom HTML block and paste your parallax HTML structure there.

内容的提问来源于stack exchange，提问作者Lance Walker