Introduction
This Tutorial will show how to use Drupal 8 Theme Regions with Menus, Blocks, & Views to build landing pages for a website based on keyword URLs.
- Problem: What is the best way to build custom blocks for Landing Pages in Drupal 8? How to position Blocks on Landing Pages and add CSS styles or custom JavaScript?
- Solution:Drupal 8 publishers who need to add increased complexity to Landing Pages can build around Blocks with Views and add custom HTML/PHP code in D8 Admin.
Building around core Page nodes or creating Block publishing strategies with dynamic content for Blog & Article nodes are options that can be used together with Landing Pages.
Let’s get started.
Step One: Install & Configure the PathAuto Module.
The PathAuto module for Drupal 8 works with clean URLs to generate SEO-friendly path structures for nodes. PathAuto uses the keywords from page titles to create the URL, leading to higher page rank in search engines. PathAuto can also be configured to support Content Types with custom URL keywords like /articles/page-title or /blogs/page-title.
First: Install and enable the PathAuto module in /admin/modules along with the dependency modules cTools & Token via file upload or by entering the path in Drupal 8 administration.
Hint: If your site has a role for administrators, make sure to set the module permissions for PathAuto to enable editor support.
Next: Navigate to /admin/config/search/path/settings and review the settings. Then define site-wide patterns for URL structure with PathAuto at /admin/config/search/path/patterns using keyword to match the content types.
- For the Content Type “Articles” set the Path Pattern to: article/[node:title]
- For the Content Type “Blog” set the Path Pattern to: blog/[node:title]
Finish: Take some time to develop a site-wide URL strategy for SEO, Blocks, & Navigation Menus by setting the path patterns for Content Types, Forums, & Taxonomy terms.
Other tokens that can be used for the configuration settings are:
- Forums: forum/[node:title] & forum/[term:name]
- Taxonomy Tags: tags/[term:name]
- User Profiles: user/[user:account-name]
- Landing Pages & Navigation: [node:title]
Debugging: If the “Available Tokens” pop-up window does not appear when selecting Pattern Types on the Settings page, go to Performance and disable JavaScript aggregation.
Step Two: Create Any Content Type Page.
PathAuto will now be configured to automatically create URLs for published pages like blogs, articles, forums, etc. that include information that can be passed to Drupal 8 Blocks.
- When creating Blog pages, the URL structure will be: /blog/site-title-for-seo
- When creating Article pages, the URL structure will be: /articles/text-title-for-post
Next: Go to /node/add and create new Article & Blog posts for your site. Then navigate to the Blocks section at /admin/structure/block & click on the “Custom Block Library” tab.
Next: Click on the button “Add custom block”. On a technical level, your block can contain HTML or PHP code and be used for text, images, or other embeds like video.
Next: Create and save the Block. Then navigate back to the Block Layout tab. You should see your new Block listed in both sections of the administration section.
Finish: Review the Block Regions available in your Drupal 8 theme & click “Place Block” to add your custom-coded design to the display.
Step Three: Add a New Block to the Page by URL.
The Drupal 8 Block configuration page has all of the settings required for fine-grained placement of design elements on CMS pages by code, URL, or Content Type.
Next: In this example, we are going to place different blocks on Articles & Blog pages according to the URL structure above created with PathAuto.
Next: Review the Block configuration settings and click on the “Pages” tab. Add the URL /blog/* to the configuration so that the block will display on all blog pages on the website.
Finish: Repeat the process from the start creating a second new Block in the library. Then position the block in the same Theme Region and add the URL /article/* to the settings.
With this solution, you should have two custom-coded blocks in the same sidebar region of the theme, with one block displaying on all Blog pages, & one block displaying on all Article pages.
Step Four: Build Views Blocks for Dynamic Content.
With Drupal 8, you can use custom blocks to add any type of content to your website pages, like images, video, or Google AdSense code & build targeted campaigns on site sections.
Hint: For more advanced displays with dynamic content from your own CMS, use Views Blocks to create the filter with the same PathAuto configuration method for placement.
Hint: With Views, you can create custom lists of dynamic content from e-commerce catalogs, forum content, or blog posts. Use Thumbnail Images & Node Titles for links to content.
Conclusion: Use Keyword URLs for Block Publishing.
Whether you choose to build custom blocks in Drupal 8 with HTML/PHP code or use Views to filter dynamic content from the database, make sure to use the PathAuto URL settings for placement. With this, you can have custom advertising on different content types or site sections.
Check out these top 3 Drupal hosting services:
- You can discover new info about Best website hosting by clicking this link.
