Image Intense Documentation - Features + Usage | BeSuperfly

Image Intense Documentation

by

Image Intense Tools

Image Intense

features + documentation

Get Your Copy!

what is image intense?

Well, a great example is what you see above.  A background image with text overlays, a foreground image and text effects that appear on hover, a link within the caption text, and a call to action button.  That’s just one module with a few simple settings. Plus, it is Intensely fast, because almost everything is handled by server-side PHP and CSS generation before it gets sent to the client.  No JavaScript files needed, thank you!  Just a small stylesheet to handle defaults client-side.

Image Intense is one of the most comprehensive and full-featured modules ever created for both the Divi and Extra themes for the WordPress website development platform. It incorporates features from 3 of the native Divi Builder modules – Image, Text and Button – and then adds many additional UI/UX enhancements.

With it, you have the power to bring “above and beyond” life to your website with one of 22 different image hover transitions, mix blend modes, buttons, opacity settings and several other great features. Use it to entice increased user interaction or motivate with call-to-action elements on a basic e-commerce site that will drive visitors to purchase!

How about coupon reveals or beautiful blend modes on hover? Image Intense is as powerful as you are creative. The features and style options with Image Intense are truly compelling. Like the game of chess – simple yet eloquent at the basic level, but astonishingly overwhelming at the master level.

With just a few options, you have a site to look twice at. With some experience, you have a site that draws attention beyond a glance and into the realm of retention and lowered bounce rate.

Please note that Image Intense is designed to work best with small amounts of text in 1 or 2 column layouts. If using 3 or 4 column layouts, especially using a boxed layout or a smaller fixed width layout, you might run into some styling issues. We’ve tried to accommodate smaller modules as much as possible.

Image Intense Features

Image Intense Features

What does it do?

Skip to Docs

image intense features

You can think of Image Intense as a hybrid combination of the Image, Text, and Button modules. Just enough of each to satisfy the requirements of a visual and interactive experience.  Make sure you read and understand the basics of those modules before you move on to the power of the Image Intense module.

Image Intense from Superfly has the following features:

 

  • Images

    • Hover style – Image Intense comes with 22 different hover styles.  Some work best with only small amounts of text (or none). Others look great with more content in the Caption Text area.  For an example of each one, visit the hover style demonstration page.
    • Media size – This is one of the least understood but most useful features of Image Intense.  The module will find all available media sizes (those set in Settings > Media as well as the media sizes that your theme adds) and allow you to specify which size of your image you want to appear in the module.  This means smaller file sizes and faster page load speeds without having to create a specific size of an image with an external tool such as Photoshop, Gimp or RIOT. (Your images should still be optimized for file size before uploading to WordPress!)
    • “Image Opacity” and “Image Opacity on Hover” in Advanced Settings – Sliders allow for normal state (not hovered) foreground image opacity,  and also opacity on hover.  This gives you the ability to create superfly image transition hover effects.  Note that a long press on mobile is what triggers what is a hover on desktop.
    • Mix Blend Mode – Truly intense ways to have your background and foreground blend using Superfly CSS blend options. No need for plugins or JavaScript – tell your module how to blend, and it will obey your orders!  Be sure to check out Codrops on how and why this works.
    • Background Image – This is a great way to have 2 images in one module.  This allows some neat mix blend modes, or you can have an image display then change out with another image using the Opacity settings. Superfly swaps and reveals! The Image Intense module at the top of this page shows how a swap can work.

Mix blend: Difference

Image opacity 0.7
with background image

Mix blend: Luminosity

Background color #9e5406

  • Text

    • Title text – The Image Intense text sections are comprised of three (3) parts – Title 1, Title 2 and Overlay.  Title 1 and Title 2 are put together to create a “header text” for your Image Intense.  Normally (but not always), the Title 2 part has a bolder text, depending on the Hover Style you select.  In basic cases, you’ll want to limit each title text to one or two words. If you are an advanced Image Intense user, you can come up with pretty much any header text or style you want. Title text can be styled in almost any way – including font, font size, font color, letter spacing and line height.
    • Caption text – The Caption Text is the smaller text that sometimes appears when you hover over your Image Intense module. Other times it might already be there. Still other times it might move when you hover over the module. It all depends on which hover style effect you choose. As with the Title Text, the Caption Text can be styled just like you find in the Text module in the “Advanced Design Settings” tab.
    • Text formatting and links – Title or Caption text can be styled with basic HTML formatting tags for finer control of emphasis (italics) and strength (bold) within the text. You can also add line breaks, and turn selected text into a normal hypertext link using a built-in Image Intense pseudo-shortcode.
  • Buttons

    • Button basics – Choose to include a button, and you’ll immediately have a Divi-style button added on top of your Image Intense module.
    • Button styling – Use the Advanced Design Settings tab to style your button nearly any way possible, just like the Button module.
    • Button position – Forget about using custom CSS to try place your button where you want it!  Buttons in Image Intense can be placed in any of 9 positions within your module – from top left to bottom right.  Kind of like tic-tac-toe, Hollywood Squares and the Brady Bunch.

