Drag&Drop-for-WordPress

Drag And Drop WordPress Website Builder

REAL

  • Fee

  • $0

  • Premium

  • $60 /year

  • More

  • Info

  • Presentation
  • Presentation
  • Presentation
  • Watch Tutorial
  • Watch Tutorial
  • Watch Tutorial
  • Watch Tutorial
  • Watch Tutorial
  • Watch Tutorial
  • Watch Tutorial
  • Watch Tutorial
  • Presentation
  • Presentation
  • Presentation
  • Test Demo
  

Note

There are three reasons why REAL is the right tool for you: 
  • It has a extreme low learning curve.
  • It works 10 times faster than doing same job by coding.
  • It is unlimited - there is no (client) request which you can not handle with REAL.

Is it really free?

REALS scope of operation like::
  • REALS property window for drag and drop.
  • The CSS GUI model. 
  • A very sophisticated template engine plus the page navigation model. 
  • The drag and drop contact form engine. 
  • Text, Image and Tweening Effects. 
  • The magicBox - a cool drag and drop jQuery builder
  • Its open source API to load html, javaScript or even php and yes, this works as well in WordPress and yes you can later still use drag and drop. 

Tools

No it isn’t because.
  • 1REAL uses modern jQuery and HTML technologies, by this we could make a stringed logical structure where everything is only 2 - 3 clicks away.
  • We will provide you an eBook (85 pages) which has 400 Video links for further explanation.

CSS

Professionals
If you are a professional Designer it will take you less than a minute. 

Consumers
If you never made a webpage before it could take you 1-2 h but don’t worry, in this time you will learn to control technologies for what you would need otherwise 2 - 3 years. 

Effects

You could and you should, because you will work 10 times faster with REAL than doing coding by hand. Beyond that it comes without any limits, thanks this you can deliver what ever your client requests.  

MagicBox

Once you worked it out and read more or less the eBook (you don’t need to read that from A to Z) you could publish any service for any imageable business in no time. 
Beyond this you could even work as a webdesigner and compete with the best designers in the world.

Publish in WordPress

All premium services will be supported for a test period of 4 weeks. All you have to do is clicking Preview in property window, to see how it works. Beyond this you need a premium account to export them to wordpress.

Support

Yes you can, by removing premium services from your WordPress page you can switch back to free services.

Hosting $ 2,50 / month

We made REAL for the love, not for the money, because we love WordPress. Therefore it is not only free of charge but also free of advertisements. So yes, as long as you don’t want the premium services you can use REAL for free. 
Beside, by ordering Premium services, we could give you a free Hosting packet for instance 5 mysql databases, 1 GB disk space, unlimited traffic. 100 Email Accounts and 10 FTP Accounts, for 99, 9% of all users this will work - by this you have even the Premium services mostly for free, because you save the money for the Hosting. Read here more
ImageGallery
Intro - Image Gallery Tool
Image Gallery works mostly like Slider 3D, but well it is a gallery, which provides you as an additional Option access to 50 cool flash effects. Beyond that you can use it of course as a plainHTML5 application by ignoring the effects.
Load Images
  • Click on ad Image 
  • System Image Gallery open 
  • Select Image- 
  • click Pick to use this image. 
  • Repeat this as often as you needed to load several images
Manage Text Info
  • Click on ad Image 
  • System Image Gallery open 
  • Select Image- 
  • click Pick to use this image. 
  • Repeat this as often as you needed to load several images
Flash Effects
Image Gallery comes with some cool Image Flash Effects. If you want use these Affects you have to work like this. 

  • Click on Effects. 
  • Select Effects you like 
  • Click on next Image, to use different Effect. 

 After that you have to click on the tab settings – activate now in drop down field HTML + Flash
Gallery Style
Image Gallery comes in 2 style Variations in Black or white. You can choose style like this. 

  • Click drop down field color sheme 
  • Choose between Black and White 
  • Click on OK when you finished.
