How to add code to a banner (Bedford template, 7.0)

Site URL: https://www.annaclemens.com/training

Hello, 

Does anyone know how I could add a code block to the banner in Bedford? Instead of the button I currently included in the banner, I need to use a piece of code to display a sign-up button from my webinar software. Any ideas? Thank you! 

On 10/20/2021 at 11:51 AM, annacle said:

I need to use a piece of code to display a sign-up button from my webinar software.

Can you provide the community with more details about the piece of code?

Sure! It's a button that integrates with my webinar software. 

The code is this: 

<div id="w1634655477135" style="padding: 2px 0 14px;"> <style> .ewebinar__Dots { opacity: 1; animation: 1.5s linear 0s normal forwards 1 delayin; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .ewebinar__LoadingDot { height: 0.5em; width: 0.5em; border-radius: 100%; display: inline-block; animation: 1.2s ewebinar-loading-dot ease-in-out infinite; } .ewebinar__LoadingDot:nth-of-type(2) { animation-delay: 0.15s; margin-left: 0.5em; } .ewebinar__LoadingDot:nth-of-type(3) { animation-delay: 0.25s; margin-left: 0.5em; } @keyframes delayin { 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } } @keyframes ewebinar-loading-dot { 30% { transform: translateY(-35%); opacity: 0.3; } 60  % { transform: translateY(0%); opacity: 0.8; } } .ewebinar__Widget { line-height: 1.5; } .ewebinar__Widget select { display: flex; } .ewebinar__Widget * { box-sizing: border-box; } .ewebinar__RegisterButton { font-family: inherit; * { font-family: inherit; } &:hover { transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.1); border: none !important; } &:active { transform: translateY(0px); } } @media only screen and (max-width: 614px) { .ewebinar__RegisterButton { max-width: 320px !important; min-height: 42px !important; width: 100% !important; } } </style> <a class="ewebinar__RegisterButton__Wrap" href="javascript:;" style="text-decoration: none; undefined"> <button class="ewebinar__Widget ewebinar__RegisterButton" style=" font-family: inherit; position: relative; display: flex; padding: 0.7em 2em; cursor: pointer; align-items: center; justify-content: center; border-width: 0px; outline: none; border-radius: 50px; transition: all 0.2s; background: #ff8a27; color: #ffffff; margin: 0 auto; font-weight: 500; font-size: inherit; box-sizing: border-box; undefined " > <div class="ewebinar__Dots "> <span class="ewebinar__LoadingDot" style="background: #ffffff"></span> <span class="ewebinar__LoadingDot" style="background: #ffffff"></span> <span class="ewebinar__LoadingDot" style="background: #ffffff"></span> </div> <span class="ewebinar__ButtonText" style="opacity: 0;"> SAVE MY SPOT </span> </button> </a> <noscript> <div style="text-align: center; margin-top: 1em; text-decoration: none; undefined"> <a style="color: #000; font-size: 13px;" href="https://www.researcherswritingacademy.com/training">SAVE MY SPOT</a> </div> </noscript> </div><script>(function (w,d,s,o,f,js,fjs) { w['eWidget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; if(d.getElementById(o)) return; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.defer = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', '_ew', 'https://app.ewebinar.com/widget.js'));_ew('init', {"for":"Registration","type":"Button","btnText":"SAVE MY SPOT","source":"","jitBtnText":"Go to session now","addToCalendarBtnText":"Add to calendar","replayBtnText":"Watch replay now","onlyButton":false,"openInPopup":false,"position":"Left","mobilePosition":"Left","url":"https://www.researcherswritingacademy.com/training","shortUrl":"https://app.ewebinar.com/webinar/1654","title":"How%20to%20Get%20Published%20in%20High-Ranking%20Journals%20Without%20Lacking%20Structure%20in%20the%20Writing%20Process","description":"About%20this%20webinar%20%5B%3E%3E%20Here%20is%20where%20you%20can%20add%20a%20description%20of%20your%20webinar%0Aand%20explain%20why%20people%20should%20register%20for%20it.%20Communicate%20in%20simple%20terms%20what%0Ayou%20are%20offering,%20so%20they%20know%20what%20they%20will%20be%20missing%20if%20they%20choose%20not%20to%0Asign%20up.%20%3C%3E%20Don%E2%80%99t%20just%20list%20the%20topics%20you%20plan%20to%20cover.%20Make%20sure%20people%0Aunderstand%20how%20attending%20your%20webinar%20will%20benefit%20them.%20Benefit%201%20Benefit%202%0ABenefit%203%20Remember%20to%20ask%20people%20at%20the%20end%20to%20sign%20up%20now!%20%3C","presenters":[],"image":"https://ewebinar.imgix.net/ewebinar/10484/thumbnail-1632383616942?ixlib=js-2.3.2&fit=clip&w=500&h=300&dpr=2&fm=jpg&bg=FFFFFF&s=f68456db0fb5e7c4eb275468fa60a658","language":"en","sessions":[],"borderRadius":50,"primaryColor":"#ff8a27","readableColor":"#ffffff","readableOnWhiteColor":"#ff8a27","root":"w1634655477135"});</script>

If anyone has any idea, thank you so much for your help! I saw that in the Brine template you can easily place a code block in the banner, but in Bedford that isn't possible, unfortunately. 

OK, I think I solved it myself with a work-around. Instead of using a banner image, I inserted a background image and added the text and code-block.