Working with Blocks

Blocks are the main sections you use to structure pages in the Recrevio builder. The same block system is used in Web Studio and Circles.

A block acts as a container for your rows, columns, and widgets, while also controlling section-level design and behavior such as backgrounds, spacing, visibility, anchor points, shape dividers, and Slider Mode.

You can use ready-made blocks or build your own from scratch.

⚡ Why it matters

Using blocks as clear page sections makes your design easier to build, easier to keep responsive, and much easier to update later.

Managing a Block

When you select a block in the builder, the block controls appear.

From the block menu you can:

• Resize the block
• Copy the block
• Delete the block

When you copy a block, its layout, rows, columns, widgets, and styling are copied together.

You can paste the copied block elsewhere in the builder or save it for longer-term reuse.

Block Settings

Open the block settings to access the Edit Container Settings panel.

From here you can control the overall appearance and behavior of the block, including:

• Background image
• Background color
• Video background
• Gradient
• Overlay
• Background pattern
• Shape divider
• Anchor point
• Slider Mode
• Block visibility
• Custom CSS class

Changes are reflected directly in the builder while you edit, so you can see the result immediately.

Background Images and Colors

You can give the entire block a background image or background color.

Background image

Use the image area at the top of Edit Container Settings to select a background image.

Background images work particularly well for:

• Hero sections
• Visual introductions
• Promotional sections
• Full-width photography
• Sections with content layered over an image

Background color

Use Background color to apply a solid color to the block.

The color picker gives you access to your Global Styles colors, making it easy to stay consistent with the rest of your site.

Video Backgrounds

Enable Add Video Background to use a video behind the content in the block.

You can use:

• Uploaded Video
• YouTube

For an uploaded video, click Upload or Select a Video.

For YouTube, enter the YouTube Video URL.

You can also set the part of the video that should loop using:

• Video Loop Start
• End Second

Video backgrounds can work well for hero sections and visually driven pages, but they should usually remain secondary to the actual message and call to action.

Gradient Backgrounds

Enable Add Gradient to create a gradient background for the block.

You can configure:

• Start color
• End color
• Gradient Type
• Gradient angle
• Animation

Gradient Type

Choose between:

• Linear
• Radial

For a linear gradient, use Gradient angle to control the direction in which the colors blend.

Animated gradients

You can also animate the gradient.

Available animation options include:

• NONE
• Flowing gradient
• Aurora mesh

Animated gradients can create a more dynamic section without requiring a video.

Overlays

Enable Add Overlay to place a semi-transparent color layer over the block background.

You can choose the Overlay Color and combine the overlay with a background image, video, or gradient.

Overlays are particularly useful for improving contrast when text sits on top of visual backgrounds.

For example:

• Dark overlay + light text
• Light overlay + dark text

This can make a busy image much easier to read without having to replace the image itself.

Background Patterns

Use Background pattern to add subtle visual texture to the block.

Available options include:

• None
• Horizontal Lines
• Vertical Lines
• Diagonal Lines
• Grid
• Dots

Patterns can be useful when you want more visual interest than a flat background without introducing another image.

Shape Dividers

Enable Add Shape Divider to create a decorative transition between one block and the next.

A range of divider styles is available, including:

• Curve variations
• Curve with opacity
• Triangle
• Triangle Asymmetrical
• Arrow
• Grunge
• Brush
• Paper
• Wave Brush
• Clouds
• Tilt

You can also control:

• Divider color
• Shape Divider Position
  • At the bottom
  • At the top
• Flip
• Invert

Shape dividers can help visually separate sections without relying only on whitespace or straight horizontal edges.

Anchor Points

Enable Add Anchor Point when you want to link directly to a specific block.

Enter an Anchor Point Name. The anchor becomes part of the page URL after # .

For example:

site.com/page#pricing

You can then link buttons, menu items, or text directly to that section.

Anchor points are useful for:

• One-page navigation
• “Learn more” buttons
• Jumping directly to pricing
• FAQ navigation
• Contact sections
• Long-form sales pages

Slider Mode

Enable Slider Mode to turn a block into a multi-slide section.

Instead of placing each variation below the previous one, the block can contain several slides that occupy the same space.

This can be useful for:

