How to: Padding
C
Written by Chris
Updated over a week ago

What is padding?

Padding, also known as white space, is the empty space between and around individual elements of a page layout; these elements could be pieces of copy, images, cards, buttons, icons, etc. When used correctly, white space brings visual clarity and balance to a layout. Padding goes around all four sides of the content and you can target and change the padding for each side (just like a margin).

Why is padding important?

Padding allows us to define space inside an element. An effective use of white space is important to ensure focus, readability, hierarchy, and understanding. Without padding, good UI design would not be possible.

possible.jpg

How to use padding in Converdy 2.0?

Once inside your funnel, choose an element you want to apply padding to. For this tutorial I simply clicked on the Image element, as this is where I want to do my spacing.

Click on “Advanced”. This will open a necessary field for Padding and it is called “Wrapper”. One of the cool features is that you can hover over a field and it will highlight that particular field in the funnel editor. This way you will always know which field is referring to what.

Next up, click on the “Wrapper”, which will open a handful of options to edit your funnel. For the purpose of Padding, click on “Spacing”.

“Spacing” will open a “Padding" and “Margin” option. For the purposes of this tutorial, we will use the Padding section.

There are 3 different ways to edit your pixels:

👆🏼 Point your cursor on the wanted element and drag ( in this case the bottom page) until you reach the wanted spacing.

✌🏼 Simply click on the px number which will open a pop up window where you can choose a variety of generated pixels

🤟🏼 ..or slide your cursor down the pixel pop up until you reach your wanted pixel settings

Now that you've learned about padding, head over to your account and start designing! 🚀

Did this answer your question?