This shortcode is available in Shortcodes Ultimate Pro
This is photo panel
[su_photo_panel color="#F73F43" border="1px solid #F73F43" radius="3" text_align="center" photo="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-1.jpg" url="#"]This is photo panel[/su_photo_panel]
This is photo panel
This is photo panel
This is photo panel
[su_row] [su_column size="1/3"] [su_photo_panel photo="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-1.jpg"]This is photo panel[/su_photo_panel] [/su_column] [su_column size="1/3"] [su_photo_panel photo="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-2.jpg"]This is photo panel[/su_photo_panel] [/su_column] [su_column size="1/3"] [su_photo_panel photo="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-3.jpg"]This is photo panel[/su_photo_panel] [/su_column] [/su_row]
Description
This shortcode allows you to create beautiful panels with a large photo on top.
Options
| Option name | Possible values | Default value |
|---|---|---|
| background Panel background color | #HEX color | #ffffff |
| color Panel text color | #HEX color | #333333 |
| border Panel border | CSS border shorthand property | 1px solid #cccccc |
| shadow Panel shadow | CSS box/text-shadow shorthand property | 0 1px 2px #eeeeee |
| radius Panel border radius (px) | Number from 0 to 60 | 0 |
| text_align Text alignment for panel content | left (Left) center (Center) right (Right) | left |
| photo Select the photo for this panel | The URL of uploaded file | http://lorempixel.com/400/300/food/ |
| alt Alternative image text (alt attribute) | Any text value | – none – |
| url You can type here any hyperlink to make this panel clickable | Any text value | – none – |
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |
Photos by Matt Palmer
Helpful?
🤝 Thank you!