Edit Footer design

[Marinaol]

Hi!

I have been trying to edit my footer but I don’t understand well how I can create the design I want.
I want something similar to this footer:

Can you explain to me how I can create columns in the footer in order to create this structure? And, how can I edit the distance between the different in my navigation bar?

Best,
Marina.

[marc_a]

Hi Marina,

Thanks for reaching out.

I check your website and you are using our Pro Theme. In our Pro theme there is a footer builder that you can customize base on the design you prefer, to do that go to Pro > Footers. Then under bar 1, you need to create 4 containers to have 4 columns then add your content to each container.

You can also check our Header and Footer Builder docs. If you have some spare time, you can watch our youtube channel to have some ideas and tricks in our Pro Theme.

Hope that helps.

Thank you.

[Marinaol]

Hi Cramaton,

Thank you for your answer.
Could you tell me how can I put my Instagram and Facebook icons in the same line. I cannot find the way to put them in the same row and have the rest of the container in a column.

This is how it looks like at the moment:

And this is how I want it to look like:

Best,
Marina.

[tristup]

Hi Marina,

What I have seen that in your website footer, you have taken a single bar element for all the columns.
And set the container Child Placement as Column and that is why the button elements are shown in a different row.
I would like to suggest a few steps that may help you to achieve this.

Step 1: Take two different bars and set the Child Placement as Row to get those side by side.

Step 2: And put all first three columns i.e container in the first bar element and last column in the second bar. You can also create different bar for different containers too.

Step 3: Set Child Placement as Row for the first bar and Column for the bar.

Step 4: Add three different containers for the second bar.

Step 5: Set the button in the first container.

Step 6: Set the text in the second container.

Step 7: Set Child Placement as Row for the third container.

Step 8: Add the button element to the third container.

Hope it will help.

Thanks

[Marinaol]

Hi,

Thanks for your help!

I am not sure if I have understood all the steps well though. I have a problem now, how can I put the two bars at the same level, so my footer can look like this?

Instead of like this, which is how it looks like right now.

Best,
Marina.

[tristup]

Hi Marina,

What I suggested in the last comment is to take 4 Container inside a single Bar to get the output you are expecting. Here I have tried to create a similar structure to help you.

Please let me know if you still have any difficulties getting that structure.

Thanks

[Marinaol]

Hi Tristup,

Thank you for creating the structure.
I have been able to place the Facebook and Instagram button below but I cannot find the way to align in to left, below the subscribe button as is in this example:

As you can see in the screenshot below, I have created 4 structures as you indicated. And it looks good.

But when I go to my website for some reason it appears on the centre. How can I solve it? I send you below the link of my website so you can know what I mean.

About | In a Woman's Body

Thanks!

[tristup]

Hi Marina,

I would suggest you set the container max-width to 25%, it will restrict the column to flow.

I would also suggest the same width for each of the columns in each row, to make the width similar.

Thanks