Creating Dynamic Landing Pages for Drupal with Panels - Webinar
21 likes16,792 views
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
![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](https://image.slidesharecdn.com/panels-webinar-june2014-140707155530-phpapp02/85/Creating-Dynamic-Landing-Pages-for-Drupal-with-Panels-Webinar-38-320.jpg)
![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](https://image.slidesharecdn.com/panels-webinar-june2014-140707155530-phpapp02/85/Creating-Dynamic-Landing-Pages-for-Drupal-with-Panels-Webinar-47-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Creating Dynamic Landing Pages for Drupal with Panels - Webinar (20)
Ad
More from Suzanne Dergacheva (15)
Ad
Recently uploaded (20)
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
- 1. CREATING DYNAMIC LANDING PAGES WITH PANELS Suzanne Dergacheva @suzanne_kennedy
- 2. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
- 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!
- 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
- 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!
- 22. CHANGETHE LAYOUT
- 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
- 28. #1 SET UPTHE PANEL
- 29. #2 CHOOSE A LAYOUT
- 31. #4 ADD CRITERIA
- 32. #5 ADD AVARIANT
- 33. =TWOVARIANTS
- 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
- 39. #1 ENABLE PANELS PAGE
- 40. #2 ADD AVARIANT
- 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
- 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
- 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
- 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
- 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