Have you ever wanted to create a stand-alone campaign page on your website? Or prototype a new homepage layout just to see how it would look? The Panels module gives us the tools to build all kinds of landing pages in Drupal. Panels also has lots of other functionality, allowing you to create layouts and take control of how content is organized and displayed. All this, without having to write custom code. In this webinar, we'll walk through some of the top use cases for Panels. We'll also talk about some best practices and things to avoid to make sure that you're using Panels effectively on your website. - See more at: http://evolvingweb.ca/training/creating-dynamic-landing-pages-drupal-panels

1. CREATING DYNAMIC
LANDING PAGES WITH
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. UPCOMINGTRAINING
• Intro to Drupal - August 25th inToronto
• Intro to Drupal - September 12th in Montreal
• Let us know what other trainings you’d like us to schedule!

5. WHAT IS PANELS?

6. PAGE-BUILDINGTOOL

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

8. PROJECT BACKGROUND
Yasmine the yoga studio owner
Suzanne the site builder

9. I’m hosting a big yoga yogathon in a month and
I need to promote it!
What kind of content do you want to add?
Info about the studio,
a signup form, and a list of classes.
All on one page.
Sounds like a job for Panels!

10. CREATING A LANDING PAGE

11. MODULESYOU’LL NEED
• ChaosTools
• Page Manager
• Views Content Panes
• Panels
• Panels In-Place Editor
• Mini Panels

12. SIMPLE LANDING PAGES
What is it?
• You choose a new URL
• URL is always the same
• Layout and content are
always the same
Examples
• Homepage
• Landing page for an event or
campaign
• Top-level landing page for a
section

13. SIMPLE LANDING PAGES
Path = yoga-workshop
layout content
About theYoga Studio
Articles
Signup
form
Classes
Contact Info
Yogathon Landing Page

14. CREATE A PANELS PAGE
1 page = 1 path

15. #1 SET UP PANEL

16. #2 CHOOSE A LAYOUT

17. #3 CHOOSE SETTINGS

18. #4 ADDYOUR CONTENT

19. = LANDING PAGE

20. TWO WEEKS LATER…
I like the yogathon page, but we need to
change the layout.
What kind of layout do you want?
Let’s change it to two columns
And can you put the signup form at the top?
No problem, I can show you
how to change that yourself!

21. PANELS IN-PLACE-EDITOR

22. CHANGETHE LAYOUT

23. CHANGETHE CONTENT

24. I just realized, students and instructors need
a way to see what classes they’re signed up for.
Do they have accounts on your website?
Yes, there’s a role for students and
a role for instructors.
We can create a dashboard using Panels.
THE DAY BEFORETHEYOGATHON…

25. VARIABLE LANDING PAGES

26. What is it?
• You choose a new URL
• URL is static
• Layout and content are
different depending on the
context
Examples
• User Dashboards
• Landing Pages per Language
VARIABLE LANDING PAGES

27. VARIABLE LANDING PAGES
Path = my-classes
Fancy Banner
Student
Classes
Student
Message
Contact Info
layout content
Fancy Banner
Instructor
Message
layout content
Instructor
Classes
selection rules
selection rules
What’s your user role?
student
What’s your user role?
instructor
Student Variant
Instructor Variant
Contact Info

28. #1 SET UPTHE PANEL

29. #2 CHOOSE A LAYOUT

30. #3 CHOOSE SETTINGS

31. #4 ADD CRITERIA

32. #5 ADD AVARIANT

33. =TWOVARIANTS

34. =TWOVARIANTS
Student DashboardInstructor Dashboard

35. The yogathon was so successful,
I want to start hosting them every month.
Will they always have the same content/layout?
Yes, always the same.
Great, we can setup a yogathon content type,
and use Panels to control the node template.
A MONTH AFTERTHEYOGATHON

36. OVERRIDE EXISTING PAGES

37. OVERRIDE PAGES
• Landing pages for different
types of taxonomy terms
• Layouts for different types of
nodes
What is it? Use Cases
• URL already exists on your
website (e.g. node/3)
• URL is dynamic
• Set up a Panels page to
override the layout/content

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

39. #1 ENABLE PANELS PAGE

40. #2 ADD AVARIANT

41. #3 SELECTION RULES

42. CONTEXTS

43. ADDING CONTENT

44. The yogathons are going well. Can we create a
second landing page for each yogathon to post
photos/videos?
Do you already have the photos/
videos created for each yogathon?
Yes, they’re uploaded as fields for each one.
We can create a second Panels page
for each yogathon node.
AYEAR LATER

45. CREATE NEW DYNAMIC
PAGES

46. CREATE DYNAMIC PAGES
• Media for an event, displayed
on a separate page
• Repeating Event - create a
separate page for each date
What is it? Use Cases
• You create a new URL
• URL is dynamic
• Set up a Panels page to
determine the layout/content

47. CREATE DYNAMIC PAGES
Path = node/[nid]/poses
Fancy Banner
Contact Info
layout content
selection criteria
Is the current
node an yogathon?
Yogathon Gallery
contexts
Use the node ID
to get all the
fields/properties
for the node
arguments
[nid] = a node

48. #1 SETTING UPTHE PANEL

49. #2 ASSIGNING ARGUMENT

50. WHY USE PANELS?

51. x
TO AVOIDTHE BLOCKS UI

52. MAKES IT EASYTO
PROTOTYPE LAYOUTS

53. TO GIVE ADMINS FREEDOM

54. DRAG AND DROP UI

55. TO AVOID WRITING CUSTOM
CODE

56. ADDING CONTENT
TO PANELS

59. BLOCKS CONFIGURATION

60. ADDING CONTENTTO A
PANEL

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

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

63. USINGVIEWS PANES
Views
Pane

64. PANELS, PANELIZER,
PANOPOLY, OH MY...

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

66. PANELIZER

67. 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

68. PANOPOLY

69. TRICKYTHINGS

70. USABILITY FOR ADMINS
Panels In-Place-Editor

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

72. RESPONSIVE DESIGN
Make custom layouts and use media queries

73. 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

74. THINGSTO AVOID

75. TOO MANY LAYOUTS
Stick to a few good ones

76. DUPLICATE CONFIG
Use mini-panels or context
v

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

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