image intense.

 

what is image intensefeaturesdocumentationfaqs

what is image intense?

Image Intense is a divi module which allows 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 light-weight and fast, because almost everything is handled by server-side PHP and CSS generation. No JavaScript files needed!

This 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 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 hover transitions, mix blend modes, buttons, opacity settings and other features. Use it to increase user interaction or drive visitors toward your conversion goal!

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. Use it right out of the box or tweak to make it your own. With just a few changes, you’ll have an eye-catching site. With some experience, you’ll have a site that sticks with the user and is truly effective.

Image Intense Tools

Image Intense

features + documentation

Get Your Copy!

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. Please note that Image Intense is not currently compatible with the Divi Builder plugin. Due to limitations by Elegant Themes for third party developers, Image Intense is not currently compatible with the Visual (front-end) Builder.

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.

Images

  • Hover style – Image Intense comes with 22 different hover styles.  For content examples 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. 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. 

Mix blend: Difference

Image opacity 0.7
with background image

Part One Part Two

custom caption on the overlay

buy now

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, however, you can develop any header text or style you want. Title text can be styled in almost any way.
  • 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 in almost any way.
  • 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.
Image Intense Documentation

Image Intense Documentation

How to use it.

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.
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:

[sourcecode language=”plain”]features + {n10slink href="#documentation"}documentation{/n10slink}[/sourcecode]

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 faqs

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.

Is Image Intense compatible with the Divi Builder plugin?
Image Intense is not currently compatible with the Divi Builder plugin. The DB plugin has classes and structures that are quite a bit different from the Divi Theme. We hope to incorporate compatibility in a future version.

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!

0 Comments