Guide

Component Buffet for Premium Content

This page contains most of the components you'll need to create premium content pieces (not case studies—those components will come a bit later). If you don't see something you need, ask Ryan and he'll build it for you.

A standard level three heading is a good follow-up to the hero

This is a two column block of text, but you can make it one column if you like. However, the copious amounts of manual work required to get information about competitors is so tedious that by the time it’s complete the window of opportunity has closed.

Collecting competitive intelligence is absolutely necessary, despite the risk of outdated information. Margins vary, but they can be so slim that it’s worth significant effort just for the minuscule chance of increasing sales a tiny bit. A 3% lift in sales could return $20M more in revenue. That’s a huge uptick for even the largest of businesses.

An example of one statistic

To use this, be sure to select and copy the parent Div Block around this text and the accompanying image.

How about two statistics

To use these, be sure to select and copy the Row with Narrow Columns parent element.

Sitting side by side

To use these, be sure to select and copy the Row with Narrow Columns parent element.

Here are three stats

To use these, be sure to select and copy the Row with Narrow Columns parent element.

All lined up in a row

To use these, be sure to select and copy the Row with Narrow Columns parent element.

Such pretty things

To use these, be sure to select and copy the Row with Narrow Columns parent element.

Maybe you'd like a small intro heading that looks a bit different

You can have the wind ornament in the left column or the right column. Simply drag it into the column you'd like, and move this text and heading into the other column. Or, leave me as is and enjoy a nice component that grabs attention without being overbearing.

Sometimes, All You Want is a Border

You can change the color of the border by changing the combo class. This one has a combo class of Border CC-100, which is short for "core cool 100", which is our core blue. Delete the combo class and see what other options are available.

This is a rich text field, but you can use something else

Rich text fields are easy to use because you can insert headings, paragraphs, blockquotes, figures, images, and figure captions within them, without having to add new elements.

If you need more control over your text, you can replace this rich text element with headings, paragraphs, etc.

How About Two Columns of Text with a Centered Image?

This example is contained within a white background, but see below for more options. Be sure to select and copy the parent Huge Vertical Margin element. The first thing retailers must do is break the old habit of recording competitive intelligence in a manual, handwritten format. Taking notes by hand is notoriously tedious, and organizing notes from hundreds (if not thousands) of stores is a nightmare.

Thankfully, there are a variety of tools available to effectively capture data in a timely, sensible manner. Store managers can leverage flexible mobile apps to enter data into a centralized system, take photos of products, and automate reporting. Online platforms can break down collected photos to extract pricing information, shelf positioning, packaging changes, display execution, and a whole host of other inputs.

With a little upfront work, retailers can create a system that takes the heavy lifting (and room for error) off the store manager. Optimal technology helps automate existing processes to save time and ensure the return of legitimate data, empowering employees who take advantage of all the tech has to offer.

You Might Prefer Text on Left and Image on Right

No problem. This is easy with neat components. Don't thank me just yet, as there's probably a bug somewhere that I didn't notice.

Be sure to select and copy the parent Huge Vertical Margin element. There are a variety of tools available to effectively capture data in a timely, sensible manner. Store managers can leverage flexible mobile apps to enter data into a centralized system, take photos of products, and automate reporting.

Online platforms can break down collected photos to extract pricing information, shelf positioning, packaging changes, display execution, and a whole host of other inputs.

With a little upfront work, retailers can create a system that takes the heavy lifting (and room for error) off the store manager. Optimal technology helps automate existing processes to save time and ensure the return of legitimate data, empowering employees who take advantage of all the tech has to offer.

What You Really Want, Though, is Text on the Right

Easy peasy, lemon squeezy. Don't thank me just yet, as there's probably another bug somewhere that I still didn't notice.

Be sure to select and copy the parent Huge Vertical Margin element. There are a variety of tools available to effectively capture data in a timely, sensible manner. Store managers can leverage flexible mobile apps to enter data into a centralized system, take photos of products, and automate reporting.

Online platforms can break down collected photos to extract pricing information, shelf positioning, packaging changes, display execution, and a whole host of other inputs.

With a little upfront work, retailers can create a system that takes the heavy lifting (and room for error) off the store manager. Optimal technology helps automate existing processes to save time and ensure the return of legitimate data, empowering employees who take advantage of all the tech has to offer.

Sometimes Blue Is Best

Add some punch with light text on a blue background. Select and copy the parent Huge Bottom Padding element to ensure you get the spacing on the bottom.

