Content Slider Question - Support | Kriesi.at

Tagged: content slider

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
February 2, 2018 at 7:46 pm #906980

havi
Participant

Hi guys!

As usual, I am trying to create a pretty cool Content Slider with highly visible buttons. See here: https://argen-travel.com/test/

I created a Content Slider with image an text and would love to add big buttons like you see there that can take the visitor to either the next (or previous slide) or to a different post/page.

The post/page link is easy. My question is how do I indicate next slide (or previous slide) on the button?

This is the code I have right now on the Next Slide button but it does not take me to the next slide. :)

[av_button label='Next Slide' link='manually,#next' link_target='' size='large' position='left' icon_select='no' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' admin_preview_bg='']

What should I enter here as the hyperlink?

Thank you so much!!

Warmly,

Havi

February 3, 2018 at 11:43 pm #907320

Basilis
Inactive Moderator

Hey havi,

I think that link=’#next’ should be only, remove the manually and it is should work!

Best regards,
Basilis

February 4, 2018 at 1:55 am #907341

havi
Participant

Hi Basilis!!

Tried it but it didn’t work. I think it need one more reference to the slider itself. I’m sending you the credentials to get in and check it out for yourself. It’s a bit complicated to explain but I know when you see it, you’ll know exactly what I am referring to. :)

Thank you!!!

Havi

February 4, 2018 at 11:20 am #907443

Victoria
Inactive Moderator

Hi Havi,

Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Victoria

February 4, 2018 at 10:43 pm #907608

havi
Participant

Thank you, Victoria!

I wouldn’t want anybody developing custom code for the theme. I try to follow the KISS principle. And I’d rather not add another plugin for sliders given that you already offer great sliders.

Do you have a way to modify the next/previous buttons on this slider so they pop -up? For some reason, the CSS for the background color does not display properly (it gets dulled or grayed out) and is there a way to change the text from > to NEXT and < to PREV? Or make the character bolder? And maybe making the buttons s bit more 3-D?

This is what I am trying to achieve: The clearance highly visible buttons and calls to action are super important to me.
https://www.marthastewartweddings.com/386169/bachelorette-party-supplies-pack-your-ladies-night

Any suggestion is highly welcome!

Thank you in advance!

Havi

February 5, 2018 at 6:40 am #907758
Nikko
Inactive Moderator
Hi Havi,

I’m not sure if this would help, but try adding this css code in Quick CSS (located in Enfold > General Styling), so the next and prev button can be seen easier:
```
#top .avia-smallarrow-slider .avia-slideshow-arrows a:before {
    background: white !important;
}
```
Best regards,
Nikko
February 5, 2018 at 8:02 am #907787

havi
Participant

Hi Nikko!

Yes, that’s what I had in the beginning but it doesn’t quite work. There’s a gray overlay. I’d like to make the arrows more visible (that’s why I moved the title under them – so that the eyes go towards the navigation) That has been my goal all along. Make it really clear to the site visitors how to navigate te slides.

Here’s the CSS I have for all the changes you see on that page:

/*slider arrows css */
#top .avia-smallarrow-slider .avia-slideshow-arrows {
width: 150px;
height: 50px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a {
background: white !important;
color: #67b6e1;
width: 50px;
height: 30px;
font-size: 25px;
font-weight: bolder;
}
.html_elegant-blog .avia-content-slider .slide-entry-title {
padding-top: 1px;
font-size: 1.1em !important;}

.html_elegant-blog .avia-content-slider .slide-entry-title {
text-align: right;
text-transform: none !important;
padding: 0 40px 15px !important;
}

Warmly,

Havi

February 5, 2018 at 1:12 pm #907924

Victoria
Inactive Moderator

Hi Havi,

So how do you need to adjust them? Please disable caching and minification while we’re helping you.

Best regards,
Victoria

February 5, 2018 at 10:14 pm #908242

havi
Participant

Hi Victoria!!

No problem. I disabled caching and minification. What I’d like is those arrows to stand out.

background: #67b6e1 !important; (without the gray overlay – it is white right now to be able to show your the gray that dulls the color)
color: white;

and it’s not a font, is it? It’s a char code? Can I use \ue888 & \ue899? If not, how can I make the arrow bolder?

Is it possible to add rounded corners and shadow (like the theme buttons)?

My goal is to make them stand out and work with the theme.

Thank you so much!!!

Warmly,

Havi

February 6, 2018 at 3:43 am #908319
Nikko
Inactive Moderator
Hi Havi,

I have modified your css code in Quick CSS:
```
/*slider arrows css */
#top .avia-smallarrow-slider .avia-slideshow-arrows {
    width: 505px;
    height: 50px;
    display: block;
    position: absolute;
    top: 270px;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows a {
    background: transparent!important;
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 50px;
    font-weight: bolder;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows a:before {
  background: transparent !important;
  line-height: 50px;
}
```
Let us know if it helps :)

Best regards,
Nikko
February 6, 2018 at 4:50 am #908336

havi
Participant

Hi Nikko,

Thank you!! :) Quick question, will it work with any image size? (Height)

Warmly,

Havi

February 6, 2018 at 5:03 am #908341
Nikko
Inactive Moderator
Hi,

No, it wouldn’t, you will need to adjust the top position on this code I adjusted:
```
#top .avia-smallarrow-slider .avia-slideshow-arrows {
    width: 505px;
    height: 50px;
    display: block;
    position: absolute;
    top: 270px;
}
```
If it’s smaller, just lower the value also :)

Best regards,
Nikko
February 6, 2018 at 8:12 am #908386

havi
Participant

Thank you Nikko!!

More than likely I will have to make the arrows appear lower than they are, so just adjust the top value, right? That’s from the top of the slider, correct?

This is going to be awesome!!

Thank you so much!!!

Warmly,

Havi

February 6, 2018 at 10:54 am #908454

Nikko
Inactive Moderator

Hi Havi,

Yes, that’s the only value you need to adjust. :) Let us know if you need further assistance.

Best regards,
Nikko

February 13, 2018 at 1:44 am #911447

havi
Participant

Hi Nikko!!

I thought you would want to see how beautiful the sliders look right now (on the real site) :)

46 Ideas Llenas de Magia para una Boda Temática Blancanieves en Bosque Encantado

Thank you! Thank you! Thank you!!

Warmly,

Havi

February 13, 2018 at 4:19 am #911475

Nikko
Inactive Moderator

Hi Havi,

You’re very much welcome, we appreciate your kind words, I have checked it and yes I was really looking forward to see it :) It looks great, plus the pictures are really beautiful!

Let us know if you need further assistance :)

Best regards,
Nikko

February 13, 2018 at 4:42 am #911489

havi
Participant

:) I’m super happy!!! :)

Yes, the pictures are Disney-like! I want the brides to click, click, click!!

I’m going to see if I can make the arrows of the other sliders as big as this one!!

Thanks again!!

Warmly,

Havi

February 13, 2018 at 6:06 am #911535

Nikko
Inactive Moderator

Hi Havi,

Glad to hear that :) It gives us joy to have happy Enfold users! I’ll be closing this thread now, just create a new thread if you need more assistance and we’ll be happy to answer it. Have a nice day :)

Best regards,
Nikko
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Content Slider Question’ is closed to new replies.