In certain scenarios, you may find the need to display a banner at the top or bottom of a webpage, but with a smaller width than the browser's viewport, and centered for a more aesthetically pleasing appearance. This could be for various reasons, such as highlighting important announcements, displaying promotional messages, or directing users' attention to specific content without overwhelming the entire page. Fortunately, achieving this effect is straightforward with VisualSP. In this support article, we'll guide you through a simple method to center a small banner at the top or bottom of a page using a single-step walkthrough. By following these steps, you can create a visually appealing and unobtrusive banner placement that effectively communicates your message to users. Let's dive into the walkthrough process to accomplish this seamlessly.
Use a walkthrough
The easiest way to mimic a small banner appearing centered at the top of the page is by using a single-step walkthrough.
- Create a new walkthrough with a single step. Add a title and content:
- Configure it to Show as Splash Screen
- Under Advanced Properties, adjust the width of the bubble by configuring the Bubble Width:
- Set the x-offset to center and the y-offset to top (or bottom if you want the walkthrough to appear at the bottom of the page):
Now, the walkthrough will appear at the top (or bottom) of the screen.