Skip to content

5-minute website fixes: Creating the “Flat” look with the Custom Panel Widget

Keeping up with web design trends is like keeping up with the Joneses. You see your neighbor’s new car in the driveway, and all of the sudden you get the itch to give your perfectly fine, three-year-old car an upgrade to a newer model.

Similarly, you’re browsing the Web only to find your biggest competitor has remodeled their site to a more modern design. It hits you. Your own site is completely out-dated and see a revamp on the horizon.

Having a site that’s current with today’s trends shows that you care about the opinions of your visitors, and also does wonders for your credibility. After all, if you care about the appearance of your business, you probably care about the quality of your product as well.

So for your revamp, what design do you plan on going for? Our suggestion – make it Flat.

Flat web design is a hip, modern design style that can be defined in one word. Simple. It’s clear cut and one-dimensional, lacking borders or gradients. It’s not only easier for users to navigate, but it’s easy to design as well. Check out these examples to check out a variety of flat websites.

Example of a Flat site created on Yola

Example of a flat design created on Yola


So what tools do you use to make your website flat? Well, let us tell you! Today, we will be showcasing how to use the Custom Panel Widget create a flat block of color paired with an image, as show in the example above.

To start, let’s adjust our canvas.

To give your website the flat design, it’s a good idea to start with a plain colored background. You can do this by hopping into Style Designer while in Sitebuilder,  clicking “Content Background” and selecting the color of your choice.


Selecting your content background


In order for your new, flat design to spread across the width of your content area, you will need to remove its Content Padding. Once done, go ahead and hit “Save.”


Removing content padding


Next, drag and drop the Custom Panel Widget onto your site.

Screen Shot 2014-05-02 at 3.14.29 PM


Once done, the properties of your Custom Panel Widget will appear on your screen. This will be the colored portion of your block, so hop into the “Background” tab and select a color that will match your image, yet contrast with the background of your content.


Background of your custom panel widget


Next, remove the border from your widget in the “Border” tab.


Removing the border on your custom panel widget


Once done, hop on over to the “Spacing” tab and remove all of the padding and margin, then hit “Save.”


Changing the spacing on your custom panel widget


Next, insert a Column Divider Widget into your Custom Panel Widget to magically turn one column into two.


Using the column divider widget


Drag and drop your Picture Widget into the right column, and upload the picture of your choice. Then, drag the column in the Column Divider all the way to the right, nestling up right next to your image.

Moving the column in the column divider widget

Finally, drag and drop the text widget to the left column, and add in a bit a text. Feel free to make use of your various headers to kick it up a notch!


Add text to you Custom Panel Widget


Then, adjust your margin of your Text Widget to center your text in the middle of your column.


Add margin to your Text Widget


Lastly, preview your hard work!


Previewing your site on Yola


Now, repeat the process throughout your site, playing around with single columns, double columns, different margins and more. The options are nearly endless!

Leave a Reply