February 16, 2015

Responsive Design Lab

The Nimble 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 Nimble will adjust to display perfectly on any size device - tablet, phone, large monitor, and more!

This feature is in Beta. Join the Typepad Beta team to check out all the new features at Account > Summary.

Why use the Nimble Design Lab?

The Nimble 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.
  • Coming soon! Drag-and-drop placement of blog Title and Description in the banner.
  • Icon and Text options for Navigation Bar social media links.

The Nimble 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 Nimble 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.

Choose Banner File

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 Nimble Design Lab.

Fonts Menu

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.

Post Style

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

Three popular layouts are available with the Nimble theme as of March 2015. Additional layouts, including three column layouts, will be added soon.

Choose Banner File

  • 1 Column: With a one column layout, the sidebar modules appear below the main content column.
  • 2 Column Right: The two column right layout places the sidebar modules to the right of the main content column. Recommended for quicker loading of webpages.
  • 2 Column Left: The two column left layout places the sidebar modules to the left of the main content column. The left sidebar will load before the posts or page in the main content column.

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 Nimble theme uses a different structure than other themes, and the CSS tips in the Knowledge Base may not apply to designs created with the Nimble Design Lab. We'll be adding tips and tricks for customizing designs created based on the Nimble theme with CSS.

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 Nimble 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.

Not quite what you are looking for? Check out these other articles:

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services