Themify Masked Image - WordPress Plugin

Themify Masked Image Guide: Configuring Masks, Text Wrap, and Result Checks

Themify Masked Image is not meant for simply dropping an image onto a page. It is designed for a more polished visual treatment inside pages built with Themify Builder: you can display an image through a shape, an icon, or a custom mask, and let the surrounding text wrap around that shape. In this guide, we will walk through how to prepare the page, where to find the module after installation, which settings to check first, and how to avoid ending up with a block that looks impressive but is hard to read.

This guide is intended for site owners, editors, and designers who already work with WordPress and want to add more distinctive visuals without hand-coding CSS. We are not going to repeat the product's marketing copy. Instead, we will follow a practical workflow: install the addon, add the module, choose the image source, configure the mask, width, height, spacing, caption, link, and alt text, and then verify the result on the live page.

Special attention is given to limitations. A mask will not fix a poor-quality photo, it does not replace a responsive layout, and it should never stand in for important text content. If you apply it without preparation, the block may look striking on a wide screen but fall apart on mobile, hurt readability, or create unnecessary load because the images are too large. That is why each section covers not only what to click, but why it matters.

At the end, you will find troubleshooting for common issues, an FAQ, and a comparison with similar solutions. After reading, you should be able to decide whether Themify Masked Image fits your site, how to test it safely on a separate page, and when a different image tool would be the better choice.

What problem an image mask solves in Builder

A standard image module outputs a rectangular image. That works well for cards, galleries, banners, and inline illustrations, but it does not always make a page memorable. Themify Masked Image adds an extra layer between the source image and the way it is displayed: the image itself stays the same, but the visible area is limited to the selected shape. As a result, a photo can become a circle, a soft organic shape, an icon, a decorative silhouette, or a custom SVG/PNG mask.

The second part of the job is text wrapping. Conceptually, this is closer to magazine-style layout: the illustration does not sit in a separate tile but becomes part of the text block itself. In practice, this works especially well in short promo sections, author notes, "about the product" blocks, service cards, short portfolio intros, and pages where you want to avoid a rigid grid of identical columns.

Where a mask works better than a standard image

This module makes sense when the image is supposed to support the text rather than compete with it. For example, on a cafe page you can show a dish photo in a more organic shape and pair it with a short description. On a coach's page, you can place a portrait inside a softer shape and wrap an intro around it. On a product landing page, you can show a product detail inside a mask that echoes the brand's visual language.

The real value appears when the shape of the image carries meaning. If the mask is chosen at random, the visitor sees only a decorative effect. If the shape matches the theme of the page, the visual flow, and the length of the text, the block becomes easier to understand: the reader can more quickly separate the visual accent from the main explanation.

How Masked Image differs from Image Pro and standard effects

Themify offers other visual tools for images, including modules and addons built around filters, overlays, animation, sliders, or image comparison. Themify Masked Image solves a narrower problem: image shape, edges, placement, and its relationship to nearby text. That means it is not the right choice if all you need is hover effects or a gallery. If you need a set of animated cards, another module will likely be a better fit. If you need one distinctive block with a non-standard silhouette, this addon is right on target.

The "source image - mask - result" logic

The workflow is straightforward: you choose a source image from the Media Library, then set the mask type, select a preset shape, icon, or custom file, and the page displays only the part of the image that falls within the mask area. Additional settings control alignment, edge blur, mask flipping, dimensions, link, caption, and spacing. This sequence should be clear before you start configuring the module: if the source image does not work compositionally, no mask will make it usable.

Who Themify Masked Image is for, and when it may get in the way

Themify Masked Image is best suited for sites that are already built with Themify Builder and need a targeted design accent without separate custom layout work. That could be a corporate website, a portfolio, a service promo page, a blog with custom illustrations, an event page, a small catalog, or a presentation-style block inside a long landing page.

The plugin is especially convenient for users who want to stay inside the Builder interface. There is no need to write mask-related CSS by hand, build text wrapping manually, or look for a separate library. The module appears in the Themify panel, can be added to a row, configured in a lightbox, and checked right away in backend or frontend edit mode.

Good use cases

