1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

An easy way to align buttons in Call To Action down towards the bottom?

Discussion in 'Free Divi Community Forum' started by JTHA80, Jul 3, 2020.

  1. JTHA80

    JTHA80 New Member

    I've finally managed to get horizontal rows of Call to Action modules like I wanted them to be.

    However, I keep failing to get the buttons towards the bottom - and I think I've tested most of the instructions online.

    Is there an easy CSS code that I've managed to miss?

    (I intend to add Call to Action modules to the rows over a long period of time, so it would be great if the CSS would take that into account and do it automatically)
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  2. Problemizer.com

    Problemizer.com Divi Expert

    It is hard to imagine what you want to achieve here, so it would be best if you can share your website URL.
     
  3. JTHA80

    JTHA80 New Member

    Well, the website is under lock and key.

    However, I'll share a screenshot that shows one of the three rows on my site.

    I'm trying to get the buttons (the ones with names on them) aligned in an orderly fashion in a straight line but I don't want the names so high up; I want them near the bottom of the images. I know I could probably use padding, if I could get it to work - but I would like the buttons to align up automatically.



    This website also shows well what I'm talking about - sadly the instructions aren't working for me - perhaps because I'm using Call to Action(?): https://quiroz.co/align-buttons-to-the-bottom-of-the-row/
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  4. JTHA80

    JTHA80 New Member

    Surely it's got to be some CSS wording or a CSS line I need to add somewhere.

    But I made an image of what I want to achieve (removing the ugly horizontal scroll bar and "geotagging" the row is a future problem). The row above is from my website and the image below is from Paint (which shows what I want to achieve).

    1-how it should be.jpg
     
  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    Set the button to be position absolute and set a bottom value to it?
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  6. JTHA80

    JTHA80 New Member

    I googled what you suggested and found out, according to Divi's own documentation, you need to be able to open up 'Button Settings', whereas I only get 'Call To Action Settings' when I right click a button.

    When I do Call To Action Settings > Position > Absolute, that just makes the row much thinner and removes the module whose button I was trying to change.

    Adjusting 'Location' does nothing.

    When I removed the Position Absolute back to normal, and went to Design > Button and working with the margins does put the button down but it stretches the images, so that some images show a black bar ...then again maybe I could try to work on those with some free image resizing website. Although working with the margins raises the risk of the buttons not being uniform. And the padding, of course, doesn't work in this instance.


    Surely there's got to be at least a widget or a plugin a newbie like me could buy? But if not, I guess the only thing is to delete the row, start again, and make the modules be Blurb and work on those buttons individually?
     
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    I would suggest to put the images as background image for the column. Then just put a button in it with position absolute, so that they can align properly at the bottom. You might also need to set a height for column as well, cause the button position absolute is not counted as having a height.
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  8. JTHA80

    JTHA80 New Member

    I put that into the Main Element in the Custom CSS in the Call To Action Settings and all it did was just to change the appearance of a button back into what I started with. It didn't move it close to the bottom.
     
  9. JTHA80

    JTHA80 New Member


    I'm very much a novice; what height would I have to set a "px" number to - the 'Min Height'? 'Height'? Or 'Max Height'?

    Also, I have no idea how I managed to put the row together like I did, but all the images are background as that's the only way to get images into the Call To Action module. But I specifically chose Call To Action because it had a "built in" button; and removing that (taking out the text in the 'Link') and adding the module 'Button' just creates additional headaches, and putting Position > Absolute just makes it take off somewhere, and clicking the corners makes it go from one end to another. Not ideal at all.


    Frankly, Divi disappoints me.
     
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    I recreated your design using position absolute for the button module + set the row to be equalized column heights + set row min height + set column padding top for mobile (so that it show up well in mobile).

    Just download the attached .json file & import it in Divi Library. Then add a new section > Load from Library > Button Bottom.

    Do note that we are just third party developers providing free help for Divi community.

    For official Divi support, kindly refer to: https://www.elegantthemes.com/members-area/help/
     

    Attached Files:

  11. JTHA80

    JTHA80 New Member

    Thanks, I was able to view it but not import it - even though I read tutorials on how to import it and watched YouTube videos. No matter what, I wasn't able to conquer "This file should not be imported in this context." (and sadly but predictably Divi didn't display any text explaining it further).

    Thank you anyway for you effort.

    Guess I'll just do one module at a time and then duplicate it and if the button is misaligned, just try to adjust it or take out that individual module and place another instead.

    But thank you very much for you patience and help.
     
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  12. Divi.Help

    Divi.Help Administrator
    Staff Member

    Recorded a video for you: http://recordit.co/xwDCb7mfI4
     
  13. JTHA80

    JTHA80 New Member

    [​IMG]

    I haven't signed in here for quite a while and saw you had a recording for me, and I was hoping it would be the end of my problem. However, it was what I already knew and the same problem still persists - as can be seen in the screenshot above (you get a green check-mark while I get the annoying message in the screenshot).
     
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo