How To Build Attractive Pages in WordPress Without Coding

This may come as a surprise to some, but bloggers are not necessarily knowledgeable on every aspect of web design, especially writing HTML or CSS codes to build a website. Myself included, some bloggers know enough to be able to build a website through a CMS tool like WordPress, but not necessarily build it from scratch.

For non-coding bloggers like me, tools like WordPress and plugins are essential to build websites on our own. But even with these tricks, we sometimes find that we need more help designing a web page. So what does a non-coding blogger do? Use drag-and-drop website builders that don’t require writing a line of code.

There are many of these tools out there, but one recent discovery I made was Site Origin’s Page Builder plugin for WordPress. It allows you to build a page’s format with interactive objects that you can drag and drop around a web page. It sort of reminded me of Elegant Theme’s Divi, but the great thing about this plugin is that it’s free.

How to use Site Origin’s Page builder:

Upon installing the plugin, you can go ahead and add a new page or post from the Dashboard menu panel. Notice the Page Builder tab on the top right corner of the text editor. Click on this to start using Page Builder.

page-builder_tab
  • Save

Clicking on the Page Builder tab activates the drag and drop interface and shows you the toolbar to start building the page. There are two major buttons you’ll be using: Add Row and Add Widget. To be able to add a widget, you need to add a row first.

When adding a row, the plugin lets you choose how many columns would be in that row and what kind of spacing will be used between columns.

page-builder_rows
  • Save

Once you set the row and column format, you can click the “Insert” button on the lower right corner.

Next, you can now add widgets to each section of a row. You can add any widget that you have installed, in addition to widgets provided by the Page Builder plugin. These widgets can be dragged and dropped into any of the columns in a row.

page-builder_widgets
  • Save

In the example below, I added different widgets to a three-column row. In the first column on the left, I added a Recent Posts widget, then a Text widget in the middle row and a Gravatar widget on the right column.

page-builder_sample
  • Save

To edit the contents of most widgets, just mouse over the widget box and you should get an option to edit it. For instance, the Text and Gravatar widgets required me to enter details before the widget can be displayed properly, so I had to mouse over and click on the “Edit” button. You can also delete or duplicate a widget by hovering the mouse over a widget box.

A preview of my new page looks like this:

page-builder_sampler
  • Save

Another great thing about Page Builder is that it can also be used in existing web pages. Just edit the page and click on the Page Builder tab. Click “OK” on the popup asking if you’d like to copy the existing content to Page Builder.

PB111
  • Save

Page Builder doesn’t only work on standard pages, but on individual blog posts as well. Just add or edit a post as normal and you should see the Page Builder tab on the WordPress text editor. If this is not the case, then go to Settings>Page Builder and ensure that Pages and Posts are both checked under the General tab.

Why should I use a Page Builder plugin?

Page Builder is great for beginner bloggers or even seasoned ones who just want to save time when creating a page. Regardless of skill level, this tool can prove useful.

As someone who’s been blogging for a while, I would say this tool is great if you want a quick and free way to design a web page without coding knowledge. I would recommend it if you don’t have the budget for expensive themes and fancy web design tools. It’s also ideal if you’re only looking to build one or two pages that serve a single purpose, such as a landing sales page or a portfolio. However, I don’t recommend using this tool for all of your pages or for creating regular blog posts, as this will slow down the process since you’ll spend more time designing rather than creating content.

Here is a video demo of this plugin:

&nbsp

Which Page builder WordPress plugin you are using?

While there are undoubtedly more advanced and more fully-featured web page builders out there, Page Builder by Site Origin is the way to go if you want a simple web page design without having to spend a dime. Are you using Site Origin’s Page Builder plugin or any other Pagebuilder WordPress plugin? What kind of page you are planning to build with page builder plugins?

Was this helpful?

Thanks for your feedback!
  • Save
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

17 thoughts on “How To Build Attractive Pages in WordPress Without Coding”

  1. James Anderson

    Thanks Kim,
    I will surely gonna use that

  2. darul

    This is great Kim. thanks for this great info…

  3. Sujit

    Hey Kim ! Very very thanks for this post I was looking for such type of plugin to build a page from own choice.

  4. Aireni Mallesh

    I find this tutorial best because I find that feature extremely necessary.

  5. Victor

    Hi kim,
    Thanks for sharing. This is really helpful , especiallly for people like us who are new in bloging. Now I dont have to worry about HTMl coding blahh balahh blahh. Creating website will now be easy. Thanks in a million for this article.

  6. Himanshu

    you can also use visual composer..

  7. Mahesh

    Page builder is really useful for daily bloggers. We can include widgets and images to create pages manually according to our requirement. These pages are mostly used in landing pages to give the better user experience to visitors. Thank you for the post 🙂

  8. Duryab Aziz

    Hi Kim, Thanks for your such a nice article.

    Today I was searching for the same article and logged on to this link. I find this tutorial best in the search result.

    Thanks Again

    Regards: Duryab Aziz

  9. Randall Agee

    Hi Kim,

    Its seems very easy to use page builder. People like me who dont know html/css coding would like to use this tool specially when It is free. I appreciate your efforts and sharing.

  10. Gagandeep Singh

    Cool Post! Seriously looking for the same for my new blog. Instead of searching from google or wordpress forum I choose SML to get all solutions.

    Really Thanks Kim and Harsh

    Gagan

  11. sangeetha menon

    Kim,

    I recently changed my theme to smart mag. I was relieved to see the page builder inbuilt option it for all the pages especially the home page with the help of which I can simply drag and drop the widgets and position according to my requirements.

    Never knew there is plugin for it too. Thank you for introducing this to us.

  12. Nikhil

    Hey Kim,
    Get me your blog url? I want to join that.

  13. inderjeet

    I agree. I am a beginner at WordPress and Web Design overall (around 6 months into serious time commitments to learning all this stuff), and it seems that WordPress. could really itch whatever scratch you would need for building a website. I could definitely see where WordPress may not be all that helpful for basic.static sites (like a local shop website or something). I am nearly addicted to WordPress at the moment, but it might be overkill in some cases

  14. harekrishna

    Page builder plugin for WordPress website is easy to implement. It is free and can quickly implement. You are right, bloggers do not require coding knowledge for this plugin.

  15. Anish

    This free plugin will help many people like me who don’t know to code.
    Can we create author pages with this plugin?

  16. Sweta Mishra

    This is great Kim. It will help the non coder bloggers. Do you know any plugin to create a quiz page? If you know please share.
    Thanks

  17. Teo in Brazil

    Hi,
    Thanks for this juicy info…
    Do you know if that plugin has for example a feature to create DropCaps or alert boxes. I find that feature extremely necessary.

    I installed recently and extraordinary plugin called lizatom.com with dozens of tools to enhance text but it created conflict on my homepage and had to uninstall.

    Let me know please.

    TEO

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top