Software Development UkraineSoftware Development Outsourcing Provider in Ukraine

Pop-up and banner ads have become a proven online marketing tool that is effective. Bit by bit, users are getting used to this promotional strategy that once was annoying. Online ads have changed and become more sophisticated, and creative design allows consumers to choose how to interact with these ads.


Currently the art of "interruptive advertising" is based on bringing a valuable and relevant message in a format that is appealing to users. Now the user controls the ad. The new format of pop-up and banner ads engages website visitors through content and multimedia tools. As a result, pop-ups are driving fewer users away from a website, but are able to help websites with poor traffic meaningfully improve conversions.


Marketers and business owners are confronted by the constant need to create ads to achieve goals and redo online ads to improve their efficiency. To accomplish the task, they require a software tool through which they can fulfill their ad goal and master the skill of designing relevant content for banners and pop-ups. Typically, an editor tool contains samples of ads that can be viewed or applied as a foundation for your own ads. With the help of drag-and-drop editor tools, a user can create attractive and stylish ads.


To understand how the drag-and-drop editors for banner ads look like and what options they provide, we'll use Adoric, an online marketing tool developed by Onix team. 


The drop-and-drag editor Adoric

Adoric helps design banner ads, optimizes conversion rates, and collects the core statistics on ad performance. Through a personal account, a user gains access to the drag-and-drop editor, where they can create an ad and adjust its appearance to personal preferences. 



Instead of relying on technologies that only resembled our project concept, our team took a path to generate a simple and reliable solution that provides effortless work of the editor with HTML.


The use of HTML (without adding any SVG elements) with JavaScript turned out to be the right answer - this solution ensures simplicity of banner ad development by a user.


How we implemented the drag-and-drop editor

Searching for the way to implement all project aspects, our team started by studying the requirements documentation, building the website architecture and developing the functional logic for each component. The goal was to create a technology solution that will turn Adoric into a professional editing tool and will be a ready-to-use solution.


The search for a technology solution was intuitive, but based on clear understanding of what the final product should look like. To avoid future problems with code support when adding new features, our team made a decision to rely entirely on Vanilla JavaScript.


This solution also made it possible to create code that is easy for a developer to understand, so when the project is updated, it is easy to add new code without affecting the core code, responsible for the tool's functioning. The simplicity of the technology choice made finding errors more effective during the testing stage of Adoric development.


At the same time this approach makes it easier for the end user to work with the editor, conversion statistics tool and integration of email marketing systems functionality.


How the drag-and-drop editor works

Adoric's final product (banner or pop-up ad) created through the editor is called a smart box because you can manage your ad's appearance on a selected web page: it can be a simple pop-up, a slider or a fixed bar placed in the header or footer of a web page.


1. To use the drag-and-drop editor, you don't have to be a skilled designer.

The application offers a set of smart box templates with ready-to-use design elements to create ads. Templates are easily modified to add or change image elements, create necessary wording and insert a video to make the smart box "alive." The size of your ad is adjustable.  


Adoric ad banner design


2. The rich library and text editor create the foundation for an effective selling message.

The editor provides more than 5,000 graphic elements sorted into groups that you can add to your template, so you spend less time on creating an ad design. With the text editor, a user can experiment with different fonts, font size, and text opacity and add links. Additionally, you can choose to upload your own images and create subscription forms.


3. Through the settings options you can establish display rules for your ads.

This application can be integrated with the most popular email marketing service providers such as MailChimp. Adoric supports the cloud based service for storing your existing ads and accessing them to edit anytime and anywhere.


Adoric banner ad display


banner ad settings