Text Cutout

The Text Cutout shortcode for WordPress can be used to display text with a see-through cutout effect over a background image, anywhere in posts or pages. It can easily be used as headings, but also to bring an idea to user’s attention with style. Check below for example implementations and shortcode documentation:

Text Cutout Examples

CUTOUT TEXT

Text Cutout Shortcodes

Text Cutout Shortcode
[x3m-cutout img="https://x3mmedia.com/wp-content/uploads/google-maps.jpg" width="100%" textbackground="white" fontsize="4" fontweight="bold" align="center" padding="10px"]CUTOUT TEXT[/x3m-cutout]
The shortcode can be used to display an image with a layover over it and see-through text. Above example displays an image with white layover and cutout text.

Text Cutout Documentation

Here are the shortcode option settings available for Text Cutout:

Shortcode Settings Details
img=”img link” This is used to set the link for the background image.
width=”300px” This is used to set the background image width, in pixels (ex “300px”) or percentage (ex “100%”).
height=”300px” This is used to set the background image height, in pixels (ex “300px”) or percentage (ex “100%”).
textbackground=”white” This is used to set the background color of the layover over which the text is displayed.

Color names or HEX color codes can be used to set the desired color.

fontsize=”4″ This is used to set the font size for the text. Numeric values accepted.
fontweight=”bold” This is used to set the font weight for the text. Accepted values: “regular”, “bold”, “italic”.
align=”center” This is used to set the text alignment on the image background. Possible options: “left”, “right”, “center”.
padding=”10px” This is used to set the text layover padding around the text.