The Breakdown: Constructing a Website with a Page Builder

The Inspiration

For my next WordPress Site I wanted to try using a Page Builder. WordPress already offers default way to customize content. But page builders help do what WordPress does best. Simplify the web design process.

WordPress offers support for several page builders. Each page builder includes drag and drop features that allow you to easily add and customize content on your website. Some of the most popular page builders are:

  1. Elementor
  2. Beaver Builder
  3. Divi

I ended up choosing Elementor as it is the plugin that seemed to have the most support with different themes. Some features the free version of Elementor support are:

  1. Live Preview
  2. Fast Interface
  3. Free Widgets
  4. Unique effects for built in elements

Lessons Learned

Elementor

Elementor uses its own window to make edits to your website’s page. When we first open Elementor’s page builder the screen is split up between a side panel and a preview of your website. The side panel is filled with draggable widgets that can be used to fill your website with customized content.

Within the preview window new Sections can be added. Sections are new rows that we fill with content. Once we create a new section, we have the option to choose a structure type. This is basically the amount of columns the new row will have. After we add a new section we can drag widgets to a column in the new row.

We can select the side panel to display different settings that change how the element reacts. In the edit section the main tabs are: layout, style, and advanced. When we edit widgets layout is swapped for content.

Under layout we can change:

  • Stretch Section
  • Content Width Style
  • Column Gap type
  • Height type
  • Vertical Align Type
  • Overflow type
  • HTML tag type
  • Structure type

Under the style tab we can change:

  • Multiple background types or images
  • Slide duration and type
  • Background overlay
  • Border
  • Shape Divider
  • Typography

Under the advance tab we can change:

  • Margin
  • Padding
  • Z-index
  • CSS ID
  • CSS Class
  • Motion Effects for Entrance Animations
  • Mobile Responsive Settings

These are just settings that are specific to the elements used in my examples. By selecting a different element we can change the available options in the settings.

Gutenberg

The Gutenberg editor is WordPress’ new default content editor. This editor contains allot of the same functionality as Elementor. You can add new rows, columns, and widgets as blocks of code. Additionally you can select a block to apply settings to an element.

What Gutenberg lacks is built in widgets and the ability to apply different visual and functional settings. With Elementor I can easily add built in icons, image galleries, testimonials, and progress bars. I probably can add similar elements through Gutenberg. However many of these elements would require programming knowledge or additional plug-in installations.

Check out my other blog posts or my other websites!

22 Comments

  1. erotik says:

    Took me time to read the material, but I truly loved the article. It turned out to be very useful to me. Arlene Weber Vivle

  2. turkce says:

    Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! By the way, how can we communicate?| Cyndy Gage Edra

  3. Samantha Lobow says:

    Very descriptive blog, I enjoyed that a lot. Will there be a part 2? Hana Cullin Tedmann

  4. Valerie Arntzen says:

    you have a great weblog right here! would you wish to make some invite posts on my weblog?

    1. clopez says:

      Enlighten me. What is an invite post?

  5. Jerry Maupredi says:

    You really make it seem so easy with your presentation but I find this topic to be actually something which I think I would never understand. It seems too complex and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!

    1. clopez says:

      You can do it! A lot of things seem intimidating at first, but with a little bit of practice things will click easier.

  6. манивео пролонгация says:

    I truly love your blog.. Great colors & theme.
    Did you make this website yourself? Please reply back as
    I’m planning to create my own website and would like to know where
    you got this from or just what the theme is called.
    Kudos!

  7. Florentino says:

    Hey there just wanted to give you a quick heads up and let you know a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same results.

    1. clopez says:

      Thanks! I had to recreate the slideshow galleries.

  8. Rigoberto says:

    Greetings! I’ve been reading your web site for a long time now and finally got the bravery to go ahead and give you a shout out from Humble Tx! Just wanted to say keep up the fantastic job!

  9. Carlo says:

    Hello I am so thrilled I found your weblog, I really found you by mistake, while I was looking on Bing for something else, Regardless I am here now and would just like to say thank you for a marvelous post and a all round thrilling blog (I also love the theme/design), I dont have time to look over it all at the moment but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb work.

  10. Marcel says:

    Hi would you mind letting me know which web host you’re utilizing? I’ve loaded your blog in 3 different internet browsers and I must say this blog loads a lot faster then most. Can you suggest a good internet hosting provider at a fair price? Thank you, I appreciate it!

    1. clopez says:

      The trick is to use plugins that cache and compress media. I tend to search up different ways to optimize a WordPress site. There are always new tools being created so its good to check every so often.

  11. Tojo says:

    Great website you have here but I was curious if you knew of any community forums that cover the same topics talked about in this article? I’d really like to be a part of community where I can get opinions from other experienced people that share the same interest. If you have any suggestions, please let me know. Kudos!

    1. clopez says:

      Your best bet will be YouTube or Reddit. Find a popular YouTube channel where people might respond to your comments. Reddit also has a subreddit for WordPress where you can find allot of related content.

  12. Cheyenne says:

    I think this is among the most significant information for me.
    And i’m glad reading your article. But should remark on few general things, The web site style is wonderful, the articles is really great :
    D. Good job, cheers

  13. Wyatt Wehner says:

    First off I want to say terrific blog! I had a quick question in which I’d like to ask if you do not mind.
    I was interested to find out how you center yourself and clear your mind before writing.

    I have had a tough time clearing my thoughts in getting my ideas out
    there. I truly do take pleasure in writing but it just seems like
    the first 10 to 15 minutes are generally wasted simply just trying to figure out how to begin. Any suggestions or tips?

    Kudos!

    1. clopez says:

      First have an outline of what you want to write about. I will have notes in bullet points about topics I want to write about. Ill usually write out my intro which organizes how I will outline the essay.

      Then I try to have each paragraph have a purpose. If the paragraph seems too short I will try to add more details. If the paragraph seems too long Ill spit it up where two different points are made.

      Then I reread what I wrote, make changes, take breaks and repeat until I am happy with what I have.

  14. Gabrielle Sorell says:

    This is really interesting, You’re a very professional blogger.
    I have joined your feed and look ahead to in search of extra
    of your fantastic post. Also, I’ve shared your web
    site in my social networks

  15. Alberto Delbrutto says:

    I really like and appreciate your post. Really looking forward to read more. Cool. Cesar Jelarde

  16. Randy Muenkel says:

    Some truly nice stuff on this web site, I enjoy it. Randy Muenkel

Leave a Reply

Your email address will not be published.