There are several examples on this page of what ‘Bottom Left’ to ‘Top Right’ button positions would look like.

Image Intense Documentation

Image Intense Documentation

How to use it.

Read the FAQs

image intense documentation

You can think of Image Intense as a hybrid combination of the Image, Text, and Button modules. Just enough of each to satisfy the requirements of a visual and interactive experience.  Make sure you read and understand the basics of those modules before you move on to the power of the Image Intense module.

OK.  Let’s go over the Image Intense settings that are not already covered by the documentation for the modules mentioned above.

Media Size

Media sizes are created by WordPress and possibly by themes and plugins. This is where you tell your Image Intense module what “size version” of the image you want use. You can even register your own sizes if you wish. Below is an example of what you might find in a Divi/WooCommerce install. Your options might be different.

Example media size options for Image Intense

Example media size options for Image Intense

Intense Hover Style

This is the heart of Image Intense, and the foundation on which it was originally built.  Because we believe in a global, open internet community we went with names that reflect just a few of the major cities around the world.

There are 22 different hover style effects.  Each named for a city and with its own set of strengths and weaknesses when it comes to how well it works with different configurations of text, buttons, backgrounds, etc.  If you want to use a particular one but it’s not working quite right for you, you can easily customize the CSS for it within your child stylesheet or in Theme Options. You can see examples of all of them right here. Learn more about styling Image Intense with this tutorial.

Overlay Titles 1 & 2

These are the two parts of the overlay title (header) texts. Normally they are best with just one or two words.  Overlay Title 1 will normally be in a normal font weight, while Title 2 will be in a heavier (bolded) font weight.  Each hover style will have its own Title text positioning and effects.

Image Intense Overlay Title 1 & 2 options

Image Intense Overlay Title 1 & 2 options

Overlay Caption

This is the smaller overlay caption text. The number of words you should use here depends on the Intense Hover Style selected above along with the size of the column this module is in.  Some Hover Styles have a border-right on the caption text.

You can also set the orientation (text-align) for the caption. Each Hover Style comes with what is generally best, but you can override it if you need to have a different style for the module.

Image Intense Overlay Caption options

Image Intense Overlay Caption options

Formatting with HTML tags - strength, emphasis and line breaks

Within your title or caption text, you can use a few formatting HTML tags to provide additional emphasis for any part of that text.  Simply wrap the text with opening and closing tags, just like normal HTML.  The allowed tags are:

  • <strong>Strong text</strong>
  • <b>Bold text</b>
  • <em>Emphasized text</em>
  • <i>Italized text</i>

You can also add a line break within your text:

  • Add your text,<br />and include a line break

Note that <strong> and <em> are semantic tags, not presentation.  This means they could actually look like anything, but by default look the same as the <b> and <i> tags.  <b> and <i> tags are presentational, and it is actually better to use CSS styling for actual bolded or italicized test.  See this Stack Overflow post for more info about that.

An example of how this would look is the Image Intense module at the start of the FAQ section further down this page.

Image Intense HTML formatting

Image Intense HTML formatting example

Inserting a Link in Text

You can turn any part of your text into a normal hypertext link.  Since WordPress does not allow us to add <a></a> anchor tags or shortcodes into that content, we created a “pseudo shortcode” for you to use for this purpose.

Usage is the same as the normal HTML anchor, but you replace the <a></a> tags with {n10link}{/n10slink} tags.  It would look something like this:

features + {n10slink href="#documentation"}documentation{/n10slink}

You can also use the normal “href”, “target” and “class” attributes if you want. An example of how that would work is at the very top of this page.  The word “documentation” in that Image Intense module is actually a hypertext link.

Within the module settings, it would look something like this:

Image Intense insert link

Image Intense insert link

Mix Blend Mode

Image Intense comes with a way to enable the CSS mix-blend-mode attribute.  This is probably one of the most advanced settings available with Image Intense.  It will take some practice to understand why and how it works – especially if you try at first and nothing seems to happen!

