Page Builder by Siteorigin Plugin

Site creator by Siteorigin Plugin

SiteOrigin Page Builder: WorldPress Site Origin Page Builder. First step is the installation and activation of the Page Builder plugin. Try the Page Builder by SiteOrigin plugin.

Creating a page with SiteOrigin

Here is an example of the type of page you can build in each of our topics with a drag-and-drop plugin for the Contentbuilder: For the sake of listing some nice little features about this little demonstration page: no side bar, full width heroes section, multi-column layouts, different widths, user-defined headers, fully reactive structures.

We' re going to use two plug-ins to make it all work. SiteOrigin Page Builder plugin with its extra widget bundles. Second is the Shortcodes Ultimate Plugin. A few more plugin details: Do all your work within the default WordPress edit window.

In SiteOrigin, you can use Widget as a block of contents. SiteOrigin has its own revision check. "There are two things you should do on the "Add a new page" screen: Set the "Template" of the page to "Full Width". "This will generally give you better results when working on your new page.

As a rule, you do not need side bars for your landings pages. You can find this in the right sidebar: Then change the WordPress editors to the "Page Builder" setting: We will create a WordPress landing page from scratch for the purposes of this Tutorial, but I strongly recommend that you also look at these ready-made layout files and see what kind of mechanism they have under the bonnet.

SiteOrigin has two major containers types: lines, widgets. Essentially, to place any type of contents on your target page, you must first make a line and then insert your contents as a Widget. Okay, so, to get going, you need a general picture of what your page should look like.

As I need a good example here to work with, the aim of this page will be to encourage a guidebook on how to make a nice Besanie cap in less than 20 mins. It' s a very easy thing to write the title line, but it can look really fantastic!

In the SiteOrigin primary user Interface, click the row button: Well, let's just put in a new broadget. Press the Append Broadget button: Then, go to "Widgets Bundle" and choose the "SiteOrigin Hero" widget: The first step is to modify the "Hero" widget: Put a new "hero frame" there: This works like any other medium in WordPress.

Just click on the "Select media" icon and load a picture from your computer. Once you are done, just click on the "Done" key in the lower right hand corner. Once you are done, click on the "Done" key. You can then click the "Preview" pushbutton on the entire page. That'?s what my pageboy looks like right now:

It is also the first place where we will use the Shortcodes Ultimate Plugin. Then I will include in each of them a basic Widget named "SiteOrigin Editor": Essentially, this is a default WordPress text edit box with all the features of WordPress. I will use it for is a very basic contents pad - just an picture and some text.

Next I will be adding some short codes UltimateMagic here! It is my aim to make this picture appear on the monitor with a small lag and a small amount of time. In order to do this, I click on the "Insert short code" icon at the top of the window: {\pos (192,210)}What you're gonna see are all of Ultimate's short codes.

Below is a small "Live Preview" icon that will help you. At the moment, however, we will accelerate things and simply use the ready-made short code directly in the editing area. Next, I make two more edit pads like this and put similar shortcuts there, but I assign different delay to them (2 seconds for the second pad and 3 seconds for the third).

That'?s how it looks on the page landing: I should probably also note at this point that every Widget and every line can be dragged and dropped. About" uses the same broadget element - "SiteOrigin Editor" block - but has two instead of three column.

Therefore, construct a new line and adjust it to 2-column. Use SiteOrigin for this. Also, the contents of these column are quite simple. I' m only using it to keep a SiteOrigin Editor widget and some About information: After all, here's what it looks like on the page landing:

That is our last line, and actually the most important line for any page that lands - here is the call to act. SiteOrigin, as you can see, makes it very straightforward to customize the width of each colum. Simply a plain "SiteOrigin Editor" wideget here. Again done with the SiteOrigin Editor Widget.

Here I use a widget from my e-mail deliver plugin. It takes charge of putting a working opt-in directly on the page and connecting it to my e-mail client (ask your own e-mail service how to make this work).

At the end my last line in the Drag-and-Drop Planting Page Builder looks like this: This is how it looks on the page in WordPress: In this phase the work is done and you can start enjoying your new page that has been created with some drag-and-drop tricks.

Creating something like this is easy with SiteOrigin and Shortcodes Ultimate. And the fact that you can do it all yourself makes these plug-ins extremely useful. Again, the described procedure of creating a page with all our topics works, so that you are only limited by your creative abilities.

Auch interessant

Mehr zum Thema