How to Add a Text Marquee Banner

This step-by-step guide will walk you through how to add a text marquee banner to the top of your website using Elementor. A marquee banner is a great tool to display important news, promotions, special offers, or updates.


Step 1: Log In and Open Your Site

  1. Log into the Backend of Your Website:
    • Hover over the name of your dispensary in the top left corner of the WordPress dashboard.
    • Select Visit Site from the dropdown menu.
    • Right-click on Visit Site and choose Open in New Tab.

Step 2: Open Elementor Editor

  1. Enter the Elementor Editor:
    • In the new tab, you’ll see the WordPress black admin bar at the top of the page.  If you do not, please refresh and it should appear as long as you are logged in.
    • Click on Edit with Elementor in the admin bar to enter the Elementor page builder.

Step 3: Add a Container to the Header

  1. Access the Header Section:
    • Once the page loads in Elementor, click into the Header section where you want the marquee banner to appear.
  2. Add a Container:
    • Hover over the section and you'll see it outlined in purple.  At the top you will see a + icon.  Click the plus (+) button to add a new section.
    • Choose the option to add a Container.

Step 4: Insert the Text Editor Widget

  1. Drag the Text Editor Widget:
    • After adding the container, you'll need to add the text editor widget.
    • Search for the Text Editor widget and drag it into your newly created container.

Step 5: Customize the Text

  1. Edit the Text:
    • On the left-hand panel, you’ll see the Text Editor settings.
    • Enter the text you want to display (e.g., "New Location Coming Soon!", "Closed due to weather", "Check out our specials!").
    • Use the text formatting options to adjust font styles, bold, italicize, linking etc. (Avoid using H1 headings, and stick with paragraph for best results).

Step 6: Style the Banner

Style the Text:
  • Click on the Style tab in the left panel to adjust the appearance of your text.
  • You can:
    • Center the text.
    • Change the text color.
    • Change the background color (e.g., black background with white text).


Step 7: Publish the Changes

  1. Publish the Banner:
    • Once you're satisfied with the text and design, click the Publish button in the top right corner of Elementor (it should be purple now that you've made edits).  Once the publish button returns to gray, your edits have gone live.

Step 8: Clear Cache and Regenerate Files

  1. Exit Elementor:
    • After publishing, click the Exit WordPress button in the top left corner of Elementor (the E).
  2. Clear the Cache:
    • In your WordPress admin dashboard, navigate to Elementor Tools > Regenerate Files & Data.
    • Click Save Changes.
  3. Purge the Cache:
    • Hover over the diamond icon (this is the LiteSpeed Plugin) at the top of the WordPress dashboard and select Purge All to clear the cache.

Step 9: Verify the Changes

  1. Preview the Website:
    • Open your site in a new tab to ensure the marquee banner appears correctly at the top of your site.

Conclusion

In conclusion, adding a text marquee banner to the top of your website is a simple and effective way to communicate important updates, promotions, or news to your visitors. By using Elementor's intuitive interface, you can easily customize the banner's content, style, and links to match your branding. After publishing, don't forget to clear the cache and regenerate files to ensure your changes are live on the site. With these steps, you'll be able to engage your audience and keep them informed with dynamic and up to date information.