• A promo block with an illustration and short text. A mask can make one image stand out without overloading the section with a grid.
• An author or expert profile block. A portrait, work-in-progress image, or product photo can feel softer and more polished when paired with an organic shape.
• A service or product page. The mask shape can reinforce the visual metaphor: a leaf, a wave, a circle, an icon, or an object outline.
• Design without custom CSS. If an editor does not want to write clip-path, mask-image, or more complex layout code, the addon provides a controlled interface-based alternative.

When it is better not to use a mask

If the image contains critical information - a diagram, table, interface, chart, settings screenshot, document, or text inside the image - a mask may crop important details. In that case, it is better to keep the standard rectangular output so the full content remains readable.

You should also be careful with long text. Wrapped text can look great in a compact block, but across several large paragraphs it may create uneven line lengths and tire the reader. If you need to explain something complex, it is usually better to place the image separately and keep the text in a clean column.

Practical rule: if removing the mask only loses a decorative accent, it is safe to use one. If the user loses meaning without the exact shape or without seeing the full image, use the standard image module or a gallery instead.

Ecosystem limitation

This addon requires Themify Builder. It makes sense on sites where Builder is already in use or where you are willing to build the relevant page with Themify. If the site is fully built with another page builder, installing Builder just for one visual effect usually makes maintenance harder. In that case, the comparable feature inside your current builder will be the more practical option.

What to check before installation

Before installing, it helps to do more than a technical check. You should also review the content and the real-world usage context. Themify Masked Image looks visually simple, but it depends on Builder, the Media Library, image dimensions, the theme, caching, and the editing mode. Issues usually happen not because the module is complicated, but because it is dropped directly onto a live page without checking the source assets or responsive behavior first.

Builder and where you will edit

First, make sure the site has Themify Builder. It may be built into a Themify theme or installed as a separate plugin. Themify documentation notes that Builder works in both backend and frontend edit mode, and that addons appear in the modules panel. This matters for Masked Image: if Builder does not load on the page, you will not see the module in a normal working context.

It is better to test the addon on a draft, a page copy, or a staging site instead of the homepage. That gives you room to change the mask, spacing, and dimensions without risking a live block. If the site is commercial or gets a lot of traffic, it is especially useful to test one short section first and only then roll the pattern out to important pages.

Preparing the image

A masked block needs an image with some compositional breathing room. If the face, product, or main subject sits right against the edge of the frame, the shape may crop something important. It is better to choose a source image where the main subject is closer to the center or positioned where it can be shifted comfortably within the visible area.

Size matters too. Themify recommends optimizing images for the web and avoiding unnecessarily heavy files. For a masked block, you usually do not need a camera-original image that is several thousand pixels wide. Prepare the file for the actual display size, compress it, fill in the alt text in the Media Library, and make sure the image still looks good before any mask is applied.

Custom mask file

If you plan to use a custom SVG or PNG, keep the shape simple. The mask should remain recognizable at small sizes, without tiny holes, thin lines, or overly complex contours that disappear on mobile screens. With PNG, transparency matters. With SVG, you want a clean outline without extra objects. If you are unsure, start with a preset or an icon and only move to a custom shape after you have confirmed the basic result.

Cache, optimization, and update safety

After changing Builder content, you may need to clear the site cache, the Themify cache, or the cache from a third-party plugin. The Builder changelog regularly includes fixes related to compatibility, security, XSS, data saving, WPML, Rank Math, WooCommerce, and lazy load. That is not a reason to avoid updates, but it is a reason to test visual blocks after them. For pages with non-standard layouts, it is safer to build a habit: update Builder, open the key page, and check the mask on desktop and mobile.

Installing the addon and running the first check in Themify Builder

Themify Masked Image is installed like a standard WordPress ZIP plugin. Official Themify documentation describes the usual path through the admin panel: download the addon from the Member Area, open Plugins - Add New, click Upload Plugin, choose the ZIP file, install it, and activate it. If your browser automatically extracted the archive, you need the ZIP file again, because WordPress expects plugin uploads as archives.

After activation, do not look for a separate Masked Image settings page in the main WordPress menu. This is a Builder addon, so the actual workspace is inside Themify Builder. Create or open a page, enable Builder, and check the modules panel. Themify documentation states that the Masked Image module is located under Addons and is available in both backend and frontend edit mode.

