Landing Page 7

Hero without image with title bar

Short summary for testing and demonstration purposes. No hero CTAs, same reason.

Wysiwyg Title Demo bio frames

The next three frames will be different Bio frames.

First Bio
- all fields filled
- monochrome light color
- 2 CTAs
  - with one line
  - with two lines
Second Bio
- secondary color
- 1 CTA
Third Bio
- primary accent color
- no CTA

This is the professional title field

This is the name field

This is where the professional subtitle will be.

This frame usually highlights a person or group. Captions, details, quotes, and other relevant information are found in this area. This frame has 2 CTAs.

CTA 1

CTA 2

Second Bio Frame

Both the Bio frame and Contact area are partially filled out for testing purposes. The background of the image should be lighter and less detailed than the one chosen for this frame. This is meant to be the longest caption... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1 CTA

Professional

Third Bio Frame

There is no subtitle provided, but the caption is filled out. There are also no CTAs as those are not required. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Another WYSIWYG Explaining Popular Services below

The next frame will be a popular services frame in the middle of the page where it shouldn't go. It is recommended that a popular services frame always be first on the page. The CTA under the frame's title is not mandatory and will not be included for testing and demonstration purposes on this specific page.

Historical Sites

Final WYSIWYG Media on WYSIWYG frames

The media on WYSIWYG frames can refer to images or videos. First we will look at different image options that can be used on a webpage.

New York State Capital Building — This image fits in my WYSIWYG as a regular centered image. This is the caption for the NYS Capitol Bldg.

With longer text a style that a content creator may want to use is WYSIWYG image portrait that I will demonstrate next... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

NY skyline — NYC skyline. WYSIWYG portrait mode. Right aligned to text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

50 Wolf Rd — Another WYSIWYG image portrait with a caption. This time it is left aligned to text.

Now we will look at the video embed option of a WYSIWYG Frame in comparison to the actual Video Frame below.

Video description section. This is the ITS Tech Podcast Episode 9.

This is the caption for the video of the ITS Tech Podcast episode 9.

Video Title

Video Headline

The video frame is self explanatory. A video can be embedded from either youtube or vimeo. An overlay image can be added that appears before the video is played, this will not be included in this demonstration.

Another Video Title

No headline for testing and demonstration purposes. This time, the image overlay option and the overlay caption are included on the video. The play button moves to the left corner, instead of the middle, when using the image overlay.

Overlay caption would go here.