In this article you will find the unique information about Single Image shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.
Examples Of Use:
You can see a beautiful use of Single Image on one of our pre-made templates: Apricot, Avocado, Babaco, Banana, Coconut, Duku, Fig, Huito, Illama, Kiwi, Mulberry, Nectarine, Papaya, Pineapple, Purple, Vailla, Wildberry, Yew.
Detailed shortcode description
Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.
GeneralImageOverlayRibbon
| Option | Description |
|---|---|
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Image | Choose image. |
| Image Link | Choose target link for image. |
| Enter Animation | Enter Animation allow to specify an appear effect for shortcode. Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
| Option | Description |
|---|---|
| Size | Define images size. You can use default WordPress sizes (thumbnail, medium, large, full) or pass exact size by width and height in this format: 100×200. |
| Force Fullwidth | Check to stretch image to fullfill the container area. |
| Opacity | Choose opacity for image. |
| Image – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Image – Innner Border | https://hub.mpcthemes.net/knowledge/inner-border-field/ Learn More » |
| Effect | Select hover effect for image.
Please notice that some of them will work only in modern browsers. |
| Reverse | Check to reverse the effect. |
| Opacity | If you want to change the image opacity after hover choose a different value from the slider below. |
| Image Hover – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Image Hover – Innner Border | https://hub.mpcthemes.net/knowledge/inner-border-field/ Learn More » |
| Option | Description |
|---|---|
| Appear Effect | Select overlay appear effect style: Fade: simple fade in effect; Slide In: slide overlay in from selected side. Please notice you need to enable at least one of below icons to display overlay. |
| Overlay Color | Choose overlay color. |
| Icon Position | Choose overlay icons alignment. |
| Lightbox | Check to enable overlay lightbox icon. This will let user view the image in a full screen popup. |
| Lightbox – Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Horizontal Mirror | Check to horizontally reverse the icon. |
| External URL | Check to enable overlay external URL icon. This will let user open the link specified for this element in the External URL field. |
| External URL – Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Horizontal Mirror | Check to horizontally reverse the icon. |
| Background Color | Choose icon background color. |
| Icon – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Icon – Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Icon – Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Icon Color | If you want to change the icon color after hover choose a different one from the color picker below. |
| Background Color | If you want to change the background color after hover choose a different one from the color picker below. |
| Border Color | If you want to change the border color after hover choose a different one from the color picker below. |
| Option | Description |
|---|---|
| Ribbon | Check to disable ribbon. |
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Style | Choose ribbon style: Classic: ribbon displays at one of its container corners; Corner: ribbon wraps one of its container corners at 45° angle; Full Width: ribbon spans from left to right side of its container. |
| Position | Select ribbon position. |
| Size | Select ribbon size. |
| Folds | Check to disable folds. Disabling them will removing ribbon 3D effect. |
| Folds Color | Choose folds color. |
| Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Text | Define ribbon text. |
| Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
This shortcode comes with a lots of features. Check the list below for more details (click on each feature to learn more):
