Walls.io provides various ways to customize the aesthetics of your wall. In this guide, we'll walk you through the different design options that you have and the ways you can add your own brand logo and colors.
All design customization options can be found in Settings > Design.
🎥 Brand your wall in 5 minutes
Watch our Quick Start Guide video to see how to customize your wall.
Jump to:
Layout options
Walls.io comes equipped with 7 layouts, each optimized for different use cases. You can select your desired layout and save the changes to see the layout reflected on your wall.
Toggle the items below to see examples of each of the layouts.
Fluid
Fluid
Suiting all screen sizes and use cases, the Fluid layout is the default Walls.io template. The posts expand according to their size and format (e.g., a landscape social media card vs. a square card) and caption length, giving it a more dynamic look.
The Fluid layout supports automatic scrolling, reactions, and live polls.
Carousel
Carousel
The Carousel layout is best suited for website widgets and is often used by customers to show rotating content on their sites. This layout is great for websites that want to improve SEO and SERP, as it increases dwell time and user engagement.
This layout supports automatic scrolling.
Kiosk
Kiosk
The Kiosk layout is best used for e-commerce and digital signage as well as projections to a big screen. It uses 3D design and animations to preview post photos and text.
Bricks
Bricks
The Bricks layout adapts to the different media you have on your wall. Bigger, high-resolution photos are given more space on the screen, whereas smaller photos are displayed in smaller tiles.
This layout rotates new posts out every few seconds, and you can choose how dense you want the display to be with fewer or more posts in each rotation.
Grid
Grid
The Grid layout keeps all your posts the same size and aligned to a fixed grid.
Once the social media card is displayed, the post caption slowly fades in displays above a blurred background.
The Grid layout supports automatic scrolling.
Billboard
Billboard
The Billboard layout displays posts one at a time for optimal viewing on a big screen. This layout is often used by customers for presentations or conferences with large audiences to put special emphasis on the post's content.
Map
Map
The Map layout displays posts as points on a map that dynamically pop up and move across the globe. This layout is especially loved in scenarios where there are multiple locations of an event happening or for employer branding initiatives in international companies.
Header
At the top of your social wall, you can display a branded header.
1. Enable the "Show header" option to see the design settings.
Then, follow these steps:
2. Decide if you want to add your logo + post instructions or upload a custom banner.
Logo + Post Instructions
Include your logo and instructions on how users should post to the wall. These post instructions are generated dynamically based on the keywords you added to the wall.
💡 Hint: For example, if you have connected LinkedIn as a source and you've added the keyword #SocialWalls, the post instructions will display as "Post in LinkedIn: #SocialWalls."
Banner
Design and upload a custom banner. For optimal display, please use 1920x200 pixels.
3. Upload your logo.
💡Hint: The best height for a logo in the top bar is 140 pixels or more.
4. You can adjust the size of the logo by selecting a different size in the dropdown list. Depending on your choice, the height of the header will increase or decrease responsively.
5. Add your website link or another site you would like users to be redirected to. If your visitor clicks on the logo, they will be taken to that page in a new tab.
6. Show header message options.
If you click this button, you are given additional options to customize your header.
⚠️ If you have opted to upload your own banner file, the below settings will be overridden to display your banner instead.
A. Choose to display your wall title. This is taken from what you entered in the Basics section of your settings and can be referenced at the top of the toolbar.
B. Show post instructions. This will be taken dynamically from the keywords you specified in your sources connection. If you have chosen the Logo + Post Instructions from the dropdown above, this will be enabled automatically.
🔎 Please note: It is not possible to customize this text.
C. However, if you would like to display a customized text at the top of your header, you can enable Show custom messages.
Posts
Choose whether you would like to show the descriptive information associated with each individual post.
💡 Hint: Enable the Avoid Cropping toggle to ensure that all your post media is displayed in full.
Colors
Main color settings
You can easily brand your wall with the standard customization settings. Click Customize Color Scheme to display the options.
The following settings allow you to change the appearance
1. Add your brand colors to the header of your wall. If you have chosen instead to upload your own custom banner, the banner will override these color settings.
2. Set a background color or add an image. If you choose to add an image, we recommend uploading a file that is 1920x1080 px. Walls.io will scale your background responsively to fit other screen sizes.
Below is an example of a wall using a background image.
3. You can also adjust the font weights. This refers to the text on a post caption if it has a social media image (left on the screenshot) and the font on a text-only post (right on the screenshot). You can choose to keep these weights the same or add different values to the two types of text.
Tile color settings
You can also brand the tiles (or posts). To do so, enter your hex code in the corresponding field or use the color picker drop-down.
On the left, you will be given a preview of the tile color scheme complete with the background and header color you've chosen in the previous step.
1. You can add additional colors by clicking the green + button and/or delete colors by clicking the red trash can.
These tile colors are randomly distributed throughout the wall.
⚠️ Please keep in mind that tile colors are not customizable in the Kiosk and Bricks layouts.
Advanced customizations
Aside from the standard design settings that you can play around with, you can also adjust language, post transitions, and sorting settings as well as use your own custom CSS stylings.
🔎 Please note: The photo below shows the settings for the default Fluid layout. Other layouts will have other settings such as "Time to next post" for Kiosk and Billboard and "Number of rows" for Grid.
A. Set the number of columns you would like the post tiles to be sorted into.
B. Choose which animation style you want new tiles to cycle in.
C. Determine the display language. This will change the language in the timestamp and QR code.
D. Change the post sorting method.
E. Enable custom design changes with CSS.
⚠️ CSS is only available with a paid plan. Upgrade your free trial to explore additional customization options such as adding your own brand font and changing the QR color!
✅ Final check: Once you have completed the branding section, your wall could look something like this:
