“WordPress page builders: A quick intro” -------------------------------------------------------- Good afternoon! This is a quick introduction to WordPress page builders.
I’m Rick Radko I have my own design and development shop: -> R-Cubed Design Forge -> Where I design & develop custom, -> and multilingual WordPress websites I started building websites and web apps around 1996 - back in the days of hand coded html, - long before WordPress existed. I’ve been using WordPress for 8 years now: -> I'm currently exploring the idea of using it -> for a mobile app backend for a content app I’m one of the organizers of WordCamp Ottawa and The Ottawa WordPress Group
Build complex layouts - with easy to use drag & drop UI's
Presenter
Presentation Notes
Why page builders? - Page builders let you create complex page layouts -> with drag and drop UI’s. - They make it easy to build really beautiful and complex: -> home pages -> landing pages - They have really cool easy to use features like: - Parallax effects - Background video - accordions/tabs - content sliders Builders are great for clients: - almost anyone can create pages with page builders - they like the "idea" that they can build pages Builders are great for developers: - developers can make quick but complicated looking changes -> quick means less $ - clients like saving $
There are 2 main types of page builder The first type is backend page builders -> Editing is done on the backend with a -> graphical representation of the page This is the editor for the Divi Builder plugin Each item has icons -> that launch menus or popups -> for settings/options -> or to edit your content The content for the test page consists of a text item - with an image beside it.
This is the resulting page from Divi -> all the test pages I did for this presentation are -> with the builders loaded in a site using the -> default Twenty Sixteen theme -> each builder had it's own copy of the page Surprisingly, I did not have any catastrophic issues with -> all 6 page builders loaded in the same site -> and 3-4 active at the same time - Although, there were some minor UI issues/conflicts ------ NEXT SLIDE --
The builders all add tabs and buttons to the admin interface -> and it got a bit cluttered at times. -> but it worked! A side note from this is that -> may be able to run 2 page builders simultaneously -> to get the best of both -> as all page builders have weak and strong points
These are the editors for -> WooRockets (WR) PageBuilder -> SiteOrigin PageBuilder Conceptually they very similar to Divi -> Graphical representation of the content -> icons for pop-ups and menus
As the pages get more content, -> you start to loose track of things in the representational view� -> yes, you can change the default labels -> to something more meaningful, -> but it takes longer to create the content if you do… (and it’s pretty tedious) This is a home page from client - the elements are unlabeled. -> has a grid of sponsor logos at the bottom -> when you need to re-arrange them -> need to keep looking at the site to see which one is which -> labelling does not completely solve the issue in this case as -> the logos all have different sizes, shapes aspect ratios -> you need to see the site to see how they fit together
The solution to this is Front End page builders -> the second type of page builder I actually think that the backend builders are nearing their end of life -> Elegant themes recently announced that Divi 3.0 -> will have a front end editor This is Beaver Builder - it's a front end builder, -> and the second builder I've used in client sites. (Divi was the first) Hovering over your page elements brings up menus -> As with Divi -> clicking the icons launches popups for settings and content
This is the Photo Settings box -> that pops up when you click the settings icon. This lets you configure all the options for the image. - all the usual WordPress options, -> PLUS extras for layout like paddings and margins
Editing module content -> is all done with popup settings panels and editors - this is the accordion module settings -> and the resulting content on the page
Text editor, HTML, photo or image, video and sidebar.
Callouts, icons, call to action, pricing tables, maps.
Accordions, tabs. Countdown & bar timers,
circle & number counters. Sliders, galleries. Contact forms, testimonials. Social icons. Posts & posts sliders.
Presenter
Presentation Notes
These are some of the MANY possible modules you can add: - Text editors, HTML editors, photo or image blocks, video and sidebar modules. - Callouts, icons sets like font awesome -> calls to action, pricing tables, maps. - Accordions, tabs. - Countdown & bar timers, circle & number counters. - Sliders, galleries. - Contact forms, testimonials. - Social icons. - Posts & posts sliders. + many more Posts module - Render 1 or more posts in other content -> front page, embedded in content, in sidebar modules etc. Each builder has different modules, - and not all builders have all the modules listed of course.
Parallax effects. Background video. Javascript and/or CSS animations. Full-width, column-based layouts. Mobile-friendly, responsive layouts. Use WordPress Widgets and shortcodes. Works with Pages, Posts, and Custom Post Types.
13
Presenter
Presentation Notes
More cool features that a builder may include: Parallax effects – no coding required Background video - Javascript and/or CSS animations -> fly in images and other content blocks Full-width, column-based layouts. Mobile-friendly, responsive layouts. Some let you use WordPress Widgets and shortcodes as modules. Most work with pages, and posts -> some support Custom Post Types. -> this varies per builder, -> but most are starting to support all content types
Select a template, and start editing and re-arranging as you need. “Instant” landing, & home pages.
Presenter
Presentation Notes
Some of the builders -> come with predefined page layouts/templates The premium version of Beaver Builder -> has over 30 layouts to choose from Using these templates you can quickly make -> sophisticated home and landing pages The templates are pre-loaded with lorem ipsum & images -> just replace with your content -> rearrange, delete or add rows/modules Nearly instant pages -> the example on the screen is unaltered from the template -> anybody can be a great designer with tools like this
Add custom css and javascript: per page, or even per object.
Add CSS id and class tags.
Presenter
Presentation Notes
To help customize your layouts: In most of the page builders -> you can add css id and class tags to individual items These can be targeted with theme css or -> custom css or javascript added to the builder Many of the builders have options to add -> per page, or even per item, css and javascript
Page builders may let you save: Layouts Layout fragments Templates Global templates
to use on other pages, or even other sites, using the export and import functions.
16
Presenter
Presentation Notes
Page builders may let you save, One more of: - Layouts - Layout fragments - Templates - Global templates/layouts -> Global templates are -> edited in one common location, not on the page -> all occurrences update. It may even be possible to export -> and import the saved layouts and templates -> to use on other sites Using saved templates makes it much faster to build pages, -> especially with organizations that have multiple websites Global options are great when you want content - to be consistent across several pages
If you find the packaged modules are not quite right: Override the existing modules. Add custom modules. Add 3rd party plugins with modules. Just starting to appear.
17
Presenter
Presentation Notes
Many page builders will let you override existing modules -> and add your own custom modules. I've added several custom modules to Divi and Beaver Builder -> in most cases they were variants of existing modules -> to alter layouts or other minor features ------------- if time -------------- One of the custom modules I created: An alteration of the Beaver Builder Post Slider - modified it to automatically pick up items tagged -> with a custom taxonomy -> Taxonomy only has one item – “show on slider” In Divi -> I added 5 column row (Divi only has up to 4 columns)
Some page builders come with themes that are designed to integrate with the builder plugin. Beaver Builder Divi
Others have associated themes.
18 Beaver Builder
Presenter
Presentation Notes
Some page builders come with themes -> that are designed to integrate with the builder plugin. - Beaver Builder - Divi (originally was not available as a separate plugin) Others have associated themes, -> that are built to allow the builder to do it’s thing. -> but the builders have been designed to work in any theme. This is the Beaver Builder Theme - This section is similar looking to Twenty Sixteen ->The parts you can’t see are very different from twenty sixteen -> and there are many more options/settings including -> different header and footer layouts Using the related themes does make set-up easier -> but you are limited to what the theme can do -> most the builders will work in many, -> but not all 3rd party themes
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 page builders do not create layouts for archive pages (blog). 19
Presenter
Presentation Notes
While builders have a lot going for them, there are some issues: Issues with 3rd party themes: - Content area is not full width in many themes. - Builders work in content area - can't make full width layouts. -> Genesis Dam Buster plugin fixes it for Genesis. You may have CSS and javascript conflicts between the theme - and builder Page builders work on content. - Can’t create layouts for theme header or footers. - 3rd party plugins starting to appear with solutions. -> I created my own system or Divi and Beaver Builder -> to inject builder layouts almost anywhere Many page builders do not create layouts for archive pages (blog). - This is rapidly changing though, as there is much demand for it.
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" - 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. 20
Presenter
Presentation Notes
Some builders have limited layout options. - One I used is restricted to 1, 2, 3, or 4 columns - in common width ratios. ¼, ½, 1/3 Others are more open: columns in 1/12ths - One allows: any percentage width you want, any # columns Advanced designers may struggle with layout restrictions. - column restrictions, - padding and margins (can be a battle to override sometimes) - limited modules (lots, but still may not have what you want) Can be “heavy” - as in slow to work with. - May be slower than programming the layouts – lag times on editors. -> Don’t use on every page, only where needed. May take a bit to get running with 3rd party themes. -> possibly higher initial development cost. Last one, but a big one: - Lock-in is possible with page builders.
With the builders turned off, - Divi has shortcode soup. -> hopefully this is something -> they are fixing in the new version - Beaver, on the right -> still renders something reasonable. - SiteOrigins builder also rendered similarly. Even with the decent page rendering, -> you would still have to do a lot of reconstruction -> to move off of these builders
Here are 4 articles listing page builders -> Each of these lists have at least 7 builders itemized -> including brief reviews, -> so there are tons to choose from here.
These are the 6 plugins that I use or have tried out. -> I currently use Beaver Builder and Divi -> I started with Divi as it was "free" to me - (lifetime license to Elegant Themes) -> Now use Beaver Builder as I prefer front end editing -> I'm watching the others, a couple look promising, -> but not ready to switch yet -> Especially with Divi going front end I think page builders are a big thing for WordPress -> When preparing my customizer talk last year, -> I found a comment that suggested -> a page builder will be part of customizer in the future
I hope that this presentation has interested you in checking out page builders I really believe that they will have a significant place in WordPress’s future. Here is my contact info ------------------ Slides are posted on slideshare
