Kadence Blocks Pro The plug-in provides Modal Popup blocks that can be used to add click-triggered popup content areas to a page. Whether it's displaying a notification, a quick fillform (document)Whether it's directing users to specific content, this module has a lot of utility.

In this article, we will introduce the basic settings of Modal block, including pop-up links, content editing, style customization and custom triggering methods and other operational procedures.

Adding Modal blocks

Open the editor, click Add Block, and in the list of blocks select the Modal, and inserts it into the page. A link text and pop-up content area will automatically appear after insertion.

Setting the link text

Select the block and enter the text of the link that triggers the popup in the settings field on the right, e.g. "See more" or "Open".pop-up window". This text will be displayed on the page as an entry point for the user to click on.

Edit popup content

Any block can be inserted inside the pop-up window, such as text, images, buttons, forms, etc., with full support for flexibleopening (chess jargon). Same as editing a normal content block, with adjustments to style, typography and structure.

Customized Link Styles

Appearance parameters such as fonts, colors, borders, backgrounds, etc. of triggered links can be adjusted to make them consistent with the overall style of the page.

Setting the background mask

When the popup window opens, a semi-transparent background mask appears on the page. You can choose the mask color and transparency to highlight the content of the popup while keeping the page with a clear background.

Setting the animation and position

You can choose the opening and closing animation of the popup window in the settings bar, such as fade in, slide, zoom, etc. You can also specify where the popup window should appear on the page, such as top, center, bottom, left or right.

Setting the size of the popup window

The width and height of the popup window can be adjusted on demand to suit different types of content display. This can be set as a percentage or as a pixel-specific value.

Adjust the close button style

The close button in the upper right corner supports style settings, including icon size, color, position, and so on. A well-designed close button helps keep the page simple and easy to use.

Setting the appearance of the pop-up window

You can add background colors, borders, rounded corners and shadows to the popups to enhance the hierarchy of the content. Proper design can make the popup content more prominent and keep the page coordinated.

Adjust the style and save it in the front-end view

Using Custom Trigger Links

Modal blocks support manual creation of buttons to trigger popups in addition to built-in links, suitable for customizing the layout structure in specific locations.

The procedure is as follows:

• Turning off the default link switch in Modal settings

• Set an Open ID for the popup, e.g. customid
• Insert an advanced button anywhere on the page
• Set the button link to #customid
• Adding a class name to a button modal-trigger

After the setting is completed, click the button to trigger the pop-up window to open, facilitating the free combination of content and page structure optimization

summarize

Modal pop-up blocks are Kadence Blocks Pro It is a very useful tool for displaying content. The popup window is clearly structured and supports a variety oftypographicalWay and style adjustment, with flexible trigger mechanism, suitable for a variety of website page scenarios.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off