Advertisement

The Advertisement Block lets you display the ads on your site. The blocks allow you to display the ads in the form of images where you can upload the image directly or display it via the external advertisement URL.

Prerequisite:
Active installation of Magazine Blocks Free or Pro.

Enable Advertisement Block #

To use the Advertisement Block from Magazine Blocks, ensure you have enabled it. So, navigate to Magazine Blocks > Blocks. Now, look for the block and check if it’s enabled. If not, toggle to allow the block to.

Add the Advertisement Block to the Page or Post #

1. Go to the page or post where you want to add the Advertisement block.
2. Next, click the [+] icon and search for the Advertisement block under Magazine Blocks.
3. Drag and drop the Advertisement block to the page.

Now, you’ll see an image block where you can add images from your device, library, or any URL. Select your preferred choice and add an image as an advertisement.

Configure the Advertisement Block #

Once you’ve added the image, you can customize the Advertisement Block as per your preference. Click on the Advertisement Block, and a configuration panel appears on the right-hand side with three tabs: General, Style, and Advanced.

General #

It’s the core setting for ad content and behavior. It comes with different options for customizing the Advertisement block:

Image Size

From here, you can select a pre-defined image size for the ad (custom sizes are not supported). You need to choose from the available dimensions.

Alignment

You can align the ad image horizontally in left, right, and center positions from here. Moreover, you can select the alignments for different devices (Desktop, Mobile, and Tablet) to ensure ads look great on all screens.

Add Image

It allows you to upload or update your ad image and configure its link behavior. Upload a new image from your device or media library. You can also use an external URL to link to an image hosted elsewhere.

Link Settings:

• Advertisement URL: Add the destination link users will visit when clicking the ad.
• Open in New Tab: Enable to ensure the link opens in a new browser tab.
• No Follow Link: Enable to add rel= “nofollow” to the link. This tells search engines not to use the URL for ranking calculations (ideal for affiliate or third-party ads).

Schedule Ads:

It controls when your ads appear on your site.

• Start Date/Time: Choose the exact date and time the ad should begin displaying.
• End Date/Time: Set when the ad should stop displaying.

The ad won’t show before the Start Date or after the End Date. That means the ad appears automatically between the scheduled dates.

Example:
Start: April 1, 2025, 9:00 AM (EST)
End: April 30, 2025, 11:59 PM (EST)
So, the ad will run for the entire month of April.

Style #

Under the style tab, you’ll find the following options available:

Image

• Border Radius: You can change the border-radius value of the advertisement image. It lets you add round corners to the images.

According to the site requirement, you can set the border-radius value along with the units like px, em, %, or rem. Moreover, you can set the border radius value for various devices (Desktop, Mobile, and Tablet).

Advanced #

The Advanced section consists of four options for the Advertisement block.

Spacing

Under the spacing section, you can find the following options available:

• Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
• Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).

Z-Index

It allows you to set the priority of the Advertisement block according to the site’s requirements.

Responsive Condition

Using the option, you can enable/disable displaying the block on various screen sizes:

• Hide on Desktop – It hides the Advertisement block on the Desktop.
• Hide on Tablet – It hides the Advertisement block on the Tablet.
• Hide on Mobile – It hides the Advertisement block on Mobile.

Advanced

Under the option, you can set the CSS ID and Classes for this particular Advertisement block. The available options are listed below:

• CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that specific ID.
• Additional CSS Class(es) – It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.
• Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element, such as Address, Article, Aside, etc.

For example, if you want to add a custom size for the advertisement image, you can add a class such as advertisement-image-size to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

.advertisement-image-size img{
width:70px;
height:20px;
}

Upon adding the code, it will make the changes only to this particular block and not others.

Frontend View After Using the Advertisement Block #

Here’s an example of how an advertisement block looks on the frontend.

In the above image, the purple banner is the ad we have added through Advertisement block.