How to Customize a Website with Startup Framework

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.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

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.

Newsletter

10 Comments
  1. Ivan Lopez Apr 14, 4:38 pm

    Damn you David East! You are just too damn good. :) Thanks for another awesome round of vids!

    Reply
    +6
  2. Sergio Apr 14, 7:53 pm

    Thanks a lot! Great tutorials and great UI framework!

    Reply
    +3
  3. struktr Apr 15, 7:19 am

    I would love to see some sort of drop-menu or mega-menu implemented with the startup framework

    Reply
    +1
  4. Heesook Apr 25, 8:56 am

    David, for header-1, how would you change the first image? I see a huge boat. I want to change it to something else. I followed your tutorial and came up with this code.

    .header-1-sub {
    .background {
    background-image: url(“../../../common-files/img/something.jpg”)
    }
    }

    and it won’t change…any idea? I think it has to do with .header-1-sub…not sure.

    Reply
    +2
    • pointofg May 10, 8:20 pm

      I have the same problem with all the components. No matter what changes I make on .less file, it not affect the website design at all… the .less file seems to be not connected with the structure (that I downloaded directly from the generator).

      Any help?

      Thanks in advice!

      Reply
      +1
  5. Thomas Apr 25, 11:29 am

    Great tutorials!

    Does anybody know if there’s an ‘autoplay’ option for the slider?
    Can’t find anything about this.

    Reply
    0
  6. robert olesen May 9, 7:23 am

    Could you show how to use startup framework with a fixed navigation ribbon at the top so that when the user scrolls the navigation ribbon is always at the top of the screen?

    Reply
    +4
  7. Ariel Iván Ruiz Mateos Dec 18, 3:02 am

    Hi! startup is amazing, but I would like to create dropdown menu, it is possible???

    thanks!!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters