Themify Image Pro - WordPress Plugin

Themify Image Pro Guide: Setting Up Interactive Images in WordPress

Themify Image Pro is not meant for simply dropping an image into a post. It is built for cases where an image needs to function as a compact interactive block: showcasing a service, a project card, a banner, a link to another section, a mini product presentation, or a visual cue inside a page built with Themify Builder. In this guide, we will walk through how to prepare your site, where to find the module after installation, which settings matter most first, how to build a working example, and how to verify the result without guesswork.

This article is intended for users who already have a WordPress site and Themify Builder, or a Themify theme with Builder support. We will not repeat the product's marketing copy or cover purchasing, payment, or licensing. Instead, we will focus on the practical path: image prep, installation, adding the module, filters, sizing, text styling, overlay, action button, responsiveness, load speed, troubleshooting, and choosing similar solutions.

The main strength of Themify Image Pro is that it combines several jobs inside one Builder module: image, filter, hover effect, overlay, text, caption, and button. Because of that, the final result depends not on a single toggle, but on the chain of "source image - size - container - overlay - hover behavior - link - cache." Once you understand that chain, the module becomes predictable and easy to work with.

What the Image Pro Module Solves in Builder

A standard WordPress image block works well for a static illustration. It inserts a file, gives you alt text, and can either open the image or link somewhere else. But if a page needs to display a service card with dimming, a caption, and a button, the standard block is often not enough. That is when manual assembly begins: the image by itself, text layered on top with CSS, a separate button nearby, a hover effect from the theme, and then the whole thing falls apart on a tablet.

Themify Image Pro fills that exact gap between a static image and a full gallery. It is a visual module for individual images inside Builder, not a large photo catalog. It is useful when a single image needs to do a clear job: grab attention, reveal a caption on hover, send the visitor to the right section, highlight a "before/after" state through visual emphasis, or present a block like a mini banner.

According to the official product page and documentation, the module works as an addon for Themify Builder. Its feature list includes image filters, hover effects, overlay animations, color or graphic overlays, text and link color controls, action button settings, link behavior options, and adjustable image width and height. The documentation also specifically notes that the module appears in the Themify panel under Addons and is available in both backend and frontend Builder editing modes.

The practical value is that the editor does not need to juggle several disconnected blocks. You add one module, choose an image, set the hover behavior, write the text, and immediately see the result on the page. For landing pages, service pages, portfolios, team cards, showcase sections, and internal promo blocks, this is faster than building a separate template.

Where Image Pro Is Better Than a Regular Image

The module's real advantage is not simply the number of effects. It is the controlled connection between an image and an action. For example, on an agency page, you might create four visual cards: "Design," "Development," "Support," and "Audit." Each card shows an image in its default state, then reveals a short explanation and a button on hover. The visitor is not just looking at an illustration. They immediately understand where to click next.

On a product page, you can build benefit blocks with a product image, a darkened hover state, a caption with a brief value point, and a button leading to a detailed section. On an event page, you can use it for speaker cards or program tracks. In a blog, it can become a visual entry point into curated content collections. The key is not to overload every image with effects. Image Pro works best when the image has a specific purpose and one clear next step.

When Another Tool Is the Better Choice

If you need a full photo gallery with dozens of images, filters, albums, lightbox navigation, bulk caption management, and separate shortcodes, Image Pro may be too narrow for the job. It works well for individual visual cards inside a Builder layout, but it does not replace specialized gallery plugins. If you need a portfolio catalog with taxonomies, filters, and a large number of projects, a gallery or portfolio plugin is the more sensible direction.

The module also should not become a way to hide important text behind hover alone. On touch devices, hover behaves differently than it does on desktop. That is why overlay text should stay brief, and any critical information should remain available directly on the page: in the heading, paragraph, card copy, or nearby caption.

How the Module Differs From a Gallery and a Banner

Image Pro sits in the middle. A gallery manages a set of images: order, grid, lightbox, filters, albums, and sometimes separate data sources. A banner is usually a single large promotional block with fixed text. Image Pro is simpler than a gallery, but more flexible than a banner: it drops into a specific Builder column or row and gives a single image localized behavior.

That distinction helps you avoid page architecture mistakes. If you have six service cards, each with its own destination, Image Pro can be a great fit. If you have one hundred event photos that need to be sorted by category, that is already a gallery use case. If you have one wide "Book a Consultation" block, you can build it in Builder in several ways, and Image Pro only makes sense if the image itself is the primary carrier of meaning.

How the "Image - Action" Pairing Shapes Visitor Behavior

A visual card works better when the visitor does not have to guess whether it is clickable. A hover effect provides feedback, the overlay adds context, and the button answers the question, "What do I do next?" That does not mean every image should shout a call to action. If the page has a calm, expert tone, subtle dimming and a link may be enough. If it is a promo section, the button can be more prominent.

With Themify Image Pro, you can test those variations without development work. Start with a minimal card using only an image and overlay. Then add a button. After that, check whether the block has become too busy. This step-by-step approach is more useful than enabling every effect at once because you can see what each setting contributes. If the user journey becomes clearer after adding the button, keep it. If the button duplicates a nearby link and overloads the block, remove it.

Who Themify Image Pro Is For, and Who Should Start Elsewhere

Before installing it, answer one simple question honestly: are you already building pages inside the Themify ecosystem, or are you just looking for any way to add a hover effect to images? Themify Image Pro requires Themify Builder. If your site is built on another block system and you do not use Builder, installing it just for one effect may add an unnecessary dependency.

The module is a strong fit for site owners who already use a Themify theme, Themify Builder, or build pages in Themify's visual editor. It is also convenient for webmasters who maintain several small sites and want to keep service cards styled consistently without writing manual CSS for every project.

Good-Fit Scenarios

• Service landing page. The image shows the service area, the overlay adds a short explanation, and the button leads to a form, pricing block, or case study.
• A portfolio with a small number of projects. Each card leads to a separate project page or opens a detailed description through a normal link.
• A promo block inside an article. A visual insert smoothly moves the reader to a related guide, product page, or site section.
• Team or category cards. The image remains the main element, while the text appears as a brief cue without breaking the layout.
• Design without custom development. The editor needs to quickly change the image, caption, link, and button color directly in Builder.

When the Module May Be Unnecessary

If your site runs on the standard WordPress block editor and does not use Themify Builder, it makes more sense to first look at a block plugin or gallery that already integrates with your editor. If the page needs dozens of images, category filtering, albums, and bulk optimization, Image Pro will have to be repeated over and over, and managing it will become inconvenient. If the task is tied to a WooCommerce product gallery, image zoom, or a more complex storefront layout, you are better off with a tool designed specifically for product images.

Practical rule: install Themify Image Pro when you want to improve individual visual blocks inside Themify Builder. If you need a full gallery management system, choose a gallery plugin, not a single-image addon.

What to Check Before Installing It on a Live Site

Pre-installation prep matters more than it may seem. Image Pro is visually prominent on the page and works with images, effects, and links, which means it can expose weaknesses in your theme, cache setup, or source files. Before adding it to a live page, it is worth running through a short review.

Dependencies and Environment

The official Themify documentation states that Builder Addons require Themify Builder. That may be a Themify theme where Builder is already included in the framework, or the standalone Themify Builder plugin. So the first step is to make sure Builder is actually active and opens on the content type you plan to use. For a standard page, that usually means a WordPress post or page where you can enable Builder either in the admin area or on the public side of the site through the top bar.

If you plan to use Image Pro on the homepage, make sure the homepage is a static page rather than the default posts archive. Builder documentation specifically notes that Builder does not work on the standard WordPress archive-style homepage. For the homepage, you need to create a page, publish it, and assign it as the static front page in Settings - Reading. This guide does not list WordPress version numbers because that information gets outdated quickly. It is better to confirm current compatibility in Themify's documentation and in your installed plugin list.

Checking the Editor Role

If the page is edited by someone other than an administrator, check user permissions in advance. Themify Builder, the media library, and plugin settings may be unavailable to some roles. This is especially important on agency sites where a content manager updates service cards but should not be allowed to modify plugins. In that setup, the administrator installs the addon and prepares the layout, while the editor only updates images, captions, and links inside already-created modules.

That approach reduces the risk of accidental breakage. The editor sees a finished structure: three columns, an Image Pro module, and text and link fields. They do not touch cache settings, Image Script, global Builder settings, or custom CSS. If several people work on the site, it is worth defining an internal rule set: which image sizes to use, which effects are allowed, how captions should be written, and who checks the page after publication.

Source Image Quality

Image Pro will not fix a bad source file. If the photo is too small, blurry, or heavily compressed, a filter and overlay will not improve it. For cards with matching heights, prepare images with similar proportions. If you want circular images, use square files: the module documentation explicitly says the circle appearance works best with a square format.

For a page with several cards, decide on image sizing in advance. Themify gives you width and height fields, and Image Script in the Themify ecosystem can generate server-side images at specific dimensions if the source files are hosted on the same site. But external images from another domain cannot be dynamically cropped through that mechanism. For a predictable result, it is better to upload files to the WordPress media library instead of inserting third-party URLs.

Minimum File Requirements

Set a few simple rules before upload: consistent orientation, reasonable width, a clear visual focal point, no tiny text baked into the image itself, and decent contrast. If the photo is meant for a card with overlay text, leave enough empty space so the text does not compete with a face, product, or key detail. If the image is going to be circular, keep the main subject centered and avoid placing important information near the edges.

It is not a good idea to mix random images with completely different styles: one studio photo, one screenshot, one dark banner, and one illustration. Image Pro can unify the effects, but it will not turn disconnected material into a coherent visual system. It is better to prepare a set in a shared style and then apply the same overlay approach to all of them.

