Kadence Tutorial: Building Graphic Overlays with Kadence blocks pro

In image display pages, the image overlay effect enhances the visual appeal and makes the message more direct.Kadence Blocks Pro plug-in in the Image Overlay blocks Support setting background image, adding text, configuringhoverAnimations as well as link jumps make for a well-structured and versatile image display module.

This tutorial describes the complete setup process of Image Overlay, including image selection, text setup,hoverStyles, border controls, and more.

Insert Image Overlay block

Open the page editor, click Add Block, and in the list of blocks find the Image Overlay and inserted into the page.

This block contains a placeholder image with title text by default, click on it to start editing.

Setting the background image

Click on the image area and select an image to use as a background. It is recommended that you choose an image with a clean, clear composition to make it easier to display with text and overlay effects.

Configuring links and hover animations

Image Overlay supports whole block click jumping, you can add a link address to it and set whether to open it in a new tab or not.

In the right-hand setting column you can selecthoverThe animation effects, such as zooming, fading, blurring, brightness change, etc., can be adjusted flexibly according to the style of the page. Different animations will bring different visual feelings and can be flexibly adjusted according to the page style.

Adding headings and subheadings

The block supports adding a main title and subtitle, and you can directly enter content by clicking on the text area.

Text can be customized in font, font size, color, line height, word weight, etc. to meet the needs of different typographic styles.

Setting text alignment

Adjust the alignment of the text in the image, including left, center, or right alignment, while supporting top and bottom direction alignment settings (top, center, bottom). Flexible alignment helps to keep the page neat and tidy.

Customizing the hover overlay style

When the mousehoverThe overlay layer will appear when on the image. You can set the overlay color, transparency, gradient direction, and animation transition method.

Properly setting the overlay layer color and transparency helps to highlight the text information without obscuring the main content of the background image.

Adding a title separator

Adding a separator line between the main title and sub-title can make the content hierarchy clearer. The separator line supports setting thickness, length, color, and style (solid, dashed, etc.).

Setting Border Styles and Rounded Corners

You can add a border to the entire Image Overlay block, control the width, color and style of the border, and also set the rounded corners to make the overall outline of the image softer.

Border settings are particularly useful in multi-image layouts to highlight card borders and enhance visual recognition.

Setting the block inner margins

Kadence Supports two ways of setting margins:

• unified setup: four margins with the same value

• separate setting: Individual settings for four directions: up, right, down, left

Proper margin settings can help graphics maintain a sense of breathability and avoid overcrowded content.

Examples of application scenarios

The Image Overlay block is available for a wide range ofpage layout, for example:

• Entrance to the graphic section of the home page

• Featured Articles Display Area

• Product or Service Module Cover

• Team member card presentations

• Project or portfolio cover block

Use with other Kadence blocks such as Row Layout, Advanced Grid, Tabs, etc. to build complete and beautiful page structures.

summarize

The Image Overlay block provides flexible control over the image display. By setting up images, text, overlay styles and interactive animations, you can easily build up a unified and well-structured display module.

The ability to quickly build blocks of image content for a wide range of scenarios without writing code or complex configurations is Kadence Blocks Pro A very practical part of it.

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: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off