Single Image

You may add images to your site with the help of this module

Add the images on the page using Single image module and diversify the content.

Watch the video tutorial on Single Image module creation for more details.

General settings

  • Image type – choose the image type to be displayed in the module.
    • Media gallery – allows you to upload the image from the media library on your site.
      • Image – select the image to display.
    • External link – allows you to upload the image from the external resource.
      • External image URL – enter the link to the image to be displayed in the module.
    • Page thumb – allows you to display the featured image set for the current page in the Featured image meta box.
  • Image border radius – set the border radius for the page to have rounded corners.
  • Image size – select the size of the image to be displayed. You may select full size, medium, thumbnail or custom size and specify the sizes for the image. For Media Gallery image type only.
  • Image for retina displays – set it to Enable to display the image for the retina, so you may add the x2 or x4 image. For Media Gallery image type only.
  • Image size – choose the size of the image on retina. For Media Gallery image type only.
  • Image alignment – select the horizontal alignment for the image. Left, right and center positions are available.
  • Link for image – set it to Enable to apply the link to the image.
    • Apply link to – select to what element the link will be applied.
      • Lightbox – select it to open the link in lightbox on click.
      • External link – select this variant to add the external link to the single image.
        • External link URL – enter the link for the image.
      • One page scroll nav – select this variant to use the image as the navigation for the One Page Scroll page template selected.
        • Navigate to – select the navigation for the image. It may link to previous or next slide.
  • Image hover effect – select the hover effect for the image from the list of available ones.
Extra features
  • Animation – choose between 14 preset animation effects.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(;background-size: cover;background-position: center center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width >,#layout.dfd-gallery-loop > .row.full-width > {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}