Cache, Optimization, and Conflicts

Hover effects and overlays depend on CSS and JavaScript. If the site uses aggressive caching, minification, deferred script loading, or file combining through a third-party plugin, you need to test the result after clearing cache. Themify's performance documentation makes an important point: do not enable double caching if another cache plugin is already active, and disable questionable settings like deferred jQuery if they cause a plugin or module to stop working.

Before installation on a live site, it is best to have a fresh backup and, if possible, test the module on a copy of the page. This is not just a formality. Visual plugins rarely break data, but they can change the appearance of a page, add unexpected height, cause layout shifts, or conflict with theme effects that are already in use.

Pre-Publish Checklist

Before moving the block onto a live page, go through a short checklist. It does not replace full testing, but it helps catch the most common mistakes before visitors see the page.

• Builder opens on the page where Image Pro will be placed.
• Images are uploaded to the WordPress media library instead of being pulled from outside domains without a reason.
• Each image has clear alt text in the media library or in the output settings, if available.
• Source dimensions and proportions are consistent across the cards.
• Overlay text is short and does not contain the page's only essential information.
• Buttons lead to existing internal sections or pages.
• Cache has been cleared after saving the page, and the public view has been checked outside edit mode.

Installing the Module and Running the First Check in WordPress

Themify Image Pro is installed like a standard WordPress plugin. Themify documentation describes installation through Plugins - Add New - Upload Plugin, followed by activation after the ZIP file is uploaded. General WordPress documentation confirms the same path for ZIP archives: open the plugin upload screen, click Upload Plugin, choose the file, install it, and activate it.

This guide does not cover how to obtain the archive, enter a license key, register a domain, or purchase the product. That is a separate administrative task. For working with the module, what matters is something else: after installation, Builder needs to recognize the addon, and the Image Pro item needs to appear in the module panel.

A Safe Installation Sequence

1. Check that Themify Builder is active and opens on a test page.
2. Create a site backup, or at minimum a backup of the page where you will test the module.
3. Open Plugins - Add New and use Upload Plugin for the addon ZIP archive.
4. After installation, click Activate and return to the page where Builder is enabled.
5. Open the Builder module panel and check the Addons section.
6. Find the Image Pro module and drag it into a test row.
7. Save the page, open it in a separate tab, and confirm that the image renders without errors.

If the module does not appear, do not immediately start reinstalling everything. First, confirm that Builder is active, the addon is actually activated in the plugin list, and the page is being edited through Builder rather than only through the standard WordPress editor. Then clear both site and browser cache. If the problem remains, temporarily disable optimization plugins that combine or defer scripts and test again.

How to Tell the Installation Worked

The installation should not be considered successful just because WordPress displayed an activation message. It is successful when the module can actually be added to a page and retain its settings. Run a quick test: create a draft page, enable Builder, add Image Pro, choose one image, enter a short title, enable an overlay, and save. Then open the page in a separate tab. If the image appears, the overlay works, and the values are still there when you reopen Builder, the basic chain is working.

This test is useful for another reason as well: it separates an installation issue from a layout-specific issue. If everything works on a blank page but not on the live page, then you should inspect the row structure, columns, custom CSS, cache, or conflict with an older layout. If even a blank page does not work, start by checking Builder and addon activation.

Importing the Demo Layout

The Image Pro documentation mentions a sample Builder data file inside the addon archive. You can import that file into Builder to see how the demo example is assembled. This can be a useful learning shortcut, but it is not required. If you already know what kind of card you want to build, it is usually easier to create it manually on a test page. If the interface is unfamiliar, importing the demo layout can help you see a finished setup, compare effects, and find the right fields faster.

Use import only on a test page or a copy of the layout. Do not import a demo layout over an important live page without a backup. Builder includes import and export features that are useful for moving layouts and rolling changes back, but any import action can replace or add blocks in the current layout.

How to Safely Move a Configured Block to a Live Page

Once the test card is ready, you do not have to rebuild it from scratch on the live page. Depending on how you normally work in Builder, you can duplicate the module, save part of the layout, or move the settings through Builder content import/export. Before moving it over, remove test links, temporary images, and technical placeholder text. After transfer, check not only the appearance but also that the links now point to live sections.

If the layout is being built for a client, it can be useful to keep one hidden or draft page with a reference card. This is not a built-in Themify Image Pro feature, but it is a practical workflow technique. When you need to add another service a month later, the editor can simply copy the finished module and replace the content. That preserves the effects, dimensions, overlay color, and button style.

A Working System for Repeatable Cards

If Image Pro is used once, you can configure the module manually and stop there. But on a real site, interactive images often repeat: services, case studies, staff members, categories, promo blocks. At that point, what matters is not just the first setup, but a system the editor can use to add new cards without creating visual inconsistency.

