O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
CREATING DYNAMIC
LANDING PAGES WITH
PANELS
Suzanne Dergacheva	

@suzanne_kennedy
Drupal Consulting, Development, andTraining	

evolvingweb.ca
Suzanne Dergacheva, Co-founder	

@suzanne_kennedy
TRAINING PROGRAM
evolvingweb.ca/training	

!
UPCOMINGTRAINING
• Intro to Drupal - August 25th inToronto	

• Intro to Drupal - September 12th in Montreal	

• Let us kno...
WHAT IS PANELS?
PAGE-BUILDINGTOOL
WHAT IS IT GOOD FOR?
managing blocks managing lots of layouts
creating	

custom 	

pages
PROJECT BACKGROUND
Yasmine the yoga studio owner
Suzanne the site builder
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 abou...
CREATING A LANDING PAGE
MODULESYOU’LL NEED
• ChaosTools	

• Page Manager	

• Views Content Panes	

• Panels	

• Panels In-Place Editor	

• Mini Pa...
SIMPLE LANDING PAGES
What is it?
• You choose a new URL	

• URL is always the same	

• Layout and content are
always the s...
SIMPLE LANDING PAGES
Path = yoga-workshop
layout content
About theYoga Studio
Articles
Signup 	

form
Classes
Contact Info...
CREATE A PANELS PAGE
1 page = 1 path
#1 SET UP PANEL
#2 CHOOSE A LAYOUT
#3 CHOOSE SETTINGS
#4 ADDYOUR CONTENT
= LANDING PAGE
TWO WEEKS LATER…
I like the yogathon page, but we need to 	

change the layout.
What kind of layout do you want?
Let’s cha...
PANELS IN-PLACE-EDITOR
CHANGETHE LAYOUT
CHANGETHE CONTENT
I just realized, students and instructors need	

a way to see what classes they’re signed up for.
Do they have accounts on...
VARIABLE LANDING PAGES
What is it?
• You choose a new URL	

• URL is static	

• Layout and content are
different depending on the
context 	

Exam...
VARIABLE LANDING PAGES
Path = my-classes
Fancy Banner
Student	

Classes
Student	

Message
Contact Info
layout content
Fanc...
#1 SET UPTHE PANEL
#2 CHOOSE A LAYOUT
#3 CHOOSE SETTINGS
#4 ADD CRITERIA
#5 ADD AVARIANT
=TWOVARIANTS
=TWOVARIANTS
Student DashboardInstructor Dashboard
The yogathon was so successful, 	

I want to start hosting them every month.
Will they always have the same content/layout...
OVERRIDE EXISTING PAGES
OVERRIDE PAGES
• Landing pages for different
types of taxonomy terms	

• Layouts for different types of
nodes
What is it? ...
OVERRIDE EXISTING PAGES
Path = node/[nid]
Class Variant
selection criteria
Is the current 	

node of type 	

yogathon?
arg...
#1 ENABLE PANELS PAGE
#2 ADD AVARIANT
#3 SELECTION RULES
CONTEXTS
ADDING CONTENT
The yogathons are going well. Can we create a
second landing page for each yogathon to post
photos/videos?
Do you already ...
CREATE NEW DYNAMIC
PAGES
CREATE DYNAMIC PAGES
• Media for an event, displayed
on a separate page	

• Repeating Event - create a
separate page for e...
CREATE DYNAMIC PAGES
Path = node/[nid]/poses
Fancy Banner
Contact Info
layout content
selection criteria
Is the current 	
...
#1 SETTING UPTHE PANEL
#2 ASSIGNING ARGUMENT
WHY USE PANELS?
x
TO AVOIDTHE BLOCKS UI
MAKES IT EASYTO
PROTOTYPE LAYOUTS
TO GIVE ADMINS FREEDOM
DRAG AND DROP UI
TO AVOID WRITING CUSTOM
CODE
ADDING CONTENT
TO PANELS
BLOCKS CONFIGURATION
ADDING CONTENTTO A
PANEL
ADDING CONTENTTO A
PANEL
Custom 	

Blocks
Menus
Views
Widgets
Views	

Panes
Page	

Elements
Miscellan	

eous
Activity
ADDING CONTENTTO A
PANEL
Custom 	

Blocks
Menus
Views
Widgets
Views	

Panes
Page	

Elements
Miscellan	

eous
Activity
New ...
USINGVIEWS PANES
Views 	

Pane
PANELS, PANELIZER,
PANOPOLY, OH MY...
PANELIZER MODULE
• You get panels configuration (layout and content) for each
node.	

• Often leads to too many panels, too...
PANELIZER
PANOPOLY
• Comes with panelizer, fieldable panel panes	

• Panels set up for lots of built-in pages	

• Extra layout option...
PANOPOLY
TRICKYTHINGS
USABILITY FOR ADMINS
Panels In-Place-Editor
PANELS FOR LISTING PAGES
Make sure you’re linking to Panels
RESPONSIVE DESIGN
Make custom layouts and use media queries
CONTENT - CONFIG
• With Panels, you end up with configuration mixed up with
content (inserting nodes, blocks and custom tex...
THINGSTO AVOID
TOO MANY LAYOUTS
Stick to a few good ones
DUPLICATE CONFIG
Use mini-panels or context
v
FLEXIBLE LAYOUTS
Instead, add custom layouts to your theme
Drupal Consulting, Development, andTraining	

evolvingweb.ca
Suzanne Kennedy, Co-founder	

@suzanne_kennedy
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Próximos SlideShares
Carregando em…5
×

Creating Dynamic Landing Pages for Drupal with Panels - Webinar

15.967 visualizações

Publicada em

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

Publicada em: Tecnologia, Negócios
  • Dating direct: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • thank you.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×