





    <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 5px;
    }

    .message {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 3px;
    }

    .secondLine {
        display: none;
    }

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

    .contentsubTitle {
        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: 10px;
        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: #196CDF;
        border-color: #196CDF;
        color: #fff;
        border-radius: 2.56px;
        text-decoration: none;
        width: 120px;
        height: 30px;
        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';
        text-decoration: none;
        color: #FFFFFF;
        transition: all .25s ease-in-out;
        font-size: 1rem;
        font-weight: 700;
    }

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

    }

    .hMed {
        display: block;
    }

    @media (min-width: 992px) {
        .hideOnDesktop {
            display: none;
        }

        .bannerAdOuterContainer {
            width: 100%;
            height: 90px;
        }

        .bannerAdInnerContainer {
            flex-direction: row;
            padding: 10px 20px;
        }

        .message {
            margin: 0;
            padding: 0;
        }

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

        .contentsubitle {
            display: block;
            font-size: 10px;
            line-height: 15px;
        }

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

        .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 {
            font-size: 18px;
        }

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

<div class="bannerAdOuterContainer fixedAd">
    <div class="bannerAdInnerContainer">
        <div class="message">
            <div class="contentTitle">Up to 75% off on hosting for WordPress websites and
                online stores
            </div>
        </div>
        <div class="ctaContainer"><button class="cta"><a target="_top" 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/bluehost/clientlibs/clientlib-dependencies.min.add1683e5675d7770b53390b693ed4c9.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/wci-core/clientlibs/clientlib-base.min.e9647c1236accc80d9bdced827b6dd23.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/bluehost/clientlibs/clientlib-site.min.14356616d37346047ac29b71ff8bfb5e.js"></script>





    
    





    
    
<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:'910b501bdac3b0bb',t:'MTczOTM1MDAzNS4wMDAwMDA='};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>Are you excited to discover <a href="https://www.bluehost.com/blog/wordpress-widgets-and-how-to-use-them/" target="_blank">WordPress widgets</a> and take your web design customization to another level? Easy! This easy-to-follow guide makes it easy to add, find, and show widgets in order to enhance the functionality and design of your website. Whether it is about adding the recent posts, placing a contact form, or decorating the sidebar.</p>

<h2><a id="how-to" name="how-to"></a>How to Add Widgets</h2>

<ol>
	<li><a href="https://www.bluehost.com/help/article/how-to-login-to-a-wordpress-site" target="_blank">Log in to your WordPress Dashboard</a>.</li>
	<li>From the main left menu, scroll down to the <strong>Appearance</strong> and click on <strong>Widgets</strong>.<br />
	<img alt="wp-widgets" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/bh-wp-dashboard-left-nav-appearance-widgets.png" style="width: 100%;max-width: 500px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<br />
	<li>From here, you will be able to view your current widgets using your WordPress theme.<br />
	<img alt="wp-widgets-section" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/bh-wp-dashboard-widgets-section.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<br />
	<li>Navigate to your existing widgets by clicking the down arrow button, which should allow you to customize the Widget.</li>
	<li>Click the <strong>inserter [+]</strong> button from the upper left-hand side to add new widgets.<br />
	<img alt="wp-widgets-inserter" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/bh-wp-dashboard-widgets-section-inserter.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<br />
	<li>Then, scroll down to the Widgets category.<br />
	<img alt="wp-widgets-inserter" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/bh-wp-dashboard-widgets-options.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
	<br />
	<li>Once you're done customizing or adding a new Widget, make sure to click <strong>Update.</strong><br />
	<img alt="wp-widgets-update" src="https://content.bluehost.com/bluehost/img/bluehost/wordpress/bh-wp-dashboard-widgets-section-update.png" style="width: 100%;max-width: 667px;margin: 15px 0px;border: 1px solid #b4b4b4;" /></li>
</ol>

<h2><a id="summary" name="summary"></a>Summary</h2>

<p>You can now add <a href="https://www.bluehost.com/blog/wordpress-widgets-and-how-to-use-them/" target="_blank">WordPress widgets</a> to your WordPress and customize it as you wish! This tutorial explains you how to look for, and how to add these widgets, modify their settings and locate them in the various parts of your website. Feel free to test different widgets and layouts in discovering what will better suit your needs and style.</p>

<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="https://www.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="https://www.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>

How to Add WordPress Widgets

How to Add Widgets

Summary