Creating Dynamic Landing Pages for Drupal with Panels - Webinar

13,729 views

Published on

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

Published in: Technology, Business

Creating Dynamic Landing Pages for Drupal with Panels - Webinar

  1. 1. CREATING DYNAMIC LANDING PAGES WITH PANELS Suzanne Dergacheva @suzanne_kennedy
  2. 2. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
  3. 3. TRAINING PROGRAM evolvingweb.ca/training !
  4. 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. 5. WHAT IS PANELS?
  6. 6. PAGE-BUILDINGTOOL
  7. 7. WHAT IS IT GOOD FOR? managing blocks managing lots of layouts creating custom pages
  8. 8. PROJECT BACKGROUND Yasmine the yoga studio owner Suzanne the site builder
  9. 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. 10. CREATING A LANDING PAGE
  11. 11. MODULESYOU’LL NEED • ChaosTools • Page Manager • Views Content Panes • Panels • Panels In-Place Editor • Mini Panels
  12. 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. 13. SIMPLE LANDING PAGES Path = yoga-workshop layout content About theYoga Studio Articles Signup form Classes Contact Info Yogathon Landing Page
  14. 14. CREATE A PANELS PAGE 1 page = 1 path
  15. 15. #1 SET UP PANEL
  16. 16. #2 CHOOSE A LAYOUT
  17. 17. #3 CHOOSE SETTINGS
  18. 18. #4 ADDYOUR CONTENT
  19. 19. = LANDING PAGE
  20. 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. 21. PANELS IN-PLACE-EDITOR
  22. 22. CHANGETHE LAYOUT
  23. 23. CHANGETHE CONTENT
  24. 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. 25. VARIABLE LANDING PAGES
  26. 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. 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. 28. #1 SET UPTHE PANEL
  29. 29. #2 CHOOSE A LAYOUT
  30. 30. #3 CHOOSE SETTINGS
  31. 31. #4 ADD CRITERIA
  32. 32. #5 ADD AVARIANT
  33. 33. =TWOVARIANTS
  34. 34. =TWOVARIANTS Student DashboardInstructor Dashboard
  35. 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. 36. OVERRIDE EXISTING PAGES
  37. 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. 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. 39. #1 ENABLE PANELS PAGE
  40. 40. #2 ADD AVARIANT
  41. 41. #3 SELECTION RULES
  42. 42. CONTEXTS
  43. 43. ADDING CONTENT
  44. 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. 45. CREATE NEW DYNAMIC PAGES
  46. 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. 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. 48. #1 SETTING UPTHE PANEL
  49. 49. #2 ASSIGNING ARGUMENT
  50. 50. WHY USE PANELS?
  51. 51. x TO AVOIDTHE BLOCKS UI
  52. 52. MAKES IT EASYTO PROTOTYPE LAYOUTS
  53. 53. TO GIVE ADMINS FREEDOM
  54. 54. DRAG AND DROP UI
  55. 55. TO AVOID WRITING CUSTOM CODE
  56. 56. ADDING CONTENT TO PANELS
  57. 57. BLOCKS CONFIGURATION
  58. 58. ADDING CONTENTTO A PANEL
  59. 59. ADDING CONTENTTO A PANEL Custom Blocks Menus Views Widgets Views Panes Page Elements Miscellan eous Activity
  60. 60. ADDING CONTENTTO A PANEL Custom Blocks Menus Views Widgets Views Panes Page Elements Miscellan eous Activity New Custom Content
  61. 61. USINGVIEWS PANES Views Pane
  62. 62. PANELS, PANELIZER, PANOPOLY, OH MY...
  63. 63. PANELIZER MODULE • You get panels configuration (layout and content) for each node. • Often leads to too many panels, too much variation • Use with care!
  64. 64. PANELIZER
  65. 65. 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
  66. 66. PANOPOLY
  67. 67. TRICKYTHINGS
  68. 68. USABILITY FOR ADMINS Panels In-Place-Editor
  69. 69. PANELS FOR LISTING PAGES Make sure you’re linking to Panels
  70. 70. RESPONSIVE DESIGN Make custom layouts and use media queries
  71. 71. 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
  72. 72. THINGSTO AVOID
  73. 73. TOO MANY LAYOUTS Stick to a few good ones
  74. 74. DUPLICATE CONFIG Use mini-panels or context v
  75. 75. FLEXIBLE LAYOUTS Instead, add custom layouts to your theme
  76. 76. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Kennedy, Co-founder @suzanne_kennedy

×