Intro - Text - Tool
With the jb text tool you are fully in control with your texts because it comes with an easy to understand CSS Editor and some cool HTML5 Text effects which are very impressive and useful, for instance in your header. Let us show you here how it works, and don’t spend to much time on the details, we will show you later on step by step how you can manage the text tool.
Create-Text
Creating text is pretty simple and works like this::

  • Write you Headline in the upper textfield – or skip it if you don’t need it. 
  • Write or copy your content text in the text field below.
  • Click Save.
Manage Hyperlink
  • Open text tool by clicking here.
  • Mark the word where you want set Hyperlink.
  • Click here on the Hyperlink icon – a overlay open.
  • Now you have 2 options:

    • System – to set link within your website
    • Fonts title color.

  • With Type you define:

    • self – this will just open another webpage
    • _blank this open a webpage in a new tab

  • If you want you can manage link color here.
Fonts-CSS
You can manage font style from one central place like this: 

  • Click on Edit CSS 
  • Select a color 
  • Select Fonts size 
  • Select a group 
  • Select a font from group, keep an eye on preview. 
  • Click save it you like your style settings.
Hyperlink and SEO
  • On the right side you can set a hyperlink to image 
  • You can set alt tag for Search Engines.
Text-Settings
The jb-websiteBuilder comes with a standard text tools as you know it very likely from you Office word program or other text processors. Here you can set text left right center or justify. As you see here in this video.
Loading Google Maps
Basically you hvae to 2 stepps to go, to get Google maps in your page:
  • Loading Tool
  • Put an address in Formfield
Load Google Maps Tool
  • Click on the button Tools to open the Toolbox
  • Click on the Google Maps  icon, 
  • Now you can see a video to obtain more information 
  • Click on load to work with the tool. 
Load Maps
1. Just put this address data in the textfield a. country, b. tow c. street 2. Click OK and that's it.
Intro - Slider 3D
See the fully movie to get an impression how tweening engine works. And don’t pay to much attention to the details, we will show you that later step by step.
Load Slider 3D Tool
  • Click on the button Tools to open the Toolbox 
  • Click on the Slider 3D icon, 
  • Now you can see a video to obtain more information 
  • Click on load to work with the tool.
Load Images
  • Click on button ad Image
  • System Image Gallery open 
  • Select Image
  • click Pick 
  • Repeat this as often as you needed
Set Titele and Text informations
  • Click on a Image what we loaded
  • On the left side of the application appears now the image. 
  • Right side we can write now some Information about the Image.
Set Effects
Please Note, Flash is no longer supported any more, we will rework this Video soon, in the meantime just focus on HTML part and work like this.

  • Click on Tab HTML.
  • Select an Effect.
  • Click nextimage, set efeect. 
Fonts Style - manage Auto Play
  • Click on Tab Settings here we can manage

    • Size of Fonts for Title
    • Fonts title color.

  • Set Auto play true or false.
  • Click on OK when you are finish.
Intro - Social Connector
Social connector is basically not a big thing, but it’s pretty convenient because it connects your page fast with your social profiles. To integrate social plugins like for instance a Facebook like box, we use the open source API HTML, JavaScript and PHP. 
Load the Tool
  • Click on the button Tools to open the Toolbox
  • Click on the Social-Navigation icon, 
  • Now you can see a video to obtain more information
  • Click on load to work with the tool. 
Load Social Icons
  • 1. Define the height and width of the icons you want use
  • Click than on the button Add New 
  • The System Image Gallery opens, 
  • Select now an image, in example a Facebook icon.
Set Titele and Text informations
  • Click on a Image what we loaded
  • On the left side of the application appears now the image. 
  • Right side we can write now some Information about the Image.
Intro Tweening - Engine
See the fully movie to get an impression how tweening engine works. And don’t pay to much attention to the details, we will show you that later step by step.
Tweening Engine Objects
The Tweening Engine has a simple and convenient interface, which is structured like this:
  • On the top you find the buttons like List, Add Text and so on.
  • In the Center you find a big white box, we call it Stage
  • On the top you find the buttons like:

    • Object - that’s what you needed most of the time 
    • And Stage - here you can define the height of the Preview area but not the width, because this will be automatically adjusted to your current website.
    • List here you can access existing projects.
    • Add Text creates a new tween-object
    • Add Image - works like Add Text.
    • Preview - Click on it to trigger current tweening application
    • Save and Save as -to save projects

  • In the Center you find a big white box, we call it Stage, Stage,
  • On the right side you find an extruder, labelled Properties , which is divided in 2 Tabs:

    • Object - that’s what you needed most of the time 
    • And Stage - here you can define the height of the Preview area but not the width, because this will be automatically adjusted to your current website.

  • On the bottom of the page you find the Timeline
