Make your website more attractive yet informative with the help of creative graphics using the Image component.
Basics Settings
- Date Publishing Settings
- Set the Start Publishing and Finish Publishing dates. This will cause the ui/Theme-Builder component to only be published for the specified time period. If you use both the Start Publishing and the Finish Publishing, the ui/Theme-Builder component will show up only between the beginning date and the ending date.
- Start Publishing
- If you only set the Start Publishing and not the Finish Publishing, Joomla! will begin displaying the ui/Theme-Builder component on the beginning publishing date given but it will never stop showing the component.
- Finish Publishing
- If you only set the Finish Publishing and not the Start Publishing, Joomla! will show the ui/Theme-Builder component as soon as you have turned it on and will stop showing the component once the ending publishing date has been reached.
- Label
- Define a name to easily identify this element inside the Theme-Builder.
- Position
- Position the component in the normal content flow but with an offset relative to itself.
- Left
- If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. (e.g. 20% or 50px ...) - Right
- If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. (e.g. -20% or 50px ...) - Top
- If position: relative; - the top property makes the element's top edge to move above/below its normal position.
If position: absolute; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. (e.g. -20% or 50px ...) - Bottom
- If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
If position: absolute; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. (e.g. 10% or 50px ...) - z-index
- The z-index property specifies the stack order of an element. Z-index only works on positioned elements (position: absolute, position: relative).
- Height
- The height CSS property sets the height of the content area of an element. Can be helpful if the image is used as a background image layout.
- Show
- Select one of the following options to show the element for screens larger than the specified width.
- Hidden
- Select one of the following options to hide the element from screens larger than a specified width.
- Class
- Define one or more class names for the element. Separate multiple classes with spaces.
- ID
- ID Selector for the element.
Title Settings
- Title Show
- When set to 'Yes', this option will enable component title in front-end.
- Title
- Enter text which will be used as Component title.
- Title HTML Tag
- Choose a HTML-Tag for the title.
- Font Size
- Set Title font size for this selector.
- Font Weight
- Set Title font weight for this selector.
- Title Style
- Choose a title style modifier.
- Title Color
- Choose a Title color.
Style Settings
- Addon Padding
- Choose a padding for the component.
- Image Shadow
- Choose a Image Shadow.
- Image Shadow Bottom?
- Yes or No.
- Custom Image URL
- In this option, the complete URL of the image is specified in the src attribute of HTML img tag.
- Image Typ
- Choose an image display type.
Note: Background images have other setting options such as default images, SVG files or SVG image links. (Image Height, Image Border etc) - Item Image
- Choose an image.
- Image Caption?
- Yes or No.
- Image Link?
- Yes or No.
- Choose a SVG File
- CSS masking gives you the option of using an image as a mask layer. Default Path: JOOMLA_ROOT/media/com_uithemebuilder/images/svg-masks
- Mask repeat?
- This property specifies whether and how a mask image is repeated (tiled).
- Use custom Mask Size?
- If you choose Yes you can set your own settings for the mask image size.
- Choose Mask Size
- This property specifies the sizes of the mask images.
- Custom Mask Size
- The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. For Example: One-value syntax, 50% or 3em... Two-value syntax, 50% auto or 3em 25% etc.
- Mask position
- This property sets the initial position, relative to the mask position layer.
- Mask mode
- This property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
SVG Image Link Style
- SVG Container Height
- Set SVG Container Height
- SVG Image Height
- Set SVG image height in %
- SVG Image Width
- Set SVG image width in %
- SVG Image X Padding
- Set SVG image horizontal padding in %. Useful for SVG DropShadow.
- SVG Image Y Padding
- Set SVG image vertical padding in %. Useful for SVG DropShadow.
- Use Drop Shadow?
- Yes or No.
- Drop Shadow Color
- Set Shadow color.
- Drop Shadow X Offset
- Set DropShadow horizontal displacement.
- Drop Shadow Y Offset
- Set Drop Shadow vertical displacement.
- Blur X Offset
- Set Drop Shadow blur horizontal displacement.
- Blur Y Offset
- Set Drop Shadow blur vertical displacement.
- Use innerShadow?
- Yes or No.
- innerShadow Color
- Set innerShadow color.
- innerShadow X Offset
- Set innerShadow horizontal displacement.
- innerShadow Y Offset
- Set innerShadow vertical displacement.
- Blur X Offset
- Set innerShadow blur horizontal displacement.
- Blur Y Offset
- Set innerShadow blur vertical displacement.
- Use SVG Gradient Overlay?
- Yes or No.
Transition Settings
- Use image transition?
- Yes or No.
- Use overlay transition?
- Yes or No. It is necessary that your image has a caption in the style settings.
Animation Settings
- Scrollspy Animation
- The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.
- Use Box Parallax Animation?
- Yes or No. (Learn more)