Back to Getting Started Guides

Setup

Display the Interactive Images

Introduction

There are various ways to display your fantastic Draw Attention image on your site via the power of shortcodes or modules from your page builders. But before you go ahead and try to display the interactive image, make sure you have created one first!

Embed with Shortcodes

Once you acquire the shortcode, you can paste it into any page or post to display your Draw Attention image.

You can paste the shortcode into a text editor widget or a shortcode widget to display it.

Do not paste the shortcode into HTML or Code modules or blocks as it may not function properly. Use text blocks only.

Free Basic Plugin Shortcode Location

You can locate the shortcode when editing an image. You’ll find a Copy Shortcode box close to the bottom of the right-hand column, and from here you can copy the shortcode.

[drawattention]
Draw Attention shortcode located in the right-hand column to display the interactive image

Pro Plugin Shortcode Location

When you’re viewing the list of all your Draw Attention images from within your WordPress Admin dashboard > Draw Attention, you’ll see a column that lists the shortcode for each image. You can copy the shortcode here.

[drawattention ID="Interactive_Image_ID"]
Draw Attention Pro shortcodes listed in the All Images page to display the interactive image

WordPress Block Editor

With the latest edition of WordPress and their cool block editor, you can display Draw Attention simply via the block editor.

Upon opening up the Block Inserter menu, type in ‘Draw Attention’. Once you’ve located the block, you can click the block into existence. If you have the Professional edition of Draw Attention, you will be able to select which Draw Attention image will display.

Block Editor of WordPress with Draw Attention module to display the interactive image

Beaver Builder Module

Utilizing Beaver Builder, you can simply drag and drop Draw Attention within the page or post you want to display your amazing interactive image within.

Let’s start by opening up the Beaver Builder module bar. You should be able to see Draw Attention within the Advanced category, but if not, you can use the search feature to locate it.

Once Draw Attention has been located, it can be clicked and dragged onto the page. If you’re utilizing the Pro edition of Draw Attention, you’ll have the option to select which interactive image you want to display.

Beaver Builder module for Draw Attention to display the interactive image

Display the Interactive Image Full-Width

Draw Attention images are only as big as the container that holds them. If you’re utilizing the WordPress block editor for page-building, there is a nifty workaround that can be used with the Group block that will allow you to display the interactive image at full-width. We have a nifty guide that details the steps below.

Click here to learn how to make your images full-width

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides