Simple Above-the-Fold or Key Visuals
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.
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.
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.
⭐⭐⭐⭐⭐
"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.