Introduction: Building Drupal Pages with Panels, Blocks, & Views.
Drupal 8 gives web publishers the ability to post different Content Types and filter dynamic content through Views to build complex web pages. In this tutorial, we will build a Panels landing page with Views Blocks embedded in different regions within a template.
Users can also add images, slideshows, videos, custom text, menus, etc. to regions in Panels using Blocks & Views. Panels block regions can include custom HTML, CSS, & PHP code.
Let’s get started.
Step One: Install & Enable the Panels Module.
The first step is to install and enable the Panels module in the Drupal administration section.
- Dependencies: Users will first need to install the Chaos Tools Suite to run Panels.
- Recommended: Place the site in Maintenance Mode to begin the upgrade.
- Required: Navigate to /admin/modules/install & enter the link to install the Chaos Tools module suite.
- Required: Navigate to /admin/modules/install & enter the link to install the Panels module suite.
- Required: Navigate to admin/modules & enable the Layout Discovery module component in Drupal Core along with the cTools & Panels modules.
Barring any database errors or custom theme incompatibility, administrators will now be able to run Panels for content creation & dynamic landing pages.
Note: Users should see a success screen verifying the successful install of both modules.
Then go to the /admin/modules section and enable both the CTools & Panels module components.
Panels Module Settings: Install the Panels & Panels IPE module components along with Chaos Tools (Including: Blocks & Views) for the CMS for landing page construction.
Recommended: Check the User Permissions for Panels & CTools at /admin/people/roles to verify the Site Administrator or other Roles have the appropriate powers and save the new settings.
Complete: Take the website out of Maintenance Mode at admin/config/development/maintenance to go live with the upgrade.
Step Two: Create Views Blocks for Custom Content Types.
In this demo, the landing page will filter dynamic content from three custom Content Types in Drupal 8: Blog Posts, Forum Posts, & Articles. Each dynamic content list will link to the node pages with chronological order and the most recent posts to the site listed first.
Hint: Web publishers can enable and run the Forum module in Drupal Core & use the Content Type with the name of “Articles” installed by default at admin/structure/types. Add a new Content Type with the name of “Blog” & enter the Description at /admin/structure/types/add.
Settings: Check the boxes for the following configuration & save the new Blog content type:
- Published
- Promoted to front page
- Create new revision
- Display author and date information
The Views creation pages can be used to create blocks where the dynamic content is filtered into lists linked to the main node. Use the Views settings to include the date the post was created & the author’s name. The order can be standardized for Blogs, Forum Posts, & Articles. Sort each content list in a chronological ascending/descending order in the View.
Summary: After the Views Blocks are created & saved for each Content Type, we want to create a new Panels page and embed the Views Blocks in a Panels Template.
Hint: Use the Views “Add Block” function to group all of the required Views Blocks for Panels in one section for easy administration. Add an Image Field to the Blog posts for dynamic content in lists using Views that can be navigated with Thumbnails with custom image sizes.
Settings: Create Views Blocks for Article, Blog, & Forum posts with Content: Title fields & information from Author & Post Date listed in the display by Most Recent post time sorted in Descending order. Save the Views Blocks to make them available to Panels.
Code: For this View, the Format is set to “Unformatted List” with Fields. Under the Fields section, Content: Title, Content: Authored By, & Content Revision: Authored On fields are selected for display. The Authored By field is hidden & rewritten in the Authored On field.
Snippet Code for the Title field overwrite:
<span><strong>{{ title }}</strong></span>Snippet Code for the Authored On field overwrite:
<span><strong>Authored By:</strong> {{ uid }} <strong>Date:</strong> {{ created }}</span>Put this code in the Configuration settings for the individual fields under Rewrite Results. This gives us a standardized output on the Views display that can be used with Article, Blog, & Forum nodes in a Panels page via Views Blocks export.
Views Blocks: Click Add Block in Views & change the Content Type filter & Block Title settings for Blog and Forum posts. Save the new Block settings using overridden values.
Step Three: Choose a Panels Layout Template.
Panels gives web publishers a number of different choices of columns and rows with a template system that can be used to create dynamic landing pages in Drupal 8. In addition to adding the Views Blocks created above, site builders will also consider adding images, slideshows, videos, custom text, animation, etc. to pages through the Panels Blocks & Regions structure.
Dependencies: In order to Build Panels pages in Drupal 8, You will need to also install the Page Manager module.
Note: Create a Page in Pagemanager, then convert it to a Panel. Each Panel region has the ability to include custom CSS tags for the division and region that can be added to a theme.
Settings: For the purposes of this demo, the “Three Column – Stacked” layout was selected. After saving these settings navigate to the Panels Template page & add the Views Blocks for each content type with a title for each section.
Recommended: Use “Blog,” “Articles,” & “Forum Posts” for the titles and embed the Views Blocks for each content type in the Panels columns.
Save the settings for the Panels page. This will require setting a custom URL address.
Recommended: Make the URL a keyword for a landing page or use dynamic content filtering with Views to display content Blocks in Panels automatically by Taxonomy term.
Step Four: Add Custom Template Designs, Images, & Slideshows.
Site Administrators can run HTML/PHP code or embed custom Views in Panels blocks to display images & slideshows. There are a wide range of dynamic content modules available free under open source licensing for Drupal that will create this content automatically through custom Views such as Views Slideshow & Dynamic Block Display.
Installation: To complete the Landing Page, we will navigate to Drupal 8’s Block section at /admin/structure/block/block-content & create a Header & Footer Block with custom welcome text and images. Users can also embed YouTube video files in these sections.
Summary: Drupal publishers can create Fields and Taxonomy for Content Types and filter lists through Views. These Blocks can be embedded in Panels Regions in Templates that work by default with most any Drupal 8 theme.
Step Five: Browse the Panels Blocks Library to Complete the Page Design.
Many installed third-party Modules for Drupal automatically create Blocks, Menus, & Dynamic Content lists that can be embedded in Panels Regions. Web publishers using Drupal to create landing pages can take advantage of these resources by browsing through the Block Library in Panels and adding any other required elements to the Template Regions.
Recommended: Many web publishers using Drupal 8 for Social Networking & Communities embed active user, frequent publisher, & author lists with links to Profile pages.
Summary: Use Views Blocks in Panels to Filter Dynamic Content.
One of the main advantages of the Drupal CMS is the extensibility of the platform through third-party modules. Web publishers can integrate dynamic content elements from these modules into landing page designs using Panels & Views with the page regions customized with CSS. Use HTML & PHP code to build more advanced designs for content display.
Conclusion
The final landing page design has a list of dynamic content for Articles, Blog Posts, & Forum Topics, with an anchor graphic and introductory text. The Bartik Theme is used with menu links to the Forum. Following these steps is an effective way to get started building advanced landing pages in Drupal 8 with Panels, Views, & Blocks around a template system with Responsive Themes.
Check out these top 3 Drupal hosting services:
- Click this link and all your queries to best hosting will end.
