Creating a Jumbotron

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.

Step one – managing block content

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:

Step one – managing block content

The contextual links menu will allow us to quickly get to the markup of the block by following these steps:

  1. Click on the Edit link.
  2. Locate the Body field.
  3. Click on the Source button within the WYSIWYG bar.
  4. Add the following markup including the jumbotron and container elements around the current markup:
    <div class="jumbotron">
     <div class="container">
        existing markup...
      </div>
    </div>
  5. Click on the Save button.

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:

Step one – managing block content

Step two – hiding the page title

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:

  1. Click on the Configure block contextual link.
  2. Click on the Pages vertical tab on the Configure block screen.
  3. Select the Hide for the listed pages.
  4. Enter into the Pages text field the path /home.
  5. Click on the Save block button.

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.66.94