Settings sidebar options
The settings tab contains the main block options. Here you will find a range of settings that you can use to customise the block any way you want.
There are settings that are specific for each block. To reveal the block settings - click with your mouse pointer to select the block you want to edit. Once selected it will show the settings sidebar for that block. Below are common settings available for most blocks.
Alignment
Alignment is an essential part of designing a visually pleasing webpage. It is the process of positioning elements in a way that they are in harmony with the rest of the design.
Alignment is particularly important when using a grid or when placing elements on a page that needs to align horizontally or vertically. In such cases, designers need to make sure that every element aligns precisely and is in the correct position.
The Alignment settings in the Settings Tab make it easier to adjust and align blocks, rows, and columns. It is where you can change the position, the horizontal alignment, and the vertical alignment of the block.
Horizontal alignment options include left, centre, and right alignment. The vertical alignment options include top, middle, and bottom alignment.
By making use of these alignment settings, designers can ensure that their webpages look organised and professional. Alignment can make the difference between a cluttered and chaotic design and one that is aesthetically pleasing and easy to navigate.
Background / Layer
In MaxiBlocks you can add multiple layers of backgrounds. Easily add a solid colour, gradient, image or a video background. These layers can be combined and organised easily be changing their order. Many settings for each layer gives you freedom to control the background in both normal and hover state of the block.
Border
The border settings in MaxiBlocks relate to the visual borders surrounding your block. You can adjust the border type, color, and width in the border settings.
To access the border settings, click on the block you want to edit, and open the Settings tab. From there, click on the Border option to expand the settings.
In the border settings, you can choose the border type, such as solid or dashed, and set the border color using a color picker or by typing in a hex code. You can also set the width of the border in pixels or as a percentage of the block's size.
Additionally, you can control the position of the border by setting values for top, right, bottom, and left. This allows you to create unique border designs or only apply borders to specific sides.
Overall, the border settings give you precise control over the appearance of your block's border, allowing you to create custom designs and tailor the look and feel of your website.
Box shadow
Box shadow is a styling property that adds a shadow effect to a block or element on a page. It is located in the "Settings" tab of each Maxi block.
With box shadow, you can add depth and dimension to your design, and create a visual separation between different elements on the page. You can customize the shadow's color, size, blur, and position.
Height / Width
Adjust the dimensions of your block using the height / width settings. You can enter a specific height and/or width value in pixels, or choose a percentage value. Percentage values allow you to create responsive designs that adjust to the screen size of the device being used to view your website.
In addition to the basic height and width settings, you can also adjust the minimum and maximum height and/or width values. This can be useful for creating a block that will resize within a specific range, preventing it from becoming too small or too large.
Another option in this tab is the "Full width" setting. When turned on, your block will span the entire width of the page, regardless of its parent container. This can be useful for creating full-width sections of your website.
The Height/Width tab gives you precise control over the size of your block and allows you to create custom, responsive designs that look great on any device.
Margin / Padding
The Margin and Padding settings in MaxiBlocks are used to control the spacing between elements on your web page. Both are very important for creating a clean and professional look.
Margin
Margin is the space outside the element. You can set margins for each side of the element (top, right, bottom, and left).
To add margin, select the block you want to adjust, go to the Style tab, and find the Margin settings.
From there, you can adjust the margin for each side by either typing a value or using the slider.
Padding
Padding, on the other hand, is the space within the element. It is the distance between the content and the element's border. You can set padding for each side of the element (top, right, bottom, and left).
To add padding, select the block you want to adjust, go to the Style tab, and find the padding settings.
From there, you can adjust the padding for each side by either typing a value or using the slider.
It's important to use margin and padding to give your web page a consistent and visually appealing look. Experiment with different values to find the best spacing for your design.