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
The section’s width is set to full screen automatically on every device.
You can adjust the section height:
The section’s height is set automatically depending on the default indents and its elements sizes.
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.
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.
To customise the text size, double-click on it and adjust the font size in pixels (px) in Settings Panel.
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.
We are always happy to help with a code, improve a guide or consider a feature.