Tip:
Highlight text to annotate it
X
Let's take a look at the new Elegant Themes drag and drop builder plugin and all the great
features that it provides. Here we are looking at the standard page editor in Wordpress.
Wordpress gives you a lot of great tools for managing your website. When it comes to editing
your content within the page only a few small tools are provided, such as adding bold text,
adding images and headers, etc. which means, when we start creating a bunch of pages they
all start looking the same, like this. Because when it comes time to adding more advanced
elements to your page, the only way to do it, is to go to the html tab and start coding
them yourself. That's where our new plugin comes in. Once enabled, a new visual drag
and drop builder system is added below your text editor. And you can use this to start
adding advanced elements to your page. Without ever touching a line of code. So let's take
a look at how it works. To add something new to your page, first click the add module button,
to reveal a list of available elements. Find something you want to add to your page, drag
it and drop it onto your canvas. First, let's try adding a video. Once the module has been
added, you can click the settings link to adjust it. For the video, all we need to do
is to add a link to the YouTube video and click Save. Once the module has been saved,
let's take a look at our site. And you can see a new YouTube video has been added. Let's
add something else. How about just a normal text block? Click the settings, copy and paste
in our text, and Save. When we refresh our page, we have a video and below it some text.
Now, let's say we wanted to put the text to the left and the video to the right. Well,
that's easy. All we have to do is resize the modules by dragging the edge of each. Once
both are below 50%, they will sit next to each other, like this. Let's take a look at
what that looks like. And as you can see, the video has been placed next to the text.
Just like we see in our visual page editor. Now, I would rather have the video on the
right, and the paper text on the left. In order to do that, all we have to do is click
and drag the modules and rearrange them to the desired order and click Save. As you can
see the video has been added to the right, and the text is on the left. As you can see,
through simply resizing your modules, you can create any number of element variations
and columns layouts. But what if you wanted to streamline the process a little bit more?
You can do that by adding columns to your canvas. Let's try it. Click the "add a column"
button and drag and drop one of the available column widths on your canvas. In this case,
let's add 3 1/3 columns. Once your columns have been added, you can drag and drop modules
inside this columns. Let's add three simple text boxes. Once the boxes have been added,
click the settings link, paste in your text, choose the title, and the color, and click
Save. And we'll do this for all three boxes. The first one I made blue, so I make the second
one green. And we can make the third one red. Now, looking at our builder, we should have
three boxes, exactly 1/3 width of each: one blue, one green and one red with some random
text. Let's go back to our page, refresh and see what we have. And there you go! Now that
we've played with the simple modules and columns, let's try adding a little bit more advanced,
such as an image slider. And then drag the image slider module onto the canvas. And adjust
the settings. To add any slide to your image slider, simply click the add slider image
and select an image from your media gallery. As you can see, the new slide has been added.
Let's add another one. Now, I'd rather have this one first and this one second, so we
cn change the order by simply dragging and dropping. And click Save. Now I'd like the
image slider to appear at the top of the page, so I'll drag and drop it to the top and again
click Save. We refresh our page and as you can see within a few seconds we've created
a beautiful image slider above our three boxes. Hopefully this video gives you a good idea
of how the new builder works and all the great things that it makes possible. Of course we've
only gone over a few of the available modules so be sure to look below for a full list of
features.