You can add a custom footer overlay to your Walls.io social wall with custom CSS. This is useful if you want to keep an important message visible at all times, such as a campaign CTA, sponsor note, or prompt encouraging visitors to post. To set it up, go to Setup > Design and paste the CSS snippet below into your custom CSS field.
body:after {
content: "Post on Instagram for a chance to get featured!"; /*put your message here*/
font-size: 40px;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
height: 70px;
line-height: 70px;
color: white;
background-color: #003087; /*change the color*/
}
/* move the create post button up in case it is covering the footer on smaller screens */
@media only screen and (max-width: 576px) {
#createPostButton {
bottom: 80px !important;
}
}
The footer overlay will communicate your message promptly. In our case, you will see the message below with a blue background 👇
Customize the footer message and color
You can edit the snippet to match your wall design and message:
Replace
Post on Instagram for a chance to get featured!with your own footer text.Change
#003087to any hex or RGB color you want to use as the footer background.Adjust
font-size,height, andline-heightif you want the footer to appear larger or smaller on the wall.
🔎 The snippet also moves the Create Post button up on smaller screens so it does not overlap the footer overlay.
In case you have further questions, don't hesitate to contact the support team via chat or support@walls.io!