Site Building Advice 9

Custom Panel Widget: The secrets behind spacing

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.

Custom-panel-widget-example

Bar built with Custom Panel Widget

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.

Margin

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:

Margin Settings in yolaAnd in turn, we have 5 rem units of space between the Custom Panel and the other elements on the page:


Margin within Yola

Pro tip: 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.

body padding in Yola

Padding

While margin refers to the space around the widget, padding refers to the space within 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.

Padding-Settings

This keeps our text from touching the borders of our panel.

Padding

Pro tip: 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:

column-divider-widget

Content Width

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.

For example, here is a website where content width is set to 100%, and the text spans the entire screen:

content width settings 100%

No-content-width

And here is the same site with the content width set to 1200 px units and the text is limited to a contained area:

content-width-settings-1200-px

content-width-1200-px

Pro tip: 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.

content-padding-content-width

Padding on left, no padding on right

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!

 

9 Responses to Custom Panel Widget: The secrets behind spacing

  1. Perfect Web Group says:

    Useful Post for All. Check my website as well, http://www.dubaiglass.net/

  2. Jane Johnson says:

    What is the matter with my Panel Widget?

  3. Social2017 says:

    this post is really like able for me, thanks for bringing it in front of us. for more details visit our web site
    https://projectsdeal.co.uk/coursework-writing-service.aspx

Leave a Reply

Your email address will not be published. Required fields are marked *