Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 25, 2015 at 1:22 am #508731
    afarahani

    I want to create a page with an image with hotspots as header like the one you have on your website here

    Please share the instruction with me.

    September 25, 2015 at 2:58 pm #509068
    Yigit

    Hey afarahani!

    Please edit your page and choose to display transparent or glassy transparent header – http://kriesi.at/documentation/enfold/portfolio-item/intro-to-the-header-configurator/ and then place hotspots element to the top of your page content.

    Regards,
    Yigit

    September 25, 2015 at 5:31 pm #509193
    afarahani

    Thanks Yigit. Two more questions:

    1) is there any way that I can use image with hotspot inside a color section to achieve both functionality of hot spot and the arrow pointing to the next section like here

    2) is there any way to fit the image wit hot spot to the height of browser?

    Thanks,
    Amir

    September 26, 2015 at 8:25 am #509404
    Ismael

    Hey!

    1.) You can add the hotspot image inside the color section then remove the section’s margin and padding via css. Edit the color section, apply a unique id attribute in the Section ID field. Use “hotspot-section” for example. Add this in the Quick CSS field:

    #hotspot-section .container {
     width: 100%;
     max-width: 100%;
     padding: 0;
}

    2.) Unfortunately, it’s not possible to set the height of the hot spot image base on the browser height without major modification on the theme.

    Cheers!
    Ismael

    September 28, 2015 at 9:22 am #509876
    afarahani

    Hey!

    The code doesn’t work. I added important! at the padding line and it helped but still the width is not ok! the image doesn’t fit the width of the browser.

    September 28, 2015 at 11:06 am #509925
    Yigit

    Hey!

    Can you please post the link to your page?

    Regards,
    Yigit

    September 28, 2015 at 7:01 pm #510359
    afarahani

    Here is the link to the page. The width does not fit the screen width. Also I want to know how I can fit the image height to the screen height too.

    September 29, 2015 at 6:07 pm #510900
    Andy

    Hey!

    I don’t see any images when clicking on your hotspots. About which image are you talking about? can you highlight using screenshots please? you can use imgur.com or dropbox.

    Regards,
    Andy

    September 30, 2015 at 3:29 am #511086
    afarahani

    The second image with hotspot is placed inside a color section and is supposed to be full width but the width doesnot adjust to the screen width.

    September 30, 2015 at 12:23 pm #511389
    Andy

    Hi!

    control this image using this code:

    .av-hotspot-container-inner-wrap img {
width: 95%;
height: 600px;
}

    and adjust as needed.

    Cheers!
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.