Image Pro

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)