Using Image Intense? Here’s some quick styling tips!

by

Edit 11/25/2016: We’ve put together an even better Image Intense tutorial to help you customize the plugin further. Be sure to check it out here!

If you’ve purchased our Image Intense plugin, you might be wondering how to change things like the overlay color, font sizes, etc. We are working on adding some more options within the Image Intense module settings, but in the meantime, we wanted to show you how to make these changes with just a little CSS that you can add to Divi > Theme Options > Custom CSS or to your child theme stylesheet.

To find out how the effects are styled, you can go to Plugins > Editor, then off to the right in the dropdown box, select “Divi Image Intense”.

In the “Plugin Files” list below that, click the “image-intense/styles/n10s-styles.css” link. That will open up the stylesheet for the Image Intense module.

Look in the stylesheet for a section labeled like this, using “Chico” as an example:

/*---------------*/
/***** Chico *****/
/*---------------*/

To change the overlay color, you actually want to change the background color of the entire “figure”. Like this:

figure.n10s-chico {
background-color: #000;
}

To change the caption text, you will want to adjust margins and font sizes using this selector:

figure.n10s-chico p

So, to increase the font size (do this in your own child stylesheet so updates don’t override it!) and/or change placement of the caption, you’d do something like this:

figure.n10s-chico p {
margin-left: 5%;
font-size: 110%;
}

The font face is simply inherited from whatever font you select as your header font in Divi’s customizer settings. But you could change that as well by defining the font-family

figure.n10s-chico h2 {
font-family: 'Open Sans'!important;
}

We couldn’t possibly put all of these customizations into the Image Intense interface — it’d be extremely overwhelming for everyone, but most customizations like you’re wanting can be easily achieved through CSS via your browser’s “Inspect” or “Inspect Element” tool. If you’re not familiar with this tool, here’s a link to a great tutorial.

