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.defaultclass to polish your CSS and change font, color, border, background or width.
I hope you enjoyed reading this tutorial.
Thanks. Looks nice, easy and gives nice look to nod.
Thank you Larry! Great to hear that!
I have a question on how you got your text to flow around the image on the right?
Hello Chris, “image on the right” is the boxout. To achieve this effect, you’ll have to install the module and configure it like in the tutorial. Or am I understanding it wrong?
I think I got it! Just set a default medium style for al images.
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.
that’s precisely the concept of modules. They should ease your life.
Thanks for your comment!