MultiLayer Image and Text block
• PlugIn for WordPress
designed for Gutenberg
FREE PlugIn
Unlock Stunning Visual Design in WordPress: Unlimited Layering & Creative Freedom!
Leveraging dynamic layering, easily create advanced visual content like banners, covers, and unique layouts directly within your WordPress site. It’s designed for flexibility and simplicity.
Key Features:
Unlimited Layering
Offer the ability to overlay an unlimited number of image and text layers, each fully customizable with independent settings.
Precision Positioning
Move any layer freely along the X/Y axes via intuitive sliders or precise numeric entry, supporting percentage and pixel measurements consistently for images and text.
Advanced Dimensioning
Define the width and height for each image layer, offering flexible unit options like pixels (px) and percentages (%), thus enabling maximum design versatility.
5 Distinctive Image Fit Modes
Cover – Contain – Fill
Scale Down – Free Mode
Z-Index Management
Dynamically adjust layer overlap order to achieve your desired visual composition
Customizable Container
Choose between “Full Width” or “Fixed Width” modes, with direct control over container height
Advanced Typography Controls
For text layers, configure font family, size, weight, text transformation, line height, letter spacing, color, opacity, and alignment with precision.
Intuitive Drag & Resize
Includes a comprehensive visual interface, facilitating the direct and precise resizing of individual layers directly inside the editor view.
Compatibility & Responsiveness
Seamlessly works with modern themes, supports responsive layouts, and ensures consistent rendering between editor and frontend.
Localization Ready
All strings are in English and primed for translation into any language via WordPress translation systems.
Performance & Cleanliness
Optimized code with no heavy external dependencies, fully compliant with WordPress security and quality standards.
Typical Use Cases
Perfect for cover designs, hero sections, banners, graphic call-to-actions, creative presentations, and custom landing pages.
MultiLayer Image and Text Block is the ultimate Gutenberg block that revolutionizes visual content design by enabling dynamic image and text layering with unprecedented creative flexibility.
Craft advanced layouts, stunning banners, and professional covers with unlimited layering capabilities, precise typographic controls, intuitive visual resizing, and comprehensive localization support.
Engineered for simplicity yet packed with powerful features, this plugin delivers a seamless, 100% WordPress-native design experience.Enhance your content layout with just one click!
How to Use
MultiLayer Image and Text block
MultiLayer Image and Text Block is an advanced Gutenberg block that empowers you to create complex layouts by overlaying images and text with complete control over the size, position, and style of each layer.
- Go to the WordPress editor (Gutenberg) and click “Add block”.
- Search for “MultiLayer Image and Text Block” and add it to your page or post.
This block is structured with a main container (offering options for fixed or full width) and one or more layers (which can be images or text) that are stacked on top of each other.
- In the right sidebar panel, click “Block Settings”.
- Choose whether to add an image or text layer.
Click on the desired layer to select it from the list in the right sidebar panel.
Select the layer you want to delete in the right sidebar of the block and click on “Remove layer”.
In the “Container Settings” panel, you can:
- Choose between Full Width (maximum width) or Fixed Width.
- Set the container height in pixels.
- Select the background color for the fixed width block (Fixed width only)
- Set the width (only in Fixed Width mode).
For all layers (image and text):
- X/Y Position: Move the layer on the X and Y axes using sliders or numeric input (values in % or px).
- Dimensions: Modify the layer width and height using sliders/input (values in px, %).
- Z-index: Change the stacking order of the layers.
- Modify the layer’s transparency: value (0 = fully transparent – 100 = no transparency)
Image layers only:
- Replace image: Upload or select a new image from the Media Library.
Text layers only:
- Content: Insert or edit the displayed text.
- Font Family: Choose the font from the available options.
- Font Size: Set the size of the text.
- Font Weight: Choose the thickness (e.g., Regular, Bold, Light, etc.).
- Text Transform: Apply uppercase, lowercase, etc.
- Line Height: Adjust the spacing between lines.
- Letter Spacing: Modify the spacing between letters.
- Color: Change the color of the text.
- Background Color: Change the color of the background text.
- Text Align: Align the text (left, center, right).
You can resize each layer directly with the mouse by dragging the corners of the selected layer in the preview, or by using the related controls in the right sidebar.
In the “Container Settings” panel, you can:
- All changes are visible in real-time within the editor.
- Save the page/post to see the result on the frontend, which should closely match the editor view. (Please note that the frontend appearance can vary slightly from the editor depending on whether you are using a responsive full-width layout or a fixed-width block, as well as horizontal size differences between the editor and frontend. Experimentation may be necessary to fully understand the potential combinations and achieve your desired outcome.)
All labels and controls are in English and ready for translation using standard WordPress localization methods.
- Use web-optimized images.
- Take advantage of text layers for creating effective call-to-action buttons, engaging titles, or informative descriptions.
- Experiment with combining multiple image and text layers to achieve sophisticated graphic designs.
In this free version, layer positioning is controlled using sliders and numeric input fields, rather than direct drag-and-drop functionality. Direct drag & move is planned for a future premium release.
Compatibility: The plugin is compatible with the WordPress Gutenberg editor and works with standard themes that support block alignment. Make sure you have WordPress 5.0 or later versions and the Gutenberg editor active.
FAQ
-
What is MultiLayer Image and Text Block?
It’s an advanced block for the WordPress Gutenberg editor that allows you to creatively overlay images and text with full control over the size, position, and style of each layer.
-
How many layers can I add?
There’s no limit: you can add as many image and text layers as you need within the same block.
-
How do I position the layers?
Layer positioning is managed through intuitive sliders or by manually entering X and Y values (which can be in percentages or pixels). Please note that direct manipulation via mouse drag & drop is a feature planned for a future premium version and is not available in the free version at this time.
-
Can I resize layers with the mouse?
Yes, you can visually resize image layers by clicking and dragging the corner handles directly in the block preview. Text layers, logically, are not resized in the same way; instead, their dimensions are controlled by adjusting the font size settings.
-
Is it possible to change the order of layers (z-index)?
Absolutely! You have the ability to change the z-index setting for each individual layer, allowing you to determine their visual order and which layers are positioned in front or behind others.
-
Can I customize the font and style of the text?
Yes, indeed! For every text layer you add, you have full control over various typographic settings, including font family, size, weight, color, text transformation (like uppercase), line height, letter spacing, opacity, and text alignment.
-
Is the plugin responsive?
Yes, the block and all the layers you create with it are built to be responsive, meaning they will adjust their layout and size to fit different screen sizes and work seamlessly with modern WordPress themes. Important: Be aware that the “Fixed Width” mode is not truly responsive and is intended for creating layouts with specific, non-fluid dimensions. We advise experimenting with both “Full Width” and “Fixed Width” modes to determine which is most suitable for your design needs.
-
Can I translate the plugin into other languages?
Yes, absolutely! All text strings within the plugin have been properly localized and are fully compatible with the standard WordPress translation system.
-
Can I use multiple MultiLayer blocks on the same page?
Absolutely yes, you can insert multiple MultiLayer Image and Text Blocks on the same page or post.
-
What are the limitations of the free version?
The free version limits layer positioning to the use of sliders and numeric input fields. Direct drag-and-drop functionality is planned for a future premium release. Furthermore, the free version does not contain all the features that are currently being developed for the Premium version.
-
Do I need to install external libraries?
No, the plugin is fully integrated within the WordPress editor and does not require any external dependencies.
-
How can I report a bug or suggest a feature?
You can contact the developer through the plugin’s support page on WordPress.org or via the official website listed on the plugin’s page.