The system starts with a reference block. Build one card that has already passed review: correct dimensions, readable overlay, a clear button, and a solid mobile presentation. Then copy it for the other items. Do not start each card from scratch, or one will get zoom, another rotate, a third a different overlay color, and the page will start to look random.

Settings Worth Standardizing

• The same image proportion within one card group.
• One shared hover effect for the group, unless there is a deliberate exception.
• The same overlay opacity and one shared color for all cards in the section.
• The same text logic: a short title, a one-line caption, and one action.
• The same button style, so users do not assume different colors mean different types of actions.
• A tested text length that works on mobile.

How to Document Settings for the Team

You do not need a long manual. A short internal note is enough: "For service cards, use horizontal images, a dark overlay, hover zoom in, a title of up to three words, a one-line caption, and a button that links to the section." A note like that saves time and reduces revision requests after publication.

If the site uses several card types, split the rules by type: services, case studies, team, promo. Each group can have its own style, but within the group it should remain consistent. Image Pro offers enough flexibility that, without rules, editors quickly start using effects as decoration rather than as part of the interface.

Configuring the Image, Size, and Shape Without Breaking the Layout

The first group of Image Pro settings applies to the image itself. The documentation lists Image URL, Width, Height, Image Appearance, Image Filter, and Image Hover Effect. On the surface, that looks simple, but this is where inconsistency usually begins: one card is taller than another, a circle turns into an oval, the image looks stretched, or the hover effect behaves differently at different widths.

Image URL and the Media Library

For a typical site, it is better to choose the image from the WordPress media library. That makes it easier to manage alt text, dimensions, file availability, and optimization. An external URL can be used, but then Themify Image Script cannot dynamically generate a cropped version at the required size if the image is hosted on another domain. As a result, the width and height settings may affect only the HTML attributes or the display, not the actual source file size.

If you are preparing a block with several cards, upload the images in advance and keep them aligned in the same general logic: the same orientation, a similar composition, and no tiny text inside the image itself. Hover effects work better on photos and visual objects where the main idea is still readable even after dimming.

Width and Height

Width and height are not just cosmetic settings. They help prevent layout jumps and give Builder a clear frame for the image. If the cards sit in a grid, set dimensions consistently. For example, for three service cards, you can use the same container width and the same image height so the overlay lands in the same visual area. If you need a fluid card, use a fullwidth mode where the container is already limited by the column.

In its performance guidance, Themify recommends specifying the actual image dimensions in modules when that option is available. That helps the system choose the correct size and avoid loading overly large files. But you should not enter arbitrary sizes by eye. First, open the page, check the real block width in the browser, and then match the source image to the actual display size.

How to Choose Dimensions for a Card Grid

In a three-card desktop grid, matching height is usually the priority. If the images all have different proportions, one block will be taller, another shorter, and the overlay will look sloppy. Choose a base format, such as wide cards for services or square cards for team members. Then prepare the source files to match that format before uploading them to WordPress.

You can set width and height inside Builder, but the module should not be used to compensate for poor file prep. If the source file is vertical and the card is horizontal, an important part of the image may be cropped out. If the source file is too small, it may look soft or blurry. If it is too large, the page will load unnecessary kilobytes. The best setup starts before you choose the effect, with a properly prepared file.

Result check: after saving, open the page in normal view, hover over the image, and then resize the browser window. If neighboring cards jump in height or the circular shape turns into an oval, go back to the source proportions and sizing.

Image Appearance: Rounded or Circle

The shape setting controls whether the image has rounded corners or a circular crop. Rounded works well for service cards, portfolios, and banners where you want a softer visual treatment. Circle is better for avatars, people, small objects, or icon-like images. For the circle style, you need a square source file. Otherwise, the result may look awkwardly cropped or visually off-center.

Do not enable circle just because it looks more noticeable. If the photo contains an important subject near the edges, the circle will cut it off. For portfolio cards, rounded corners or a standard rectangle are often the better choice, while for team members, circle or a gentle radius works well if faces are centered.

What to Do if the Shape Does Not Fit the Brand

Sometimes it is tempting to make every card circular or heavily rounded because that looks modern in a preview. But your site's visual language may call for something else. Strict B2B pages often work better with a rectangle and a small radius. A creative portfolio can support more expressive shapes. Medical, legal, and education sites may lose trust if the hover effects and circular crops feel too playful.

It is better to test the shape in a real block, not in an empty mockup. Place the card next to a heading, body text, button, and neighboring section. If it feels like part of the page, keep it. If it looks like a disconnected ad insert, simplify the appearance or reduce the visual effect.

Filters, Hover Effects, and Overlay: How to Avoid Overloading the Visual Block

Image Pro gives you several layers of visual behavior. There is the image filter: grayscale, grayscale reverse, sepia, or blur. There is the hover effect: zoom in, zoom out, rotate, shine, or glow. There is also the overlay with color, image, opacity, and a separate animation. You can combine these layers, but this is also where it is easiest to create a noisy block that distracts from the content.