You can adjust the space as needed by replacing the "Huge Bottom Padding" class with something else, like "Huge Vertical Margin". Best of luck, and enjoy your new blue box!

The best way to size the image below is to set the width specifically (if the image is too large), or leave the width empty if the image does not need resizing. You can also leave the image out entirely and rely on your thick columns of text to amuse and enlighten your readers.

If you don't love the topo pattern at the bottom, select it and press delete.

Blue is Even Better Dark, without 2 Columns of Text

Sometimes two columns of text is difficult or confusing to read. If you have a nice vertical image, you can choose this blue box for a better outcome.

Select and copy the parent "Huge Bottom Padding" element to ensure you get the spacing on the bottom.

You can adjust the space as needed by replacing the "Huge Bottom Padding" class with something else, like "Huge Vertical Margin". Best of luck, and enjoy your new blue box!

As If Things Couldn’t Get Any Better—Text on the Right

Sometimes two columns of text is difficult or confusing to read. If you have a nice vertical image, you can choose this blue box for a better outcome.

Select and copy the parent "Huge Bottom Padding" element to ensure you get the spacing on the bottom.

You can adjust the space as needed by replacing the "Huge Bottom Padding" class with something else, like "Huge Vertical Margin". Best of luck, and enjoy your new blue box!

Because We Can: Purple Backgrounds

There are even more colors beyond the crazy ones you've seen so far—collect all 6! If you need new ones, ask Ryan and he'll oblige. Because what your next premium content piece needs is a splash of orange, red, green, and gold with highly contrasting typeface colors. No one ever accused us of being modest.

A Blue Box On Its Own—With Gold Text

Sometimes you need a blue box all on its own. You know, because it's so visually powerful. This particular box also has a small drop shadow on it, so it doesn't look as flat on the page.

This particular blue box has an image in the bottom right, but you can position an image anywhere by placing it inside of a div with an alignment class.

Since this is a rich text field, you can't create different colors of text, but you can have bold text and include some quotes like this:

The reward for work well done is the opportunity to do more.

There are a few ways to add an image. The easiest is to add one to this rich text field, then size and position it using native Webflow controls. This will put the image within the column so there is no negative space.

Another option is to add an image and position it absolutely or—as in this example—within a div block that has an alignment class on it. The disadvantage of this approach is that you'll have a large negative space on one side.

An example of an image in the bottom right corner

This guy might not work as expected for all images, but it's a good starting point. By implementing GoSpotCheck, reps can have visibility into both personal and peer performance in an easy, intuitive dashboard. A granular level of visibility, combined with gamified goaling and attainment, will help further engagement and motivation. Reps can regularly examine the dashboard to confirm their activity is correctly documented.

This virtuous cycle, when associated with goals tied to specific behaviors, will drive ideal results that contribute to a business’s bottom line. But in order to do so, beer, wine, and spirits suppliers and distributors must provide a real-time, accessible view into both individual and peer data.

You Can Include This Neat Text Area with Vertical Wind Ornament

This is a great way to add some visual interest to your page. Simply select and copy the parent Huge Vertical Margin element and drop into your template. You can drag the wind ornament's Width 480 container above this rich text field if you want the wind ornament on the left side instead.

01.Lastly, Some Helpful Components

I bet you didn't know you have multiple paragraph sizes to play with. This is the largest style and is great for introducing a page or section. Use sparingly, because no one likes being yelled at.

This here is our standard (or large) paragraph. It doesn't have a class because it inherits the default styles for all paragraphs. You can adjust the color by adding special "Text" classes, but you usually don't need to do this.

The smallest paragraph you're likely to ever use is this one, the medium size. Note that as the paragraphs get smaller, the maximum line lengths also decrease. This is to aid in legibility, because the ideal line length is around 75-80 characters.

It can be tricky to center align paragraphs, since they have max widths. Simply select and copy the parent element of this paragraph, which is Text Center, and paste it where you need.

Text defaults to left alignment, but you can give a simple class to any paragraph to align its contents to the right. Typically, this is for quote bylines.

Lastly, sometimes you want to add some emphasis to text without resorting to the heavy bold (that will eventually have a background color).

Schedule Your Live Demo Today

Take 30 minutes with our sales team to see GoSpotCheck in action and learn how it can power your business.

Schedule a Demo

More Resources

Read our case studies or white papers to learn more about how GoSpotCheck enables field teams to optimize for effective data collection and reporting.

Case studies

A library of case studies with real-world examples of how our customers leverage GoSpotCheck.

Read on ›

White papers

Our extensive library of white papers has information and guidance tailored to your industry.

Start exploring ›