Skip to content

How to show Pattern Block inside a Device Mockup?

Key Takeaways

  • Nexter Blocks Dynamic Device block uses Pattern inside a device mockup to show images with text, video, or complex layouts in the WordPress/Gutenberg editor.
  • Dynamic Device block requires Nexter Blocks to be installed and activated, then the Layout is set to Normal and Content Type is changed to Pattern before selecting a Pattern from the dropdown.
  • Standard AJAX loads content when someone clicks or hovers over the coupon code, and it requires Enable Ajax Templates under Nexter Blocks > Extra Options > Settings.
Table of Contents

A screenshot goes stale the moment you change the thing it is a picture of.

A pattern inside the device is the real thing, built from blocks — edit it once and every mockup updates.

For every Dynamic Device setting in one place, see the Dynamic Device block guide.

Before You Start

  • Edition: Pro — the Dynamic Device block is part of Nexter Blocks Pro.
  • Block to enable: Dynamic Device, switched on under Nexter > Blocks in your WordPress dashboard.
  • A saved pattern, built narrow enough to sit inside a device screen.

Steps

  1. Add the Dynamic Device block and click Design from Scratch.
  1. Choose the Device Type — mobile, tablet, laptop or desktop — then pick the exact frame from the list below it.
The Device Type setting
  1. Set Content Type to the pattern option.
Content Type set to the pattern option
  1. Choose your saved pattern.
  1. Leave the AJAX option switched off.
  1. Publish and check it at the device’s real size.

Leave the AJAX option off. With it on the device renders an empty screen and no request is ever made — measured, and the same fault affects the Expand block.

How It Behaves

  • The pattern really renders inside the frame. Measured: the pattern’s own four links were present in the page, inside the device.
  • It is live content, not a picture — links work, text is selectable, and search engines can read it.
  • Editing the pattern updates every device that uses it.
  • Backend Visibility previews it in the editor; it is off by default because it makes editing heavier.

Limitations

  • Pro only.
  • The AJAX option is broken — with it on the screen renders empty and no request is made. The same fault affects the Expand block.
  • A pattern built for full width will not fit a phone screen. Build it at the width it will appear.
  • Live content inside a small frame can overflow where a screenshot would simply crop.

Troubleshooting

The device screen is empty

Either no pattern is chosen, or the AJAX option is on. Switch AJAX off.

The pattern overflows the screen

It is too wide for the frame. Rebuild it narrower, or use a laptop or desktop device.

I see nothing in the editor

Switch Backend Visibility on to preview, then off again when you are done.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!