Simple Above-the-Fold or Key Visuals

Wed, 16 Feb 2022 22:10:09 GMT

Simple & Effective Main Key Visual (MKV) Layouts

MKVs typically appear above the fold, just beneath the header. Web Consultants will typically provide content specific to the above-the-fold section, to be placed in the MKV.

Content for an MKV could include:

Slogan
Special Offer
Call-to-Action (CTA)
Video (if provided and instructed)
Reviews (if provided and instructed)

These layouts below meet Thryv standards by avoiding complex widgets above the fold and only using one main image. The goal is to grab attention, but with minimal impact to site speed.

Simple widgets that work well in MKVs include:

Text
Divider
Button
Shape
Icon
Inner Rows

Shape Widget, Divider Widget, and Button Widget

The Shape widget is versatile, combining elements of the Icon widget, Image widget, and Button widget.

In the example below, we're assuming a WC has provided a CTA and a Slogan on the CCF, but no other fields for the above-the-fold section.

The Slogan has been placed into a Shape widget and can be linked to another page, and the CTA has been placed into a Button widget. Divider widgets have been placed around the Button widget to make the MKV feel more "filled out." Note, although the Shape widget has a hover effect, it is not Entrance or Scrolling, meaning it is not triggered on page load and is acceptable under current PRCDR.

Text Widget, Divider Widget, and Button Widget

The Text and Button widgets are two of the most used widgets in the editor. The load quickly and have many design options that make them flexible enough to create new designs with old tools.

In the example below, we're assuming a WC has provided a Slogan, above-the-fold text, and CTA on the CCF. The slogan is used as an H3 and the above-the-fold text in the text widget underneath the divider. Both have a green text shadow applied to improve their legibility and help the text stand out on the lighter parts of the image.

The CTA was placed into a button widget with icon, and the corners rounded. We used static background instead of Parallax, as it takes less load time for a static background than a Parallax, and with similar results.

DFW's Premiere Landscapers

Since 1950

Design • Installation • Maintenance

Icon Widget, Text Widget, Divider Widget, and Button Widget

The Icon widget is under-utilized as a way to include easily scalable graphics on a site. Custom SVG files converted from EPS files from Getty Images can be used here as well.

In the example below, we're assuming a WC has provided either a slogan or above-the-fold text, and CTA on the CCF.

The CTA was placed into a button widget with icon with the bottom two corners rounded. We used an abstract background of pipes from Getty to match the text provided, and a similar icon in the Icon widget. A gradient was added to the image to improve legibility.

GET YOUR PIPES

FLOWING RIGHT

Text Widget, Icon Widget, Divider Widget, and Button Widget

In the example below, we're supplementing the MKV with a review from what the WC provided. Note, this example only uses the text widget and icon widget to house the review - we should avoid use of the Image Slider unless otherwise directed. This is a great alternative to feature reviews above the fold.

The gradient over the MKV's row is optional, and was added here to complement the presumed business colors.

TRUSTED ACROSS THE DALLAS METROPLEX

⭐⭐⭐⭐⭐

"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."

-John D.

Global Design - PRCDR

Joseph.Mancuso@dexyp.com (Joseph Mancuso) — Tue, 15 Feb 2022 19:02:04 GMT

QC Standards for Global Design

Above the Fold - PRCDR

Joseph.Mancuso@dexyp.com (Joseph Mancuso) — Tue, 15 Feb 2022 18:44:18 GMT

ausnzrushrequests