Home Forums Community Forum How do I achieve this?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • meaphoto
    Participant
    Post count: 5

    I would like to create the three boxes shown on this page: https://davidsuhphotography.com/. The first box is Learn About the Experience. Here are the features of these boxes I would like to achieve:

    a. They are equal sizes and stay horizontally centered with each other and equidistant from each other when I make my browser window smaller.
    b. They “float” over the web page when I make my browser window smaller, so they move to stay in the window.
    c. They shrink and the text shrinks when I make my browser window a lot smaller.
    d. The buttons are the same size no matter the length of the text on the button.
    e. The buttons are horizontally centered with each other no matter the size of the browser window.

    Can all or some of this be accomplished with the Avada theme or do I need to learn HTML to do this? I have created three boxes with buttons (unequal in size unless they span the column 100%), but the features related to sizing the browser window and movement eludes me. Help and suggestions are appreciated. I don’t know HTML, but I can learn some (I have some programming skills, but I don’t enjoy it!) – I don’t intend to become an expert, so if hiring a web designer is the way to go to achieve this, let me know!

    emarinuk
    Participant
    Post count: 3

    Without looking very closely, you can add a container with three columns and add text boxes and a button to the first column and then copy it twice over.

    Maybe with nested columns too, but I have not used them much.

    Steve
    Participant
    Post count: 23

    Yes, you can do this with Avada very easily. What you need to spend time learning is CSS just so you understand positioning and spacing. 99% of most sites can be done with Avada and a little custom CSS, but based on what you are looking for this may not be needed.

    Steve
    Participant
    Post count: 23

    I wanted to test a couple of items before providing guidance. I created a basic example at https://avadathe.me/layouts/photo-layout/. The only custom css you need is to remove the background image on mobile. Everything else can be done with Avada and responsive layout settings.

    • Set a background image for the container
    • Create a multi-column layout (full width for the section title and 3 columns for the content)
    • Set the three columns to equal height (stretch)
    • Add title, text, spacer (flex grow = 1), and button.
    • Adjust as needed for your site (desktop, tablet, and mobile

    If you really need shrinking text, you will need some custom css for that as well.

    meaphoto
    Participant
    Post count: 5

    Steve, thank you for going to the trouble to create an example. I need to work through what you’ve said. For adding title, text, spacer and button, are these all separate elements:

    Title = text block
    Text = text block
    Spacer = ?
    Button = button element

    I don’t really need shrinking text, but it’s nice feature. It’s a lower priority, I want the boxes working well first.

    meaphoto
    Participant
    Post count: 5

    I think I found the answer to my question above, researching now. I always say at work, as soon as I ask the question, I find the answer myself!

    meaphoto
    Participant
    Post count: 5

    Steve, thank you for your help! I’ve resolved my issue. I also used this helpful link, which I wouldn’t have thought to look at before your suggestions: https://theme-fusion.com/documentation/avada/how-to/how-to-use-flex-grow-on-separators/

    Thanks again!

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