Images

Inserting an Image

Our themes use Entypo font icons which are composed of some 400+ icons. Easily style icons by setting background/border/icon colors and sizes. Use icons to scroll to sections, link to pages or lighbox elements.

Related Video Tutorials
Inserting an image and linking it

Teaches you how to insert an image and linking it

Step 1: Switch To Backend Editor

To insert an icon, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Image

Click "Icon" in the Visual Composer Modal to insert an image, for example:

Image Settings
Step 3: Edit Image Settings

Once the image element has been inserted click the Edit Link(pen icon) of the icons, for example:

Image Settings

Here is an overview of available image options:

  • Image

    Select the icon to be used.

  • Linked Image

    Determines what the image should link to, either: None, Link to image or Use lightbox. Here is a breakdown of each and their dependent options:

    • Image is inserted without being linked.

    • Link URL

      The URL of the image to which the image should link to.Note: This need not be the same URL of the image you are inserting into your content, this could be the URL of a different or larger version of the image in question.

    • Group ID

      Associate an image to a specific lightbox group. This will allows user to browser through grouped image in the lightbox.

    • Lightbox Toolbar Zoom Button

      Whether the lightbox media should be zoomable.

    • Lightbox Toolbar Share Button

      Whether the lightbox media should be sharable through Facebook, Twitter and Google+.

    • Lightbox Caption

      The lightbox media caption. Leave blank if no caption is wanted.

  • Caption

    The image caption that either appears below, over or as a rollover caption.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Caption Type

    Whether caption should appear below the image, over the image or as a rollover caption.

  • Caption Vertical Alignment

    Whether caption should be vertically aligned top, middle or bottom. This only takes effect if you are using an overlayed or rollover caption.

  • Caption Horizontal Alignment

    Whether the caption should be left, center or right aligned. This takes effect for all caption types.

  • Lightbox Caption

    The lightbox media caption. Leave blank if no caption is wanted.

  • Color Options

    Rollover Background Color
    Caption Text Color

  • Rollover Animation Type

    Determines the rollover animation style.

  • Rollover Animation Duration

    Determines how long the rollover animation should be. Expressed in milliseconds i.e. 1000 represents 1 second.

  • Rollover Easing Type

    Determines the rollover animation easing type.

  • Lightbox Animation

    Determines the animation of the lightbox upon entering the viewport.

Can't find what you're looking for? Submit a request in our forum.