A good setup does not begin with "Which effect looks better?" It begins with "What should the visitor understand on hover?" If the goal is to show that the card is clickable, a light dim, a caption reveal, and a moderate zoom are enough. If the goal is to highlight a promotion, a higher-contrast overlay and a button may fit. If the goal is a calm portfolio page, aggressive rotate and bright glow are usually the wrong choice.

How to Choose a Filter

A filter changes how the image is perceived even before the hover state appears. Grayscale can help unify colorful photos and make the page feel calmer. Sepia adds a warm, retro tone, but it will not suit every brand. Blur can be useful if the overlay text needs to become the main element on hover, but in the default state, a blurred image can look like a loading issue.

For a service site, a neutral approach usually works best: a normal image in the default state, dimming or a subtle zoom on hover, short text, and a button. For a portfolio, you can use grayscale in the default state and reveal color on hover if that is supported by your chosen settings combination. If your version does not support the exact reverse behavior you want, do not imitate it with complex code unless there is a real need. It is better to use a built-in hover effect.

Overlay as a Meaning Layer

The overlay should help make text readable, not simply tint the image. If the photo is bright, use a semi-transparent dark color. If the photo is dark, pair it with light text and a restrained button. Image Pro documentation states that the overlay can be color-based, graphic-based, or a combination of both, and that opacity is adjusted next to the color picker. That is enough for most scenarios.

Do not place long paragraphs inside the overlay. The text appears during interaction, and visitors are not going to read a detailed service description there. The ideal format is a short heading, a one-line caption, and one action. All detailed information should live in the normal page content or on the destination page the button links to.

How to Choose the Overlay Effect

The Image Pro documentation notes that the overlay effect is chosen from a set of animations that appear on hover. In practice, choose not the most dramatic effect, but the clearest one. If the cards function as navigation, the effect should reveal the text quickly and not interfere with clicking. If the card is more decorative and does not include a button, you can choose a softer caption reveal.

Test the effect across a group of cards. One effect may look good on a single block, but six different effects side by side create chaos. On a service page, use one overlay effect for the whole group. In a portfolio, you can differentiate key projects, but it is usually better to do that through composition and size rather than random animation.

Color Overlay vs. Graphic Overlay

A color overlay is easier to control. It dims or tints the photo and improves text readability. A graphic overlay can be useful if the brand already has a texture, pattern, or visual system. But using a graphic overlay without a clear reason is risky: it adds weight, may clash with the source image, and can hurt caption readability.

If you are unsure, start with a color overlay. Choose one color, adjust the opacity, and review all cards. Leave graphic overlays for cases where they genuinely carry meaning, such as a branded diagonal texture in a promo section or a semi-transparent technical diagram on a documentation page.

Hover Effects and Touch Devices

On desktop, hover is straightforward: the user moves the cursor and sees the effect. On a phone, there is no cursor, so behavior may depend on the browser, the theme, and how the link is implemented. That is why you should not hide the only important text in a hover state. If the card needs to communicate a core idea, repeat it in a nearby heading or in a caption below the block.

When testing, open the page on a phone or at least in the browser's responsive mode. Make sure the card does not require an impossible action, the button remains tappable, the overlay does not take over too abruptly, and the text does not become too small. If the mobile result is weak, simplify the effect and make the link more obvious.

How Not to Lose Meaning Without Hover

Imagine the hover effect never triggers. Will the user still understand that the image belongs to a service, project, or section? If not, the page depends too heavily on a hidden state. Add a normal heading next to the card, a caption under the image, or a short description in the neighboring column. Then the overlay becomes an enhancement rather than the only place where meaning exists.

This matters even more on pages that rely on organic traffic. A user may scroll quickly, open the page on a phone, use data-saving mode, or access it in a messenger's built-in browser. In those conditions, simple visible text is more reliable than sophisticated animation.

Text, Caption, and Action Button in Themify Image Pro

The second half of the setup controls the meaning: Image Title, Image Caption, Action Button, Link, Link Type, button color, text color, and link styling. These are the fields that turn an image from a decorative element into a structured navigation block or call to action.

Title and Caption

Image Title works best as a short phrase describing the object or action: "Landing Page Design," "View Case Study," "Consultation," "Service Catalog." Image Caption should add to the title, not repeat it. For example, for a service card, the caption might be: "Structure, visual style, and mobile adaptation."

Write the text so it makes sense even apart from the image. If the user sees the overlay on a dark background, two seconds should be enough to understand the point. Avoid stiff corporate phrasing and long descriptions. For SEO, normal page content and the image's alt text matter far more than stuffing the overlay with keywords.

Action Button and Link

Action Button is useful when there is a clear next step after viewing the image. The button should describe the action: "View Project," "View Services," "Book Now," "Go to Section," "View Catalog." If no action is needed, you can skip the button and leave the card as an interactive illustration.

