Markup Guidelines
 

Headings should be logically structured on a page. A page starts with the H1 heading, followed by an H2 heading and — should you need another sub-section — it can be followed by an H3 heading. If you need more sub-sections, you can even add H4-H6 subheadings.

Don't skip a level in the hierarchy. For example, don't go from an H1 heading to an H3 heading. There should be an H2 heading in between.

H1 heading length

You should avoid making the H1 heading too long. If you do, there's a big chance the H1 heading won't be readable for your visitors, which hurts their user experience. We recommend sticking to a maximum length of 60 characters, similar to the title attribute. As for the minimum length, it needs to be long enough to make sense. In our experience, sticking to at least 4 characters helps you with this. Above all: make sure the H1 heading makes sense for your visitors.

Multiple H1 headings? Not even in HTML5.

When the HTML5 specification was first introduced, support for multiple H1 headings per page (each in their own section-element) was included. However, since browsers didn't adopt this recommendation, support for this was subsequently dropped when the HTML5.1 standard was published. For more information, see this W3C thread.

Other uses for the H1 heading

If you haven't defined a page title, or if search engines didn't find your title to be relevant enough, they may show the page's H1 heading as the title in the page's search engine result – its snippet.

 

Style Guide
 
HTML Elements

h1: The quick brown fox jumps over the lazy dog

h2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H4: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog
H6: The quick brown fox jumps over the lazy dog

 

This is an example paragraph tag.

 

 

This is how links will appear.
You can insert custom HTML using an HTML Block.
Buttons
Kitchen Sink
 
Pre BuILT
IT'S NOT
ABOUT US
IT'S ABOUT YOU
Our purpose is to make your life better.
Yes, that might sound like BS marketing jargon, but it’s truly the outcome of partnering with Layer One. We help extract and define your goals, clarifying and honing in on your key objectives. Then, with expert industry-specific coaching and development, we prioritize high-impact, high-return initiatives to deliver meaningful results throughout our engagement.
To ensure your success we:
Empower Image
Empower
  • Knowledge Building
  • Drive business outcomes
  • Illuminate, recommend, and advise
  • Continuous emerging education
  • Leverage insights from past engagements
Collaborate Image
COLLABORATE
  • Applied Learning
  • Understand your goals and culture
  • Expeditious, education communication
  • Adaptable to changing conditions
  • Strategic planning and guided road mapping
Deliver Image
DELIVER
  • Strategic Business Initiatives + Responsive Improvements
  • Expertly crafted custom software
  • Individually tailored solutions
  • Tangible results
With our previous provider, we felt like we were just one company in a pool of other clients. We weren’t getting any attention or progress at the level that we wanted. That isn’t the case with Layer One, though. They’re always available and giving us the same amount of focus and attention that they give to all of their clients.
Staci Otradovec
eCommerce Manager, First Supply
14 Focus Points
Search
is
business
critical
75%

of B2B buyers use site search to find products.

-Forrester, "The State of B2B Commerce: How to Win in the Digital Age“ (2019)

Click below to see how to test search on your site!
Test your search
 PW Dashboard Monitor 560
PRODUCT WORKBENCH

Product Workbench is a digital workbench equipped with tools for seeing, managing, and improving the gaps in your eCommerce systems.

Product Workbench sits in and around the technologies and data that impact your online shoppers. It gives unprecedented proactive awareness, the ability to move and enrich data, and so much more!

See, manage, and improve your eComm system Product Workbench
  • LOG SENTINEL
  • CHANNEL ANALYTICS
  • CUSTOM JOBS
  • PRODUCT DATA AGGREGATOR
  • SITE SEARCH TOOLS
Log Sentinel Screen
PW Ecomm System
Finally, there's one place to see and interact with all areas of your eCommerce System. Product Workbench sits in and around the technologies and data that impact your online shoppers.

It was built specifically for wholesalers to solve the data needs and headaches of unifying data across multiple platforms. Product Workbench gives unprecedented proactive awareness, the ability to move and enrich data, and so much more!

Plan Image
Plan
Week by week to accomplish the most important search objectives. Implement process for evaluating and improving selected keyterm results.
Chart Image
Metrics
Customize the key search indicators that might include add to cart, engagment after search, and product click though.
 ?? PT Image

"We are the Personal Trainer for your site's search.

You don’t just show up at the gym and hope for results—you get someone who builds a plan, teaches proper form, tracks progress, and pushes you to improve. We guide, coach, and hold your team accountable—so your search gets stronger and delivers real results."

Chad Albrecht
CEO, Layer One
Image TEXT ROWS
 ?? Searchintent

This is an Image Text Banner. 

  • Image First: True
  • Image Fit: Stretch
  • Angled Divider: True
  • Background Color: L1 Brand Orange
  • Remove Container: False

This is an Image Text Banner. 

  • Image First: False
  • Image Fit: Stretch
  • Angled Divider: True
  • Background Color: Black
  • Remove Container: False
 ?? Searchintent
 ?? Searchintent

This is an Image Text Banner. 

  • Image First: False
  • Image Fit: Stretch
  • Angled Divider: True
  • Background Color: Black
  • Remove Container: True

This is an Image Text Banner. 

  • Image First: False
  • Image Fit: Original
  • Angled Divider: False
  • Background Color: Dark Gray
  • Remove Container: False
 ?? LOGO White (1)
 ?? Searchintent

This is an Image Text Banner. 

  • Image First: False
  • Image Fit: Original
  • Angled Divider: False
  • Background Color: Dark Gray
  • Remove Container: False
SAVE FOR POSTERITY
 

Adrian Styles

Black Normal

Black Medium

Black Large

Black X-Large

Small

Normal

Medium

Large

X-Large

  • SEARCH SUCKS
  • SEARCH RESULTS AREN'T RELEVANT
  • THE ONLINE EXPERIENCE HURTS OUR BRAND
  • PRODUCT NUMBERS DON'T RETURN THE PRODUCT
  • BUYING EVERYTHING I NEED TAKES TOO LONG
  • I HAVE TO SEARCH WITH THE EXACT WORDING
  • PROMOS AREN'T SHOWN IN SEARCH
  • THE ONLINE EXPERIENCE HURTS OUR BRAND
Styles & Classes
This is using the subheading class in the RTE.

 

This is using the article heading class in the RTE.

 

This is using the Centered Section Title class in the RTE.

 

This is using the Force Centered Block class in the RTE.
  • This is a bulleted list item
  • This has the class list-styled-disc applied
  • This also has the Force Full Width Block applied

 

  1. This is a numbered list item
  2. This list has the class styled-list-numbered applied
  3. This list also has the Force Full Width Block applied

 

This is using the Small Text class in the RTE.

This is using the Paragraph class in the RTE.

This is using the Large Text class in the RTE.

You can combine RTE classes and Tailwind styles to do just about anything you want!

I combined Benton Sans Wide, Uppercase, Text Small, and Force Centered Block.

 

This is a half width block within a responsive flex row.
This is a quarter width block within a responsive flex row.
This is a quarter width block within a responsive flex row.

This is an example of a quote block. This is created with Rich Text.

Jenna Buckner
Software Developer, Layer One Media
$ Layer One will
innovate on| customize| optimize| implement|
the best websites
Reduce
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
Reuse
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
Recycle
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.