About Page

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 about-page-specific columns 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 what about the next piece of content? Here, we’re going to add a Page List block, set to return four 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 they are on the Services page. We may even copy and paste it from the source page here.

Recap

We’re going to need to create the following concrete5 items for this page (in addition to other items 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
Loading Conversation