The documentation notes that the button has text, link, style, and color settings, along with link action options. In practice, that means you should decide in advance where the card leads and how the user is expected to open the link. For an internal page, a normal transition is usually enough. For an external link, confirm that it is both safe and genuinely useful. For an anchor link on the same page, use a correct block identifier and test the scroll behavior.

Colors and Contrast

The text and button color should follow contrast rules. If the overlay is dark, the text and button should be easy to read without strain. If the overlay is colorful, do not use text in a similar brightness range. Fewer visual accents with stronger readability is the better tradeoff. For a set of cards, use one palette: the same overlay color, one button style, and the same text position. Different effects on neighboring cards quickly create the feel of a random page builder experiment.

After setup, run a quick test: step back from the screen or zoom the browser out. If you can still tell what the card does and where the button leads, the block is working. If you mostly notice the effect and lose the meaning, simplify the settings.

Microcopy for Cards: How to Keep It Short

A common editorial mistake in Image Pro is trying to fit a full paragraph into the overlay. For an interactive card, write like you would for a navigation element. The title answers "What is this?", the caption answers "Why open it?", and the button answers "What should I do?". If any part repeats another, shorten it.

The table is not a list of mandatory phrases. It shows the principle: fewer words, more action. If something needs a longer explanation, the user should land on a dedicated section or page rather than reading a long overlay.

Practical Example: Service Cards Linking to Page Sections

Let us walk through a scenario that fits most service websites: you need to create three interactive cards on a "Services" page. Each card shows an image, reveals a short explanation on hover, and includes a button that links to a more detailed section lower on the same page. This example is a good way to understand the mechanics of Themify Image Pro without unnecessary complexity.

The Goal of the Example

We want a row of three cards: "Site Audit," "Page Design," and "Support." In the default state, only the images are visible. On hover, a dim overlay appears along with a heading, a short caption, and a "Learn More" button. Each button links to its matching anchor on the page: #audit, #design, and #support.

Preparation

Before you begin, prepare three images with the same orientation. Horizontal images usually work best, or matching square crops if the layout uses equal-width columns. Upload them to the WordPress media library and fill in the alt text there. Then create three target sections on the page with the required anchors in Builder Row Options. If you are using anchors, make sure they are unique and not repeated anywhere else on the page.

What Should Already Be Enabled

• Themify Builder is active on the page where the layout is being built.
• Themify Image Pro is active and visible under Addons.
• Three prepared images with similar proportions.
• Three target page sections with clear anchors.
• Cache is disabled or cleared during setup so you can see fresh results.

Setup Steps

1. Open the page in Builder and create a row with three columns.
2. Drag the Image Pro module from the Addons section into the first column.
3. In the Image URL field, choose the image for the "Site Audit" card.
4. Set the same height for all cards, or use prepared images that already share the same size.
5. Choose a subtle hover effect, such as zoom in, if it matches the page's visual style.
6. Enable a color overlay and set a semi-transparent dark color so white text remains readable.
7. Fill in Image Title: "Site Audit".
8. Fill in Image Caption: "We identify weak points in structure, speed, and visual presentation".
9. In Action Button, enter "Learn More", and add #audit as the link.
10. Save the module, duplicate it into the two neighboring columns, and replace the image, text, and link.
11. Save the page and open it in a normal tab outside edit mode.

Checking the Result

Test three states: the normal view, the hover state on desktop, and the button click. Then open the page in a narrow window. If the columns stack vertically, the cards should still keep a matching height or at least look neat together. If the overlay hides too much, shorten the caption. If the button sits too low and extends beyond the image area, shorten the text or increase the block height.

A Note About Anchors and the Sticky Header

If the button links to an anchor lower on the page, the target section may end up partially hidden behind the site's sticky header after the click. This is not an Image Pro problem. It is a common behavior on pages with fixed headers. Test the scroll in normal view. If the header covers the beginning of the section, adjust the spacing on the target block using the theme or Builder. Do not try to fix it by randomly changing the link in Image Pro.

A Note About Repeated Links

If the entire card is clickable and there is also a button inside it, the user path can become unclear. In some layouts, it is better to make only the button clickable, while in others the whole card makes more sense. Choose one approach for the group. If each card has a single destination, a fully clickable card can be convenient. If the overlay contains multiple actions, do not overcomplicate it. Image Pro works best when there is one primary action.

Quick takeaway: after this example, you do not just have three images. You have a managed navigation zone where the image grabs attention, the overlay explains the meaning, and the button leads to a specific section.

Checking the Result: Responsiveness, Speed, SEO, and Accessibility

Saving the module is not the end of the work. Image Pro affects the public-facing part of the site, so you need to review not just the look, but the behavior of the page. A solid review covers four areas: responsiveness, speed, accessibility, and navigation.

Responsiveness

Open the page at desktop, tablet, and phone widths. Themify Builder supports responsive grids and dedicated preview modes, but the real result depends on your row, columns, image sizes, and overlay text. If the image becomes narrow on mobile, a long caption may overflow. In that case, shorten the text rather than trying to compensate for everything by shrinking the font.

