Customize a Block in Pro Mode
Root Settings
Change Block Width
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select Root. A pop-up window will appear.
Specify the width of the block in pixels in the Maximum field.
Click the Maximum field name to set the full width of the block.
Change Block Paddings
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a root. A pop-up window will appear.
Specify the block paddings at the corresponding Internal field.
Row Settings
Set Row Height
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a row. A pop-up window will appear.
Specify the minimum row height in pixels in the Height: min/max corresponding field. Without any element filled with content, the row height will not be less than the specified value.
Specify the maximum row height in pixels in the Height: min/max corresponding field. When filling the element with content, the row height will not exceed the specified value.
Column Settings
Set Column Width
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a column. A pop-up window will appear.
Specify the minimum column width in pixels in the Width: min/max corresponding field. Without any element filled with content, the row height will not be less than the specified value.
Specify the maximum column width in pixels in the Width: min/max corresponding field. When filling the element with content, the row height will not exceed the specified value.
Enable Column Contents Auto-tuning???
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a column. A pop-up window will appear.
Click Yes to enable automatic content width checking. A column checks its own content. If its content isn't wide enough, the column will take some of the width from adjacent columns.
Set the expansion value in ??? relative to other columns for different screen dimensions in the Expansion / Height field. Expansion indicates how quickly the column will expand in relation to others (defined as one Row) for different screen dimensions. ! Available for enabled Contents setting.
Set the expansion value in ??? relative to other columns for different screen dimensions in the Compression field. Compression indicates how quickly the column will collapse in relation to others (defined as one Row) for different screen dimensions.
Set Column Proportion
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a column. A pop-up window will appear.
Set the proportion value relative to other columns.
Crop the Content Outside the Column
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a column. A pop-up window will appear.
Click Yes to hide content that extends beyond the column edges.
Hide a Column
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select a column. A pop-up window will appear.
Click Yes to hide a column and its content. ! You can set this property to be different for desktop, tablet, and phone screens.
Absolute settings
Set a Background Layer
You can place background or other elements to create more complex structure and unique templates.
! By default an absolute is already added to the root for quick background color adding.
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Select an absolute.
Click ?? to Add an element to fill the layer?? to create a simple layer Set a background
Add column / row to create a complicate? structure to fill and set multiple layers
Set Alignment You can set the horizontal and vertical alignment by clicking on the corresponding button You can define alignment relative to column borders for each layer in the Absolute settings.
Customize content for various screens
Configure the way content displays for various device screens.
! All display and style settings in the web version will be automatically transferred to the tablet and mobile versions, and content adjusted to fit the rules of smaller screens.
Customize content for Various Screens
Open a pro mode editor and select a block.
Switch to the tablet or mobile devices view.
Go to the Block structure tab and select an ?? to change the settings for the ??
Set up a block for smaller screens Tablet and mobile settings are kept separate and have no influence on one another; in other words, you can create a unique design for each version.
Set Blocks Order for ?? Screens
Open a pro mode editor and select a block.
Switch to the tablet or mobile devices view.
Set Order Order determines the overall numerical order for columns or rows. By setting the numerical order, you can control the order in which elements appear on the screen.
Set Blocks Direction for ?? Screens
Select a block and switch to the Pro mode.
Go to the Block structure tab.
Switch to the tablet or mobile devices view.
Set Direction determines the overall numerical order for columns or rows. By setting the numerical order, you can control the sequence in which elements and element groups are displayed on the device screen.
Sometimes, you'll need to tweak how content looks on tablets and mobiles. Switching between these versions in the Editor makes it easier to adjust things like position, size, margins, colors, fonts and etc.
Last updated