Theme Design Guidelines

When you create a Weebly theme, your design needs to support the functionality found on the pages in the different areas of a Weebly site, as well support the elements often used on a site. For example, blog pages require certain functionality and elements, while pages that display products require something different. Gallery elements that display multiple images need to have specific styling available. Because users can easily switch between themes, you need to make sure that you follow these guidelines and requirements to ensure switching between themes is a smooth transition.

In this topic:

Page Guidelines

Weebly sites have different areas, and each area uses a special type of page. These areas include:

Layout Types

Weebly themes support different header layouts, allowing users to pick from a number of different looks for the different pages in their site. You'll need to provide HTML templates and styling for at least the most important of these:

Tall Header: Uses a background image

Short Header: Uses a smaller background image

No Header: Header/banner is removed

Landing Page: Title, sub-title/text and button (image)

You'll likely want to create templates for these layouts as well. The more flexibility that you provide, the more popular your theme is likely to become.

Title Page: Title, sub-title/text (image)

Splash Page: Full screen image content wrapper

Within the heading area, if you want your theme to allow social icons, a phone number, or a search box, you may want to add these as options that the user can turn on and off. Your design should accommodate for this ability. Also within the heading, you can add an area that allows the user to change the background or layout without having to touch the code.

Within the body, you can add a section and the user can then change the background and layout and move or copy the section without the need for code. Both the header area and sections provide flexible, efficient designs that are easily modified to suit each user's needs.

Element Guidelines

Weebly elements are what the user drags and drops onto the page to create HTML components. Often, these elements present the user with choices about how they want that element to display. For example, line dividers can have different widths. Forms can have different input elements. Your theme needs to account for each of these settings.

Display Size

Weebly websites are viewed on all sorts of devices - from phones to desktops. You need to make sure your theme looks great on all of them. We recommend designing for the following display sizes:

Less than 768 px: Mobile

768 - 992 px: Tablet

992-1200 px: Desktop

Greater than 1200 px: WidescreenDesktop

If your theme is responsive, you should also style for these respective breakpoints. Weebly normally uses the following:

Breakpoint 1: 1024 px (widescreen screens)

Breakpoint 2: 992 px

Breakpoint 3: 767 px

Breakpoint 4: 480 px (smaller mobile screens)

Color Palettes

Colors are very important in determining the look, feel, and versatility of your theme. You can create different color versions of your theme. The user can decide which to use on the Design tab. Only the color palette changes - the rest of the theme remains the same. These colors can apply to anything: navigation background, text colors, button colors, etc.

There's no limit to how much customization a palette can offer, but in order to function properly, customization targets should be consistent across all palettes. That is, when a customer changes the color of the theme, the same items should always change color.

Check out our resources page for sites that can help you with deciding on color palettes for your theme.

Images

When creating a theme, images often do the best job of selling your design. Because of this, you want to pick good ones. Make sure you understand the permission that comes with the photo(s) you decide to use. Our resources page lists a number of sites that offer free images.

Fonts

While Weebly users can use the Design tab to change fonts for their site, you should still spend some time designating a few font choices. You can select as many base and accent fonts as your design requires, but we do recommend that you keep your fonts choices to a maximum of 3. Most text elements on a Weebly page will be some variation of an H2, paragraph, list, link, or a block quote.

Similar to images, fonts have their own set of permissions for distributing to third parties. For this reason, we strongly suggest using ​Google Fonts​ for your themes, as these are available to redistribute.

Browser Support

Weebly sites and the editor support Internet Explorer 10 and later, as well as all current versions of self-updating browsers. Make sure to test accordingly, both in the editor and in a published site.