Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 12, 2020 at 6:03 pm #1172550
    Misantaller

    Hi there,
    I know there have been tons of threads on this question. But can i place a button over an image? I don’t want to set the image as background for my color section, because then I can’t add the slide-in animation which I can easily do with images.
    Best regards,
    Sebastian

    January 13, 2020 at 5:47 am #1172642
    Nikko

    Hey Misantaller,

    Are you referring on the images with instagram icon when hovered below ‘BE PART OF OUR JOURNEY’?
    It can be done through some css, try to do the following:
    – In the Color Section, go to Developer (tab) and on Custom CSS Class, put my-section.
    – In Enfold > General Styling > Quick CSS, add this CSS code:

    .my-section .avia-button-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -19px;
    text-align: center;
    width: 100%;
}

.my-section .avia-button {
    display: inline-block;
}

    Hope it helps.

    Best regards,
    Nikko

    January 13, 2020 at 9:07 am #1172689
    Misantaller

    Hi Nikko,
    Thanks for your help, but it didn’t change anything…And i think you’re reffering to the wrong part of the page.
    I’m talking about this part and the button:

    View post on imgur.com

    The image and the text slide in and there is the button saying “Termin sichern” (which even changes it’s color on hover).

    Is there any way to easily do sth. like that?

    Best regards

    • This reply was modified 4 years, 3 months ago by Misantaller.
    January 14, 2020 at 11:24 am #1173221
    Ismael

    Hi,

    Thank you for the clarification.

    You can use columns to separate the image and the button, edit the column containing the button, apply a custom css class attribute to it (e.g custom-column-button-class), then use this attribute to adjust the style of the column. You can pull the button column towards the image by applying a negative left margin value to it.

    .custom-column-button-class {
   margin-left: -300px;
}

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    January 14, 2020 at 1:06 pm #1173287
    Misantaller

    Hi i added a name to the buttons title attribute (same as a class?) and tried to alter it in the quick css field in the customizer.
    But it didn’t change at all. On no command. I think i didn’t call it correctly, although i followed your instructions.
    Cheers,
    Sebastian

    January 14, 2020 at 6:03 pm #1173516
    Nikko

    Hi Sebastian,

    You’re just missing the button where you’ll need to apply a custom CSS class attribute.

    Best regards,
    Nikko

    January 15, 2020 at 1:04 pm #1173955
    Misantaller

    Hi Nikko,
    The button is on the correct place now, but i can only see it in my chrome browser. Not in firefox, or my mobile phone…
    Can you help me fix that?
    Cheers

    January 16, 2020 at 9:35 am #1174789
    Ismael

    Hi,

    Thank you for the update.

    We can now see the button above the image on Firefox Windows 10. It looks fine on desktop, but you have to adjust it on mobile view or on smaller screens. You can also just apply the modification when the screen width is wider than 1024px.

    @media only screen and (min-width: 1024px) {
  /* Add your Desktop Styles here */

}

    Best regards,
    Ismael

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