Pattern Paste
Subscribe

Designed Patterns Hero

Needs the pluginNew

Step Inside

An editable studio page opens inside a three-dimensional laptop, grows to fill the screen and continues into the ordinary WordPress blocks below. Native headings, copy and links stay editable in both appearances.

All patterns

Loading patterns…

Designed1280 px

Loading preview…

The section’s original colours and type. Copy this appearance as shown.

About this pattern

Where Step Inside fits

Opens a digital studio or product homepage, making the first scroll a moment where the page appears inside a laptop and then takes over.

Use it for

  • Web studio homepage hero
  • App or SaaS launch page
  • Digital agency showcase

What you can edit

Every word, image and link is a WordPress block

Select any of them in the block editor and change it in place. Colours, type and spacing use the blocks’ own controls.

The layout starts unlocked: insert, move, replace and remove any block with the normal WordPress controls.

  • 1background imageremovable
  • 1headingremovable
  • 3text linesall removable
  • 2buttonsall removable

Section settings

  • Appearance: Designed or Use my theme
  • Animate changes
  • Laptop colour
  • Scroll prompt

How it behaves

It still works when things are switched off

Scrolling opens a 3D laptop whose screen grows to fill the view, then the page continues below. An Enter page button skips ahead; with reduced motion the page shows flat.

Motion off or reduced motion
It shows its final state at once; anything a visitor can press or drag still works.
JavaScript off
All content stays visible and readable; controls the script adds are hidden.
Plugin missing or older
It pastes as plain WordPress blocks, in reading order, without the designed layout.

Questions

Step Inside: common questions

What is Step Inside for?

Opens a digital studio or product homepage, making the first scroll a moment where the page appears inside a laptop and then takes over. Typical uses: web studio homepage hero, app or SaaS launch page and digital agency showcase.

Does Step Inside need a plugin?

Yes. Designed Patterns come with a subscription, which includes the Pattern Paste plugin that runs them; Step Inside arrived in plugin 0.37.7. Without the plugin, or on an older version, it pastes as plain WordPress blocks: the content reads in order, without the designed layout.

What can I edit in Step Inside?

As pasted it has 1 background image, 1 heading, 3 text lines and 2 buttons. The layout starts unlocked: insert, move, replace and remove any block with the normal WordPress controls.

Will Step Inside match my theme?

Choose Designed to keep its own palette and type, or Use my theme to let it follow your theme’s colours and fonts. Either works in any block theme on WordPress 7.0 or later. Choose Use my theme in the preview above to see it follow a theme before you copy.

Can the motion be switched off?

Yes. Turn off Animate changes in the section settings, and visitors who ask their device for reduced motion get the same: the section shows its final state at once and anything they can press or drag still works. With JavaScript off, all content stays visible.

Back to Designed Patterns