Using Panels throughout your website can be a powerful site building tool. Here are some techniques for using Panels and some advice to using Panels wi

1. USING PANELS
Suzanne Dergacheva
@suzanne_kennedy

2. Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Dergacheva, Co-founder
@suzanne_kennedy

3. TRAINING PROGRAM
evolvingweb.ca/training

4. WHAT IS PANELS?

5. PAGE-BUILDINGTOOL

6. WHAT IS IT GOOD FOR?
managing blocks managing lots of layouts
creating
custom
pages

7. WHY USE PANELS?

8. x
TO AVOIDTHE BLOCKS UI

9. MAKES IT EASYTO
PROTOTYPE LAYOUTS

10. TO GIVE ADMINS FREEDOM

11. DRAG AND DROP UI

12. TO AVOID WRITING CUSTOM
CODE

13. USING PANELS PAGES

14. PANELS PAGES
1 page = 1 path

15. SIMPLE LANDING PAGES

16. CREATE LANDING PAGES
Path = yoga-workshop
layout content
Fancy Banner
Login
Welcome
Message
News
View
Contact Info
Yoga Workshop Landing Page

17. #1 SET UP PANEL

18. #2 CHOOSE A LAYOUT

19. #3 CHOOSE SETTINGS

20. #4 ADDYOUR CONTENT

21. = LANDING PAGE

22. VARIABLE LANDING PAGES

23. VARIABLE LANDING PAGES
Path = my-classes
Fancy Banner
Admin
News
Admin
Message
Contact Info
layout content
Fancy Banner
Author
Message
layout content
Author
News
selection criteria
selection criteria
What’s your user role?
student
What’s your user role?
instructor
Student Variant
Instructor Variant
Contact Info
Machine Name = my_classes

24. #1 SET UPTHE PANEL

25. #2 CHOOSE A LAYOUT

26. #3 CHOOSE SETTINGS

27. #4 ADD CRITERIA

28. #5 ADDVARIANT

29. #6 ADD CONTENT

30. =TWOVARIANTS

31. =TWOVARIANTS
Student Landing PageInstructor Landing Page

32. OVERRIDE EXISTING PAGES

33. OVERRIDE EXISTING PAGES
Path = taxonomy/term/[tid]
Category Variant
Fancy Banner
Admin
News
Admin
Message
Contact
layout content
selection criteria
Is the term
a category?
Tags Variant
Fancy Banner
Admin
News
Admin
Message
Contact
layout content
selection criteria
Is the term
a tag?

34. #1 ENABLE PANELS PAGE

35. #2 ADD AVARIANT

36. #3 SELECTION RULES

37. • Choose layout
• Add content
• Choose setting
• Add more variants...

38. OVERRIDE EXISTING PAGES +
ADD CONTEXTS

39. OVERRIDE EXISTING PAGES
Path = node/[nid]
Class Variant
selection criteria
Is the current
node of type class?
arguments
[nid] = a node
Fancy Banner
Contact Info
content
adsbody related
content
contexts
all the fields/properties
for the current city
layout

40. ADDING CONTEXTS

41. CONTEXTS

42. ADDING CONTENT

43. CREATE NEW DYNAMIC
PAGES

44. CREATE DYNAMIC PAGES
Path = node/[nid]/gallery
Fancy Banner
Contact Info
layout content
selection criteria
Is the current
node an event?
Event Gallery Variant
contexts
all the fields/properties
for the current event
arguments
[nid] = a node

45. #1 SETTING UPTHE PANEL

46. #2 ASSIGNING ARGUMENT

47. ADDING CONTENT
TO PANELS

50. BLOCKS CONFIGURATION

51. ADDING CONTENTTO A
PANEL

52. ADDING CONTENTTO A
PANEL
Custom
Blocks
Menus
Views
Widgets
Views
Panes
Page
Elements
Miscellan
eous
Activity

53. ADDING CONTENTTO A
PANEL
Custom
Blocks
Menus
Views
Widgets
Views
Panes
Page
Elements
Miscellan
eous
Activity
New
Custom
Content

54. USINGVIEWS PANES
Views
Pane

55. PANELS, PANELIZER,
PANOPOLY, OH MY...

56. PANELIZER MODULE
• You get panels configuration (layout and content) for each
node.
• Often leads to too many panels, too much variation
• Use with care!

57. PANELIZER

58. PANOPOLY
• Comes with panelizer, fieldable panel panes
• Panels set up for lots of built-in pages
• Extra layout options (and responsive)
• In-place editor
• Pre-configured

59. PANOPOLY

60. TRICKYTHINGS

61. USABILITY FOR ADMINS
Panels In-Place-Editor

62. PANELS FOR LISTING PAGES
Make sure you’re linking to Panels

63. RESPONSIVE DESIGN
Make custom layouts and use media queries

64. CONTENT - CONFIG
• With Panels, you end up with configuration mixed up with
content (inserting nodes, blocks and custom text into your
panels)
• Editing some content on the homepage requires more
knowledge

65. THINGSTO AVOID

66. TOO MANY LAYOUTS
Stick to a few good ones

67. DUPLICATE CONFIG
Use mini-panels or context
v

68. FLEXIBLE LAYOUTS
Instead, add custom layouts to your theme

69. TRAINING PROGRAM
training@evolvingweb.ca
evolvingweb.ca/training

70. Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Kennedy, Co-founder
@suzanne_kennedy