Give Your Drupal Articles More Visual Appeal with Boxout

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.

install boxout

boxout module installed

Step #2. Add the Boxout Button to Your CKEditor

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

add boxout button to ckeditor

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

make boxout button available to ckeditor

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

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.

click the insert button

  • Finally, add an image.
  • Click Save.

add image click save

You’ll see your article with its corresponding boxout.

you will see article with 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.

change boxout style

I hope you enjoyed reading this tutorial.


  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Notify of

Newest Most Voted
Inline Feedbacks
View all comments
6 years ago

Thanks. Looks nice, easy and gives nice look to nod.

6 years ago

I have a question on how you got your text to flow around the image on the right?

5 years ago

Interesting. My first thought was, I would use a “blockquote” and CSS… but on second sight I saw the “style” select box. Which makes it more versatile.

Would love your thoughts, please comment.x