07-Web Page Text, Images and Headers

Scenario: In exercises 06-12 we will build a new home page for our site that features some of the possible web page components.

Class Files: homepageimage2sm.jpg

General Guidelines For Working With Web Page Sections

Use the Add Section link in the Page Tools bar to access the list of section types.

The various section types will be displayed in the Page Components bar. Note that all section types are not displayed. Use the scroll bar to access additional section types. Click and drag a section type to the desired location on the page.

Sections can be reorganized at any time via drag-and-drop of the Move Section icon on the far right of the black control bar which appears at the top of each section when you hover your mouse over the section.

Text only sections can be double-clicked for quick edit. The WYSIWYG toolbar that is available in quick edit mode doesn't have as many edit options as the full edit WYSIWYG toolbar available in the Configure Section option.

Click the gear icon that displays on the black control bar that appears at the top of each section to access the full edit option - Configure Section.

Add Text/Image Components

Click the Add Section link and drag a Text/Image Blocks component to the left column.

When prompted, click on the Right Image option.

Right Image

Fill in the text box using this sample text or your own custom information. Format as desired.

Welcome to Training Lutheran Church

Join us for worship - Saturday at 7:30 p.m. Sunday at 8:00 & 10:30 a.m.

In the image area, click the Upload a New File button and select homepageimage2sm.jpg from the available class files. Press Save Changes.

Repeat the steps, this time selecting the Left Image option, inputting the sample text below and selecting the class file video.jpg for the image.

At TLC we are also excited to share the love of Jesus through our live streamed worship services. We invite you to join us online at any of our regular worship times if you are unable to attend worship in person.

Add Header

Click the Add Section link and drag a Headers component to the left column.

Input the following information and press the Save Changes button.

Header Text: Grow in God's Word

Header Text Color: #FFFFFF

Header Background Color: #77571D

colors