Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 10, 2023 at 3:57 pm #1418653
    Faun2015

    Hello,

    I have created this header using the Fullwidth Slideshow element. Like for example here: https://www.gartenholzprofi.de/holz-terrassen-wpc-terrassen/
    Now I would like to add a CTA button. As seen here: https://www.dropbox.com/scl/fi/z4a6fpgu3esrpxjizbzzj/2023-09-10_15-50-09.jpg?rlkey=rmc2xhsvdy2lfgbpo1ib0qmbg&dl=0

    How do I do this in principle? I haven’t found a solution yet!
    It is not necessary to use the Fullwidth Slideshow. But it should ultimately look as desired.

    Many thanks for help.

    KR – Marc

    September 10, 2023 at 8:15 pm #1418684
    Mike

    Hey Marc,
    It looks like you are using the Fullwidth Easy Slider, so go to a slide in your slider and open it:
    Enfold_Support_3231.jpeg
    then go to Advanced ▸ Link Settings you have the option to add buttons:
    Enfold_Support_3235.jpeg
    If you want to modify the look of the button more than the options allow you to let us know and we will help with some css.

    Best regards,
    Mike

    September 12, 2023 at 12:55 pm #1418884
    Faun2015

    …. Thank you very much, Mike.
    I should have thought of that myself. :-(

    Now I have another question on the same subject:

    Please, look at the screenshot:
    https://www.dropbox.com/scl/fi/b4ot02j2g5f9l8z543loe/2023-09-12_12-49-57.jpg?rlkey=9l4sikoc6ijjp6jbaj75jny7a&dl=0

    I created the lower button at the green arrow with the button element and some CSS.
    Now I want the button at the top of the red arrow to look the same.

    How do I get that to work?

    I appreciate your support, Mike.

    KR – Marc

    September 12, 2023 at 5:29 pm #1418921
    Mike

    Hi,
    Please link to the page so we can examine the buttons and assist with some css.

    Best regards,
    Mike

    September 12, 2023 at 6:01 pm #1418925
    Faun2015

    Hi Mike,

    Thank you very much for your support. Here are the dial-in details …

    • This reply was modified 10 months, 2 weeks ago by Faun2015.
    September 13, 2023 at 2:48 am #1418968
    Ismael

    Hi,

    I created the lower button at the green arrow with the button element and some CSS.
    Now I want the button at the top of the red arrow to look the same.

    Have you tried editing the button styles within the element’s Styling panel? You’ll find options there to customize attributes like color, font size, borders, and more.

    Best regards,
    Ismael

    September 13, 2023 at 9:16 am #1419004
    Faun2015

    Hello Ismael,

    I have, of course, taken a look at it. Before I wrote to Mike.

    a) I can define a button directly on the page via the “Button” element. I can’t use all the possibilities here (for example, a colour hover) as when I add CSS.

    b) I can further adjust the styling of the button in the theme options. Okay. Here, too, I cannot create the desired colour hover.

    Anyway …
    The most important question is: How can I ultimately apply the same button settings I made for the bottom button to the top button (in the slider)?
    All possibilities there …
    – Theme colour
    – Theme colour highlight
    – Theme Subtle Colour
    are not helpful here. (These settings also apply to other elements that are already used on the website and should not change.)

    Sorry, but I’m not getting anywhere here?

    It would be ideal if the CSS settings I made also referred to the button in the slider.

    KR – Marc

    September 13, 2023 at 12:30 pm #1419027
    Ismael

    Hi,

    Sorry for the confusion. I thought that you wanted the button element to look the same as the slider button, but it’s the other way around. Please use this css code to adjust the style of the slider button.

    #top .avia-slideshow-button {
    text-transform: none;
    background: #FAC710 !important;
    padding: 12px 16px 10px;
    font-size: 16px;
    min-width: 90px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: #000;
    margin-top: 20px;
}

#top .avia-slideshow-button:hover {
    border-color: #CA9336;
    color: #fff;
    background: #D28C17 !important;
}

    Best regards,
    Ismael

    October 8, 2023 at 1:34 pm #1421805
    Faun2015

    Thank you very much, Ismael. :-)
    Sorry for the delay –

    KR – Marc

    October 8, 2023 at 2:36 pm #1421811
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Adding a CTA-Button to the Fullwidth Slideshow’ is closed to new replies.