Size and spacing

Spacing on the page


You can create extra space around elements to help your users focus on the content, what may increases conversions.

The best practice is spacing and sizing within ratios. Ptah pre-designed sections keep spacing consistent. This is how one of Ptah sections with default spacing looks like:

Any element on your page can have spacing that immediately surrounds the element within the border (padding) and outside the border (margin).

You can customise the padding and margin of any element.

You can update indents for an element right on Settings Panel after selecting the element on Preview Area.

To update the block indents, hover over the block and click the Settings icon at the top-left corner.

To open the sections Indents Setting, click the Spacing icon at the end of the section’s title in Sections Menu.

The spacing settings allows you to set the top, bottom, left and right margin and padding of an element.

To make all margin or padding values equal, click the Chain icon and set just one of the value and the others will get the same value automatically.

Size settings and units


Section size


The section’s width is set to full screen automatically on every device.

You can adjust the section height:

  • Auto

    The section’s height is set automatically depending on the default indents and its elements sizes.

  • Viewport Height

    You can specify the height in relative terms using viewport-height (vh) where 1 vh is equivalent to 1% of the height of the browser window.

  • Pixels

    You can specify the height in absolute terms using pixel values (px).

Make a full-screen section


You can use a powerful visual effect to make a full-screen version of the page: set the height of every section to fit the whole height of the browser window and replace scrolling with slider controls.

To set up a full screen version, go Page Style > Background and turn on the Full page scroll option.

Text


Set up the default text settings in Fonts.

To customise the text size, double-click on it and adjust the font size in pixels (px) in Settings Panel.

Others


You can customize the size of elements in Settings Panel.

More than that, you can change the size in Preview Area by clicking the element and stretching the Resizing tool rectangle.

Next steps

Questions?

Support

We are always happy to help with a code, improve a guide or consider a feature.

GitHub

Ptah is the easy-to-use open-source landing page builder without any coding designed for video games.