{"id":7285,"date":"2014-05-02T16:55:03","date_gmt":"2014-05-02T23:55:03","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=7285"},"modified":"2014-05-02T23:02:08","modified_gmt":"2014-05-03T06:02:08","slug":"5-minute-website-fixes-creating-the-flat-look-with-the-custom-panel-widget","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minute-website-fixes-creating-the-flat-look-with-the-custom-panel-widget\/","title":{"rendered":"5-minute website fixes: Creating the “Flat” look with the Custom Panel Widget"},"content":{"rendered":"

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.<\/p>\n

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

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<\/a>. After all, if you care about the appearance of your business, you probably care about the quality of your product as well.<\/p>\n

So for your revamp, what design do you plan on going for? Our suggestion \u2013 make it Flat<\/em>.<\/em><\/p>\n

Flat web design<\/a> 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<\/a> to check out a variety of flat websites.<\/p>\n

\"Example<\/a>

Example of a flat design created on Yola<\/p><\/div>\n

 <\/p>\n

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.<\/p>\n

To start, let’s adjust our canvas.<\/p>\n

\n

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,\u00a0 clicking “Content Background” and selecting the color of your choice.<\/p>\n

 <\/p>\n

\"Selecting<\/p>\n

 <\/p>\n

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 \u201cSave.\u201d<\/p>\n

 <\/p>\n

\"Removing<\/p>\n

 <\/p>\n

Next, drag and drop the Custom Panel Widget onto your site.<\/p>\n

\"Screen<\/p>\n<\/div>\n

 <\/p>\n

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.<\/p>\n

 <\/p>\n

\"Background<\/p>\n

 <\/p>\n

Next, remove the border from your widget in the “Border” tab.<\/p>\n

 <\/p>\n

\"Removing<\/p>\n

 <\/p>\n

Once done, hop on over to the “Spacing” tab and remove all of the padding and margin, then hit “Save.”<\/p>\n

 <\/p>\n

\"Changing<\/p>\n

 <\/p>\n

Next, insert a Column Divider Widget into your Custom Panel Widget to magically turn one column into two.<\/p>\n

 <\/p>\n

\"Using<\/p>\n

 <\/p>\n

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.<\/p>\n

\"Moving<\/p>\n

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<\/a> to kick it up a notch!<\/p>\n

 <\/p>\n

\"Add<\/p>\n

 <\/p>\n

Then, adjust your margin of your Text Widget to center your text in the middle of your column.<\/p>\n

 <\/p>\n

\"Add<\/p>\n

 <\/p>\n

Lastly, preview your hard work!<\/p>\n

 <\/p>\n

\"Previewing<\/p>\n

 <\/p>\n

Now, repeat the process throughout your site, playing around with single columns, double columns, different margins and more. The options are nearly endless!<\/p>\n","protected":false},"excerpt":{"rendered":"

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… Read More »5-minute website fixes: Creating the “Flat” look with the Custom Panel Widget<\/span><\/a><\/p>\n","protected":false},"author":456,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[130],"tags":[615,744,599,297],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7285"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/456"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=7285"}],"version-history":[{"count":10,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7285\/revisions"}],"predecessor-version":[{"id":7311,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7285\/revisions\/7311"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=7285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=7285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=7285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}