Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress page builders - a new tool to build awesome pages quickly

361 views

Published on

Presentation slides from WordCamp Toronto 2016 talk.

Page builder plugins add drag and drop interfaces to WordPress that let you build custom page layouts without needing to code. Easily add fully responsive rows, columns, tabs, accordions, countdown timers, call-outs, buttons, pricing tables, images, galleries, sliders, background videos and more to your WordPress pages and posts. Anyone can build awesome pages with page builders.

This session will introduce you to a few page builders, and we’ll look at some examples of what you can create with them. See how easy it is to create complex page layouts on your WordPress site with page builders!

Published in: Technology
  • Login to see the comments

  • Be the first to like this

WordPress page builders - a new tool to build awesome pages quickly

  1. 1. r3df.com lumostech.training Rick Radko WordPress page builders: - a new tool to build awesome pages quickly WordCamp Toronto Aug 7th, 2016
  2. 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. 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. 4. © 2016 Rick Radko, r3df.com There are many page builders to choose from… 3 + Many, many more!
  5. 5. © 2016 Rick Radko, r3df.com Backend page builders 4
  6. 6. © 2016 Rick Radko, r3df.com The resulting page - (Twenty Sixteen Theme) 5
  7. 7. © 2016 Rick Radko, r3df.com Builder overdose! 6
  8. 8. © 2016 Rick Radko, r3df.com Divi Builder 7 Menus, menus and more menus!
  9. 9. © 2016 Rick Radko, r3df.com WooRockets & SiteOrigin page builders 8 WooRockets PageBuilder SiteOrigin PageBuilder
  10. 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. 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. 12. © 2016 Rick Radko, r3df.com Frontend page builders - Beaver Builder 11
  13. 13. © 2016 Rick Radko, r3df.com Beaver Builder - photo settings popup 12
  14. 14. © 2016 Rick Radko, r3df.com Beaver Builder - photo settings – advanced tab 13
  15. 15. © 2016 Rick Radko, r3df.com Beaver Builder - drag and drop to add content 14
  16. 16. © 2016 Rick Radko, r3df.com Tabs on the site 15
  17. 17. © 2016 Rick Radko, r3df.com Drag and drop to add a new row 16
  18. 18. © 2016 Rick Radko, r3df.com Populate the row 17
  19. 19. © 2016 Rick Radko, r3df.com Responsive behavior – phone size 18 Page buildersWordPress default Weird wrapping effects
  20. 20. © 2016 Rick Radko, r3df.com Responsive behavior – tablet size 19 WordPress default Page builders
  21. 21. © 2016 Rick Radko, r3df.com Forge – Front end page builder 20
  22. 22. © 2016 Rick Radko, r3df.com Live Composer page builder 21
  23. 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. 24. © 2016 Rick Radko, r3df.com More content modules… 23  Countdown timers, bar charts, circle &number counters.
  25. 25. © 2016 Rick Radko, r3df.com Even more… 24  Sliders, galleries.  Contact forms, testimonials testimonial rotators.  Social icons.  Posts &posts sliders.
  26. 26. © 2016 Rick Radko, r3df.com Easy to use settings editors 25
  27. 27. © 2016 Rick Radko, r3df.com Resulting Accordion 26
  28. 28. © 2016 Rick Radko, r3df.com Extra modules Use widgets and shortcodes! 27
  29. 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. 30. © 2016 Rick Radko, r3df.com Layout templates 29 “Instant” landing, & home pages. Edit and re-arrange as you need.
  31. 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. 32. © 2016 Rick Radko, r3df.com Save & Reuse Page builders may let you save & export: Layouts Layout fragments 31 Templates Global templates
  33. 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. 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. 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. 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. 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. 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. 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. 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

×