Many times, a designer will create a section of content that they want to call the users' attention to. This is sometimes known as a Call to Action or a Hero. Bootstrap calls this visual treatment a Jumbotron and makes up the first part of our homepage mockup that we will be creating.
In order for us to implement the Jumbotron, we need to think about how our current homepage is laid out. We have a custom block called Jumbotron placed within the Content region. This means that potentially every page will have this block. Also, every page contains a page title block as well, and based on the mockup, we don't want that to display on our homepage. So, we need to address these two tasks while modifying our page to accommodate the Jumbotron.
First, we will take advantage of Drupal's new default WYSIWYG to directly edit the source HTML. This will allow us to add HTML markup directly into our custom block without worrying about creating a Twig template for it.
Second, we will need to hide the title block on the homepage using page restrictions on the Block layout admin.
We can manage a block content in multiple ways, but the easiest is by using the contextual links that Drupal provides. If we navigate to the homepage and locate the first block that displays "Hello, world!," we can hover over it to see the contextual links icon:
The contextual links menu will allow us to quickly get to the markup of the block by following these steps:
This will accomplish part one of our steps. We should now see that our markup and content have been replaced and are now being styled according to the mockup:
The page title in Drupal 8 is now contained within a block. This allows us to easily place the page title wherever needed based on our design. It also allows us to manage it using the same visibility rules available in any block.
In our mockup, we need to suppress the page title from displaying on the homepage. We can accomplish this by using the contextual menu on the page title block to configure it, as follows:
/home
.The page title block is no longer displayed, and our Jumbotron looks pretty close to the mockup. While this was a pretty simple technique of adding HTML and Bootstrap classes directly to our content, this actually promotes some bad practices. Stop and think for a minute about what we just did.
We mixed layout and presentation markup together within a single field and stored that in the database. First, this is not very flexible. Second, we have no way to reuse the markup without continuing to add it to fields directly on a per need basis. The reason we approached the Jumbotron markup this way was to prove a point. There are always multiple ways to theme something, but often, we will need to rethink our layout.
3.145.7.208