<div class="root responsivegrid">


<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
    
    <div class="embed aem-GridColumn aem-GridColumn--default--12">



<style>


    .fixedAd {
        position: fixed;
        z-index: 1000;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
    }

    .bannerAdOuterContainer {
        display: flex;
        justify-content: center;
        flex-direction: column;
        vertical-align: middle;
        align-items: center;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #ccecff;
        color: #485c77;
        font-weight: 600;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .bannerAdInnerContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding: 10px 20px;
    }

    .message {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .secondLine {
        display: none;
    }

    .contentTitle {
        display: flex;
        margin: 0;
        text-align: center;
        color: #485c77 !important;
        letter-spacing: 3px;
        text-decoration: none !important;
        transition: ease-in-out 1s;
        font-weight: 600;
        font-size: 11px;
        font-family: 'Montserrat';
    }

    .dark {
        color: #161616;
    }

    .highlight {
        background: #fad64a;
        color: #1d2a3b;
    }

    .brand {
        color: #196BDE;
        font-weight: 700;
    }

    .ctaContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta {
        display: inline-block;
        background-color: #196BDE;
        border-color: #196BDE;
        color: #fff;
        border-radius: 4px;
        text-decoration: none;
        width: 130px;
        height: 26px;
        margin: 2px 0;
        text-align: center;
        text-decoration: none;
        opacity: initial;
        border: 0;
        transition: all .25s ease-in-out;
    }

    .cta:hover {
        color: #161616;
        box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
    }

    .cta>a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: 'Montserrat';
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        color: #FFFFFF;
        transition: all .25s ease-in-out;

    }

    .cta:hover>a {
        color: #161616;
    }

    .hMed {
        display: block;
    }

    @media (min-width: 768px) {
        .bannerAdOuterContainer {
            width: 100%;
            height: 90px;
        }

        .secondLine {
            display: contents;
        }

        .contentTitle {
            display: flex;
            font-size: 15px;
        }

        .cta {
            height: 34px;
            width: 200px;
            margin: 7px 0 0 0;
        }

        .hMed {
            display: none;
        }
    }

    @media (min-width: 992px) {
        .bannerAdOuterContainer {
            width: 100%;
            height: 90px;
        }

        .bannerAdInnerContainer {
            flex-direction: row;
        }

        .message {
            margin: 0;
        }

        .contentTitle {
            display: block;
            font-size: 17px;
            line-height: 37px;
        }

        .cta {
            height: 54px;
            width: 240px;
            margin: 0 0 0 30px;
        }

        .cta>a {
            font-size: 18px;
        }

        .hMed {
            display: none;
        }
    }
</style>

<div class="bannerAdOuterContainer fixedAd">
    <div class="bannerAdInnerContainer">
        <div class="message">
            <div class="contentTitle"><span class="highlight dark">&nbsp;Up to 75% off&nbsp;</span>&nbsp;on
                <span class="hMed dark">&nbsp;WordPress&nbsp;</span>
                hosting<span class="secondLine">&nbsp;for<span class="dark">
                        WordPress</span> Websites and Stores</span>!
            </div>
        </div>
        <div class="ctaContainer"><button class="cta"><a href="https://www.bluehost.com/wordpress/wordpress-hosting?channelid=P99C46097236S1N0B2A151D320E0000V100#pricing-cards" data-element-location="sticky-footer" data-element-type="cta" data-element-label="seventy-off-sticky-footer">Get Started</a></button></div>
    </div>
</div>
</div>

    
</div>
</div>








    





    
    





    
    
<script src="https://www.bluehost.com/etc.clientlibs/core/wcm/components/commons/site/clientlibs/utils.min.9a20347481f35c44bd1c5b2e31cd2cc8.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/core/wcm/components/commons/site/clientlibs/imageDynamicMedia.min.0a201f8f160f362cc4f8b50c1bd47f23.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/core/wcm/components/image/v3/image/clientlibs/site.min.8d52a16d2fbca419380aa4389324e137.js"></script>




<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8d057afe8cf7bca7',t:'MTcyODU1MTQ1OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

<p>Widgets in WordPress are ways to customize your site or blog by adding content to your sidebars. This guide will show you how to add a Widget to your site.</p>

<ol>
	<li>Log in to your WordPress Dashboard. From the main left menu, scroll over&nbsp;<b>Appearance</b>&nbsp;and click on&nbsp;<b>Widgets</b>.<br />
	<img alt="wp-widgets" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/wp-widgets.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<li>From here, you will be able to view your current Widgets on your WordPress theme.<br />
	<img alt="wp-widgets-section" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/wp-widgets-section.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<li>Navigate to your existing widgets by clicking the down arrow button, which should allow you to customize the Widget.</li>
	<li>You can add new widgets by clicking the<b> inserter [+]</b> button from the upper left-hand side. Then scroll down to the Widgets category.<br />
	<img alt="wp-widgets-inserter" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/wp-widgets-inserter.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<li>Once you're done customizing or adding a new Widget, make sure to click <b>Update.</b><br />
	<img alt="wp-widgets-update" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/wp-widgets-update.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
</ol>

<p><div class="callout callout-info" style="background-color: #fcf8e1;border-left-width: 3px;border-left-style: solid;border-left-color: rgb(246, 195, 66);">
<div class="callout-content">
<p>If you need further assistance, feel free to contact us via Chat or Phone:</p>

<ul>
	<li><b>Chat Support -</b> While on our <a href="http://bluehost.com" target="_blank">website</a>, you should see a <strong>CHAT</strong> bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.</li>
	<li><b>Phone Support -</b>
	<ul>
		<li>US: 888-401-4678</li>
		<li>International: +1 801-765-9400</li>
	</ul>
	</li>
</ul>

<p>You may also refer to our <a href="http://bluehost.com/help" target="_blank">Knowledge Base</a> articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.</p>
</div>
</div></p>

WordPress: Adding Widgets