Banners have never been easier using the Text Over Image Editor

What is the Text Over Image Editor?

Banners are probably the most common request on a website, and most marketing teams want the flexibility to customize them how they want. This can require multiple fields in Umbraco that are clunky and often confusing, so we've made it easier by combining everything into one place!

  • Render with an image or just text
  • Optional Sub-Headline and link fields
  • A grid of 9 locations to place the text on the banner
  • Three height sizes for the banner that are swapped with a quick click

Download for Umbraco

Install the selected release through the Umbraco package installer or download and install locally from Our.

After installing the package, create a new DataType and select "Text Over Image" from the property editor dropdown, update the DataType's settings, then add it to a DocType of your choice.

Download on Our View on GitHub Get the Front-End Code

Some things are better seen in action, so check out our demo video to get an idea for how robust this property is!

So how do you use it?

After installing the package from Our, the next step is to set up a new data type. From there, you can set the settings you want to be allowed for that specific instance of the banner, like so:

Set up your Text Over Image Editor settings

After you've done the initial setup, place this editor on a DocType. Then you can copy the code below (both the CSS file and the Razor partial view) to quickly render the banner on the front of your site. Voila! Easy as pie.

Code Snippets

Love this? Give it a tweet!

Get in touch

We love hearing about new challenges so if you have a project you'd like to discuss, the best way to get it started is to get in touch and we can have a chat.

Drop us a line