Post Featured Image

Content Controls

This section provides a variety of controls for managing the Post Featured Image element, allowing you to set a fallback image, define the image size, add alternative text for accessibility, and manage captions and links associated with the image. You can also enable lazy loading to improve page load performance.

  • Fallback Image – Specify a default image to be used when the primary post image is not available.
  • Image Size – Choose from a list of predefined image sizes or set a custom size for your post’s featured image.
  • Alt – Manage alternative text settings for the image.
    • Alt – Choose the source of the alternative text. Options may include default, custom, or none.
    • Custom Alt – Manually enter alternative text for the image. (This control is only available when “Alt” is set to “Custom”.)
  • Caption – Manage caption settings for the image.
    • From Library – Choose whether to use the caption from the media library.
    • Caption – Manually enter a caption for the image. (This control is only available when “From Library” is not active.)
  • Link – Set link options for the image.
    • Link – Choose the type of link to apply to the image, such as a URL, media file, or none.
    • URL – Set a custom URL for the image link. (This control is only available when “Link” is set to “URL”.)
    • New Tab – Toggle to open the link in a new browser tab. (This control is available when “Link” is set to either “URL” or “Media”.)
    • Image Size – Select an image size for the lightbox. (This control is only available when “Link” is set to “Lightbox”.)
  • Lazy Load – Toggle to enable or disable lazy loading for the image, which can help improve page load performance.

Design Controls

Image

Adjust the dimensions, aspect ratio, and other design aspects of the post’s featured image. Customize the appearance with zoom and focus point options and manage object fit settings to ensure the image displays as desired.

  • Width – Set the width of the image, with options to specify units.
  • Max Width – Define the maximum width of the image, ensuring it doesn’t exceed a certain size.
  • Height – Set the height of the image with options for various units.
  • Aspect Ratio – Choose a predefined aspect ratio for the image or set a custom ratio.
  • Custom Ratio – Define a custom aspect ratio for the image, specifying width and height. (Available when “Aspect Ratio” is set to “Custom”.)
    • Width – Set the width part of the custom aspect ratio.
    • Height – Set the height part of the custom aspect ratio.
  • Object Fit – Determine how the image should be resized to fit its container. (Available when either “Height” is set or “Aspect Ratio” is set to “Custom”.)
  • Zoom – Zoom in or out on the image.
  • Focus Point – Set a specific focus point for the image. (Available when “Zoom” is active.)

Effects

Enhance the image with various effects, adjust its opacity, and apply filters for creative styling. Use the mask options to shape the image and set blend modes for advanced image blending effects.

  • Opacity – Adjust the image’s transparency, making it more or less opaque.
  • Filters – Apply various filters to the image for enhanced visual effects.
    • Filter Items – Add and configure multiple filter effects to the image.
      • Type – Select the type of filter to apply.
      • Blur Amount – Set the intensity of the blur effect. (Available when “Type” is set to “Blur”.)
      • Amount – Adjust the intensity of various filters. (Available for brightness, contrast, grayscale, invert, saturate, and sepia filters.)
      • Rotate – Set the rotation degree for hue-rotate filter. (Available when “Type” is set to “Hue-Rotate”.)
  • Transition Duration – Set the duration for transition effects applied to the image.
  • Mask – Apply a mask to the image, defining its shape, size, and other properties.
    • Shape – Choose a predefined shape or upload a custom one for the mask.
    • Custom Shape – Upload a custom shape for the mask. (Available when “Shape” is set to “Custom”.)
    • Size – Select a predefined size for the mask or set a custom size.
    • Custom Size – Define a custom size for the mask. (Available when “Size” is set to “Custom”.)
    • Position – Set the position of the mask over the image.
    • Repeat – Choose how the mask should be repeated over the image.
  • Blend Mode – Set the blend mode for the image, defining how it should blend with the background or other images.

Borders

Enhance the visual appeal of your post’s featured image by adding and customizing borders. You can adjust the border’s radius for rounded corners, apply various styling options to make it unique, and add shadow for a sense of depth. All these controls work together to give your image a polished and cohesive look.

  • Radius – Adjust the border’s radius to create rounded corners, giving your image a softer, more modern appearance.
  • Styling – Customize the border’s look with styling options that let you choose the border’s width, color, and style, tailoring it to suit your design.
  • Shadow – Add a shadow effect to your image, creating depth and helping it to stand out on the page. Adjust the shadow’s color, blur, and position.

Spacing

Control the spacing around your post’s featured image, ensuring it has enough breathing room and is positioned exactly where you want it. Adjust the margin at the top and bottom to align the image perfectly within your content. These controls are crucial for fine-tuning the image’s placement and ensuring a balanced layout.

  • Margin Top – Increase or decrease the space above the image, helping you to position it precisely and improve the flow of your content.
  • Margin Bottom – Adjust the space below the image to ensure it sits well with the rest of your content and maintains a balanced look.

Caption

Add a caption to your post’s featured image to provide additional context or draw attention to certain aspects of the image. Customize the caption’s position, background, and typography to ensure it complements your image.

  • Position – Choose where you would like the caption to appear in relation to the image, ensuring it catches the viewer’s eye and adds value to the image.
  • Background – Set a background color for the caption to make it stand out or blend in with the rest of your design, depending on your preference.
  • Typography – Adjust the font style, size, and other text properties to ensure the caption is easy to read and matches your site’s typography.
  • Borders – Add and customize borders for your caption, adjusting the radius, styling, and shadow to frame it perfectly and add a touch of elegance.
    • Radius – Create rounded corners for your caption’s border, giving it a modern and sleek appearance.
    • Styling – Apply various border styles to find the perfect look that complements your caption and image.
    • Shadow – Add a subtle shadow to lift the caption off the page and create a sense of depth.
  • Spacing – Manage the spacing around your caption, ensuring it has enough padding to stand out while maintaining a harmonious relationship with the image.
    • Padding – Adjust the padding around the caption text to ensure it’s properly framed and easy to read.

Lightbox

Enhance your post’s featured image with a lightbox effect, creating an immersive viewing experience for your visitors. Adjust the background and control colors to ensure they complement your site’s design and enhance the visual appeal of your image. These controls help you create a cohesive and engaging image presentation.

  • Background – Set the background color of the lightbox to enhance the visual experience and ensure your image stands out.
  • Controls – Customize the color of the lightbox controls, ensuring they are visible and harmonize with the rest of your design.