Create your first animation
  • We click on the button Add Text - now you see in time line an object.
  • We set a name for the new object, let’s call it puzzle_1.
  • OK, let’s experiment with the object puzzle_1: , 
    • A tween-object which takes place in the stage.
    • An orange / yellow tween-manager object which takes in timeline.
  • We click in stage, on the tween-object, puzzle_1 to activate it.
  • In properties, we replace the Lorem Ipsum text for the tween-object, through puzzle_1.
  • In timeline, we replace on the left side text1 through puzzle_1.
  • Now we are ready to animate tween-object, puzzle_1. For this we work like that:

    • We drag the tween-manager duration to 3 seconds..
    • On the right side you see a bar we call that tween-object, which is divided in orange and yellow.
    • We stretch the tween-object duration to 3 seconds
    • We click the left part of the tween-object - it turns orange and set in properties, in Field X value 500.
    • We click in tween-object on the right part - it turns orange and set in properties, in Field X value 200.
    • We click preview - and here see how or object puzzle_1 runs from left to right.
    • We shorten time from 3 to 0,5 Seconds - click preview and now it is much faster, because it has to manage the same distance in less time.
    • We add Easing Bounced on Easing out - and here’s the preview.
    • Finally we save our project and give it the name Hall of Fame.
    • We drag the tween-manager duration to 3 seconds.
    • We click the left part of the tween-manager, we call this tween-manager-start - it turns orange here we set in Properties, in field X value minus 500.
    • We click in tween-manager on the right part, we call this part tween-manager-end - it turns orange, here we set in Properties, in Field X value 200.
    • We click Preview - and see how or tween-object puzzle_1 runs from left to right.
    • We shorten the time for tween-manager just by dragging from 3 to 0.5 seconds. After that we click again on Preview and now it runs much faster, because it has to manage the same distance in less time.
    • We add Easing Bounced on Easing out - and click again Preview.
    • Finally we click Save our project and give it the name Hall of Fame.

OK, so far the basics, we will have to come back once more later to this to adjust some things, but for the moment we can leave it like this.
Trigger Tween in your Page
  • We open a page in jb backend.
  • We choose an object like text, image or whatever, which we want to animate, we call this object tween-target.
  • By mouseing over tween-target we see a blue icon. >
  • We click on tween icon a overlay opens, now we:

    • Select Group Hall of Fame
    • We select Jimi Fly.
    • And click on OK.

  • We save the page, click Preview and though it works it doesn’t look that good because: The animated object is too small, compared with what we see in the backend.

OK, we expected this; let us show you in the next chapter what we have to do to make it work perfectly.
Make it perfect work
Let us show you now what we have to do to make Tweenings work perfectly 
  • We provide us data X / Y / H / W from
  • We place tween-target data in tweening engine in the last Properties fields tween-manager-end, we call this field tween-ending
  • We save the project.
  • Refresh the page in the frontend - and now it works fine.
  • Please note, tween-ending is the last part of tween-manager in the timeline, the reason why this can be different to tween-manager-end is that you can have several tween-manager objects in the timeline.

This is actually very cool, because it allows you to make complex animations.
Make it awesome
  • We create a new tween-object and call it puzzle_2 by repeating what we showed you already /li>
  • 2. After that we operate like this:

    • We move the tween-manager for puzzle_2 in the timeline to the right side.
    • We click in timeline on the right side on the green plus-sign icon, by this we have a second tween-manager object in the timeline we - let us call it tween-manager_2.
    • In Properties  we set value ScaleX and ScaleY t to 0. We do this for tween-manager-start and tween-manager-end by this the tween-object will be invisible on the stage during the duration of tween-manager_2.
    • After that we drag tween-manager_2.lenght to manage its duration time.