31 Comments
  1. Chad

    Is there an easier way to adjust Image Intense font sizes and slightly increase the spacing between words? For example, this page (http://visionbattery.wpengine.com/) has 3 Image Intense modules. We noticed that the header font in Divi Theme Customizer –> General Settings –> Typography adjusts the font sizes of the Image Intense module, but we have a fairly large font style (Montserrat, as opposed to a narrow style or ultra thin style) and we have the font size set at 72px, which is the highest it will go, yet, as you can see in the link above, the font sizes are relatively small. Is there a way to increase the font sizes and maybe add a little spacing between words?

    Reply
    • Terry Hale

      Hi Chad, thanks for the question.

      It looks like the Intense modules are not currently active on the link you provided, but I can give you some general guidelines.

      To target the heading (h2) text, you can use something like this just as an example:

      figure.n10s h2 {
      font-size: 86px; /* or font-size: 200%; */
      line-height: 2em; /* or line-height: 90px; */
      }

      To target the body (p) text, you’d use something very similar:

      figure.n10s p {
      font-size: 75%; /* or set to a px value */
      }

      You can use any standard CSS units (px, em, %, etc.) for the above. Whatever works best for you after experimenting.

      And thanks for the purchase! Let us know if this helps you out. 🙂

      Reply
      • Chad

        Thanks!

        Reply
      • Chad

        I’m now working on this page: http://gracetyler.wpengine.com/admissions/. Just below the “We’re here to help” section, there are three Image Intense modules that are set to Dynamic Jazz. I’m trying to increase the font size of the words that overlay those images (i.e., Request Info, Apply Now, Visit Grace). I tried making those adjustments to the “Jazz” section of the image-intense/styles/n10s-styles.css file in the plugin editor, but it doesn’t seem to have worked. Would you mind helping me figure it out? Thanks!

        Reply
        • Nathan Duvall

          Hi Chad, I’m seeing where you’ve set the font size to 80px so if you’re not seeing the font size change – you may just need to clear your cache. Although it seems like that’s a little too large of a size for those sections – maybe 1/2 that would look ok? Just let us know if you’re still having trouble.

          Reply
  2. Chad

    Is there any look toward adding font style adjustments to the Image Intense module?

    Reply
    • gruffygoat

      Hi Chad, currently it just inherits the header font that you set in your Divi Customizer settings. We’ll add this to our possible list of enhancements for version 2.0 though. Thanks!

      Reply
  3. Isabel

    Hi Guys,

    thanks for this awesome plugin!

    I have quick question:
    Is there a general way to let the “Overlay Title Part 2” start in the next line, so that it’s no longer placed next to Part 1 but below?
    I have tried a lot but I just can’t figure it out.

    Thank you in advance

    Isabel

    Reply
    • gruffygoat

      Hi Isabel, thanks for the kind words!

      To make part 2 show on its own line, you could just add this to Divi > Theme Options > Custom CSS:

      figure.n10s h2 span {
      display: block;
      }

      Reply
  4. Isabel

    Super awesome! Thank you very much!

    Reply
  5. Joe

    Aloha,
    I want to incorporate the Image Intense plug in my website. Is the formatting strictly limited to square shapes with a translucent hover effect? Is there a way to make the hover effect have 100% opacity? Also is there a way to add the hover effect without adding a background photo, say a background color instead? I want to use it for oval shaped images and background colors without changing my entire theme, is there a CSS option for this?
    Appreciate it

    Reply
  6. Lindsey Hankes

    I’m using an address on Overlay Title Part 1, and I need it to display with spaces. How can I achieve this?

    Reply
    • Nathan Duvall

      Hi Lindsey, you can try adding the code   multiple times to forces spaces, if they’re not showing up for you with just the normal spacebar entry. Also, be sure you’ve updated to the most recent version (currently 3.1.2).

      Reply
  7. Camille Curro

    Is there a way to change the color only to the overlay title part 2? I’d like that one word to be a different color than the rest of the title. Would CSS accomplish this?

    Reply
    • Nathan Duvall

      Hi Camille! Yes, a little CSS will do the trick. If you’re familiar with the Inspect Element tool, just target that specific section to retrieve the class you need, but something like this should do the trick, added to Divi > Theme Options > Custom CSS:

      .n10s-block h2 span {
      color: #CC0000 !important;
      }

      Reply
  8. Doug McGuirk

    Is there a way to reduce the size of the font for the title part 1 and part 2?

    Reply
    • Nathan Duvall

      Absolutely! Just open up the Advanced Design Settings in your Image Intense modules and look for the “Title Font Size” & “Caption Font Size” values. Just be sure you have the latest version of Image Intense installed (currently 3.1.4 at the time of writing this).

      Reply
      • Doug McGuirk

        Hi Nathan,

        Thanks, but I don’t have the title font size or caption size showing up in the advanced design settings. And I am updated to 3.1.4. Any reason why they wouldn’t be showing? I can change the color, spacing and line height, but that’s it.

        Reply
        • Michael

          Having the same issue 🙁 no way to edit the font size. I think the most recent Divi updates have caused an error and removed the option.

          Reply
          • Nathan Duvall

            Yes, it’s due to the most recent Divi update breaking 3rd party plugin functionality. We’re working on a fix and will have an update published as soon as possible!

      • Mercy

        Hello! I just update the version and don´t see the “Title Font Size” & “Caption Font Size” values. I´m going crazy trying to make the titles smaller.
        Thank You

        Reply
        • Terry Hale

          Hi Mercy,

          As Nathan said above, the newest Divi release changed the way module settings are displayed. We should have an update available within the next day or two. 🙂

          Reply
  9. Rosie

    Hi Guys how’s it going with the font change option.
    I’m on newest divi and image intense and still haven’t got the option to change font size.

    Should I look to use something else for the mo?

    Thanks

    Reply
    • Nathan Duvall

      Hi Rosie, it works for us on the latest version of Image Intense (3.2). You may need to clear your cache/cookies in order to see the changes. Let us know if the problem persists.

      Reply
  10. Christoph Kuscha

    Hi Guys,

    is there a way to change the color of the hover-border in the style “Hanoi”?

    Thanks
    Chris

    Reply
    • Terry Hale

      Hey Christoph,

      To change the Hanoi border color (it’s actually a ::before ‘pseudo-element’) you can use this:

      .n10s-hanoi .n10s-overlay::before {
      background: #xxxxxx; /* use hex, rgb() or rgba() color here */
      }

      Thanks!

      Reply
  11. Vincent

    Hi Guys,
    In the module settings, under design, I see the option to change the text color. However, whenever I attempt to customize the color, I don’t see any changes. Is this even an option, or am I just doing something wrong?

    Reply
    • Terry Hale

      Hi Vincent,

      Due to the recent rash of Divi updates, we are having a hard time keeping up with how they are trying to handle 3rd party developer products. It keeps going back and forth! The latest update (or two) “broke” the color handling for Title and Caption text settings. When using slightly earlier versions of Divi, the color handling works just fine.

      We are working on a solution this very moment. Check your dashboard after the weekend for an available update. So sorry about the trouble, and thanks for your question and support.

      Cheers!

      Reply
  12. Tomas Mensik

    Hi amigos, please help. How can I move the text (title 1 + 2 + caption) downwards?

    See http://dev3.employerbranding.cz/ – e.g. the 1st picture.

    Many thanx.

    Tomas

    Reply
    • Terry Hale

      Hi Tomas! So sorry for this one slipping through the cracks.

      It looks like you’ve already figured out to change the ‘top’ to a higher % to drop the header text down. Nice job.

      I really like the clean look and colors on your site!

      Reply

Submit a Comment

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