The About page is the longest page we’ve needed to complete so far.
At this point, I hope the reason for the “Bottom-Up” approach is starting to become clear. We have so many elements that we’re reusing from other pages that, had we tried to start on the About page first we might have gone down a rabbit hole. Instead, it’s better to finish off smaller pieces of functionality first, so that we can combine them into large pieces further down the line.
Like Contact Us and Services, we’re going to need a custom page template for this page. This page template -- About Us -- will have many of the same areas as Services, but will use columns specific to the About page that the theme requires.
Within the first area, we’ll add a Section Title block for About Us. Then, within the left column, let’s add an image block for our city image. But it’s not just a simple image block, is it? Notice that fancy gray background? That’s added with the help of some specialized markup and CSS. Let’s create a custom template named “image_shadow” for this image.
In the right column, we’ll use a simple content block to create the title, content and button. After that, though, let’s add a custom block type named Counter. It’s a specialized block that will simply show some different labels and counts for those labels, and use the theme’s JavaScript to animate them.
At this point on the page, we have a gallery of projects. But where will the content come from? Here, we’re going to add a Page List block, set to return five pages of the Apartment Type, filtered by featured. Since we need to show a fancy image treatment, let’s add a custom template for this block, called “Apartment Grid.” Finally, we’ll make sure it displays its title “Luxuries Apartment” appropriately.
Finally, the Testimonials Slider block shown on this page is configured the exact same way as it is are on the Services page. We may even copy and paste it from the source page to here.
Recap
We’re going to need to create the following Concrete CMS components for this page (in addition to other components we’re reusing from other pages.)
- About Us Page Template
- Image Shadow custom template for the Image Block
- Counter Block Type
- Apartment Grid custom template for the Page List Block