If the card is important for navigation, test real touch interaction on a phone. Some hover effects behave differently on touch screens. The button should remain tappable, and the link should open without requiring a second unclear action. If the behavior feels questionable, you can make the button or text visible in the normal page flow and leave the overlay as a secondary effect.

Speed and Image Size

Images often become the heaviest part of the page. In its performance materials, Themify recommends avoiding oversized source files, matching real display dimensions, and using optimization. This matters especially for Image Pro because visual cards usually sit above the fold and can shape the visitor's first impression.

Check whether you are loading an oversized photo for a small card. If the card displays at around 400 pixels wide, you do not need to insert a file that is several thousand pixels wide. Large fullwidth blocks do need larger source files, but those still should be compressed and prepared for the web. If WebP is enabled in Themify or another tool, verify that it does not break the display.

SEO and alt Text

Overlay text is visible to users, but it should not replace normal page content. For search and accessibility, the important factors are context, headings, captions, the surrounding text, and the image's alt text. In the WordPress media library, fill in the alt field so it describes the image content and the role of the block, rather than repeating the product name or stuffing in keywords.

If the image is a link, it should have clear textual context nearby. A "Learn More" button by itself does not explain the destination, but together with the overlay title and the page section, it becomes clear. Do not make every button identical if the cards lead to different places and the destination is unclear without the title.

How to Avoid an SEO Mistake With Image Buttons

Sometimes an interactive image starts replacing a normal page section: the image contains text, the overlay contains the heading, and there is almost no HTML text around it. That is a weak pattern. Search engines and users with assistive technologies need a standard text structure on the page. That is why Image Pro should be used as visual support, not as the only place where meaning exists.

If a card links to a service page, there should be normal descriptive text next to it or below it. If a card presents a case study, the target page should have a heading, task description, outcome, and images. The alt text should not become hidden SEO copy. It should describe the image and, when relevant, its function. For example, "Site audit card linking to the review section" is more useful than a repeated keyword phrase with no context.

Accessibility and Readability

Check overlay text contrast, font size, and whether the clickable area is large enough. Avoid effects that are too fast or too abrupt if the page is intended for a broad audience. Glow, shine, and rotate may work in a promo block, but on a serious service page they can easily feel noisy. The best effect is the one that helps users notice the action without making them fight the interface.

A Four-Pass Publishing Review

Before final publication, review the page four times, each with a different goal. First pass: visual. Are the cards consistent, is the overlay readable, and do the effects fit with nearby blocks? Second pass: navigation. Do all buttons go to the right place, are the anchors correct, and are internal pages opening as expected? Third pass: technical. Are there console errors, is cache breaking the hover effect, and are the images larger than they need to be? Fourth pass: mobile. Has anything become too small, are taps comfortable, and is important information still visible?

This sounds longer than it actually takes. On a small page, it is just a few minutes. But it helps catch the less obvious problems: a button that still points to an old anchor, an overlay that looks fine in the editor but disappears on the public page, a card that depends on hover on mobile, or an image that is far too heavy for its actual rendered width.

Safe Visual Tweaks Through CSS

In most cases, the module settings are enough. But sometimes you may want to lightly unify the cards: add a common radius, limit height, align buttons, or create a soft focus state for keyboard navigation. If the exact classes differ in your version, do not copy CSS blindly. First, add your own class to the row, column, or module through Builder settings, for example service-image-cards, and keep all styling scoped to that area only.

Below is a safe example for a case where the block already has your own custom class. It does not modify WordPress core, plugin files, or the theme. CSS like this is best added in the location your site already uses for custom styles: a child theme, theme settings, custom CSS, or Builder page custom CSS. Before applying it, inspect the selectors in your browser's developer tools.

.service-image-cards img {
  border-radius: 10px;
}

.service-image-cards a:focus-visible {
  outline: 3px solid #2f7df6;
  outline-offset: 4px;
}

.service-image-cards .module {
  overflow: hidden;
}

This tweak does three things: it adds a shared corner radius to images inside your block, shows a clear focus state for keyboard navigation, and prevents internal effects from visually spilling outside the card boundary. If something looks wrong after applying it, remove the class from the container or remove the CSS. Rolling it back takes less than a minute because no plugin files were changed.

Do not use unverified snippets with hooks if the Themify Image Pro documentation does not confirm the required filter or API. For this product, it is safer to work through Builder settings, a custom class, and a small amount of CSS. PHP changes for the sake of a hover effect are usually unnecessary.

Why Image Pro May Display Incorrectly and How to Fix It

Most problems with visual modules are not caused by one "bad" setting. They come from a combination of factors: an unsuitable source image, cache, optimization conflicts, the wrong page mode, overlay text that is too long, or an expectation of desktop hover behavior on a phone. The troubleshooting below is the best place to start.

The Module Does Not Appear in the Builder Panel

