[ ](https://www.facebook.com/sharer/sharer.php?u=https://www.skvare.com/markdownify/node/166&title=Using%20Layout%20Builder%20to%20Construct%20Awesome%20Event%20Pages "Share to Facebook") [ ](https://www.linkedin.com/sharing/share-offsite/?url=https://www.skvare.com/markdownify/node/166 "Share to Linkedin") [ ](mailto:?subject=Using%20Layout%20Builder%20to%20Construct%20Awesome%20Event%20Pages&body=https://www.skvare.com/markdownify/node/166 "Share to Email") # Using Layout Builder to Construct Awesome Event Pages Drupal Planet CiviCRM Entity CiviCRM Drupal Image Using Layout Builder to Construct Awesome Event Pages In our last blog in [this series](/blog/unleashing-civicrm-entity-module-drupal-8) we will be taking the various features and pieces we’ve worked on using the [**CiviCRM Entity module**](https://www.drupal.org/project/civicrm_entity), and assemble them using the Drupal 8 core theme module, the [Layout Builder](https://www.drupal.org/docs/8/core/modules/layout-builder). Our goal will be to create an attractive event information page (a useful feature for our clients here at **Skvare**) featuring: - Our CiviCRM *Support Your JLA* event and [Slick](https://www.drupal.org/project/slick) image slideshow from [our previous blog](/blog/customizing-event-pages-media) - A map to show the event location - A list of registered participants - Several [useful graphs](/blog/contributions-and-reports-within-views) for our event managers ## So let's gather our ingredients! To show our list of registered participants, we will create another view of [CiviCRM contacts](/blog/civicrm-contacts-drupal-8). We will then add relationships for “Participants with the Contact ID” and “Content with a field\_event\_reference set to the civicrm event”. Image Using Layout Builder to Construct Awesome Event Pages We will then set up a map view with the *CiviCRM Entity Address* [*Leaflet*](https://leafletjs.com/) *Map* format - similar to the one we set up for our [Superheroes map](/blog/interactive-maps-civicrm-addresses) using the [Leaflet module](https://www.drupal.org/project/leaflet). And we will add the same *field\_event\_reference* relationship. The reference relationships will allow us to add a contextual filter for our event node to the views in order to show the correct fields and data for our CiviCRM event. Image Using Layout Builder to Construct Awesome Event Pages ## If you build it... To begin, we need to enable the *Layout Builder* module. And then we’ll go to Structure > CiviCRM Entity > CiviCRM Event to *Manage display* for the event entity type we enabled in [Blog 5: Customizing Event Pages with Media](/blog/customizing-event-pages-media). We then need to check *Use Layout Builder*, and click *Manage layout*. For this example we’re going to add a two-column section at the top to show our event details opposite our images and our map, and we’ll create a second two-column section for our graphs. We'll also add a single column in between for an *Event fee reports* header block to separate our graphs as we’ll only want to show them for users with event management permissions. We’ll also create a custom block for our register button and give it some basic buttony-looking styling. Image Using Layout Builder to Construct Awesome Event Pages #### Ahh, the versatility of the Layout Builder And lastly we’ll set up our event images as a slick slideshow on our event page, similar to how we did [previously](/blog/customizing-event-pages-media) outside of Layout Builder. I’ll include the entire example setup as [Slick](https://www.drupal.org/project/slick) can be a bit tricky to configure. Image Using Layout Builder to Construct Awesome Event Pages #### And that should do it... Let’s check out our new event information and registration page! Image Using Layout Builder to Construct Awesome Event Pages #### Excellent! ## And remember, you can configure and customize any CiviCRM entity! For this example we added data from several places to a CiviCRM event page, but you could just as easily create a specialized contact and contributions page, a memberships overview, or anything else using CiviCRM data exposed within Drupal using the [**CiviCRM Entity module**](https://www.drupal.org/project/civicrm_entity). We encourage you to explore the possibilities that suit your use case! And as always, if you have a specific use case you’d like to discuss, please [contact our expert team](/contact) here at Skvare for a free consultation. We would love to explore working with you as your digital and technology partner! For more information, you can read our [CiviCRM Entity information page](/using-civicrm-entity-module) or visit the [module homepage](https://www.drupal.org/project/civicrm_entity) to review and install! ## Show me more! Stay tuned for our upcoming webinar series on the CiviCRM Entity module topics discussed in this blog series and more. You can register for our upcoming webinar here! ###### < Previous: [Customizing Event Pages with Media](/blog/customizing-event-pages-media) [CiviCRM How To: Importing Contacts, Part 1](/blog/civicrm-how-importing-contacts-part-1): Next > - [Drupal Planet](/tags/drupal-planet) - [CiviCRM Entity](/tags/civicrm-entity) - [CiviCRM](/tags/civicrm) - [Drupal](/tags/drupal)