Visit this Codrops article to play around with mix blend modes and get a feel for the concept.  You can see some examples of this up in “Features” section above.mix-blend-modes

 

Image Opacities

This one is pretty simple.  Think of opacity as how “see through” something is.

Image Opacity determines how “transparent” the image is when you are not hovering.  The lower the opacity, the more that any background color or background image will show through.

The same applies to Image Opacity on Hover.  This setting applies to the same image when you mouse over (“hover”) or long press (touch screens) on the module.

An example of this is at the very top of this page.  We have an image specified in the “Image URL” setting in the “General Settings” tab, then we specify a Background Image in the “Advanced Design Settings” tab.  In that tab, we also set the “Image Opacity” to 1.0 and the “Image Opacity on Hover” to 0.  That way, when we are looking at the image it shows up completely. However, when we hover over (mouse) or long press (touchscreen) the module, the main image disappears completely and the background image shows up.  That’s what we might call a “reveal on hover”.

Image Intense opacities

Image Intense opacities

Button Position

This is the one setting for buttons that goes beyond the default Divi Button settings. It replaces the “Button Placement (Left/Right)” option you normally see in the Button Module settings.  This setting for Image Intense is in a weird place (as you’ll see below – sorry, there was nothing we could do about that), but we think you’ll find it a worthwhile compromise.

We sectioned off the Image Intense module into a 3×3 grid for button position.  That means you have 9 different places you can put your button, from top left to bottom right.  Note that “center” is horizontal (left to right) and “middle” is vertical (top to bottom).

To see how “Button Position” works, you’ll see several different Image Intense modules on this page that show different button positions.

This setting is in the “Advanced Design Settings” tab. Obviously, you must set “Include a Button” on the “General Settings” tab to “Yes” in order for this option to appear. This is where you’ll find it:

Image Intense Button Position

Image Intense Button Position

Image Intense FAQs

image intense FAQs

Go beyond the documentation

 

image intense frequently asked questions

After going through the documentation, you might still have a question.  Here is a list of the more common troubleshooting questions we get asked about Image Intense.

Again, if you have any problems afterwards, be sure to shoot us a support ticket or let us know in the “Comments” section below.  If your question seems to be a common one, we’ll add it to the list below!

 

How do I get updates?

Starting with version 3.1, you will receive update notifications right within your WordPress dashboard. You will be able to automatically do updates from your site without having to log in to your Superfly account to download the new version.

If we release an update announcement and you do not see an update notice in your dashboard, click the “Check for updates” link for Image Intense within your plugins listing page.

My header text does not have two different font weights like the docs say.

 

Image Intense does indeed style the Title 1 and Title 2 texts with different font weights.  If you are not seeing that, it’s probably because you are using a font that does not respect font weight.  For example, on this site the default header font is Gotham Ultra Regular, which does not have font weight variations.

In order to show the difference between Title 1 and Title 2 texts, we went with the ‘Open Sans’ font in all of the Image Intense modules on this page, which does distinguish font weight.

 

My padding/borders/margins aren't working right!

This has been fixed in version 2.0.  If you have not yet updated, please visit your downloads page.  If you continue to have troubles, shoot us a support ticket or let us know in the “Comments” section below.

Will it affect my site if I update from an earlier version to version 2.0?

Every effort has been made to ensure that version 2.0 is backwards compatible with earlier versions.  If you run into issues, most likely it would be because of further customization you’ve done on your site.

As with any other plugin update, please test the Image Intense update on a staging/development/test site before updating your live/production site!! You might have custom CSS that is now handled by Image Intense. Always, always test any updates (not just Image Intense) on a development or staging environment.  Never do updates to a live site!  If it turns out something isn’t working right in your testing area and you can’t figure it out, get in touch with us.

In fact, if your current Image Intense modules are working like you want them to, we would suggest leaving them alone. There is no security need to update. You can use version 2 of Image Intense on your new sites or when upgrading your current sites.

I'd like to make some additional CSS changes - where do I start?

We recently released a video tutorial that will walk you step-by-step through making some advanced customization changes to Image Intense. Check it out here!

How do I get support?

Make sure you read and understand the documentation for the Image, Text and Button modules.  Then make sure you read and understand this article.  If you have tried to accomplish something and just can’t get it to work after reading the documentation, then feel free to submit a support ticket.

If you’d like to see a new feature added, you can use the support ticket system as well.  Or, you can join our favorite Facebook group and start a discussion.

I found something wrong with (or missing in) the documention!

Good on you!  That’s why we love the Divi community. Send us a support ticket with what you think is incorrect.  We’ll take a look and fix anything wrong.

