Give Your Drupal Articles More Visual Appeal with Boxout

A boxout is a design element used mainly in magazines to enclose related information to the main article while retaining some type of connection. You can use it to add extra links related to your content or a small bio.

The “Boxout” contrib module helps you add this design element to your content directly in CKEditor. In this tutorial, you will learn how to do just that. Let’s start!

Step #1. Install the Module

• The Boxout module has no additional dependencies. Use your preferred method to install it.

Step #2. Add the Boxout Button to Your CKEditor

• Click Configuration > Content authoring > Text formats and editors.
• Select the Basic HTML CKEditor.
• Click Configure.

• Make sure the Boxout (insert) button is available in your Active toolbar.

• Scroll down and make sure you see the <div class="boxout default-plain"> in the Allowed HTML tags.
• Click Save configuration.

Step #3. Write Your Content

• Click Content > Create Content > Article.
• Add title and body for your article.
• Position the cursor where you want the boxout to start and click the Boxout button. You’ll see a popup window.
• Add a title and related content to your article.
• Click the Insert button.

• Finally, add an image.
• Click Save.

You’ll see your article with its corresponding boxout.

• Would you prefer another look for your boxout? No problem! Use the .boxout.default class to polish your CSS and change font, color, border, background or width.

I hope you enjoyed reading this tutorial.