WPBAKERY PAGE BUILDER

Size: px

Start display at page:

Download "WPBAKERY PAGE BUILDER"

Shanna Cross
5 years ago
Views:

1 WPBAKERY PAGE BUILDER

2 WHY? Build complex layouts using a grid system Easy to use drag and drop Easy to develop for 04 Highly customizable 05 High adoption and user base

3 HIGH ADOPTION FORMERLY KNOW AS VISUAL COMPOSER

4 A RENDERED PAGE

5 FRONTEND EDITOR

6 BACKEND EDITOR

7 BEHIND THE SCENES

8 BEHIND THE SCENES Is a ton of shortcodes WPBakery Page Builder then is just a fancy interface for editing such shortcodes

9 WHAT IS A SHORTCODE? A WordPress specific code that lets you do cool things with very little effort Shortcode = shortcut

10 SHORTCODE EXAMPLE Shortcode: [wcb_header text= DEAN JOHN CRAFT ] Resulting HTML: <h2 class= >DEAN JOHN CRAFT</h2>

11 SHORTCODE OUTPUT

12 SHORTCODE EXAMPLE Shortcode: [wcb_horizontal_rule color= blue thickness= 5 ] Resulting HTML: <hr class="blue width-5">

13 SHORTCODE OUTPUT

14 SHORTCODES EXAMPLE [vc_row][vc_column width="1/2"][wcb_card][wcb_heading heading_style="style like Heading 5"][wcb_horizontal_rule][wcb_paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat nibh sit amet tortor vestibulum dignissim. Vestibulum vitae bibendum nisi, eget feugiat libero. Nullam nec mauris at ex consectetur imperdiet. Integer pretium, libero eget efficitur lobortis, lorem tortor lacinia mi, sed venenatis purus orci vel odio. Pellentesque id dolor lectus.[/wcb_paragraph][/wcb_card][/vc_column][vc_column width="1/2"][wcb_card][wcb_heading heading_style="style like Heading 5"][wcb_horizontal_rule][wcb_paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat nibh sit amet tortor vestibulum dignissim. Vestibulum vitae bibendum nisi, eget feugiat libero. Nullam nec mauris at ex consectetur imperdiet. Integer pretium, libero eget efficitur lobortis, lorem tortor lacinia mi, sed venenatis purus orci vel odio. Pellentesque id dolor lectus.[/wcb_paragraph][/wcb_card][/vc_column][/vc_row]

15 SHORTCODES OUTPUT

16 2 TYPES OF ELEMENTS CUSTOM ELEMENT CUSTOM CONTAINER ELEMENT

17 CUSTOM ELEMENT A shortcode plus an associative array of mappings that generate a user interface (UI) for the shortcode Building block of a page

18 HEADER CUSTOM ELEMENT [wcb_header text= DEAN JOHN CRAFT ] Plus an associative array of mappings that generate a user interface (UI) for the shortcode

19 HEADER MAP FUNCTION

20 HEADER OUTPUT + UI

21 BIG NUMBER CUSTOM ELEMENT [wcb_big_number number= 7 color= light-blue ] Plus an associative array of mappings that generate a user interface (UI) for the shortcode

22 BIG NUMBER MAP FUNCTION

23 BIG NUMBER OUTPUT + UI

24 BIG NUMBER OUTPUT

25 CUSTOM CONTAINER ELEMENT A shortcode plus an associative array of mappings that generate a user interface (UI) for the shortcode Allows nested elements Building block of a page

26 CARD CUSTOM CONTAINER ELEMENT [wcb_card] [wcb_heading heading_style="style like Heading 5"] [wcb_horizontal_rule] [wcb_paragraph]lorem ipsum dolor sit amet, consectetur adipiscing elit.[/wcb_paragraph] [/wcb_card]

27 CARD OUTPUT

28 CARD ADD NESTED ELEMENTS UI

29 STANDARD ELEMENTS

30 STANDARD ELEMENTS The building blocks of your page A paragraph, row, button, etc. 50+ out of the box Many more 3rd party elements using plugins

31 WARRINGTON ELEMENTS

32 WARRINGTON ELEMENTS Removed many standard elements Updates parameters and defaults on standard elements Added a bunch of custom elements Added some 3 rd party elements

33 CUSTOM ELEMENTS DEMO

34 TEMPLATES

35 TEMPLATES A collection of one or more elements with chosen options Could be a single element Could be a row of elements Could be an entire page of elements

36 DEFAULT TEMPLATES

37 TEMPLATE PAGE WITH SIDEBAR

38 TEMPLATE FULL-WIDTH PAGE

39 MY TEMPLATES

40 TEMPLATERA

41 TEMPLATERA

42 TEMPLATERA Define a template once and use it in many places Edit template in one place and the change cascades to all instances of template Good for repeating content such as sidebars, footers, etc.

43 TEMPLATE ROW FRONTEND

44 TEMPLATE ROW BACKEND

45 TEMPLATE SIDEBAR FRONTEND

46 TEMPLATE SIDEBAR BACKEND

47 TEMPLATE DEMO

48 CODE DEMO

49 WHAT IS AWESOME? Grid system for complex layouts Easy to use drag and drop Easy to develop for Templates My templates Templatera

50 WHAT IS NOT AWESOME? Issue with drag and drop into some container elements Not a lot of input types Nested inputs cannot have defaults Vendor lock-in Not part of WordPress core I like what UF Health did with ACF

51 IT CAN DO WAY MORE We have hardly scratched the surface of what you can do with WPBakery Page Builder Many features were not covered

52 ASK ME ANYTHING?

TITLE - Size 16 - Bold

EDCE 2010-2011 - Size 12 - Normal Conceptual Design of Structures - Size 12 - Normal Instructor: A. Muttoni, R. Salvi, P. Wahlen - Assitant: T. Clément - Author: X. Name - TITLE - Size 16 - Bold Pier Luigi