Banner Images

Admin Dashboard > CMS > Home Banners > Banner Images

Purpose of the Feature: Home Banners > Banner Images

The Banner Images section within the Admin Dashboard is a centralized tool for managing the visual content displayed in the banner section of the website's home page. These banners are crucial for:

• Promoting special offers, new products, or seasonal campaigns.
• Enhancing the website’s visual appeal and user engagement.
• Highlighting key messages or events with supporting banner text.

By strategically placing banner images, businesses can create a captivating first impression and guide visitors to desired actions or pages.

How Banner Images Are Used on the Frontend

The banner images configured here are prominently displayed on the website’s home page. Depending on the website design, banners may:

• Rotate in a carousel format or remain static.
• Be paired with overlayed or adjacent text for promotional messaging.
• Include clickable links that direct users to specific pages or products.

Proper use of banner images ensures a cohesive and engaging user experience, aligning with business goals and seasonal marketing strategies.

How to Use the Feature

Adding a New Banner Image

1. Navigate to the Section:

   • Log in to the Admin Dashboard.
   • Go to CMS > Home Banners > Banner Images.

2. Click “Add New Banner”:

   • Locate and click the button labeled Add New Banner.

3. Upload an Image:

   • Select an image file by clicking the Choose File button.
   • Ensure the image adheres to recommended dimensions and file size for optimal display.

4. Configure Banner Details:

   • Title: Enter a descriptive title for internal reference.
   • Alt Text: Provide alternative text for accessibility and SEO purposes.
   • URL Link: Specify a link that the banner will redirect to when clicked (optional).

5. Assign Banner Text (Optional):

   • Enter any accompanying promotional text that will display with the image.
   • Format text using the WYSIWYG editor to adjust font size, color, and alignment.

6. Set Display Preferences:

   • Define the banner’s position/order in the rotation.
   • Toggle the status to “Enabled” or “Disabled”.

7. Save:

   • Click Save Banner to finalize your changes.

Managing Existing Banner Images

1. View and Search:

   • In the Banner Images section, view the list of existing banners.
   • Use filters (e.g., title, status, date added) to locate specific banners quickly.

2. Edit a Banner:

   • Click the Edit button next to the banner you wish to modify.
   • Update image, text, or settings as needed.
   • Save changes to apply updates to the frontend.

3. Delete a Banner:

   • Select the checkbox next to the unwanted banner.
   • Click the Delete button and confirm the action.

4. Reorder Banners:

   • Adjust the sequence by modifying the position/order values.
   • Save changes to reflect the new order.

Adjusting Banner Text Placement and Styling

1. Edit Banner Text Placement:

   • Navigate to the specific banner in the Home Banners > Banner Images section.
   • Use the text placement controls to set the position of the text (e.g., top-left, center, bottom-right).

2. Change Background Color and Opacity:

   • Select a background color for the text overlay using the color picker tool.
   • Adjust the opacity slider to control the transparency of the background.

3. Modify Text Color:

   • Choose a text color that contrasts well with the image and background to ensure readability.

4. Preview Changes:

   • Use the preview feature to see how the text placement and styling look on the banner.
   • Make further adjustments as needed to align with your website’s aesthetic.

5. Save Adjustments:

   • Click Save Banner to apply the text placement and styling changes.

How Banner Images and Text Work Together

• Overlay Integration: Banner text can overlay images or be displayed alongside them depending on the frontend design.
• Complementary Messaging: Use text to reinforce the image’s message (e.g., “Limited Time Offer” over a holiday-themed banner).
• Dynamic Call-to-Action (CTA): Pair banners with compelling CTAs like “Shop Now” or “Learn More” to boost engagement.

Best Practices for Banner Images

1. Use High-Quality Images: Ensure images are clear and visually appealing to attract attention.

2. Optimize for Speed: Compress images to minimize load times without compromising quality.

3. Maintain Consistency: Align the style of banner images with your brand’s visual identity.

4. Regular Updates: Refresh banners periodically to keep the homepage dynamic and relevant.

5. Test for Responsiveness: Verify that banners look good on both desktop and mobile devices.