{"id":8615,"date":"2016-12-16T15:38:57","date_gmt":"2016-12-16T22:38:57","guid":{"rendered":"https:\/\/www.yola.com\/blog\/?p=8615"},"modified":"2022-08-08T02:44:38","modified_gmt":"2022-08-08T09:44:38","slug":"custom-panel-widget-the-secrets-behind-spacing","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/custom-panel-widget-the-secrets-behind-spacing\/","title":{"rendered":"Custom Panel Widget: The secrets behind spacing"},"content":{"rendered":"

The Yola Custom Panel Widget is an incredibly powerful tool. With this flexible widget alone, you’re able to build anything from a custom footer<\/a>, an image with text overlay, or even a bar to span the width of your page.<\/p>\n

\"Custom-panel-widget-example\"

Bar built with Custom Panel Widget<\/p><\/div>\n

But in order to use the Custom Panel effectively, you need to know the secrets behind spacing. Look no further. By the end of this post, you’ll be a Custom Panel pro.<\/p>\n

Margin<\/strong><\/h2>\n

Margin in web design is the amount of space that separates the widget you’re editing from any other widget on the page. For example, in the screenshot below, we’ve added 5 rem units (a unit of measurement used in responsive web design) to the top and bottom of the widget:<\/p>\n

\"Margin<\/a>And in turn, we have 5 rem units of space between the Custom Panel and the other elements on the page:<\/p>\n


\n\"Margin<\/a><\/p>\n

Pro tip:<\/strong> If you want your Custom Panel to run the entire width of your page, your body padding in Style Designer must be 0 rem units on the right and left.<\/p>\n

\"body<\/p>\n

Padding<\/strong><\/h2>\n

While margin refers to the space around<\/i> the widget, padding refers to the space within<\/em> the the widget. For example, below you will see we’ve added 9 rem units to the top of our Custom Panel, 5 to the right, 5 to the bottom, and 5 to the left.<\/p>\n

\"Padding-Settings\"<\/p>\n

This keeps our text from touching the borders of our panel.<\/p>\n

\"Padding\"<\/p>\n

Pro tip:<\/strong> The extra spacing within the Custom Panel above aligning the text to the left-hand side was created by adding a Column Divider Widget within the Custom Panel:<\/p>\n

\"column-divider-widget\"<\/p>\n

Content Width<\/strong><\/h2>\n

Last but not least, content width. Content width allows you to decide how much of your Custom Panel you’d like your content to use.<\/p>\n

For example, here is a website where content width is set to 100%, and the text spans the entire screen:<\/p>\n

\"content<\/p>\n

\"No-content-width\"<\/p>\n

And here is the same site with the content width set to 1200 px units and the text is limited to a contained area:<\/p>\n

\"content-width-settings-1200-px\"<\/p>\n

\"content-width-1200-px\"<\/p>\n

Pro tip:<\/strong> It’s always a good idea to add at least 1 rem unit of padding to the right and left of your Custom Panel when using content width. This allows for space to be added when viewing your site on a mobile device.<\/p>\n

\"content-padding-content-width\"

Padding on left, no padding on right<\/p><\/div>\n

As you can see, the design possibilities with the Custom Panel Widget are endless. What have you done with the Custom Panel on your site? Let us know in the comments below!<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The Yola Custom Panel Widget is an incredibly powerful tool. With this flexible widget alone, you’re able to build anything from a custom footer, an image with text overlay, or even a bar to span the width of your page. But in order to use the Custom Panel effectively, you need to know the secrets behind… Read More »Custom Panel Widget: The secrets behind spacing<\/span><\/a><\/p>\n","protected":false},"author":24,"featured_media":8967,"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":"[\"title\",\"meta\",\"content\",\"tags\",\"comments\"]","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":[1106,1102,622,1105,1103,1104,90],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/8615"}],"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\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=8615"}],"version-history":[{"count":8,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/8615\/revisions"}],"predecessor-version":[{"id":8975,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/8615\/revisions\/8975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media\/8967"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=8615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=8615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=8615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}