SlideShare a Scribd company logo
r3df.com
lumostech.training
Rick Radko
WordPress page builders:
- a new tool to build awesome pages quickly
WordCamp Toronto
Aug 7th, 2016
© 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
© 2016 Rick Radko, r3df.com
Why page builders?
2
Build complex layouts, that are fully responsive
- with easy to use drag & drop UI's.
© 2016 Rick Radko, r3df.com
There are many page builders to choose from…
3
+ Many, many more!
© 2016 Rick Radko, r3df.com
Backend page builders
4
© 2016 Rick Radko, r3df.com
The resulting page - (Twenty Sixteen Theme)
5
© 2016 Rick Radko, r3df.com
Builder overdose!
6
© 2016 Rick Radko, r3df.com
Divi Builder
7
Menus, menus and more menus!
© 2016 Rick Radko, r3df.com
WooRockets & SiteOrigin page builders
8
WooRockets PageBuilder
SiteOrigin PageBuilder
© 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?
© 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
© 2016 Rick Radko, r3df.com
Frontend page builders - Beaver Builder
11
© 2016 Rick Radko, r3df.com
Beaver Builder - photo settings popup
12
© 2016 Rick Radko, r3df.com
Beaver Builder - photo settings – advanced tab
13
© 2016 Rick Radko, r3df.com
Beaver Builder - drag and drop to add content
14
© 2016 Rick Radko, r3df.com
Tabs on the site
15
© 2016 Rick Radko, r3df.com
Drag and drop to add a new row
16
© 2016 Rick Radko, r3df.com
Populate the row
17
© 2016 Rick Radko, r3df.com
Responsive behavior – phone size
18
Page buildersWordPress default
Weird wrapping
effects
© 2016 Rick Radko, r3df.com
Responsive behavior – tablet size
19
WordPress default
Page builders
© 2016 Rick Radko, r3df.com
Forge – Front end page builder
20
© 2016 Rick Radko, r3df.com
Live Composer page builder
21
© 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.
© 2016 Rick Radko, r3df.com
More content modules…
23
 Countdown timers, bar charts, circle &number counters.
© 2016 Rick Radko, r3df.com
Even more…
24
 Sliders, galleries.
 Contact forms, testimonials
testimonial rotators.
 Social icons.
 Posts &posts sliders.
© 2016 Rick Radko, r3df.com
Easy to use settings editors
25
© 2016 Rick Radko, r3df.com
Resulting Accordion
26
© 2016 Rick Radko, r3df.com
Extra modules
Use widgets and shortcodes!
27
© 2016 Rick Radko, r3df.com
More features
Parallax effects.
Background video.
Javascript and/ or CSSanimations.
Work with:
 Pages, Posts, Custom Post Types
28
© 2016 Rick Radko, r3df.com
Layout templates
29
“Instant” landing, &
home pages.
Edit and re-arrange
as you need.
© 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.
© 2016 Rick Radko, r3df.com
Save & Reuse
Page builders may let you save & export:
Layouts
Layout fragments
31
Templates
Global templates
© 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
© 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
© 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
© 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
© 2016 Rick Radko, r3df.com
Lock in issue
36
Renders with raw
shortcodes
Still renders a
reasonable page!
The site with builders turned off
© 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
© 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
© 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

More Related Content

Viewers also liked

Poultry farming
Poultry farmingPoultry farming
Poultry farming
vigyanashram
 
ग्रामीण मुर्गीपालन गाइड
ग्रामीण मुर्गीपालन गाइडग्रामीण मुर्गीपालन गाइड
ग्रामीण मुर्गीपालन गाइड
Growel Agrovet Private Limited
 
पशुपालन कैलेंडर
पशुपालन कैलेंडरपशुपालन कैलेंडर
पशुपालन कैलेंडर
Growel Agrovet Private Limited
 
Leading through a crisis
Leading through a crisisLeading through a crisis
Leading through a crisis
Sambit Biswal
 
Title v.s Trailer
Title v.s TrailerTitle v.s Trailer
Title v.s Trailer
Figen232
 
The future we want
The future we wantThe future we want
The future we want
Hadrian Fadilah
 
Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...
Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...
Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...
Rob Rehm
 
Jeremiah l mitchel resume
Jeremiah l mitchel resumeJeremiah l mitchel resume
Jeremiah l mitchel resume
Jeremiah Mitchell
 
د مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزی
د مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزید مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزی
د مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزی
Ahmad Khasrow
 
Part 4 low cost housing
Part 4 low cost housingPart 4 low cost housing
Part 4 low cost housing
vigyanashram
 
Learn astrology
Learn astrologyLearn astrology
Learn astrology
Sambit Biswal
 
Interaktív oktató cd elemzése
Interaktív oktató cd elemzéseInteraktív oktató cd elemzése
Interaktív oktató cd elemzéseSzelena
 
Il « giusto » net working
Il « giusto » net workingIl « giusto » net working
Il « giusto » net working
Maria Moreni
 
