Rick Radko's presentation discusses the advantages of using WordPress page builders, which allow for complex and responsive layout designs using drag-and-drop interfaces. He highlights various page builders, their features, integration issues with third-party themes, and the potential for layout restrictions. The presentation also addresses concerns about lock-in with page builders and provides resources for further exploration of the topic.

1. r3df.com
lumostech.training
Rick Radko
WordPress page builders:
- a new tool to build awesome pages quickly
WordCamp Toronto
Aug 7th, 2016

2. © 2016 Rick Radko, r3df.com
I'm
Rick Radko – R-Cubed Design Forge: r3df.com
Website and app developer/ designer, &trainer.
 Custom web sites since 1996.
 WordPress sites since 2008.
WordPress enthusiast:
 Co-organizer of:
WordCamp Ottawa: 2013, 2014, 2016
The Ottawa WordPress Group.
 Plugins:
profiles.wordpress.org/ r3df/ #content-plugins
1

3. © 2016 Rick Radko, r3df.com
Why page builders?
2
Build complex layouts, that are fully responsive
- with easy to use drag & drop UI's.

4. © 2016 Rick Radko, r3df.com
There are many page builders to choose from…
3
+ Many, many more!

5. © 2016 Rick Radko, r3df.com
Backend page builders
4

6. © 2016 Rick Radko, r3df.com
The resulting page - (Twenty Sixteen Theme)
5

7. © 2016 Rick Radko, r3df.com
Builder overdose!
6

8. © 2016 Rick Radko, r3df.com
Divi Builder
7
Menus, menus and more menus!

9. © 2016 Rick Radko, r3df.com
WooRockets & SiteOrigin page builders
8
WooRockets PageBuilder
SiteOrigin PageBuilder

10. © 2016 Rick Radko, r3df.com
Loosing track of content in backend editors
9
Pages with more content get harder to manage.
Which image is which?

11. © 2016 Rick Radko, r3df.com
Frontend page builders
10
From: www.elegantthemes.com/blog/divi-resources/divi-3-0-sneak-peek-a-look-at-the-inline-editor

12. © 2016 Rick Radko, r3df.com
Frontend page builders - Beaver Builder
11

13. © 2016 Rick Radko, r3df.com
Beaver Builder - photo settings popup
12

14. © 2016 Rick Radko, r3df.com
Beaver Builder - photo settings – advanced tab
13

15. © 2016 Rick Radko, r3df.com
Beaver Builder - drag and drop to add content
14

16. © 2016 Rick Radko, r3df.com
Tabs on the site
15

17. © 2016 Rick Radko, r3df.com
Drag and drop to add a new row
16

18. © 2016 Rick Radko, r3df.com
Populate the row
17

19. © 2016 Rick Radko, r3df.com
Responsive behavior – phone size
18
Page buildersWordPress default
Weird wrapping
effects

20. © 2016 Rick Radko, r3df.com
Responsive behavior – tablet size
19
WordPress default
Page builders

21. © 2016 Rick Radko, r3df.com
Forge – Front end page builder
20

22. © 2016 Rick Radko, r3df.com
Live Composer page builder
21

23. © 2016 Rick Radko, r3df.com
Some of many possible content modules…
22
 Text editor,
HTML, photo or
image, videos
and sidebars.
 Callouts, icons,
call to action,
pricing tables,
maps.
 Accordions, tabs.

24. © 2016 Rick Radko, r3df.com
More content modules…
23
 Countdown timers, bar charts, circle &number counters.

25. © 2016 Rick Radko, r3df.com
Even more…
24
 Sliders, galleries.
 Contact forms, testimonials
testimonial rotators.
 Social icons.
 Posts &posts sliders.

26. © 2016 Rick Radko, r3df.com
Easy to use settings editors
25

27. © 2016 Rick Radko, r3df.com
Resulting Accordion
26

28. © 2016 Rick Radko, r3df.com
Extra modules
Use widgets and shortcodes!
27

29. © 2016 Rick Radko, r3df.com
More features
Parallax effects.
Background video.
Javascript and/ or CSSanimations.
Work with:
 Pages, Posts, Custom Post Types
28

30. © 2016 Rick Radko, r3df.com
Layout templates
29
“Instant” landing, &
home pages.
Edit and re-arrange
as you need.

31. © 2016 Rick Radko, r3df.com
Custom CSS & javascript
30
Add custom css and
javascript: per page, or
even per object.
Add CSS id and class tags
to content items.

32. © 2016 Rick Radko, r3df.com
Save & Reuse
Page builders may let you save & export:
Layouts
Layout fragments
31
Templates
Global templates

33. © 2016 Rick Radko, r3df.com
Custom modules
Included modules not quite right?
Override the existing modules.
Add custom modules.
Add 3rd party plugins with custom modules.
 Just starting to appear.
32

34. © 2016 Rick Radko, r3df.com
Themes
Some page builders come with themes that are
designed to integrate with the builder plugin.
Beaver Builder
Divi
Others have
associated
themes.
33
Beaver Builder

35. © 2016 Rick Radko, r3df.com
Issues:
3rd party themes:
Content area is not full width in many themes.
 Can't make full width layouts.
 Genesis Dam Buster plugin fixes it for Genesis.
CSS and javascript conflicts.
Page builders work on content.
No layouts for theme header/ footer.
3rd party plugins starting to appear with
solutions.
Many do not create layouts for archive pages
(blog).
34

36. © 2016 Rick Radko, r3df.com
Issues continued:
Some builders have limited layout options.
1, 2, 3, or 4 columns in common size ratios.
Advanced designers may struggle with layout
restrictions.
Can be "heavy" – ie. slow to work with.
May be slower to work with than programming.
Don’t use on every page.
Integration with 3rd party themes.
Lock-in is possible with page builders.
35

37. © 2016 Rick Radko, r3df.com
Lock in issue
36
Renders with raw
shortcodes
Still renders a
reasonable page!
The site with builders turned off

38. © 2016 Rick Radko, r3df.com
Find Page Builders
Articles listing page builders (with brief
descriptions)
 solostream.com/ 7-proven-page-builder-wordpress-plugins/
 colorlib.com/ wp/ page-builder-wordpress-plugins/
 codeinwp.com/ blog/ best-drag-and-drop-theme-builders/
 themexpert.com/ blog/ drag-and-drop-page-builder-for-wordpress
37

39. © 2016 Rick Radko, r3df.com
A few page builders I have tried…
Representational (Backend)
 Divi ($) (Theme) (Elegant themes)
 Page Builder by SiteOrigin
 Page Builder by WooRockets
Wysiwyg (Frontend)
 Beaver Builder - WordPress Page Builder (Freemium)
(Theme)
 Forge - Front-End Page Builder (Freemium) (Theme)
 Page Builder : Live Composer ($ Add-ons) (Theme)
38

40. © 2016 Rick Radko, r3df.com
Contact
Rick Radko
email: wpinfo@r3df.com
twitter: @r3designforge
Websites:
r3df.com
lumostech.training
Slides at:
slideshare.net/ r3df
39