• Hero slides
• Testimonials
• Promotions
• Image-led storytelling
• Product highlights
• Rotating messages

When Slider Mode is enabled, controls appear at the bottom of the block.

From there you can:

• Switch between slides
• Add a new slide
• Duplicate the current slide
• Delete a slide when more than one exists
• Open the Slider Mode settings

Each slide can have its own rows, columns, widgets, and content.

Tabs Mode Settings

When Slider Mode is enabled, open Tabs Mode settings to control how visitors navigate between slides and how the transitions behave.

Slider Navigation

Inside the Tabs Mode settings, you can control how visitors move between slides.

Show arrows

Enable Show arrows to display navigation arrows.

Arrows position can be set to:

• Side
• Bottom

Show bullets

Enable Show bullets to show slide indicators.

Bullets help visitors understand how many slides are available and which slide they are currently viewing.

Slider Animation

Use Animation to choose how slides transition.

Available effects include:

• Slide
• Fade
• Zoom
• Flip
• Push
• Cube

Different animations create very different visual results, so preview the section before deciding which one fits your site.

Auto-slide

Enable Auto-slide when you want the slides to advance automatically.

You can configure:

• Auto-slide speed
• Autoplay direction
• Show autoplay progress
• Disable autoplay on mobile

Autoplay direction

Choose between:

• Forward
• Reverse
• Ping-pong

Ping-pong moves through the slides in one direction and then back again.

Transition Easing

Use Transition easing to control how the movement between slides feels.

Available options include:

• Smooth
• Snappy
• Spring
• Linear

You can also enable:

• Keyboard navigation
• Pause when tab is hidden or focused

For most general-purpose sliders, Smooth is a good starting point.

When to Use Slider Mode

Slider Mode can reduce the amount of vertical space used on the page and make a section more interactive.

It works especially well for secondary content such as:

• Testimonials
• Screenshots
• Product examples
• Visual inspiration
• Rotating promotional messages

However, avoid hiding important information on later slides if visitors need to see it to understand your offer.

Block Visibility

Block visibility lets you decide who should see a particular block on the published page.

This makes it possible to build conditional and personalized page experiences without creating separate versions of the page.

Click Add Rule to define when the block should be shown.

Available visibility conditions include:

• Everyone
• Logged in members
• Specific membership groups
• After time on page
• Specific date and time
• Specific countries

Using Visibility Rules

Visibility rules are especially useful when different visitors should see different content.

Membership-based content

Use Specific membership groups when a block should only appear for members in selected groups.

This can be useful inside courses, memberships, and Circles for things such as:

• Showing different content to different membership levels
• Displaying resources only to premium members
• Showing onboarding instructions to a particular group
• Personalizing a member dashboard
• Showing an offer to members who belong to a specific group

Upsells and upgrades

One of the most useful applications is contextual upselling.

For example, inside a course you could create a block promoting personal support and only show it to members in the self-study membership group.

Premium members could instead see a completely different block – or no upsell at all.

This lets the page adapt to the member's current access level instead of showing the same message to everyone.

Time-based content

Use After time on page when you want a block to appear after a visitor has spent a certain amount of time on the page.

This can be useful for:

• Delayed calls to action
• Additional help
• Promotional messages

Use Specific date and time for content that should only become visible around a launch, event, promotion, or deadline.

Country-based content

Use Specific countries to display content based on the visitor's country.

Countries are entered using comma-separated ISO country codes, for example:

SE,NO,DK

This can be useful for:

• Country-specific offers
• Local shipping information
• Regional legal information
• Local events
• Different purchase instructions

Combining Multiple Visibility Rules

You can stack multiple visibility rules on the same block.

When more than one rule is added, use Combine rules to determine how they should work together.

Choose between:

• Match ALL rules (AND)
• Match ANY rule (OR)

Match ALL rules – AND

The visitor must match every rule for the block to appear.

For example:

• Member belongs to the Self-study membership group
• AND visitor is located in Sweden

The block is only shown if both conditions are true.

Match ANY rule – OR

The visitor only needs to match one of the rules.

For example:

• Member belongs to Premium
• OR member belongs to VIP

The block appears for either group.

Example: Creating a Course Upsell

Imagine you have two membership levels:

