COuld you help us produce a footer like this?

yadiyada · October 2019

HI Guys

Can we ask. How much is involved in reproducing a footer like this. We stumbled across a site and loved the layout of the footer. We hoped to re-produce something similar and hoped you could help. OWUld thi sbe somethign you could advis eus on or perhaps help with.

Gary

Pablo · October 2019

Hello,

Surely, you'll need some CSS to achieve that, but simply, it's a 1/5 footer, which means it will have five columns.

To change the layout to 1/5, please go to the Theme Options > Footer

http://prntscr.com/phb3sa

Then, simply fill the tabs in Appearance > Widgets, they will be named "Footer | 1" etc.

http://prntscr.com/phb499

Thanks

yadiyada · October 2019

I have added a 5 column footer with a background image. The URL is here

http://md-a-co-uk.stackstaging.com/

I was wondering how we add some lines The line down the footer after the second column.

Also the logo is spread over two columns. Would this be tricky?

I was wondering if icons can be added to address and social sections. Is there apps in the widgets for this?

Is it easy to add a contact form also? Do we have anything in widgets for this that can be styled.

Thank you for your time and assistance.

gary

Pablo · October 2019

All items which are available to insert in footer tabs are displayed there:

http://prntscr.com/pmllnt

Of course, you can also provide a shortcode for some item or contact form to insert it there.

For best results, we suggest to use the Contact Form 7 plugin.

About the line between columns, you will have to create a Custom CSS for it, are you able to do that?

Thanks

yadiyada · October 2019

Im afraid not. Its only one line in the example that separates content. Could you provide this or is this outwith the support arrangement.

I also noticed that the logo is spread over two columns. Is this something you could assist with?

Thnak you

Pablo · October 2019

What do you mean by "the logo is spread over two column", I did not notice that:

http://prntscr.com/pnkhi0

About the line, please paste that CSS code into the Theme Options > Custom CSS & JS > CSS


#Footer .container > div:nth-child(1){
	border-right:2px solid white !important;
	padding-right:10px;
	box-sizing:border-box;
}

Thanks

yadiyada · October 2019

Wow thank you so much. This produces a line that is after the first column. If I change the code below will this move the line to the second column? Thanks again amzing stuff we are very impressed!!

div:nth-child(1){

to div:nth-child(2){

Pablo · October 2019

Glad that you solved it out.

Is there anything else I can help you with?

Thanks

yadiyada · October 2019

No thanks we are good to go.

Thank you

COuld you help us produce a footer like this?

Comments