So you’ve created a weighty tome of information – rich content. You’ve done your research and covered all the bases. But something doesn’t look right. It just feels – dead.

Because what you’ve created is a vast wall of information. And walls do one thing well – they keep people out. Your pages of unbroken text can be intimidating and even off-putting to the casual reader.

Look at your finished product. Does it bring you joy? Do you glow inside with pride?
NO? Then you’re not finished!

Everything in a box to the left!

Handy… interesting… useful!

First impressions count

When you meet somebody new, they’ll form an opinion about you within 30 seconds. And a visitor to your web page will form an opinion about the content within just 3 seconds. Or less.

Don’t let their first impression be their last. Images are a great way to break up big blocks of text. But creating great images takes time. Even finding stock images that are well matched to your topic can be a challenge.

Write on the right?

That’s right!

Hot tip!

Floating content boxes are great for:

  1. Instructions,

2. Recipes, and

3. Lists

4. of

5. things

Use your content to break up your content

Floating text boxes are a fabulous way to breathe new life into your web content. Also known as asides – or hover boxes – they’re great for displaying lists, recipes or snippets of related information.

Surprisingly, WordPress doesn’t offer a convenient way to embed floating content boxes. Even premium themes such as Avada don’t support it in their page-builder tools. Sure, you can generate split-column content. But the text doesn’t wrap or flow.

The following css snippets can be pasted into the theme css file of any website. For theme-fusion CMS platforms such as Avada, can add it to the Custom CSS section.

 

Use these css snippets to create adorable hovering boxes of information! Adding little glyphs or motifs can really make your page pop.

To embed your content in a floating text box, just wrap it in a div with the .infobox class and either the .infobox-left or .infobox-right class. Add the .infobox-col classes to set the background color.