NEW Sidebar Guides
      Back to home
      1. Cidi Labs Help Center
      2. DesignPLUS
      3. NEW Sidebar Guides

      How do I replace the Banner Title prefix with an image?

      Edit the HTML of the page to replace prefix text with an image such as a logo

      example of an image in prefix of banner title

      For certain designs, users may want to use an image in place of the prefix text in the Banner Title.  Currently, there isn't an easy way to do this with the sidebar UI.  This requires editing the HTML of the page.

      To get an image inside the prefix section of a banner title, follow the instructions below:

      1. Add a Banner Title from the Add tab of the sidebar.
      2. Under the banner title, add the image you want from the Add tab.
      3. Go to the HTML view (either native Canvas or DesignPLUS > Advanced > Advanced Editor)
      4. Highlight the <img> element in its entirety and cut.
      5. Find the <span class="dp-header-pre"> element in the HTML and delete the inner contents of that span.
      6. Paste the image inside the <span class="dp-header-pre"> element.
      7. Switch back to the RCE view and the image will now be inside the banner title prefix.
      8. Adjust the size of the image using the Image tool's Style panel in the sidebar.