{"id":7242,"date":"2014-04-25T13:51:48","date_gmt":"2014-04-25T20:51:48","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=7242"},"modified":"2014-04-28T11:14:31","modified_gmt":"2014-04-28T18:14:31","slug":"5-minute-website-fixes-create-various-banner-sizes-with-the-custom-panel-widget","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minute-website-fixes-create-various-banner-sizes-with-the-custom-panel-widget\/","title":{"rendered":"5-minute website fixes: Create various banner sizes with the Custom Panel Widget"},"content":{"rendered":"

So, you\u2019ve firmly planted your feet in the Web-building world. You\u2019ve given your business a logo<\/a>, prioritized your site\u2019s content<\/a> and even

Style Designer<\/a> and its capabilities in customization. You know that uploading a banner image is a cinch, but your creativity is bursting at its seams.<\/p>\n

Here’s the sitch: you have a five-page website, and you\u2019d like to put a different banner image on each page. Your only problem \u2013 Style Designer prides itself on consistency, opting for one banner width per site, but your creative mind is begging for banner images in different sizes. How do you accomplish this?<\/p>\n

Three small words: Custom Panel Widgets.<\/p>\n

Getting your canvas ready<\/strong>
\nBefore we start dragging and dropping Custom Panel Widgets, let\u2019s first hop into Style Designer to lay the groundwork for our new custom banner images.<\/p>\n

In order for your Custom Panel Widget to act as a banner image, you will need to remove the Content Padding on each side allowing your Widget to extend the entire length of your content area. Once done, hit \u201cSave\u201d and let\u2019s get to building!<\/p>\n

\"\"
\nPutting your creativity on the page<\/strong>
\nNext up, drag and drop your Custom Panel widget to the top of your content area.<\/p>\n

\"Dragging
\nOnce your Custom Panel properties open, go ahead and click over to \u201cBackground\u201d to upload the image of your choice. Once you\u2019ve uploaded your image, choose whether you\u2019d like the background to repeat (this is good for patterns), and from which direction you\u2019d like your image to stem from.<\/p>\n

\"Adjusting
\nNext up, hop over to the \u201cBorder\u201d tab, and choose your border width, color or you can even remove it entirely.<\/p>\n

\"Adjusting
\nFinally, jump to the \u201cSpacing\u201d tab and remove your Margin from each side, allowing your panel to extend the entire width of your content area. If you plan on adding a text overlay, use the Padding to customize how much you\u2019d like from your text to the edge of your image.<\/p>\n

 <\/p>\n

\"Adjusting<\/p>\n

Once done, hit \u201cSave.\u201d<\/p>\n

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

\"Drag<\/p>\n

 <\/p>\n

If you wish to have a text overlay, go ahead and add that here, using creative headers<\/a> to your liking. If you don\u2019t care to have text, simple line breaks will suffice to make your image extend as far down the page as you\u2019d like.<\/p>\n

 <\/p>\n

\"Adding<\/p>\n

Once your banner suits your fancy, go ahead and repeat the process on the rest of your pages!<\/p>\n

\"Different<\/p>\n

\"Different<\/p>\n

 <\/p>\n

Keeping up with our 5-minute website fixes series? Which tips have you found most helpful?<\/p>\n","protected":false},"excerpt":{"rendered":"

So, you\u2019ve firmly planted your feet in the Web-building world. You\u2019ve given your business a logo, prioritized your site\u2019s content and even gave it a makeover to that of our newest Style, Skyline. It\u2019s plain to see you\u2019ve caught the site-building bug, and your next quest to conquer \u2013\u00a0 banner images. At this point you\u2019re… Read More5-minute website fixes: Create various banner sizes 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":[629,742,615,741],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7242"}],"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=7242"}],"version-history":[{"count":8,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7242\/revisions"}],"predecessor-version":[{"id":7259,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7242\/revisions\/7259"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=7242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=7242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=7242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}