Later on you could experiment with fade ins, rotators and much, more but as we said, we are only the developer and you are supposed to become our Artist who shows us an the world what really can be done with this tweening engine
Term What it means
List Access Tweening Projects
Add List Creates a tween-object
Save And Save as
Properties Set dimension of like H/W/X/Y. Height, Width, X= horizontal position and Y = Vertical position.
Timeline Here you define when Objects start and end tweening.
Tween Object By clicking on Add Text a tween-object object appears on the Stage. Later on tween-object will execute see tweening action when you click on preview.
Tween Manager An Object on the timeline, orange part is active part, where settings in property manager will have effect. Tween-Manager consist 2 parts. a. tweenmanager-start (left side) and tween-manager-end (right side)
tween-manager-ending The very last part of tween-manager in the timeline. This part has to have same H/W/X/Y values as tween-target.
tween-target Once you have created a tween, you would like to execute it on an object like images, text or page navigation - these objects are called tween-target
How it works
The magicBox is not rocket science from your perspective as a user. But you have to read a bid more to make it work. Once you get that, it is as easy as powerful, because it is a website builder, within your website builder. By this you can handle complex jQuery Applications like slider, tabs, accordion, overlays and cool jQuery effects just by drag and drop and the build in graphical user interfaces.
Pre-Works
  • We create a new web-page by dragging a navigation item into the page.
  • Next we change the page status from publish to draft. 
  • We name this navigation item Problem
  • We repeat this and create 2 more items, our backend looks finally like this:
  • Master-Page
  • Problem
  • Challenge
  • Solution
Next we need some content like images text and so on, but let us skip that as we have already learned how to do that.

Trigger - MagicBox
  •  We access Master-Page by clicking on this blue icon. 
  • We load tools and select the magicBox.
  • On the right side we find a drop down select box, here we set Tab count 3.
  • By this we create 3 tabs, which we find now on the left side. We click on the first Tab and set label name as Problem.
  • We repeat this and label the other 2 tabs Challenge and Solution.
  • We click again on the First Tab – Problem to connect the tab Problem with the page Problem which we created before. For that we have to work like this.
  • On the right side we see 2 drop down Fields for Group and Page.
  • Here we select first the Group VideoPresentationMagicBox.
  • After that we see all pages what are part of this Group, therefore we see as well the Page Problem, which we select now. 
  • We repeat this for the pages Challenge and Solution.

7. After that we click on OK and use drag and drop.
8. After that we save the page one more time.
9. And here how it looks in the browser frontend.

Trigger - Text link
Basically you could trigger fancybox from text link, but in most of the cases we would not recommend you this, here a tip how you could do it.

  • a. Create your text and set a Hyperlink in your text or underline the text from where you want trigger the fancybox.
  • Create now a Fancybox application by using an image as we showed you before and use this time image transparent-Stage. You will find that image right away when you open system-image gallery, because it is a very important image what you can use for many other things.
  • Once you are done you resize the magicBox application and place it over the Hyperlink.
  • Let’s open browser – and here we are, from point of view of your page visitor this looks like a text link.   

Manage - Tabs
To remove or extend tabs you have to work like this:
  • a. Click on a tab to activate it.
  • Click right side on Remove.
  • Increase left side tabs for instance from 3 to 5, magicBox will add now 2 tabs more. 
By using Slider 2 D you have several more Options like 
  • a. frame (color) 
  • Arrow (ON / OFF) 
  • And jQuery effects like slide, explode and so on.

Intro - Image Tool
Image Tool is far more than loading images because it comes with CSS3 image editor and some cool HTML5 image effects.
Load the Tool
  • Click on the button Tools to open the Toolbox
  • Click on the Social-Navigation icon, 
  • Now you can see a video to obtain more information
  • Click on load to work with the tool. 
Load Social Icons
  • 1. Define the height and width of the icons you want use
  • Click than on the button Add New 
  • The System Image Gallery opens, 
  • Select now an image, in example a Facebook icon.
