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
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!
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!
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
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!
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…
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
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
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
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
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
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!
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
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