Creating a New Design for your Social Media Hub
You can display X (Twitter), Instagram, and more on your website, microsite or app in a fully customizable, real time embed using Everwall.
Incorporating a social media feed into your website is similar to embedding any other social media widget you might use. Simply copy the provided embed code snippet and paste it into the HTML code of your website. Within minutes, you can have a place on your website that collects and showcases the social media content you desire. You can even create multiple different designs so that it blends in with your different pages (all of the embeds will have the same posts, but with distinct styles).
If you have a Social Media Hub design that you’d like to use again somewhere else with a few minor tweaks, you can make a duplicate of that design to save yourself from having to recreate it from scratch. Then, once you’ve duplicated it, you can make the changes to that new design.
Below we’ll walk you through how to create a new design (and all of it’s options). You can also duplicate an existing design.
Note: Social Media Hubs can be created as a free add-on to Event Social Walls and Digital Signage, or stand-alone as just the Social Media Hub. Regardless of which product you are using, creating a new design below is the same process.
How to Create New Designs For Your Social Media Hub.
Step 1: Log in to your Everwall account and choose the Social Media Hub where you want to add a new design. If you only have one Social Media Hub or Social Wall in your Everwall account, you’ll be put straight into that Overview page and won’t have the option to select one and will already be on the Overview page.
If you haven’t created a social media hub yet, you can create one here, and as part of the initial walk through it will also walk you through creating your first design.
Step 2: In the overview page, click the Hub Designs on the left side menu (it will say Website Embeds if you created an Event Social Wall instead of a Social Media Hub) to view your social media hub designs or to create another hub design.
Step 3: To create a new social media hub design, click the Create Another Design option. You can also click the “More” button (with three dots) and select the Create New Design option.
Step 4: You will be directed to the Manage Website Hub Design builder where you can create and design your social media hub. The builder offers four different Hub Layouts (Columns, Grid, Carousel and Waterfall), each with its own set of design settings and customization features, including:
- Global Settings: These settings apply to all Hub Designs you create for this Website Hub
- Embed Settings: These are the general settings for the embed code and determine how the Website Hub works on your website.
- Design Options: The options vary based on the selected layout above (Columns, Grid, Carousel, and Waterfall).
- Post Filters: Settings related to filtering posts for this layout (if you don’t want to display all posts).
There is also a fifth layout option called Raw Code, if you enable the advanced editor under the More menu. With this final option we load up minimal design options so you can build your own embed from scratch. We only recommend this option if our existing designs don’t work for you and you have developers on staff.
Global Settings:
Everwall Branding: By default the “Social Media Hub by Everwall” text will be displayed below the embed. To remove this text, switch the toggle “Yes.” This feature requires a paid upgrade, available for $49 per day (for Event Social Walls) or $179 per year (for Social Media Hubs) to remove our branding.
Unlimited Pageviews: Social Media Hubs include 200,000 pageviews per month. If you need more, you can switch this to “Yes” to upgrade into Unlimited Pageviews for $49/month for Social Media Hubs. Since this is a Global Setting, all designs will have unlimited pageviews.
If this is an Event Wall, there are no pageview limits, and this will already be set to Yes. We do not charge extra for unlimited pageviews on Event Social Walls.
The 200,000 limit is flexible—we won’t disable your hub for minor overages. However, frequent or excessive overages will be billed at $10 per 100,000 extra pageviews, rounded up. If you’re approaching this limit, we’ll send you a warning before any charges would be incurred.
Embed Settings:
Hub width: Set how wide your Social Media Hub will appear on your webpage. We recommend to set it to 100% to fill its container
Hub height: When you switch the toggle to “Yes”, the hub will automatically adjust its height to fit the content. Please note that this automatic resizing feature relies on JavaScript to function properly.
If the platform where you’re embedding the hub does not support JavaScript, you should switch the toggle to “No”. This disables JavaScript functionality and requires you to manually set a fixed height to ensure the hub displays correctly on the page.
Use Transparent Background: This setting allows the background of your Website Hub to blend seamlessly with your website’s existing design. By keeping this option set to “Yes”, your website’s styling will show through the hub. If you prefer the hub to have its own distinct background, switch this option to “No”. Once disabled, you’ll be able to choose a specific background color for the hub.
Note: This setting only controls the overall background of the hub. The background color for individual posts is configured separately in the Hub Background Color section.
Hub Background Color: If you have chosen not to use a transparent background, select the color you’d like the hub to use. This will apply to the entire hub container, providing a solid backdrop behind your content.
Design Options:
-
Columns Design Options
-
Grid Design Options
-
Carousel Design Options
-
Waterfall Design Options
Column Design Settings
| Real-time Updates? | Switch the toggle ON to automatically load new posts in real time without refreshing the page. Otherwise, leave it OFF if the page won’t remain open for long or real-time updates are not needed. |
| Number of Posts shown: | Set how many posts appear on your hub. You can show up to 250 posts, but we recommend 20–40 to keep your site running smoothly for visitors. |
| Post Size: | Select the desired post size to appear in your Social Media Hub. Options include small, medium, and large, and the entire hub layout will adjust based on your selection. |
| Post Spacing (Gutter Size) | Adjust the Post Spacing (Gutter Size) to set the distance between each post. A value of 0px will display posts without gaps, while larger values increase the spacing; 10px is the recommended standard for most |
| Post Background and Text Colors | Select the colors for the post background and text to customize the appearance of your Social Media Hub posts. |
| Fonts | Choose the font family and size you prefer for the text within your Social Media Hub. |
| Content Order | Select whether you want the post text or the post author details to appear first in each post. |
| Show Post Images? | Enable this option to display images within your posts. Otherwise, disable this if you prefer to hide post images from your Social Media Hub. |
| Post Borders | Enable this option to add borders around each post and apply rounded corners if desired. Once enabled, you can customize the border thickness, corner radius, and border color. |
| URLs & Links | Choose whether to display URLs within posts. If disabled, any text resembling a URL will be hidden. If enabled, you can decide if the URLs should be clickable, and select the link color to match your design. |
| User/Post Information | Choose whether to display user avatars and timestamps on posts. You can also enable these elements to be clickable, allowing visitors to navigate directly to the original post or the user’s profile. |
Grid Design Settings
| Real-time Updates? | Switch the toggle ON to automatically load new posts in real time without refreshing the page. Otherwise, leave it OFF if the page won’t remain open for long or real-time updates are not needed. |
| Number of Posts shown: | Set how many posts appear on your hub. You can show up to 250 posts, but we recommend 20–40 to keep your site running smoothly for visitors. |
| Post Size: | Select the desired post size to appear in your Social Media Hub. Options include small, medium, and large, and the entire hub layout will adjust based on your selection. |
| Post Spacing (Gutter Size) | Adjust the Post Spacing (Gutter Size) to set the distance between each post. A value of 0px will display posts without gaps, while larger values increase the spacing; 10px is the recommended standard for most |
| Post Background and Text Colors | Select the colors for the post background and text to customize the appearance of your Social Media Hub posts. |
| Fonts | Choose the font family and size you prefer for the text within your Social Media Hub. |
| Content Order | Select whether you want the post text or the post author details to appear first in each post. |
| Show Post Images? | Enable this option to display images within your posts. Otherwise, disable this if you prefer to hide post images from your Social Media Hub. |
| Post Borders | Enable this option to add borders around each post and apply rounded corners if desired. Once enabled, you can customize the border thickness, corner radius, and border color. |
| URLs & Links | Choose whether to display URLs within posts. If disabled, any text resembling a URL will be hidden. If enabled, you can decide if the URLs should be clickable, and select the link color to match your design. |
| User/Post Information | Choose whether to display user avatars and timestamps on posts. You can also enable these elements to be clickable, allowing visitors to navigate directly to the original post or the user’s profile. |
Carousel Design Settings
| Real-time Updates? | Switch the toggle ON to automatically load new posts in real time without refreshing the page. Otherwise, leave it OFF if the page won’t remain open for long or real-time updates are not needed. |
| Number of Posts shown: | Set how many posts appear on your hub. You can show up to 250 posts, but we recommend 20–40 to keep your site running smoothly for visitors. |
| Post Size: | Select the desired post size to appear in your Social Media Hub. Options include small, medium, and large, and the entire hub layout will adjust based on your selection. |
| Post Spacing (Gutter Size) | Adjust the Post Spacing (Gutter Size) to set the distance between each post. A value of 0px will display posts without gaps, while larger values increase the spacing; 10px is the recommended standard for most |
| Automatically Cycle Posts? | If this option is enabled, the posts will constantly slide on their own without any user interaction. |
| Group Posts? | If you enable this option, and the Carousel is showing three posts (for example), when we cycle the posts, it will move three posts at a time. If this is disabled, we'll move just one post at a time. |
| Wrap Posts? | Enable this option to allow your posts to loop back to the beginning automatically after reaching the end. If disabled, you will need to scroll backward to return to the first post. It is recommended to keep this feature enabled for most Social Media Hubs. |
| Show Next and Previous Buttons? | Enable this option to display navigation buttons on the left and right side of the Social Media Hub that allow the user to slide the posts over to see the next post(s). |
| Show Post Indicators (Dots) Below? | Enable this option to display navigation dots below the Social Media Hub. These indicators allow users to see their current position within the posts and click to jump directly to a specific post. If your Social Media Hub has the Next and Previous buttons showing, or you have a post limit higher than 5-8 posts, we recommend this option be turned off. |
| Post Alignment | Choose the alignment (Left, Centered, Right) of your Social Media Hub to best fit your webpage design. For most cases, it is recommended to set the alignment to Centered. However, if both Automatically Cycle and Wrap Posts are disabled, aligning the posts to the Left may provide a better user experience. |
| Post Background and Text Colors | Select the colors for the post background and text to customize the appearance of your Social Media Hub posts. |
| Fonts | Choose the font family and size you prefer for the text within your Social Media Hub. |
| Content Order | Select whether you want the post text or the post author details to appear first in each post. |
| Show Post Images? | Enable this option to display images within your posts. Otherwise, disable this if you prefer to hide post images from your Social Media Hub. |
| Post Borders | Enable this option to add borders around each post and apply rounded corners if desired. Once enabled, you can customize the border thickness, corner radius, and border color. |
| URLs & Links | Choose whether to display URLs within posts. If disabled, any text resembling a URL will be hidden. If enabled, you can decide if the URLs should be clickable, and select the link color to match your design. |
| User/Post Information | Choose whether to display user avatars and timestamps on posts. You can also enable these elements to be clickable, allowing visitors to navigate directly to the original post or the user’s profile. |
Waterfall Design Settings
| Real-time Updates? | Switch the toggle ON to automatically load new posts in real time without refreshing the page. Otherwise, leave it OFF if the page won’t remain open for long or real-time updates are not needed. |
| Number of Posts shown: | Set how many posts appear on your hub. You can show up to 250 posts, but we recommend 20–40 to keep your site running smoothly for visitors. |
| Post Size: | Select the desired post size to appear in your Social Media Hub. Options include small, medium, and large, and the entire hub layout will adjust based on your selection. |
| Post Spacing (Gutter Size) | Adjust the Post Spacing (Gutter Size) to set the distance between each post. A value of 0px will display posts without gaps, while larger values increase the spacing; 10px is the recommended standard for most |
| Post Background and Text Colors | Select the colors for the post background and text to customize the appearance of your Social Media Hub posts. |
| Fonts | Choose the font family and size you prefer for the text within your Social Media Hub. |
| Content Order | Select whether you want the post text or the post author details to appear first in each post. |
| Show Post Images? | Enable this option to display images within your posts. Otherwise, disable this if you prefer to hide post images from your Social Media Hub. |
| Post Borders | Enable this option to add borders around each post and apply rounded corners if desired. Once enabled, you can customize the border thickness, corner radius, and border color. |
| URLs & Links | Choose whether to display URLs within posts. If disabled, any text resembling a URL will be hidden. If enabled, you can decide if the URLs should be clickable, and select the link color to match your design. |
| User/Post Information | Choose whether to display user avatars and timestamps on posts. You can also enable these elements to be clickable, allowing visitors to navigate directly to the original post or the user’s profile. |
Post Filters:
Filter Posts: Switch the Filter Posts toggle to “Yes” to enable post filtering for this hub design. If set to “No,” all posts from the Displayed queue will be shown. By default, this setting is “No.”
Required Tags: Enter one or more tags in the Required Tags section that posts must have to be displayed in this hub design. A post can have multiple tags, and if any of its tags match the ones you provide here, the post will be shown. In other words, only one matching tag is necessary for a post to be included.
Note: You can leave this field empty, but you must have at least one tag in the Exclude Tags section if you do.
Exclude Tags: This feature works the opposite of how Required Tags work. All posts will be displayed in this hub’s design, except for the posts that have one of these tags. If even one “excluded” tag is present in the post, the post will not be shown.
Note: You can leave this field empty, but you must have at least one tag in the Required Tags section if you do.
Still have questions? Get in touch.