Introduction

Banners are a crucial element of your website’s design, providing a visually engaging way to showcase promotions, announcements, or important content to your users. With Muvi One CMS, you can easily add, customize, and manage website banners to enhance user engagement and promote special offers or events. You can add images as banners, videos as banners, and solid colors as banners. You can customize the banners by adding text and buttons. Also, you can edit or delete any existing banners. In this article, we will guide you step-by-step on how to add and manage banners on your Muvi-powered website.

Adding Image/Solid Color Banners to Your Website

You can add multiple banners to your website. You can even select different banner transitions and display the banners in various styles on the website.

• To add a banner, navigate to “Website & Apps” -->” Templates” in the Dashboard.
• Under the active template, click on “Customize”.
• The Visual Designer (VD) will open.
• Click on the “Banner”.
• Click on “Edit Banner”.
• On the bottom right-hand side pane, click on “Add a Banner”.
• You can add a "Solid Color" banner or upload a banner "Image".
• To upload an image for the banner, click on the "Image" tab.
• Click on the "Upload Icon" to upload the banner.
• Once the banner is uploaded, the “Image URL” and “Image Alt” will be generated automatically. You can also change the Image Alt text.
• You can link the banner to an existing "Page", "Content Category", “Content”, or "Web Address". When the end-users click on the banner, they will get redirected to the page, content category, content, or web address.
• Under the "Banner Elements", you can enable "Text" and "Button". You can edit the banner text.
• If you are adding the button for the banner, you can link it to any page on your website (e.g., Homepage, About Us, Sign Up) using the Visual Designer (VD).
• Click on "Update" to add the banner.
• Click on the “Edit” icon to edit a banner. You change the banner image, link to the banner, and change the banner text and/or button.
• Click on the "Duplicate" icon to duplicate an existing banner.
• Click on "Interface" to enable the "Directional" control, "Pagination", and "Banner Transition".
• For Slider, you can select Directional Control, Pagination, and Auto Slide
• You can also set the“Transition” time.
• Click on “Save and publish” in the top right corner to publish the changes.
• Click on “Done” or "Visit Website" to view the banner changes you have made on the website.

Adding Video Banners to Your Website

You can upload multiple video banners to your website. The video banners will appear on the homepage of your website. First, you need to upload the video banners to your “Asset Library” in the Dashboard. Then, you can add the video banners from the Asset Library to your website.

• To add a banner, navigate to “Website & Apps” -->” Templates” in the Dashboard.
• Under the template, click on “Customize”.
• The Visual Designer (VD) will open.
• Click on the “Banner”.
• Click on “Edit Banner”.
• On the bottom right-hand side pane, click on “Add a Banner”.
• To upload a video banner, click on the "Video" tab.
• Click on the "Upload Icon" to upload the video banner from the Asset Library.
• Upload a “Cover Image” for the video banner. You can upload the image from the Asset Library or your device.
• The “Video URL” will be generated automatically.
• You can add links to the video banner.
• You can link the banner to an existing "Page", "Content Category", “Content”, or "Web Address". When the end-users click on the banner, they will get redirected to the page, content category, content, or web address.
• Under the "Banner Elements", you can enable "Text" and/or "Button". You can edit the banner text.
• If you are adding the button for the banner, you can link it to any page in your website (e.g., Homepage, About Us, Sign Up) using the Visual Designer (VD).
• Click on "Update" to add the banner.
• Click on “Save the Draft” in the top right corner to save the changes.
• Click on “Preview” to preview how the banner appears on your website.
• Click on “Save and publish” in the top right corner to publish the changes.
• Click on “Done” or "Visit Website" to view the banner changes you have made on the website.

Managing the Existing Website Banners

Managing your banners in Muvi One is easy, with options to edit, duplicate, or delete banners based on your needs.

Editing a Banner

• To edit a banner, navigate to “Website & Apps” -->” Templates” in the Dashboard.
• Under the active template, click on “Customize”.
• The Visual Designer (VD) will open.
• Click on the “Banner”.
• Click on “Edit Banner”.
• Click on the “Edit Icon” on the right-hand side of the banner to edit it.
• You can change the banner image, link to the banner, banner text, banner button, etc.
• After making the necessary changes, click on “Update”.
• Click on “Save the Draft” in the top right corner to save the changes.
• Click on “Preview” to preview how the banner appears on your website.
• Click on “Save and publish” in the top right corner to publish the changes.
• Click on “Done” or "Visit Website" to view the banner changes you have made on the website.

Deleting a Banner

• To delete a banner, click on the “Trash Icon” on the right-hand side of the banner.
• The banner will be deleted.
• Click on “Save and publish” in the top right corner to publish the changes.
• Click on “Done” or "Visit Website" to view the changes you have made on the website.

Duplicating a Banner

• To duplicate a banner, click on the “Duplicate Icon”.
• The banner will be duplicated.
• Click on “Save and publish” in the top right corner to publish the changes.
• Click on “Done” or "Visit Website" to view the changes you have made on the website.

Customizing the Banner’s Display Settings

You can enable the pagination, directional control, and/or auto slide option for the banners.

• Under “Interface” on the right-hand side pane, enable “Directional Control”.
• Once it is enabled, you can see the directional controls (“>”, “<”) on the banners. The end-users can click on these directional controls to navigate the banners.
• Enable “Pagination” under the “Interface”.
• Once the pagination is enabled, the end-users can navigate the banners using the pagination.
• Under “Animation” on the right-hand side pane, enable “Auto Slide”.
• Add the “Transition Time” in seconds.
• Once the auto slide is enabled, the banners will automatically slide according to the transition time. For example, if you have set the transition time to 3 seconds, then the banners will slide after every 3-second interval.
• Click on “Save the Draft” in the top right corner to save the changes.
• Click on “Preview” to preview how the banner appears on your website.
• Click on “Save and publish” in the top right corner to publish the changes.
• Click on “Done” or "Visit Website" to view the banner changes you have made on the website.