7.ann&2.ramon bacteriareportofficial
7.ann&2.ramon bacteriareportofficial7.ann&2.ramon bacteriareportofficial
7.ann&2.ramon bacteriareportofficial
amgonzalezpineiro
 
Acosoescolar 131129080740-phpapp01
Acosoescolar 131129080740-phpapp01Acosoescolar 131129080740-phpapp01
Acosoescolar 131129080740-phpapp01
Patricia Sainz Romay
 
Pag unawa sa tama tungo sa wastong gawa
Pag unawa sa tama tungo sa wastong gawaPag unawa sa tama tungo sa wastong gawa
Pag unawa sa tama tungo sa wastong gawa
Clyde Gatdula
 
Art of user engagement
Art of user engagementArt of user engagement
Art of user engagement
Alexander Anikin
 
Abate leite-couro-ovos 201404-publ_completa
Abate leite-couro-ovos 201404-publ_completaAbate leite-couro-ovos 201404-publ_completa
Abate leite-couro-ovos 201404-publ_completa
Lilliane Renata Defante
 
Vasily tkachev
Vasily tkachevVasily tkachev
Vasily tkachev
Vasily Tkachev
 
Iowa Crossing Guard Training 1 Hazzards
Iowa Crossing Guard Training 1 HazzardsIowa Crossing Guard Training 1 Hazzards
Iowa Crossing Guard Training 1 Hazzards
iowabicycle
 

Viewers also liked (20)

Poultry farming
Poultry farmingPoultry farming
Poultry farming
 
ग्रामीण मुर्गीपालन गाइड
ग्रामीण मुर्गीपालन गाइडग्रामीण मुर्गीपालन गाइड
ग्रामीण मुर्गीपालन गाइड
 
पशुपालन कैलेंडर
पशुपालन कैलेंडरपशुपालन कैलेंडर
पशुपालन कैलेंडर
 
Leading through a crisis
Leading through a crisisLeading through a crisis
Leading through a crisis
 
Title v.s Trailer
Title v.s TrailerTitle v.s Trailer
Title v.s Trailer
 
The future we want
The future we wantThe future we want
The future we want
 
Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...
Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...
Indianapolis Home Inspectors Advice. How to keep a home inspection from killi...
 
Jeremiah l mitchel resume
Jeremiah l mitchel resumeJeremiah l mitchel resume
Jeremiah l mitchel resume
 
د مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزی
د مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزید مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزی
د مڼو پرکیفیت او معدنی موادو د کڅوړی کولو اغیزی
 
Part 4 low cost housing
Part 4 low cost housingPart 4 low cost housing
Part 4 low cost housing
 
Learn astrology
Learn astrologyLearn astrology
Learn astrology
 
Interaktív oktató cd elemzése
Interaktív oktató cd elemzéseInteraktív oktató cd elemzése
Interaktív oktató cd elemzése
 
Il « giusto » net working
Il « giusto » net workingIl « giusto » net working
Il « giusto » net working
 
7.ann&2.ramon bacteriareportofficial
7.ann&2.ramon bacteriareportofficial7.ann&2.ramon bacteriareportofficial
7.ann&2.ramon bacteriareportofficial
 
Acosoescolar 131129080740-phpapp01
Acosoescolar 131129080740-phpapp01Acosoescolar 131129080740-phpapp01
Acosoescolar 131129080740-phpapp01
 
Pag unawa sa tama tungo sa wastong gawa
Pag unawa sa tama tungo sa wastong gawaPag unawa sa tama tungo sa wastong gawa
Pag unawa sa tama tungo sa wastong gawa
 
Art of user engagement
Art of user engagementArt of user engagement
Art of user engagement
 
Abate leite-couro-ovos 201404-publ_completa
Abate leite-couro-ovos 201404-publ_completaAbate leite-couro-ovos 201404-publ_completa
Abate leite-couro-ovos 201404-publ_completa
 
Vasily tkachev
Vasily tkachevVasily tkachev
Vasily tkachev
 
Iowa Crossing Guard Training 1 Hazzards
Iowa Crossing Guard Training 1 HazzardsIowa Crossing Guard Training 1 Hazzards
Iowa Crossing Guard Training 1 Hazzards
 

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

Introduction to WordPress for Beginners
Introduction to WordPress for BeginnersIntroduction to WordPress for Beginners
Introduction to WordPress for Beginners
R-Cubed Design Forge
 
Gutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress siteGutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress site
R-Cubed Design Forge
 
Introduction to WordPress, WordCamp Ottawa 2019
Introduction to WordPress, WordCamp Ottawa 2019Introduction to WordPress, WordCamp Ottawa 2019
Introduction to WordPress, WordCamp Ottawa 2019
rickrrr
 
Introduction to WordPress - WordCamp Ottawa 2019
Introduction to WordPress - WordCamp Ottawa 2019Introduction to WordPress - WordCamp Ottawa 2019
Introduction to WordPress - WordCamp Ottawa 2019
R-Cubed Design Forge
 
Finding themes for your WordPress site
Finding themes for your WordPress siteFinding themes for your WordPress site
Finding themes for your WordPress site
R-Cubed Design Forge
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
R-Cubed Design Forge
 
