Footers – How to create them?

Footers are just HTML & CSS, same as every other element on the page, so there’s nothing really special or unusual about them. What are you struggling with in particular? Making it look good? Putting it in the right place? Something else?

He problem is the right method… How should I proceed to create a footer including all the features needed for a landing page? And more importantly how do I make sure it works (on all the pages)?

I saw some tutorials where they use plugins, others where they use widgets… I was thinking to create a div and including what I need… But at the moment I have hidden using the CSS the ‘powered by’ sentence that appears in the small footer of the twenty sexteen theme…

This is mainly the question… Should I alter that footer (maybe using some new files in the child theme)? And in that case how can I include widgets and plugins (for example the social media icons)?

Thank you and forgive me for the lots of questions… I tried to summarize as much as I could.

Basically I’m using the Twenty Sexteen theme for my page (that doesn’t include a widget area). I’d like to add a nice footer to add informations to all pagesa (I’m working on a landing page but would like to add additional features in the future).

The page will also be multilanguage, and for this reason the footer should be multilanguage too.

For now the solution I found is to design a new page with Elementor Basic {just the footer}, show the page and copy the resulting html code.
Paste the code into the child theme footer in order to show it on all the pages.

Problem #1: The footer requires additional tweaks as some of the elements will lose the style… for this reason I’ll have to add a class and define it as !important or the tweaks will not be visible.
Problem #2: The widget will not be multy language… Polylang will not translate the it as it will be integrated into the bottom informations of the page.

Do you have another idea on how I can place a footer on the page?
You can come back to me saying that being a landing page I could place the footer directly on the bottom of the page using Elementor, but I’m soon planning to add a blog section where my client will be able to post short curiosity about the B&b so the footer should be applied to all pages.

Thank you for your help guys!

Hey there,
You could do it by customizing footer.php in twentysexteen theme. You could use WordPress theme documentation for any help.

Problem is that I need to have two different footers, one for Italian and one for English… Do you suggest to add a widget here or to include th html code directly into the footer?

Hello again… I kinda managed to find a soluition {indecent solution I’d say}.
Basically I switched to the twenty seventeen theme. I managed to alter the header adjusting the position of logo and links.

What I came out with is adding custom html to the widget of the footer, creasting two versions {one for the italian and another for the english}.

Problem will be that any alteration to the footer will have to be don “hard coding” changing the html code written.

I’m using basic elementor as page builder {that doesn’t include footers}.
The advantage is that I can chose what widget to use and in this way not caring too much about polylang.

Do you think this is a good solution? I’m writing here also to get a little of self confidence as this solution seems quite tricky.

Thank you for your help guys!

I made some progresses but still this has becom harder than I expeted.

Basically seen that with Elementor basic it isn’t possible to customise the footer I decided to hard coding it and include into the footer widget of the theme I’m using… Big problem everything is wrapped into small divs and I have no idea ho wo make it work properly…

I tried to write html and css and include them (html into the “insert html” widget inside of the footer widget, and css into the style css of the child theme).

The result is weird as I got two small bars (I wrote it full width).
Because of this, hard codin it is out of discussion ??

Do you have better ideas on how to insert a footer?

FYI this are html and css of the footer

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Footer</title>
	<link rel="stylesheet" type="text/css" href="footer.css">
</head>
<body>
	<div class="contenitore larg-piena">
		<div class="footer-cont1 larg-piena">
			<div class="larg-int">
				<span class="testo-norm">Prova1</span>
			</div>
		</div>
		<div class="footer-cont2 larg-piena">
			<div class="larg-int">
				<span class="testo-norm">Copyright - B&b Cinque Teste | All Rights Reserved</span>
			</div>
		</div>
	</div>
</body>
</html>

CSS:

body{
	margin: 0px;
}

.footer-cont1{
	background: #444;
}

.footer-cont2{
	background-color: #000;
}

.larg-piena{
	width: 100%;
}

.testo-norm{
	color: white;
	font-family: "Roboto", Sans-serif;
	font-weight: 400;
	font-size: small;
}

.larg-int{
	width: 1140px;
	margin: auto;
	padding: 5px 0px 5px 0px;
}

Hello again!
I promised this is the last time I write about this…

I finally found a solution that works!!!!! YEEE!!!

Basically I installed the “Header and Footer Elementor” Plugin that allows you to create custom header and footer.
Now the problem is that the plugin just works on 5 themes… but here is the magic… I found a nice article that allows you to alter the header.php and footer.php files in order to activatew this plugin.
In my very case all I wanted was to use it as a footer, so I just changed the footer.php file… BUT IT WORKS!!!

If you had similar problems the link to the documentation is
https://github.com/Nikschavan/header-footer-elementor/wiki/Add-support-to-Header-Footer-Elementor-from-the-Child-Theme

I hope this will help someone else in may same situation.
I’m considering to buy the full version of Elementor as I find it quite handy… but before doing it I prefer to create my landing page with what I have and then decide.

Thank you very much for your help! You are precious!!!!