Every Nexter block carries the same Advanced tab. It is where spacing, background, borders, visibility, position and the motion effects live, and because the options are identical on every block, learning them once covers the whole plugin.
This page is the reference for that tab. Each section below covers one option: what it does, whether it needs Nexter Blocks Pro, and what it actually changes on the page.
What the Advanced tab contains today. Measured on 5.0.6 with Nexter Blocks Pro and Nexter Extension both active: Global Block Style, Spacing, Background, Border, On Scroll Animation, Event Tracking, GSAP Scroll Interaction, Nexter : Display Rules, Nexter : Equal Height, Transform & Transition, Position, Responsive and Custom. Magic Scroll, Tooltip, Continuous Animation, Hover Effect, Mouse Parallax, 3D Tilt and Advanced Border Radius are no longer in the tab, so their sections have been removed from this page.
What Needs Pro, And What Does Not
Measured on 5.0.6 by deactivating Nexter Blocks Pro and comparing the rendered output byte-for-byte. The free options produced identical markup and identical generated CSS with Pro switched off. The Pro options produced nothing at all — not a disabled state, not a wrapper, no output.
| Advanced tab option | Edition | Measured with Pro deactivated |
|---|---|---|
| Spacing, background, border, radius, shadow | Free | identical CSS generated |
| Custom class, custom ID, custom CSS | Free | identical markup |
| Responsive hide (desktop / tablet / mobile) | Free | identical CSS generated |
| Custom position, z-index | Free | identical markup |
| On scroll animation | Freemium | see the section below |
| Display rules | Freemium | see the section below |
| Event tracking | Pro | no wrapper rendered |
The practical consequence: if a Pro effect stops working after a licence lapses, the block does not degrade gracefully — that effect’s wrapper simply stops being written, and anything you styled against it goes with it.
Learn via Video Tutorial
How to Add Global Block Style to a WordPress Block?
A global block style saves the current block’s styling under a name, so the same look can be applied to other blocks without copying settings by hand.
Measured: the saved style is applied as an extra class on the block, so every block sharing that style shares one stylesheet rule rather than carrying its own copy. Full detail in the global block style doc.
Spacing
Margin and padding, set per breakpoint.
- Edition: Free. Measured with Pro deactivated: identical CSS.
- It is generated as CSS, not inline styles. Measured on a padding of 30px, the generated rule was
.tpgb-block-<id>{padding:30px}— one rule targeting that block’s own class. - Each breakpoint is set separately. A desktop value does not automatically carry down; the tablet and mobile fields inherit only if you leave them empty.
How to Add Background Color to any WordPress Block?
A background colour, gradient or image on the block itself, without wrapping it in a container.
- Edition: Free.
- The background toggle has to be switched on first. Measured: with the colour set but the background option left off, no rule is generated at all. This is the most common reason a background silently does nothing.
- Measured output:
.tpgb-block-<id>{background-color:#ff5722}.
How to Add a Border to any WordPress Block?
Border, corner radius and box shadow, each with its own normal and hover state.
- Edition: Free.
- Each of the three has its own enable toggle, and like the background they generate nothing until it is switched on. Measured individually: border, radius and shadow each produced a rule only with their toggle on.
- Radius accepts four separate corners. For shapes beyond that, see the advanced border radius section below, which is a Pro option.
How to Add On Scroll Animation to any WordPress Block?
Animates the block as it enters the viewport.
How to Activate the On Scroll Animation (Freemium)?
Go to Nexter > Blocks, search for the option by name, and turn its toggle on. Until it is enabled there, the option does not appear in any block’s Advanced tab.
How to Use the On Scroll Animation?
- Measured: the block gains a
tpgb-view-animationclass and adata-animationSettingattribute carrying the animation for each breakpoint, so the effect is driven by script reading that attribute rather than by CSS alone. - It fires once, on entry. An out animation is configured separately.
- An animation that moves a block can cause layout shift if it starts outside its final position, which affects your Core Web Vitals. Prefer fades over large movements above the fold.
Full detail in the on scroll animation doc.
Transform & Transition
Rotate, offset, scale, skew and flip a block without custom CSS, with a Normal and a Hover tab and a transition duration, function and origin. The full walkthrough is in the transform effect doc.
Nexter : Equal Height
Makes every item in a row as tall as the tallest. Switch Equal Height on and type the shared CSS class into Enter Unique Class. See the equal column height doc.
How to Add Event Tracking to any WordPress Block?
Sends an analytics event when a visitor interacts with the block, to Google Analytics, the Facebook pixel, or both.
Note: Event tracking will not emit anything until it is switched on in Nexter’s own settings first. Measured: with the block configured for both Google and Facebook events but the site-level setting off, no tracking markup was rendered at all. With the setting enabled and nothing else changed, the block immediately rendered its tracking attributes. If your events are not firing, check this before checking anything else.
- Edition: Pro.
- Measured markup, with the setting enabled: a
tpgb-event-tracker-innerwrapper carrying adata-event-optattribute that holds the whole configuration — which providers are on, the event type and name, and any custom properties you added. - Custom properties are sent as name and value pairs, measured surviving into the attribute exactly as entered.
- The block emits the event; it does not verify it arrived. Confirm in Google Analytics’ realtime view or the Facebook pixel helper, not in the page source.
See the event tracking doc for the full setup.
Nexter : Display Rules
Shows or hides the block based on conditions — who is logged in, what the date is, what page it is on.
How to Activate the Display Rules (Freemium)?
Go to Nexter > Blocks, search for the option by name, and turn its toggle on. Until it is enabled there, the option does not appear in any block’s Advanced tab.
How to Use the Display Rules?
- The block is removed server side, not hidden with CSS. When a rule excludes it, its output is emptied before the page is sent, so the content never reaches the browser.
- That makes it a genuine content decision, not a cosmetic one — but it also means caching plugins can serve one visitor’s version to another. Check your cache’s handling of logged-in users.
Full detail in the display rules doc.
How to Set Custom Position to any WordPress Block?
Takes the block out of the normal flow and positions it explicitly.
- Edition: Free.
- Measured: the position is applied as three classes at once —
tpgb-position-*,tpgb-tab-position-*andtpgb-mobile-position-*— so a desktop value cascades down to tablet and mobile unless you set those separately. That is the opposite of how the spacing fields behave. - Absolute positioning removes the block from the flow, so whatever followed it moves up. On a responsive layout this is the fastest way to create an overlap that only appears on one screen size.
- Z-index is a separate field. Measured, it generates
position:relative;z-index:<n>!importanton both the wrapper and the block.
How to Hide Content in Responsive Screens in WordPress?
Hides the block on a chosen screen size.
- Edition: Free.
- The exact breakpoints, measured from the generated CSS: mobile is
max-width 767px, tablet ismin-width 768pxtomax-width 1200px, and desktop ismin-width 1201px. - It is
display:none, applied with!important. The block is still in the HTML and is still downloaded — it is hidden, not removed. To actually remove it, use display rules instead. - Hidden content is still read by search engines and can still be reached by a screen reader’s document order in some cases, so do not use it to hide something that should not be public.
How to Add Custom CSS Code to any WordPress Block?
Custom classes, a custom ID, and a CSS box scoped to this block.
- Edition: Free.
- Separate multiple classes with a space, not a comma. Measured: whatever you type is written into the
classattribute verbatim, soone,twobecomes a single class literally namedone,tworather than two usable classes. - Two placeholders are available in the CSS box, and they resolve to different things. Measured:
{{PLUS_BLOCK}}becomes.tpgb-wrap-<id>, the outer wrapper, and{{PLUS_WRAP}}becomes.tpgb-block-<id>, the block itself. - Anything else is emitted unchanged. Measured: a rule written against
selector{...}was output as the literal textselector{...}, which matches nothing. If your custom CSS does nothing at all, this is the first thing to check. - The CSS is generated into the page’s stylesheet, not inlined on the element, so it follows normal cascade rules.
