Hello, and welcome once again, in this page you will learn about Extra Options for Block Styling and How to add Animations and Effects.


07-Supports.png

Styles Supports

in the sidebar of the Block Editor, when you focus on one of Phenix Blocks you will often find a Field called Support, and from this Field you can Activate a lot of styling options to customize your content Freely and here is an Example of some of these options.


Margin and Padding and Position

when you activate any of the Margin or Padding spacing styles properties for the block it will appear on the Block Toolbar, and when you click on it you can find the controls for Each device breakpoint, and both are working within the boundaries of Phenix Predefined Utilities classes start with 0 increasing 5 by 5 until 2500 maximum padding or margin and -5 is Center == Auto by CSS terms.

07-Margin.png


12-radius-display.png

Radius / Display and Position

when you activate the Radius, you will have a Select box down the support field to select the size of the radius from a pre-defined Radius and you have about consistent 6 sizes.

and when you have a display option activated you can make Different CSS Display for each screen, for Example you can hide and show elements in certain screen sizes.

alongside the CSS Position type and Z-Index order of the block element.


Block Animations

you can animate your blocks and make show-up on the user scroll with a nice, animated effects, and you can make the animations sync one after another by activating the group-animations on the top wrapper block.

and you can define a time speed and a delay duration for the animation to start alongside a different animation when the block is about to disappear from the screen viewpoint.

13-animations.png


14-effects.png

Block Effects

in the Effect options set of the Style support, you can add a Hover effect for the block when the user mouse is over the block, and you can add animation effect that runs all the time or selecting one of the Box-Shadow pre-defined styles.