Advanced tab

Customisation

The advanced tab is something you don't necessarily have to use, but hides some great features you can definitely enjoy.

CSS Classes

If you need to apply custom styles to a block, you can do so using CSS classes. Select a block and from the advanced tab toggle CSS classes. Input your unique class there and you can start writing your CSS code!

Custom CSS

Within the Advanced tab, there is a Custom CSS field where you can add your own CSS styles to the block. This field is ideal for users who want to customise their blocks even further beyond what is available in the styling options.

In this field, you can add any CSS styles you like, and they will be applied to the block. You can use CSS selectors to target specific elements within the block, and add styles such as font size, color, margin, padding, and more.

If you're not confident in writing your own CSS, it's best to consult with a web developer or designer to ensure that the changes you make don't negatively impact the appearance or functionality of your website.

Interaction builder

The Interaction Builder is one of the most powerful features in Maxi Blocks. It allows you to create custom interactions between two blocks, which can greatly enhance the user experience on your website.

With the Interaction Builder, you can create a variety of interactions, such as changing the colour of a block when another block is hovered or clicked, or making a block appear or disappear based on user interaction. You can also specify the type of interaction, such as a transition or animation.

It's easy to use it too! Simply select the block, choose the target block (the block it will affect), choose whether to affect it on click or hover, and your desired interaction.

Scroll effects

The scroll page effects tab in the advanced settings allows you to create captivating scroll animations for your website. This feature helps make your website more interactive and engaging, providing an enhanced user experience.

You can also add multiple effects to a single block, and the effects will trigger at different points as the user scrolls through the page. To customise the scroll page effect further, you can add CSS classes to the effect. This will allow you to add additional styling to the effect using custom CSS.

Transform

Transform options are an advanced feature that allow you to manipulate the position, rotation, and scale of a block using CSS. With transform options, you can create a range of visual effects and animations, such as moving a block across the screen, rotating it, or scaling it up or down.

Using transform options, you can create complex animations and effects that will make your website stand out. However, it's important to use these options judiciously and not overdo it, as too many animations can slow down your website and make it harder to navigate.

Position

The Position tab in the Advanced settings allows you to control the position of a block on the page. You can choose from several options, including absolute, relative, and fixed.

Absolute positioning allows you to set the exact position of a block using top, bottom, left, and right properties. This is useful for creating custom layouts where you need fine-grained control over the position of your blocks.

Relative positioning allows you to position a block relative to its original position on the page. This is useful for making small adjustments to the position of a block without changing its layout.

Fixed positioning allows you to position a block relative to the browser window. This is useful for creating elements that remain fixed on the page as the user scrolls.

Z-index

The Z-index option allows you to control the position of a block relative to other blocks on the page. The Z-index property determines the order in which elements are stacked, and it plays a significant role in the layout of your page.

Flexbox

Flexbox is a powerful layout system for creating flexible and responsive web page layouts. It allows you to control the layout of elements in a row or column, as well as the spacing and alignment of those elements. Flexbox can be used to create complex layouts with minimal code, making it a popular choice for modern web design.

The key idea behind flexbox is to give containers the ability to expand or shrink their child elements to fit the available space. This makes it ideal for responsive design, where layouts need to adapt to different screen sizes and devices. With flexbox, you can easily create layouts that are flexible and fluid, without having to resort to complex calculations or hacks.

In a flexbox layout, you have a container (or parent element) that holds one or more child elements (or items). You can define the direction of the container, either as a row or a column, and then use a variety of properties to control the layout of the child items within that container. These properties include things like spacing between items, alignment of items, and the ability to wrap items onto new lines as needed.

Flexbox is a powerful tool for creating responsive web layouts that are easy to maintain and update. With its intuitive syntax and flexible properties, it's a great way to create modern, user-friendly web designs.