Getting Started

Thanks for purchasing Panels! This guide covers the basic usage of the template as well as an overview of the template structure. If you require assistance please don't hesitate to get in touch via the Template Support Page.

Blank Starter Template

Inside the "Template" directory, you'll find a page titles "Blank Starter Template". This template includes a navigation bar, a footer, and a back to top button and is the ideal starting point for your pages.

1. Duplicate the Blank Starter Page template:
Note: Be sure to change the Parent Folder to the desired location.
2. Copy and paste blocks to the newly created page:

Copy Sections from any page, then paste them into the body of your newly created page. Also you may copy panels from any of the panels pages listed under the Panels dropdown on the Navigation menu.

Style Guide

The Style Guide page demonstrates the display of all base elements found in Panels and is a good place to start familiarising yourself with the template.

Alongside the element demonstration you'll find instructions on how to correctly use the associated utility classes.

Editing Typography Styles

Setting header styles

Instead of using classes, you must click the header then in the Selector drop-down where you would type in the class name, select “All H1 Headings” then make your change.  Same goes for all base heading elements. Click the element, choose “All heading 5”, then any changes you make to that will be reflected across all in the site.

Setting Body Text and paragraph styles

Follow the same procedure for body text and paragraphs - which are specified on the Body element.  Select the body element, and from the Selector dropdown, choose “Body (All Pages)” and change the typography settings for that element.  These styles then flow through to the paragraphs and other generic text elements in the site.

Structure

General structure

Each section should have the class Section applied.  Each section should contain a div with class container as its first child.  To arrange panels, place a grid inside the container (see below) or for a full-width panel, place the a div with class Panel inside.

Grids

This template includes a number of pre-defined grids for arranging panels within.  

The most commonly used grids are:

  • Grid Halves: [----] [----]
  • Grid Thirds: [---] [---] [---]
  • Grid Two Thirds: [------] [---]
  • [Grid Two Thirds] [Reverse]:  [---] [------]

Grids are configured to collapse and stack when the screen width reaches the appropriate breakpoint.

Panels

Apply the class Panel to a div to give it a distinct background with rounded edges.

The Panel Body class provides padding from the surrounding panel and contains all content within the panel.  If an image is required at the head of the panel, place it outside the Panel Body.

Panel Body

The content inside the Panel Body is set to be split between the top and bottom.  This way, it is possible to place a button at the bottom of the panel while the text aligns to the top.  To achieve this layout, place two Divs within the Panel Body which will split your desired content between top and bottom.

Panel Height

Panels are designed to stretch and match the content on their surrounding grid.  Images are an element that creates this height, however, sometimes there is not enough height in the content to force the panel to stretch, so it may be necessary to add a height class and force the height of the grid.  Add the class Panel Height Large or Panel Height Medium to the containing grid to force the height and make the panels inside stretch.

Custom Code

Inside the Project Settings, in the Custom Code tab you'll notice some style code has been added to the head of each page:

Font Rendering Custom Code

This code is to ensure that the text rendering is smooth and consistent across all browsers. It does not require any action on your part.

For further information, please consult the Webflow documentation or reach out to us via the Template Support Page.

Saved Elements from Template

Modular & Reusable

Title Panels

Subtitle

Large Title

Common Questions

Not quite convinced?

Get in touch with us at
hello@panels.io
Is there a discount for annual billing?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Is the exported data portable among other apps?
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.
Is this suitable for a full team of people?
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.
Is private data shared with third parties or advertisers?
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Trial
Free
  • small check mark icon
    4 Projects
  • small check mark icon
    1 Concurrent User
  • small check mark icon
    Demo Staging
  • small check mark icon
    1GB Monthly Bandwidth
Start Now
Team
Value
$9
per user / per month
  • small check mark icon
    Unlimited Projects
  • small check mark icon
    5 Concurrent Users
  • small check mark icon
    Demo Staging
  • small check mark icon
    Unlimited Bandwidth
Start Now
Pro
$19
per user / per month
  • small check mark icon
    Unlimited Projects
  • small check mark icon
    Unlimited Concurrent Users
  • small check mark icon
    Full Hosting
  • small check mark icon
    Unlimited Bandwidth
Start Now
Newsletter
Get great insight from our expert team.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By signing up you agree to our Terms & Conditions
Coming June
Join now for early access.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By signing up you agree to our Terms & Conditions
150%
Average increase in sales for our customers.
* Add some qualifier text here
Metrics
  • 150%
    Average increase in sales
  • 2.45m
    Signups since October 2019
  • 48,000+
    Average downloads per month
Downloads
948,492+
Average downloads per month

Forgot Password?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Create an account.

Sign up and start creating immediately.
Already have an account?
Sign in here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Send us a message.

 Get our bi-weekly content updates.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.