• Self-study
• Personal support

You want members on Self-study to see an upgrade offer inside the course.

You could:

1. Create an upsell block
2. Open Block visibility
3. Add Specific membership groups
4. Select the Self-study group
5. Add your upgrade message and button inside the block

Now the offer can appear only to the relevant members rather than to everyone in the course.

This makes upsells feel more contextual and avoids showing upgrade offers to people who already have the upgraded level.

Custom CSS Classes

At the bottom of the block settings, you can use Add custom class name to this area.

This lets you assign one or more CSS classes to the container so it can be targeted with custom CSS.

Custom classes are useful for advanced customization such as:

• Special responsive behavior
• Custom animation
• Styling not available in the visual controls
• Targeting the block with your own CSS

Most layouts can be created without custom code, so this is mainly an advanced option.

Block Spacing

Blocks also control the vertical spacing around their content.

Adjusting block spacing is the preferred way to create more or less room between sections.

Avoid creating spacing by adding:

• Empty text widgets
• Empty rows
• Repeated line breaks

Using the actual spacing controls keeps the layout cleaner and more responsive.

Blocks on Mobile

The same block and content are used across desktop and mobile, but the builder gives you responsive controls so the presentation can be adjusted for smaller screens.

For example, you can reduce spacing on mobile without changing the desktop version.

Always check the mobile view after making larger structural or visual changes.

Slider Mode also lets you Disable autoplay on mobile when automatic movement isn't suitable on smaller screens.

Copying and Reusing Blocks

Copying a block preserves the entire section, including its:

• Rows
• Columns
• Widgets
• Content
• Styling
• Layout

You can paste the block elsewhere in the builder and can also save copied blocks for future reuse.

This is useful when creating consistent recurring sections such as:

• CTAs
• Opt-in sections
• Testimonials
• Course upgrade blocks
• Pricing sections
• Contact sections

Best Practices

• Use one block for each meaningful page section
• Use Global Colors wherever possible
• Control section spacing at block level
• Use overlays to maintain readable contrast over images and video
• Keep video and animated gradients subtle
• Use background patterns and shape dividers consistently
• Add anchor points to important sections on long pages
• Use Slider Mode for secondary or visual content rather than hiding essential information
• Use Block Visibility to personalize content, upsells, and member experiences
• Use AND and OR rules carefully when combining visibility conditions
• Check both desktop and mobile before publishing
• Copy and reuse successful blocks instead of rebuilding them
• Use custom CSS classes only when the standard visual controls aren't enough

Troubleshooting

My text is hard to read over the background

Enable Add Overlay and choose a color and opacity that creates stronger contrast.

My block looks too empty or too cramped

Adjust the block's spacing instead of adding empty widgets.

My background image looks too busy

Add an overlay, simplify the image, or use a solid/gradient background instead.

I can't see Slider Mode controls

Make sure Slider Mode is enabled in Edit Container Settings.

The slider moves too quickly

Increase the Auto-slide speed or disable Auto-slide.

I don't want the slider to move automatically on phones

Enable Disable autoplay on mobile.

A visibility block isn't appearing

Check each visibility rule and confirm whether Combine rules is set to Match ALL rules (AND) or Match ANY rule (OR).

A member shouldn't see an upsell

Check the membership group used by the visibility rule and make sure the block targets the intended audience.

I want a button to jump directly to this block

Enable Add Anchor Point, give it a name, and link the button to that anchor.

Summary

• Blocks are the main sections of a page
• They contain rows, columns, and widgets
• Edit Container Settings controls the block's overall design and behavior
• Blocks can use images, colors, video, gradients, overlays, and patterns as backgrounds
• Shape Dividers create visual transitions between sections
• Anchor Points let visitors jump directly to a section
• Slider Mode turns one block into a multi-slide section
• Block Visibility lets you personalize sections based on members, membership groups, timing, location, and other conditions
• Multiple visibility rules can use AND or OR logic
• Custom CSS classes are available for advanced customization
• Blocks can be copied, pasted, and saved for reuse
• Responsive controls let you fine-tune the experience for mobile

Think of a block as the main container for one meaningful section of the page. Build the structure inside it with rows and columns, then use the block settings for everything that should affect the section as a whole.