widget areas under slider to model footer widget areas 1,2,3

If you mean 3 widgets displayed on the page, this is what I did on this test example:
in the dashboard extra widget area (created with the above function), I’ve added 3 text widgets boxes; I styled them after pasting in the text widget some html.
Maybe a link to your site?

Thanks, yes I want three widgets, but I want them all side by side just as I have them in the footer area (1st widget, 2nd widget, 3rd widget) all under the slider – currently I have 1 widget with the above code, but I am looking for the code to get the other two widgets next to it. Thanks again. My website is https://sproutedjourney.com.

Hi Tiffany,
I just noticed that after posting the example, I did another test so what you were seeing was wrong on my example site.

Basically you have to add 3 Text Widgets is the new Extra Header Widget Area created via the function, here a screenshot.

In each text widget you can paste in your own html code: screenshot here.

When you are done you can style them as you wish, I did something rough like this to start:

.span4.book {
    padding-left: 4%;
}

Hope it helps

p.s. Your site has no footer widgets though

Thank you, I have ads placed at the footer of my site that are in the “footer widget area one”, “footer widget area two”, and “footer widget area three.” I have gone through the screenshots you put up and that would leave them all in order like this:

1 Ad
2 Ad
3 Ad

I want them like this: 1 Ad – 2 Ad – 3 Ad. That is why I need three separate widgets to mirror my footer widgets. I’m not sure if I am getting what I am looking for across correctly.

I got it! My ADS block plugin was hiding them!

I can see you are placing them below the slider, though I would suggest a bit of html and classes to wrap them properly.

You can even do a single text widget like this:

<div class="row">
	<div class="ad-1 span4">
		<a href="https://click.linksynergy.com/fs-bin/click?id=rDUl0lY8p4w&offerid=254134.7&subid=0&type=4">
			<img border="0" alt="Dr. Fuhrman" src="https://ad.linksynergy.com/fs-bin/show?id=rDUl0lY8p4w&bids=254134.7&subid=0&type=4&gridnum=1">
		</a>
	</div>

	<div class="ad-2 span4">
		<a href="https://click.linksynergy.com/fs-bin/click?id=rDUl0lY8p4w&offerid=254134.7&subid=0&type=4">
			<img border="0" alt="Dr. Fuhrman" src="https://ad.linksynergy.com/fs-bin/show?id=rDUl0lY8p4w&bids=254134.7&subid=0&type=4&gridnum=1">
		</a>
	</div>

	<div class="ad-3 span4">
		<a href="https://click.linksynergy.com/fs-bin/click?id=rDUl0lY8p4w&offerid=254134.7&subid=0&type=4">
			<img border="0" alt="Dr. Fuhrman" src="https://ad.linksynergy.com/fs-bin/show?id=rDUl0lY8p4w&bids=254134.7&subid=0&type=4&gridnum=1">
		</a>
	</div>
</div>

and a bit of css:

.ad-1.span4, .ad-2.span4, .ad-3.span4 {
    width: 30%;
}

take a look here: test example

The code you gave has it showing up in the dashboard area of wordpress as well as behind the navbar on the frontend.

let me clearify, when it shows up in the dashboard, I meant it is randomly appearing on the left side of my entire dashboard as clickable ads, very strange.

Not sure what you mean, but just to be clear:
the html snippet above goes in a new text box widget (to test if displays 3 ads!). If it works just change the images and the links with the proper ones.

The second snippet, css, goes into your style.css if you have a child-theme installed or into the advanced options of customizr, in the custom css section.

oh. lol. that worked, I will play around with the styling thanks!!

perfect! I see you made it.

Just style it properly and add the same bg as your content and you can mark this as resolved!

Thanks and good luck

like this is better:
I’ve added a class to the row container “ads-container”, so you can center all the 3 elements within the row with a simple rule.

updated html:

<div class="row ads-container">
	<div class="ad-1 span4">
		<a href="https://click.linksynergy.com/fs-bin/click?id=rDUl0lY8p4w&offerid=254134.7&subid=0&type=4">
			<img border="0" alt="Dr. Fuhrman" src="https://ad.linksynergy.com/fs-bin/show?id=rDUl0lY8p4w&bids=254134.7&subid=0&type=4&gridnum=1">
		</a>
	</div>

	<div class="ad-2 span4">
		<a href="https://click.linksynergy.com/fs-bin/click?id=rDUl0lY8p4w&offerid=254134.7&subid=0&type=4">
			<img border="0" alt="Dr. Fuhrman" src="https://ad.linksynergy.com/fs-bin/show?id=rDUl0lY8p4w&bids=254134.7&subid=0&type=4&gridnum=1">
		</a>
	</div>

	<div class="ad-3 span4">
		<a href="https://click.linksynergy.com/fs-bin/click?id=rDUl0lY8p4w&offerid=254134.7&subid=0&type=4">
			<img border="0" alt="Dr. Fuhrman" src="https://ad.linksynergy.com/fs-bin/show?id=rDUl0lY8p4w&bids=254134.7&subid=0&type=4&gridnum=1">
		</a>
	</div>
</div>

and then use this upgraded css:

.ads-container {
    text-align: center;
}

.ad-1.span4, .ad-2.span4, .ad-3.span4 {
    width: 30%;
}

I did this to the style: `.ad-1.span4, .ad-2.span4, .ad-3.span4 {
width: 32%;
float: right;
background: #D6EFE9;
}

.ads-container {
text-align: center;
}

.row:after, .row:before {
display: table;
content: initial;
line-height: 0;
}

.row {
margin-left: -46px;
}`

but I’d like it higher up..would you know what I should add?

nevermind, it was a glitch in the html probably from copying and pasting back and forth. fixed. thanks. marking as resolved.

Why don’t you just get rid of all the custom bg-color setting for the extra widget area?

just apply this and you’ll solve the problem:

body {
    background-color: #d6efe9;
}