First-check sequence

1. Open a draft page or create a temporary page for testing.
2. Enable Themify Builder in the mode you normally use.
3. Open the modules panel and find Masked Image in the Addons group.
4. Drag the module into an empty row.
5. Select any test image from the Media Library.
6. Choose a simple mask from the built-in presets and save your changes.
7. Open the page on the public side of the site in a separate tab and make sure the shape is actually being applied.

This check is not about appearance. It is about confirming the full chain: the plugin is active, Builder sees the addon, the module saves correctly, the page renders the result, and the cache is not serving an old version. If something fails at this point, do not move on to complex SVG files, dynamic fields, or fine spacing adjustments. First get a predictable result with a basic shape.

Importing a demo layout

The addon ZIP file may include a sample Builder data file. Themify documentation describes importing a demo layout through Themify Builder - Import / Export - Import in the top admin bar on a page where Builder is enabled. This is a useful way to understand how the official example was built, but you should not copy the demo directly onto a live page. It is better to import it into a separate draft, study the settings, and then build your own block around the actual site content.

Quick takeaway: a successful installation is confirmed not by seeing the plugin in the list, but by seeing the module appear in Builder, drop into a row, save correctly, and render the mask on the live page.

Configuring the module: image, mask shape, and text wrap

Configuring Themify Masked Image starts with choosing the image, but the quality of the result depends on how several settings work together. If you pick a nice shape but ignore width, height, spacing, and alt text, the module will look like random decoration. Below is a practical sequence that helps you build a working block quickly.

Image Alignment and how it relates to text

The Image Alignment setting determines how the image sits relative to the text. This is not just a decorative choice. If the image is on the left, the eye catches the shape first and then moves into the text. If it is on the right, the block reads more calmly and the visual accent supports the paragraph after reading has already started. In left-to-right languages, a left-aligned image is often safer for a short promo block, but for longer text a right-aligned image can sometimes preserve the reading rhythm better.

Check the alignment against real text, not placeholder copy. A short paragraph may look perfect, but once you add two or three paragraphs, the lines may become too narrow. If line length becomes short and choppy, reduce the image width, increase the horizontal gap, or drop the text wrap in favor of a separate column.

Image URL and the source image

The Image URL field controls the image that will be masked. Choose a file from the Media Library so WordPress and Themify can handle image size, alt text, and image processing correctly. Themify documentation for Image Script specifically warns that external images hosted on another server cannot always be generated or cropped dynamically by Themify Image Script, so for predictable results it is better to keep source images in the site's own Media Library.

How to choose the right composition

For a circular or organic mask, photos with the main subject near the center usually work best. For an icon-based or more complex shape, use an image with a large subject and a calm background. If you plan to wrap text around the image, avoid pictures where important details sit near the edge, because the edge is most often where cropping or blur becomes visible.

Mask Type: Image or Icon

Masked Image lets you choose the mask type. If you select Image, you can use preset masks or supply your own mask file. The official product page mentions 16 preset shapes and support for custom mask images/icons. If you select Icon, the module shows an icon picker tied to the icon library. In practice, these are two distinct approaches.

An image mask works best when you need a shape from the built-in set or a custom SVG/PNG. An icon mask is useful when the shape should be symbolic, such as a leaf, star, geometric mark, or simple pictogram. Do not choose an icon just because it looks fun. It should remain large enough and clear enough at the final display size.

Mask Feather and edge softness

Mask Feather (Blur) softens the edge of the mask. A small value can make the transition feel smoother, especially when the source image is high-contrast. Too much blur turns the shape into a smudge and can make the result feel lower quality. On business-oriented pages, a subtle edge or no blur at all is usually enough. On a more creative landing page, a more noticeable edge can work, but only after you check it on mobile.

Flip Mask Image

The Flip Mask Image setting lets you flip the mask horizontally, vertically, or both. This is useful when the shape has direction. A wave, arrow, leaf, or asymmetrical outline may guide the eye toward the text more effectively after being flipped. If the shape is symmetrical, this option will not change the meaning much, but it can still help fine-tune the composition.

Width, Height, and Fullwidth

