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:

toiDeveloper.jpeg
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

Hi, I'm James

Need more from Umbraco?

We specialise in getting more from Umbraco to make your life easier and managing your content a breeze. 

Call us on +44(0)1484 643078 or send us an email to tell us what you do with your site and see how we can improve your workflow.