Multisite for multilingual
Multisite for multilingualMultisite for multilingual
Multisite for multilingual
R-Cubed Design Forge
 
How to WordPress: the basics, part 1
How to WordPress:  the basics, part 1How to WordPress:  the basics, part 1
How to WordPress: the basics, part 1
R-Cubed Design Forge
 
Gutenberg - The future of WordPress
Gutenberg - The future of WordPressGutenberg - The future of WordPress
Gutenberg - The future of WordPress
R-Cubed Design Forge
 
A peek into the world of WordPress plugin development
A peek into the world of WordPress plugin developmentA peek into the world of WordPress plugin development
A peek into the world of WordPress plugin development
R-Cubed Design Forge
 
Backups, Backups, Backups
Backups, Backups, BackupsBackups, Backups, Backups
Backups, Backups, Backups
R-Cubed Design Forge
 
Backups, Backups, Backups
Backups, Backups, BackupsBackups, Backups, Backups
Backups, Backups, Backups
R-Cubed Design Forge
 
How to WordPress: the basics, part 2
How to WordPress:  the basics, part 2How to WordPress:  the basics, part 2
How to WordPress: the basics, part 2
R-Cubed Design Forge
 
Intro to development sites and site migration
Intro to development sites and site migrationIntro to development sites and site migration
Intro to development sites and site migration
R-Cubed Design Forge
 
WordPress customizer: for themes and more
WordPress customizer: for themes and moreWordPress customizer: for themes and more
WordPress customizer: for themes and more
R-Cubed Design Forge
 
Building powerful dashboards with r shiny
Building powerful dashboards with r shinyBuilding powerful dashboards with r shiny
Building powerful dashboards with r shiny
Victoria Blechman-Pomogajko
 
Backing up your WordPress website – it’s not optional
Backing up your WordPress website – it’s not optionalBacking up your WordPress website – it’s not optional
Backing up your WordPress website – it’s not optional
R-Cubed Design Forge
 
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS project
Renoir Boulanger
 
IMMERSE 2016 Introducing content fragments
IMMERSE 2016 Introducing content fragmentsIMMERSE 2016 Introducing content fragments
IMMERSE 2016 Introducing content fragments
AdobeMarketingCloud
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Gopinath Ambothi
 

Similar to WordPress page builders - a new tool to build awesome pages quickly (20)

Introduction to WordPress for Beginners
Introduction to WordPress for BeginnersIntroduction to WordPress for Beginners
Introduction to WordPress for Beginners
 
Gutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress siteGutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress site
 
Introduction to WordPress, WordCamp Ottawa 2019
Introduction to WordPress, WordCamp Ottawa 2019Introduction to WordPress, WordCamp Ottawa 2019
Introduction to WordPress, WordCamp Ottawa 2019
 
Introduction to WordPress - WordCamp Ottawa 2019
Introduction to WordPress - WordCamp Ottawa 2019Introduction to WordPress - WordCamp Ottawa 2019
Introduction to WordPress - WordCamp Ottawa 2019
 
Finding themes for your WordPress site
Finding themes for your WordPress siteFinding themes for your WordPress site
Finding themes for your WordPress site
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
Multisite for multilingual
Multisite for multilingualMultisite for multilingual
Multisite for multilingual
 
How to WordPress: the basics, part 1
How to WordPress:  the basics, part 1How to WordPress:  the basics, part 1
How to WordPress: the basics, part 1
 
Gutenberg - The future of WordPress
Gutenberg - The future of WordPressGutenberg - The future of WordPress
Gutenberg - The future of WordPress
 
A peek into the world of WordPress plugin development
A peek into the world of WordPress plugin developmentA peek into the world of WordPress plugin development
A peek into the world of WordPress plugin development
 
Backups, Backups, Backups
Backups, Backups, BackupsBackups, Backups, Backups
Backups, Backups, Backups
 
Backups, Backups, Backups
Backups, Backups, BackupsBackups, Backups, Backups
Backups, Backups, Backups
 
How to WordPress: the basics, part 2
How to WordPress:  the basics, part 2How to WordPress:  the basics, part 2
How to WordPress: the basics, part 2
 
Intro to development sites and site migration
Intro to development sites and site migrationIntro to development sites and site migration
Intro to development sites and site migration
 
WordPress customizer: for themes and more
WordPress customizer: for themes and moreWordPress customizer: for themes and more
WordPress customizer: for themes and more
 
Building powerful dashboards with r shiny
Building powerful dashboards with r shinyBuilding powerful dashboards with r shiny
Building powerful dashboards with r shiny
 
Backing up your WordPress website – it’s not optional
Backing up your WordPress website – it’s not optionalBacking up your WordPress website – it’s not optional
Backing up your WordPress website – it’s not optional
 
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS project
 
IMMERSE 2016 Introducing content fragments
IMMERSE 2016 Introducing content fragmentsIMMERSE 2016 Introducing content fragments
IMMERSE 2016 Introducing content fragments
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 

Recently uploaded

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 

Recently uploaded (20)

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 

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

  • 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