When you approach content modeling from a layout perspective, you can ensure that your site’s configuration and content structure aligns with the design of each page’s template. Let’s break down and explore how you can approach layout design with content structure and modeling in mind.
By the end of this tutorial, you should be able to ensure that your content model accounts for each content display in your layout designs.
Start with a sketch of the layout
A wine tours page might have sections like:
- A hero banner featuring the name and a standout image of a highlighted wine tour.
- A grid or list view of available tours displaying images, names, regions, durations, and prices.
- A filter or search bar for users to browse tours by region or category.
- A testimonials section showcasing customer feedback about specific tours.
Break down the layout into content elements
Identify the content elements that appear in each section. For example:
- Hero banner: Tour name, featured image, tagline.
- Grid/list view: Image, tour name, price, region, duration, and a link to details.
- Filter bar: Region and category (taxonomy terms).
- Testimonials: Customer name, feedback, related tour.
Represent content elements in the content model
Use content types, fields, and relationships to match the structure of the layout:
- Wine tour content type: Fields for all the data displayed in the grid and hero banner.
- Testimonial content type: References to the related tour and fields for the name and feedback.
- Taxonomy terms: Categories and regions for filtering.
How does the content model help build the layout?
With a well-structured content model, you can use Views to dynamically pull content into the layout:
- The hero banner can display the most recent or featured wine tour.
- The grid/list view can automatically populate with all published tours, sortable by region or category.
By defining fields for each content type, the information displayed is consistent across the site. For example:
- Every wine tour has a title, image, price, and region, ensuring a uniform appearance in the grid.
Fields and relationships make it easier to reuse content across multiple layouts. For instance:
- The same tour description can appear on both the tour detail page and in the grid on the wine tours page.
If you decide to add new features, like a featured video section or a map, the content model supports these changes without requiring a complete redesign. For example:
- Add a Tour video media field to the Wine tour content type or add a Geofield to enable a map feature.
Editors can update content without worrying about breaking the layout. For example:
- Changing a tour’s price or region updates the grid and filters automatically.
Example: Make a content model from a layout
Layout section: Hero banner
- Content type: Wine tour
- Fields used:
- Featured image
- Tour name
- Tagline (optional field)
Layout section: Grid/List View
- Content type: Wine tour
- Fields used:
- Featured image
- Tour name
- Region (taxonomy term)
- Duration
- Price
Layout section: Filter bar
- Taxonomy Terms: Wine region, Tour category
Layout section: Testimonials
- Content type: Testimonial
- Fields used:
- Customer name
- Feedback text
- Related tour (reference to wine tour content)
Dynamic elements powered by Views
- The grid of tours and the filter bar are built using the Views module. Filters and sorting options use the taxonomy terms and field data from the Wine Tour content type.
Wrap-up
By aligning the content model with the layout, you ensure your site is both easy to manage and visually cohesive. This approach makes it possible to:
- Populate the page dynamically with Views.
- Ensure consistent display across the site.
- Quickly adjust the layout or add features as your site grows.