Symptom: the addon is activated, but Image Pro is missing from the module panel. Possible causes: Builder is not active, the wrong page is open, admin-side cache, or a conflict after installation. What to check: the active plugin list, whether Themify Builder is present, the Addons section, and the Builder editing mode. How to fix it: refresh the editing page, clear cache, temporarily disable admin-side optimization, and test on a new page. If the module appears on a new page, the issue may be tied to the specific layout.

The Image Renders, but the Dimensions Do Not Match

Symptom: neighboring cards have different heights, a circle turns into an oval, or the image looks stretched. Possible causes: different source proportions, only width or only height is set, an external URL is used, Image Script is disabled, or the theme applies its own responsive styles. What to check: the actual file dimensions, the Width and Height fields, the image source, and the Themify Image Script settings. How to fix it: prepare images with the same proportions, upload them to the media library, use consistent dimensions, and use a square source file for the circle style.

Hover or Overlay Stops Working After Cache Is Enabled

Symptom: the effect works in the editor but not on the public page, or it works only after logging into the admin area. Possible causes: stale cache, combined CSS/JS, deferred jQuery, or a minification conflict. What to check: the page in incognito mode, the browser console, cache plugin settings, and Themify Performance Settings. How to fix it: clear cache, temporarily disable file combining and deferred script loading, then restore settings one by one. If a specific setting breaks the effect again, leave it disabled for that page or add an exclusion in the cache plugin.

Overlay Text Is Hard to Read

Symptom: the title and caption blend into the photo, or they become too small on a phone. Possible causes: weak contrast, a caption that is too long, a bright photo, or an aggressive overlay animation. What to check: overlay color, opacity, text length, and the mobile view. How to fix it: darken the overlay, shorten the caption to one line, use a calmer hover effect, and move part of the text into the normal page content.

The Button Leads to the Wrong Place or Cannot Be Clicked

Symptom: the click does not open the intended section, the anchor link does not scroll the page, or the button is covered by the overlay. Possible causes: the wrong URL, a repeated ID on the page, too small a clickable area, or a smooth-scroll script conflict. What to check: the exact anchor, ID uniqueness, behavior in a normal tab, and the mobile experience. How to fix it: correct the link, rename the anchor, increase the card height, temporarily disable the third-party smooth-scroll script, and test again.

Images Make the Page Too Heavy

Symptom: the page becomes noticeably slower, or performance reports flag oversized images or layout shifts. Possible causes: source files are too large, dimensions are not specified, too many cards appear above the fold, or image optimization is missing. What to check: actual file size, rendered size in browser dev tools, and lazy load / WebP settings. How to fix it: reduce source file size, specify dimensions, avoid placing too many heavy blocks above the fold, use image optimization, and do not duplicate caching layers.

How to Use Image Pro on Different Types of Pages

The same module can solve different tasks, but the settings should change with the context. Do not move a card from a landing page into a portfolio unchanged. Those pages have different goals, different text density, and different user expectations.

Service Page

On a service page, Image Pro works well as a visual entry point into sections. Use calm imagery, a consistent overlay, and a short button label. Do not turn the card into a full service description. Its job is to help the user choose a direction and move lower on the page or to a separate page.

Portfolio and Case Studies

For a small portfolio, the module can present individual projects. In the default state, it is usually best to keep the image clean so the work itself remains visible. On hover, you can reveal the project name, category, and a "View Case Study" button. If there are many case studies, a gallery or portfolio plugin is the better option so you can manage filters and the project list centrally.

Banners and Internal Promo Blocks

On long pages, Image Pro can serve as a polished visual banner. For example, after a section explaining a service, you can insert an image with an overlay and a link to a form. Here, contrast and restraint matter: the banner should support reading, not yank the user out of the content.

Team Cards

For team sections, it is best to avoid strong filters and harsh hover effects. Photos of people should remain natural. The overlay can show the role, specialty, and a link to the staff profile page. If you use the circle style, prepare square portraits with matching crops.

When Themify Image Pro Is the Right Choice

Themify Image Pro is worth using if your site already lives in the Themify ecosystem and you need a fast way to build interactive visual blocks without custom development. It is especially useful for service pages, small portfolios, team cards, promo inserts, and internal navigation blocks. The module's strongest advantage is that it lets you manage the image, overlay, text, and button in one place.

Before publishing, run a short final check: Builder is active, the module is visible under Addons, images are uploaded to the media library, dimensions are consistent, the overlay is readable, buttons lead where they should, the mobile view does not break, cache has been cleared, and heavy images are compressed. If all of that is in place, you can move into production use and download the installation file to test it on your site.

If, on the other hand, you need not a single interactive card but a full system of galleries, filters, albums, or portfolios, do not force Image Pro to solve someone else's problem. In that case, it is more sensible to choose a gallery or portfolio plugin, and keep Themify Image Pro for the places where it truly shines: a strong image, a clear caption, a polished effect, and one obvious next step for the user.