Designing the Home Page
Clarity’s current home page is a bit sparse. Right now it has just a single banner in addition to the header and footer:
The marketing team at Clarity wants more from the home page. They want to add
- A list of traits that highlight the uniqueness of the company
- A customer testimonials slider
Fragments are reusable snippets of HTML, JavaScript (if necessary), and CSS you can use to build the look and feel of the site pages. You’ll combine both built-in fragments and custom fragments to compose the page with very little custom code.
First, add a fragment composition highlighting the uniqueness of Clarity:
-
Open the Home page in editing mode.
-
Add the J2B6 Clarity Uniqueness composition to the page.
-
Publish the page.
The uniqueness composition is made entirely from out-of-the-box fragments and a Clarity-supplied image, combined to provide the content and the look-and-feel Clarity wants.
The last section of content shows customer testimonials. In this case the text is changed to display customer quotes.
-
Open the Home page in editing mode.
-
Add the clarity-testimonials-composition to the page.
-
In the fragment configuration sidebar on the right, provide a quote for each Testimonial field:
First Testimonial:
"Wow, 4K is way cooler when I have my Clarity glasses on. Let's be honest, I'm way cooler too."<br /><br />Scott, Almuerzo, TXSecond Testimonial:
"I look good, and I never knew it!"<br /><br />Cherise, Mittagessen SDThird Testimonial:
"If looks could kill, my mirror would be serving ten life sentences."<br /><br />Bran, Ranchi OR -
Publish the page.
The behavior for rotating through three customer quotes is defined in a custom fragment called Testimonials Slider, imported in Importing Fragments and Resources.
Congratulations! You’ve finished this module on creating pages. Clarity’s pages are in place and the home page is fleshed out. Most of the site pages, however, have no content, which is the next topic.
Module Three: Creating Content.