Width and height set the intended size of the image in pixels. The Masked Image documentation also mentions a Fullwidth option that allows the image to take up the available width of the container. The right choice depends on the section. For wrapped text, it is usually better to set a reasonable fixed width so the text does not become too compressed. For a hero block or a large visual accent, you can go wider, but in that case the text is often better placed in a neighboring block rather than forced to wrap around a large shape.

In its performance-related materials, Themify recommends specifying image width and height whenever the module allows it. That helps avoid unnecessary layout shifts and makes it easier to verify whether the source file size matches the actual display size. If you set the module to 420 by 420 but upload a huge original photo, you should compress or prepare the file more appropriately.

Horizontal Gap and Vertical Gap

These spacing settings control the distance between the mask and the surrounding text. Horizontal Gap is especially important: if it is too small, the text almost sticks to the shape. If it is too large, the block starts to feel split into two separate visual zones. Vertical Gap helps separate the image from the lines above and below so the text does not feel cramped around the shape.

Image Title, Link, Caption, and Alt tag

These extra fields help make the image useful rather than merely decorative. Image Alt tag matters for accessibility and should describe the image itself rather than repeat the page title. Image Link should be added only when a click is actually expected, such as linking to a portfolio item, a product, a section, or a larger version of the image. Image Caption and Image Title may appear on hover, but do not treat them as your main text, because hover behavior can be unpredictable on touch devices.

Custom SVG/PNG masks and clean edges

A custom mask is the strongest part of this addon because it lets you tie the image directly to the brand or the theme of the page. But this is also where mistakes happen most often: an SVG that is too complex, PNG transparency that does not work well, a shape without enough edge padding, or an outline that looks great in the editor but becomes hard to read in a smaller block.

How to prepare an SVG

For SVG, it is best to use one simple silhouette without tiny internal details. If the shape is made of many thin lines, the final image will look jagged and messy. Before uploading, open the SVG in a browser or graphic editor and make sure the silhouette reads clearly as a solid shape. In a mask, what matters is not the beauty of the internal elements, but a clean and understandable visible area.

Do not include unnecessary text elements, hidden layers, or decorative groups in the SVG. The simpler the file, the lower the risk of strange rendering issues. If a designer prepared the shape, ask for a separate export made specifically for masking, not the full brand mark with every detail included.

How to prepare a PNG

A PNG mask should have a transparent background and a clearly defined visible area. If the edge is semi-transparent, it can create a softer transition, but the result needs to be checked against different backgrounds. If the PNG looks like a tiny icon inside a large transparent canvas, the image inside the mask may end up too small. Trim the empty edges down to a reasonable margin.

Checking whether the shape makes sense

The shape should support the theme of the page. For a natural skincare section, a soft organic mask makes sense. For an IT service page, a geometric shape or clean icon is usually more appropriate. For a photographer's portfolio, the mask can be more expressive, but it should not hide the actual work. If the shape has no connection to the content, a more neutral preset is usually the better choice.

A safe CSS tweak for a single section

If you assigned a custom CSS class to the row in Builder, for example mask-showcase, you can gently improve the visual context around the block without editing the plugin or the theme. This kind of code belongs at the page or child-theme level and is easy to remove later. It does not change how Masked Image works. It only adds a calm background and spacing around the section.

.mask-showcase {
  padding: 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7ef, #f4fbff);
}

.mask-showcase p {
  max-width: 760px;
}

The check is simple: add the class only to the test row, save Builder, open the page while logged out of the admin area, and make sure the background appears only in the intended section. To roll it back, remove the class from the row or remove the CSS from wherever you added it. Do not use global selectors like img or .module, because they may affect other blocks across the site.

Practical example: a promo block with an organic photo and text

Let us walk through a real-world scenario: you need to build a section for a service page. On the left, there will be a masked photo of a specialist or a work result. On the right and around it, there will be short text. The goal is not to create a banner or a gallery, but a compact block where the image helps explain the offer.

Goal

You want to create a friendly visual accent at the beginning of a "How the process works" section. The image should not take up half the screen, and the text must stay readable. The mask should be soft rather than sharp or aggressive, because this block is meant to explain, not overwhelm.

Preparation

