2 minutes

How to Customize a Website with Startup Framework

11 Comments

Now that you have built your first website using Designmodo’s Startup Framework, you probably want to further customize your site. In this series of four videos, we will take you step-by-step through the customization process.

Each of the videos are easy to follow and can help you fully customize your site in a matter of minutes using the fully responsive Startup Framework. Each tutorial explains a specific customization and shows you how the changes would render of different devices.

Related videos:

Customization

Video 1 takes you through customizing the header and the basic website framework. With just a few simple tweaks in the HTML, you can convert the framework template to a custom site. The 6-minute video walks you through changing the header, text elements and background image.

Video 2 takes you in depth for customization of images. In addition to setting a new image, you can also change the opacity and other settings including the size and scale of the image. You can also customize the way an image looks on the site, as either a smaller image that works with a background or a full-size image that fills the screen. The 6-minute video walks you through setting a new background or main image, image settings and setting styles for hover and navigation links.

Video 3 teaches you how to create custom styles for the content section of the website using Startup Framework. Customization options include changes to the color palette, padding styles or icon styles. The 6-minute video walks you through changes to content blocks within the framework. Using CSS styling, background, fonts, colors and location of elements can be moved on the site.

Video 4 explains how to customize the website footer and even add parallax effects to your custom-built site using Startup Framework. (It’s easier than you might think!) The tutorial also helps you understand and troubleshoot some common issues. Further, you will learn how to customize typography options using Adobe Typekit for an even more custom website design. The 8-minute video walks you through adding some fancier “tricks” to your custom website, including trendy parallax scrolling and custom fonts.

One of the great things about Startup Framework is that every piece of the kit can be customized to meet your website needs. With drag and drop components and easy editing, you can have a custom-built site online in no time. This series of tutorials is easy to follow but are designed for users who have some working knowledge of HTML and coding.

Before

Original

After (Custom + Parallax)

Custom

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.

Posts by David East

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
Nice, I love cookies!