Drag and Drop Editor - Website - Email

We are after a HTML5 Drag and Drop editor using JavaScript and JQuery. The editor will be used for 'Email Campaigns'. The CSS framework used should be Bootstrap, latest version. The editor must be able to handle different 'starting' layouts, i.e. a blank canvas or as 'theme' such as a two column layout with a banner across the top. If a 'theme' is selected to being with, each of the theme components or 'blocks' must be editable as if they were dragged on to the blank canvas by the user. The editor must be extendible re the 'blocks' that can be 'dragged and dropped' onto the editor. At a minimum the editor must have the following 'block types': - Title (headers) - Text - Buttons/Links - Divider (horizontal rules or simply empty an empty blocks to space out elements) - Images - Images with text wrapping - Social links (Facebook, Twitter, LinkedIn, etc) - Social 'follow' links - Video blocks (Youtube section embedded in content) - Footer Each 'type' should be expendable so that multiple different 'versions' of a type exist. I.e. A 'footer' element could come in two or three different varieties or styles. Additionally it must be possible to duplicate each block, which simply inserts a carbon copy directly blow. Each block should be movable up and down the page and also removable. With the 'images' they should be linkable to either a url or you should be able to drag an image from your e.g. desktop or a folder directly into the editor. Everything in the editor must be editable including - All text and images (and other blocks where applicable) (including its size, font type, line height, colour, bold, italtics, alignment, links, number of columns for text, width of columns, etc) - Background (either as a colour or image) - Padding and margins (top and bottom specifically) for each item. - Borders (including size, colour, etc) - Image sizes, including the ability to crop and rotate. - The image alt text. - The editor must have the ability to 'remove all styles' from a given set of text - The location of 'text' surround an 'image'. I.e. ability to wrap text around the image with the image left aligned or right aligned, the ability to place the text below the image etc. - The 'width' of the item, i.e. so that two block can be placed next to each other. - Ability to turn off or on the social networks name in the block. - Ability to determine the social icon sizes or icon styles. Further the editor must have the ability to specifically change e.g. font size and line height etc for 'mobile devices'. The editor must have a 'preview function' so that the content can be previewed on a desktop browser and also in a simulate mobile and tablet device. I.e. a smaller screen. The editor should also have a function to 'validate all links'. This should check their format and list all links down the side for the user to click on them and open them in a new tab to 'test them'. Example links from the www. [url removed, login to view] [url removed, login to view] [url removed, login to view]

Skills: CSS, HTML5, Javascript, jQuery / Prototype

See more: youtube jquery mobile, youtube banner editor, website tab icon, website layout using html5, video blocks, turn website into mobile version, test and turn up, social icon for website, rules icon, padding background, newsletter banner size, new font for icon design, latest version of jquery, jquery latest version, icon set for website, icon design styles, icon design for youtube, html5 youtube website, html5 on line, horizontal line example

About the Employer:
( 7 reviews ) Brookfield, Australia

Project ID: #9117005

Awarded to:


We are a team of expert developers and have worked on technologys like, Grid System, Bootstrap, APIs, HTML5, CSS3, PayPal Integrations, PHP etc. We have experienced designers who can create custom design as per your re More

$10 AUD / hour
(4 Reviews)

3 freelancers are bidding on average $8/hour for this job


A proposal has not yet been provided

$5 AUD / hour
(86 Reviews)

A proposal has not yet been provided

$9 AUD / hour
(1 Review)