The Design Lab is an easy to use tool to create a custom, responsive design for your blog, through a graphical interface. Responsive designs created with the Design Lab will adjust to display perfectly on any size device - tablet, phone, large monitor, and more!
Why use the Design Lab?
The Design Lab provides you with a graphical interface to make changes to dozens of design elements without the need to know any code! Additionally, the Design Lab gives you features not available with the Classic Theme Builder, including:
- More fonts to choose from with the Google Web Fonts gallery.
- Upload your own background image, or choose one of many patterns available.
- Icon and Text options for Navigation Bar social media links.
The Design Lab or Classic Theme Builder are recommended if you are not comfortable with HTML, CSS, and the template tag structure. Of course, if you want complete control over your design and are familiar with coding, you can create a new design from scratch by selecting an Advanced Template Set.
Select Design Lab
To create a new design using the Design Lab, select a blog from the Blogs menu, click to the Design tab, and click the Choose A Theme button.
Select the Design Lab (Responsive) category, select one of the themes, and click the Choose button. All the themes are fully customizable and are only starting points for your design. Learn more.
Design Lab Features
Banner
To add a custom banner, go to Design > Banner, click the Choose File or Browse button, select the image file on your computer, click Open, and preview the new banner.
If you like the new banner, click Save Changes to update your blog.
Additional Banner Options
- If Span image the width of the blog area is selected, the banner will appear over the column containers.
- If Span image the full width of the browser is selected, the banner will display the full width of the browser window regardless of window size.
- Recommended Banner Image Size: 1140 pixels wide by 250 pixels high. Smaller images will be tiled.
- Supported Banner Image File Types: JPEG or JPG, PNG, GIF.
- With no banner uploaded, the Blog Name and Description set at Settings > Basics will display.
- More options for the banner are available in the Style settings. Learn more.
Style
The Style settings allow you to choose the features for the design elements, including fonts and colors. See the article on Design Lab Style Settings for details on each option.
At Design > Style, you'll see a Preview of your design as you make adjustments to the elements in the menu on the right.
If you are not sure where to start, click the View Collections banner to scroll through sets of color combinations and fonts. After choosing a collection, click the Return to builder to make changes to the collection.
Fonts
Open the Fonts menu to select an Active font to apply to a design element. With the Active font indicated, click on the design element in the Preview to apply the font. You can also open the element in the menu and click Apply. For detailed information on fonts, see the article on applying fonts with the Design Lab.
If you don't see a font you like among the available options, you can Import a different font from the Google Web Font Gallery. Learn more.
Banner
Banner options will depend on whether or not a custom banner has been added.
- Title: Select a color, size, and font for the blog title.
- Description: Select a color, size, and font for the blog description. You can add, edit, or delete the blog title and description at Settings > Basics.
- Background: Select a background color for the banner if a custom banner image has not been added.
- Top Strip: Choose the color of the strip above the Navigation Bar when a custom banner has been added. To "hide" the strip, select a color which matches the Navigation Bar background color.
- Show Banner: Opt to not show a banner.
Navigation
Display Types
- None: Navigation Bar does not display.
- Icons: The navigation links will display as a pop-up menu with social media icons.
- Text: The navigation links will display as text links which can be aligned left, right, or center.
Additional options include: Link color and font, background color, display position (above or below banner), display blog name.
Posts
Select the color and font for the Title, Date, Post/Page Text, and Footer. Also, choose a color for the Background and Links added within the post/page body.
Sidebar
Select a color and font for the sidebar Header, Link, and Text. Also, choose a color for the sidebar Background and set alignment.
With Fill column height set to Yes, the sidebar background color extends the height of the main content column. If the option is set to No, the background color will stop after the last sidebar module.
Footer
Select a color and font for the Blog Footer content. Also, choose a background color or click the X next to Background to have the footer display on the blog background.
With Link to the top of page set to Yes, an arrow icon will be included on the right of the Blog Footer which will allow readers to jump to the top of the page. If the option is set to Yes, you'll have the option to align the footer content left, right, or center.
Background
Select a solid background, upload your own image, or choose from one of the available overlays.
From the Patterns menu, you can opt to Choose an overlay or Upload a custom image. Overlays work best when a dark color is selected for the Page Background. To upload your custom image, select Upload a custom image, click the Browse or Choose File button, select the image from your computer, and click Open.
With Round corners set to Yes, the main content, sidebar, and footer modules will have rounded corners. If the option is set to No, the corners will be square.
With Collapse margins set to Yes, the main content and sidebar columns will be combined to use the same background. If the option is set to No, the main content and sidebar columns will be separated by padding displaying the Page Background color between the columns.
Custom CSS can be used to make additional design changes.
Layouts
Five popular layouts are available with the Design Lab, including one, two, and three column layouts.
The Two Column Right layout is recommended for quicker loading of webpages.
Custom CSS
Using the Custom CSS feature, you can use CSS to make changes to the design beyond the options available within the Style settings. The Custom CSS feature is available with the Unlimited and higher plans.
Please keep in mind the Design Lab themes use a different structure than other themes, and the CSS tips in the Knowledge Base may not apply to designs created with the Design Lab.
Do you want to make a change but are unsure of the CSS? Reach out to the Typepad team with your request by opening ticket at Help > New Ticket.
Submit a Theme
After completing the look of your blog with the Design Lab, you have the option to submit your design for inclusion in the Typepad community design gallery. Click the For Designers button and complete the form to submit your design for review. The submission will be tracked via a help ticket, and you can track the status of your request at Help > Past Tickets. Please allow 3-4 weeks for a response to your submission.
Updated 04 January 2019
Also check out these other articles:
- Details on changing the font colors can be found in the Style settings article.
- Looking to edit a design created with the Classic Theme Builder? Check out the article on using the Theme Builder.
- For tips on making additional design changes with CSS, see the Custom CSS article.