Set Titele and Text informations
  • Click on a Image what we loaded
  • On the left side of the application appears now the image. 
  • Right side we can write now some Information about the Image.
Intro - YouTube Tool
Using youTube is most easy. All you have to do is, provide a link from youTube, copy it in jb, that’s it. After that you can easily drag and drop your youTube application like every other toll within your page.

Get Code
  • Click on the button Tools to open the Toolbox 
  • Click on the youTube icon, 
  • Now you can see a video to obtain more information 4. Click on load to work with the tool.
Integrate Code In jb
  • Click on the button Tools to open the Toolbox
  • Click on the youTube icon, 
  • Now you can see a video to obtain more information 
  • Click on load to work with the tool. 
  • Paste the youTube link in the text field here 
  • Click on OK. And that’s it.
Here we  make  GroupSystem
Group System
With jb website builders Group system you can manage as many WordPress pages as you like in one System. By this you can create landing pages for online marketing, multi language pages or different projects for your clients (if you are a designer). Beyond this you can copy complete groups with content and all settings, what can be very convenient for instance when you want make A/B tests in online marketing. Please note - in the video we mentioned that you can make even Flash pages, we made that off, so flash is not anymore supported
Intro - YouTube Tool
Using youTube is most easy. All you have to do is, provide a link from youTube, copy it in jb, that’s it. After that you can easily drag and drop your youTube application like every other toll within your page.

Get Code
  • Click on the button Tools to open the Toolbox 
  • Click on the youTube icon, 
  • Now you can see a video to obtain more information 4. Click on load to work with the tool.
Integrate Code In jb
  • Click on the button Tools to open the Toolbox
  • Click on the youTube icon, 
  • Now you can see a video to obtain more information 
  • Click on load to work with the tool. 
  • Paste the youTube link in the text field here 
  • Click on OK. And that’s it.
Open Source - what makes it so cool?
  •  You can load any service like Google Adsense, Analytics, Paypal or what ever in your page, just by copy some code snippets. 
  • This all works without any need for further WordPress plugins. 
  • You can place into your page content where ever you want just by drag and drop. 
By this we mean not that you don't need any more other WordPress plugins, we mean rather that you can integrate applications into your page, even when there exist not a plugin.
New Tab
CSS GUI - what makes it so easy?
  • The jb CSS GUI are several graphical user interfaces, which works without writing any line of code, that’s what makes it so easy, even for consumers. 
  • It works as a WYSIWYG application, that’s what makes it even for professionals interesting, because it works much faster. 
  • By using additionally open source interfaces you can integrate your own styles into jb. 
  • It comes with powerful style importer to create expressive jQuery styles for tabs or accordion to match your cooperate identity.
Show me REAL
What is REAL?
Please note, it will not always work as smooth as you have seen it here, because it could be happened that you have to make 1 small customisation by hand.  Basically it is not a big deal, so please check out as well next Video trouble shooting. 

Trouble Shooting
Please note, it will not always work as smooth as you have seen it here, because it could be happened that you have to make 1 small customisation by hand.  Basically it is not a big deal, so please check out as well next Video trouble shooting. 

Drag and Drop
Real turn your WordPress page into a sophisticated drag and drop website builder. By this you can place your content where ever you want and determine height and width of objects like text, images, YouTube and so on with out writing a single line of code.
Property Window
One of jb’s highlights is it’s property window. By this you can determine the 4 dimensions height, width, horizontal and vertical position exactly, based on pixels, as you like without writing a single line of code. This is it what makes it even for professional designers to a must have tool because it works 10 times faster than doing same job by coding.
WYSIWYG
You will have a powerful and easy to use tool with jb drag and drop Website builder, because it works as a What You See Is What You Get editor a so called WYSIWYG. By this you see right away in the backend what your page visitors will see later in the frontend. So far this is working to 99%, therefore you have to check always the frontend and make maybe sometimes smaller correction, how ever - most of the time it will work out of the box. Beyond this it works cross browser compatible, and it is free, so just try it.
Text and Image Effect Demo Engines
You can play a bid wit text and image effect engine online, just click on the link below to access the online demos.