Better yet, leave us a comment below so you’ll get all the credit.

For More Information

If you have any further questions about Image Intense that aren’t answered above, go ahead and check out the Superfly knowledge base. You might even find out something you never thought of!

37 Comments

  1. Ben Stirling

    Hi there – can you please tell me how much text I can fit into a caption – is it limited by character length? Or just the space available?

    Reply
    • Terry Hale

      Hiya, Ben! Thanks so much for your comment. 🙂

      In regards to text input, there is no reasonable limit to the amount of text you can put into your caption text. However, “reasonable” needs to take into account the fact that Image Intense is not designed to be a text module. In fact, it was created to enhance images with lots of features – adding limited and judicial amounts of text is just one of those features.

      There are several factors to consider:
      1) Using Image Intense in a single column row allows you more room to add text without it getting clipped.
      2) Using Image Intense in a 4-column row obviously creates a smaller space for text to show, even on desktop.
      3) No matter what, your site will need to be mobile friendly, which means that a lot of text that shows fine on desktop might not work well with the same module on a smaller viewport.

      The best way to handle this is to use text in the most efficient way possible – the least amount of text that conveys your message. You can also use your browser’s “Inspect” tool to find out how to adjust padding and/or margins on the caption text to increase the amount of that caption text that can be used on a particular hover style.

      Alternatively, Divi gives you the option to have things hide (disabled) at desktop/tablet/mobile sizes. You can create different Image Intense modules for display on each platform that give you the best usage of your text at each media query size.

      Hope this helps! Let us know if you have any more questions. 🙂

      Terry

      Reply
  2. Lucy

    Hi – is the second caption which appears in bold able to be on a second line rather than following on from the first caption?

    Reply
    • Nathan Duvall

      Hi Lucy. I believe we’ve addressed this above in the toggle titled: “Formatting with HTML tags – strength, emphasis and line breaks”. Give that a look and if you still have questions, just let us know.

      Reply
  3. Pierre

    Hi.

    I’ve been perhaps a little too speed to download the version 2.0. I’ve not been able to see the new features you were talking about :)… And the “packaging of the plugin is weird. the zip in the archive contain a folder named “styles”(containing 2 css) and 2 php files.
    So when I extract its content the 2 files are placed at the root of “plugins” and the folder ‘image-intense” is no more used.
    Is that really normal? It seems that your forget to keep the directory structure.

    TIA.

    Amicably,

    Pierre.

    Reply
    • Nathan Duvall

      Pierre, try downloading version 2 again from your account page. You should see the Image-Intense-V2.zip folder along with the READ-ME-FIRST file inside the initial .zip folder.

      Reply
  4. Garcia

    Hi there,
    In order to update from version 1.1 to 2.0, do I first have to deactivate the earlier version? When I try to install the new version a message saying the file already exists appears. But if I deactivate first the earlier version, this will affect the existing image intense modules on the site. Is there any way that I’m missing out on to update the plugin to the new version without having to deactivate the earlier version first?
    Thanks!

    Reply
  5. Lasse

    I installed the program (Image Intense) and activated the plugin.
    But, there is no Image Intense Module
    Everything looks exactly the same as before the installation of Image intence.
    I can not find a single one of the settings that are available after the installation of Image intence.
    Help needed.
    Sincerely.
    Lars Karlsson
    Sweden

    Reply
    • Terry Hale

      Hello Lasse, thanks for the feedback! This sounds really unusual.

      Could you please visit our support portal and submit a ticket? We have a great system that will allow us to better track and document our progress in getting you fixed up. https://besuperfly.freshdesk.com/support/home

      Reply
      • Lasse

        Hi Terry.
        I have done that.
        I did that yesterday.
        /Lasse

        Reply
        • Lasse

          Hi Nathan.
          Wonderful, many thanks for your quick help. !!!
          I do not understand that I have not seen where the intense model is lokated before.
          Now I have found all the settings.
          Works incredibly well – a very good program. !!!
          Greetings.
          Lasse

          Reply
          • Dana

            Hello,
            I have the same problem. The module is not showing. What was the solution?
            Greetings,
            Dana

  6. heath werrett

    Is it possible for someone to send me the read.me file?

    Reply
    • Terry Hale

      Hi Heath,

      Within the UNZIP-ME-FIRST-IMAGE-INTENSE-V2.zip file you received after you downloaded your purchase is a file called READ-ME-FIRST.rtf

      That should be what you are looking for. If not, please feel free to submit a support ticket so we can handle your request better. Thanks! 🙂

      http://help.besuperfly.com/support/home

      Reply
  7. Asim

    How do I change the diagonal line colour in the dynamic jazz effect (like in the first image on this page)?

    Reply
    • Terry Hale

      Hi Asim,

      This is the CSS for the line colors (which are borders!) in the top image. Adjust as you need. 🙂

      figure.n10s-jazz figcaption::after {
      border-top: 3px solid #ec008c;
      border-bottom: 3px solid #ec008c;
      }

      Reply
  8. katie

    is it possible to make the caption text not all caps?

    Reply
    • Terry Hale

      Hi Katie!

      The basic way to turn off the uppercase transform for the captions is as follows:

      figure.n10s figcaption p {
      text-transform: none;
      }

      Reply
  9. Emilio

    Hi Guys, Just downloaded and installed Image Intense. I was doing some render blocking/page load tests and I just tested my single page before and after activating Image Intense and according to GTMetrix, it adds 1 sec to my page load without creating a single instance. I’m wondering if you’ve done any performance testing with the plugin and can replicate my results. I’ll have to add some Image Intense instances and then I re-test and let you know what I find.

    Note. This was on a fresh installation of Divi with nothing else installed using a single page created from the built-in “Agency Homepage”. I added some modules to the page and a couple of big images. Before activating Image Intense, page load was 2.1 sec, after activating, page load went to 3.3.

    Reply
    • Terry Hale

      Hi Emilio,

      Thanks for bringing up the topic! With only two small PHP files (which are processed on the server) and a small stylesheet that is served to the client, it’s hard to imagine Image Intense adding a full second (in your case – adding 50%) to the load speed.

      It would be great if you come up with some more information that you can. We haven’t heard anything else about slowdowns using the plugin. Considering the size of WordPress and Divi, again, it’s just hard to imagine.

      If you have a URL that you can share, I’d be happy to take a look at it as well. 🙂

      Reply
  10. P

    Hi there,
    Like one or two other people here I have just uploaded version 2 however can’t see any new features. Tried this twice now and can’t see anything new to work with. Any thoughts?
    Thanks, Pete

    Reply
  11. Joseph

    Hello is there any way to add default caption text that is viewable before hover then on hover other text is viewable?

    Reply
    • Terry Hale

      Hi Joseph,

      Yes, this would be possible with some custom javascript. We’ll look into adding this into a future version. Thanks for the feedback!

      Reply
  12. Paulina

    Hi,

    Thank you for heaving created this plugin! I have just purchased it on Divi space but I can see that I didn’t get the latest version (1.1 instead of 2.0). How can I get the update?

    Could you please also give me the css code to desactivate the caption text? I don’t want to use it and on Lonely Steve style it shows a white rectangle even if there is no text.

    Thanks in advance.!

    Reply
    • Terry Hale

      Hi Paulina,

      I’ve seen some support tickets regarding this. Hopefully you had everything taken care of. If not, let me know. 🙂

      Reply
  13. Derek

    Hello, I installed my plugin and it’s not showing up anywhere. Anby help would be great.

    Reply
    • Terry Hale

      Hey Derek,

      We’ll need some more information from you. If you haven’t already, please shoot us a support ticket using the link below. Thanks for letting us know.

      http://help.besuperfly.com/support/home

      Reply
  14. Jorge

    Hi there,

    The former demo page was super useful before you changed it. In the former version, we could see the image intense hover style by reading the Title of each example until you decided to change that for usless city names… it’s so sad.

    Do you have a way to send me a layout (json file) or a xml file so that I can have a page where to see the different hover styles of image intense.

    Reply
  15. Caro

    Hi, guys!

    I just purchased the plugin today, but I’m seeing the example for the Image hovers and I see the names of the image-intense-divi-extra page as cities and, in the module, there are different names like: Wild Romeo, Strange Dexter, Faithful Milo, etc. How do I know which is which?

    Please help. Thank you very much.
    Caro

    Reply
  16. guillermo

    Hi guys , this works with headers or divi sliders?

    Reply
    • Terry Hale

      Hi Guillermo,

      Image Intense is a standalone module. It does not integrate with, nor is it aware of, other modules. Wherever you can use the native Image module, you can use Image Intense. 🙂

      Reply
  17. Paulina

    Hi,
    I saw that you changed the hover styles’ names here https://besuperfly.com/image-intense-divi-extra/ but in the plugin I still have the old names and no update available. So actually when I choose a style I don’t know what it looks like. Thanks in advance for your help.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *