Objective
You can configure home pages for each active locale and brand. Begin by configuring the Default Brand.
To add components to the home page, select the Add Component button.
Use the up and down buttons to control the component's location on the page.
If you do not want the component to display on all devices (desktop, tablet, mobile), clear the checkbox for that device.
Select the component itself to adjust the style, appearance, and content.
This video demonstrates how to create home pages.
You begin building the home page for the Best Run Default Brand by adding and configuring the components and adding metadata for the page. In a later exercise, you will add additional features to the page and duplicate the page for the Red Brand.
| Component | Image File | Alt Text | Image Type | Image Position* |
|---|---|---|---|---|
Subscribe Form | Subscribe.jpg | Woman in busy office | Unmodified | Top Middle |
Three Columns | 3-1_engineering.jpg | Fist bump | ||
Three Columns | 3-2_sales.jpg | 3 people talking at a table | ||
Three Columns | 3-3_management.jpg | 2 people taking notes | ||
Text: Dream Job | green_background.jpg | green background | Unmodified | Middle Middle |
Large Image | work_remotely.jpg | Man in kitchen | Unmodified | Top Middle |
* The Image Position is always set to the focal point in the image, so it remains on the screen for all breakpoints: Desktop, Tablet, and Mobile.
Navigate to CSB→Pages→Home→English→Default Brand→Home.
Select the Add Component button.
Select Subscribe Form, Search Bar, Three Column Images with Caption, Text, Large Image, Google Job Map, and Video.
Select outside the Component list. If any components need to be reordered, use the up and down buttons.
Select the gray box representing the Subscribe Form.
On the Details tab, click the T icon next to the Header Text, change the Color to #FFFFFF, and click Close. If desired, you can also make changes to the text.
Select the Styles tab.
Select Body Background and click +Add.
For Label, enter semi-transparent blue.
In the Hex box, enter 004990.
To create a new semi-transparent color for the box, enter 0.68 in the box labeled A.
Select outside the Color Palette box. Then, to select the new color, select Body Background again, and select the new color.
Choose Body Text and select #FFFFFF.
Select Background Image and upload the image listed in the table above. For the steps to upload images, see the To Add a New Image instructions in the Career Site Design Leading Practices unit.
Publish and preview.
At the top of the window, select the back arrow next to Subscribe Form to return to the top of the home page.
Scroll down and select the gray box for Three Column Images with Caption.
Select the Column 1 tab.
For Show Link click YES. We will add links later.
Choose Select Image and upload the first image for this component listed in the table above.
Select the Column 2 tab.
For Show Link, select YES.
Choose Select Image and upload the second image for this component listed in the table above.
Select the Column 3 tab.
For Show Link, select YES.
Choose Select Image and upload the third image for this component listed in the table above.
Select Publish and preview.
At the top of the window, select the back arrow next to Three Column Images with Caption.
To distinguish the two text components, scroll to the first Text component and click the word, Text, to rename it.
In the Name box, enter Dream Job and select Close.
To edit the first Text component, select the gray box.
On the Details tab, for Header Text, enter Find Your Dream Job at Best Run.
Select the T icon next to the Header Text and change the Size to 18 and the Color to #FFFFFF.
For Body Text, enter Looking for your next big adventure? Explore Best Run career opportunities for professionals to find a job that exciting, rewarding, and uber flexible. You'll even get to change the world.
Select the T icon above Body Text and change the Size to 16.
For Show Button, click YES. We’ll add the button link later.
Select the Styles tab.
Select Body Text and select #FFFFFF.
Select Background Image and upload the image listed in the table above.
Select Publish and preview.
At the top of the window, select the back arrow next to Text.
Scroll to the second Text component and click the word, Text, to rename it.
In the Name box, enter Work Remotely and select Close.
To edit the second Text component, select the gray box .
On the Details tab, for Header Text, enter Looking for a Remote Job?
Select the T icon next to the Header Text. Change the Size to 24 and change the Color to Best Run Blue. Select Close.
For Show Button, select YES. We’ll add a link to a category page for remote jobs later.
Select Publish and preview.
At the top of the window, Select the back arrow next to Text.
Scroll down and select the gray box for Large Image.
Select Select Image and upload the image listed in the table above.
After uploading, hover over the Background Image and notice that the height is 485 pixels.
To prevent extra spacing between the component above and below, for Max Height of Image, enter 485.
For Enable Spacing, select YES. Leave the default (None) settings.
Select Publish and preview.
At the top of the window, select the back arrow next to Large Image.
Scroll down and select the gray box for Google Job Map.
On the Details tab, for Predefined Map Center Options, select USA.
Select the Styles tab and for Body of Water, select the site background color.
For Enable Spacing, select YES, and leave the default (None) settings.
Select Publish and preview.
At the top of the window, select the back arrow next to Google Job Map.
Scroll down and select the gray box for Video.
For Video URL or ID, enter https://www.youtube.com/watch?v=l4v33pLEpe0. Notice that the Video Type is defined.
For Layout, select Right Justified With Text.
For Header Text, enter Are you ready to work for a leader in business consulting services?
Select the T icon next to the Header Text. Change the Font to Arial Black, Gadget, sans-serif, change the Size to 24, and change the Color to Best Run Blue. Click Close.
For Body Text, enter You won’t do better than Best Run!
Select the T icon above Body Text and change the Size to 24.
Select the Styles tab.
For Body Text, select Best Run Blue.
For Enable Spacing, select YES. To prevent the text from being too close to the left margin, for Left, select Medium.
Select Publish and preview.
At the top of the window, select the back arrow next to Video to return to the top of the home page.
It is best practice to populate the metadata for every page in CSB. For the home pages, we'll use the same metadata that we entered globally.
Navigate to Pages→Home→en_US→Default Brand→Home.
Select the gear button near the top left and select Tags.
Enter the following information:
Page & Meta Title:Jobs at Best Run
Meta Keywords:Engineering, Sales, Human Resources, Management Jobs
Meta Description:Apply online for jobs at Best Run: Engineering jobs, Sales jobs, Human Resources jobs, and more
Select Confirm.
Publish.
Note