Advanced Components
  • Welcome
  • Start here
    • Setup
    • Dependencies
  • Getting Started
    • Front-end tooling
    • Create a new D9 theme
    • Component Architecture
    • Drupal Best Practices
    • Drupal Attributes
    • Twig Blocks
  • Basic Components
    • Global styles
    • Adding webfonts
    • Heading Component
      • Improving the Heading
    • Button Component
  • A component's lifecycle
    • Hero Component
    • Include statements
    • Drupal prep
    • Drupal entities
    • Homepage content type
    • View modes
    • Add Hero to homepage
    • Drupal cache & twig debugging
    • Twig template suggestions
    • Getting field values
    • Integrating the Hero
    • Drupal Libraries
    • Hero Image styles
  • Card component
    • Card Component
    • Component Variants
    • Card Variant
    • Author component
  • Drupal site building
    • Blog articles
    • View modes
    • Drupal Views
    • Author
    • Generate content
    • Adding Blog Lists to the Homepage
  • Drupal Integrations
    • Integrating the Card
      • Taxonomy terms
    • Integrating the Card Wide
    • Author integration
    • From our blog
    • Integrating From our blog
    • Featured Content
    • Integrating Featured Content
    • Blog image styles
    • Blog detail page
  • Extras
    • Image Styles
    • Navigation
  • Resources
    • Resources
Powered by GitBook
On this page

Was this helpful?

  1. A component's lifecycle

Add Hero to homepage

Now that we have a view mode display ready to go, let create a new node of type Homepage so we can add the hero of our choice.

Exercise: Create the homepage node with a hero

  1. From Drupal's admin toolbar, click Content | Add content

  2. Select **Homepage **as the type of content to create

  3. Under title type Homepage

  4. In the Hero field, begin typing to search for the article you wish to turn into the Hero

  5. When the targeted article is found, select it and click the **Save **button

  6. The homepage node will now rendered and we should see a large image and a title

The Hero is now displaying in Drupal using the designated view mode display. We will handle the styles of the hero in a later exercise.

PreviousView modesNextDrupal cache & twig debugging

Last updated 3 years ago

Was this helpful?