Before configuring the module, prepare a draft page, an active Themify Builder setup, an image in the Media Library, and about 120 to 180 words of text. If you have more text than that, split it into two blocks or keep the mask only next to the first paragraph. For testing, use an image where the main subject is not pressed against the edges.

Setup steps

1. Open the page and enable Builder.
2. Add a new single-column row or use an existing text block where the accent is needed.
3. Drag Masked Image from Addons into the right spot.
4. In Image URL, select the prepared photo.
5. In Image Alignment, choose left or right placement based on the reading direction of the block.
6. In Mask Type, choose Image and start with one of the preset shapes.
7. Set the width and height so the image takes up roughly one-third of the text area, not half of the entire section.
8. Add Horizontal Gap so the text does not cling to the edge of the shape.
9. Fill in the Image Alt tag based on what the image actually shows.
10. Save Builder and open the public page in a new tab.

Check

On a wide screen, check three things: the text does not become too narrow, the shape does not crop an important part of the image, and the block does not feel heavier than the surrounding sections. Then reduce the browser width or use responsive preview mode. On mobile, the image may move to its own line or change the overall proportions. If the block becomes awkward, reduce the image size, change the alignment, or fall back to a normal non-wrapped image layout.

One nuance

Do not try to force a perfect result through module settings alone if the source text is too long. Text wrap works well as an accent, not as a way to format a large explanatory section. If your explanation is long, keep Masked Image next to a short introduction and move the detailed content below into regular paragraphs or a list.

Checking the result: responsiveness, speed, and accessibility

After saving the block, do not check the appearance alone. A masked image is still an image on the page, which means it affects loading, accessibility, dimensions, and layout behavior. On a small site this may feel excessive, but these details are what separate a polished design choice from a random visual insert.

The public-facing page

Always check the page outside of Builder mode. The editor may display extra panels, frames, controls, and styles that site visitors never see. Open the page in a separate browser or a private window where you are not logged in. That shows you the actual page width, cache behavior, theme styling, and script behavior seen by real users.

Responsiveness

Themify Builder includes responsive styling and device previews. Use those tools for visual tuning, but also check the real browser window. You want to see whether the line length becomes too short next to the image, whether the mask spills outside the container, whether spacing breaks down, or whether the shape becomes too small.

Performance

Because the module works with an image, the main risk is an oversized source file. Themify performance guides recommend optimizing images, defining dimensions, and checking the actual rendered size in browser tools. That matters even more for Masked Image: the shape may look small on the page, but if it is loading a massive file, the page will still be slower than it needs to be.

Check the Network tab in your browser's developer tools. If the image file is larger than necessary for its real display size, prepare a new file and replace it in the Media Library. Then clear the cache and review the page again.

Accessibility and SEO

A mask does not remove the need for alt text. If the image is decorative, the alt can be short and neutral. If it shows a person, a product, a process, or a result, describe exactly that. Do not stuff the alt text with the product name or keyword phrases. From an accessibility standpoint, it matters more to explain what a non-visual user is missing.

Updates and regressions

Builder is actively updated, and the changelog shows fixes related to security, settings persistence, conflicts, lazy load, WPML, and other plugins. After updating Builder or a Themify theme, open the page with Masked Image and verify that the shape is still intact, the text has not shifted, the alt text is still there, the console shows no obvious errors, and the cache is serving the latest version. This takes only a few minutes and often saves hours of later troubleshooting.

When Themify Masked Image is worth using

Themify Masked Image is a strong choice if you already work in Themify Builder and want to add one or several expressive blocks where the shape of the image supports the text. It is especially useful for promo sections, author blocks, services, portfolios, and pages where you want to move beyond a plain rectangular illustration without writing custom CSS.

Before rolling it out, check three things: Builder works reliably on the target page, the source image is prepared for the web, and the chosen mask does not hurt readability. After configuration, always open the public page while logged out, check both desktop and mobile, review the image file size, and make sure the alt text is filled in meaningfully.

If your use case matches the one described in this guide, you can move to the download section and download the installation file for safe testing on a draft page. Start with a built-in mask and a short piece of text, then gradually add a custom SVG/PNG, spacing, a link, and visual refinements. That way the module stays manageable instead of turning into an effect for its own sake.