Hello, and welcome once more, in this page you will learn about, Popup Modals Block, which allows you to create Responsive, Interactive Popup Modals,
you show this modal with many methods like with a Button trigger, or a specific element ID that trigger the popup when ever its in the View Point of the user screen, and control this Popup if you want it to be hidden after a certain time or event called with a URL ID hash like this https//:website.com/#popup-id
in the table below you can find the Features and Options.
| Options | |
|---|---|
| Modal ID | a unique ID for this Popup to be called with and is Required |
| Trigger ID | enter an Element ID when this element is on the screen the Popup will show. |
| Open by Hash URL | show the popup, with a URL hash ID like this https//:website.com/#popup-id |
| Open When Page Loads | make the popup lazyloading only show and work when the page has loaded. |
| Duration | a delay by millisecond for the Hash URL Call and Page Loading |
in every Block you have, you will find often the main options of the block in the Quick access Toolbar that shows above the selected block, and here is a list of the Options you may came across:
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.
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.
you can activate the Border controller for any block from the support options also, to add border for any side of your block, and colored or switch its style as you need to
you also can assign a Fixed Width or Min/Max Width and Height for Most of the Element in Phenix Blocks
and it Comes with a Responsive size for each screen and device size.
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.
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.
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.
in the icons panel, in the supported Blocks, like buttons, text elements, navigation menu, icon element you can use Font Awesome 6 with All its Variation and insert an icon to your Block element
and it comes with various options to make the icon inside Label box, make Larger then its text, change its position, or use it as responsive representing element label.
all the available colors are Pre-Registered by the Theme you have, and based on Phenix Design System (the Front-End Framework), it has a set of colors for both background and text that you can use without getting out of your Brand, and makes it easier for Content Creators to align their content with the theme and the brand colors.
and you can add more colors by adding custom colors from your editor styles.
the Background colors set however have more colors range then the text one, based on the design system logic the text always most have the higher contrast,