Solved: How do you add elements to sidebars?

Skunk · ‎09-06-2019

I am creating a new website that has a sidebar on the left side of the screen, and I was wondering how (if possible) to put elements in the sidebar underneath the navigation tabs and social media links. The theme I am using is called "Open" and my front page is a landing page. I found one tutorial on this earlier but it did not work for me due to the difference in themes. Any help would be appreciated.

This is what the sidebar looks like. When you hover your mouse over the "PHOTOS" tab, it drops down a menu with more pages on the site.

Skunk · ‎09-08-2019

By putting this code in my navigation HTML, I am now able to place elements in the sidebar. Problem seems to be solved, if anything goes wrong I will come back to this thread.

{area-name:content max-width="200" max-height="200"}

View Best Answer >

Bernadette3 · ‎09-07-2019

That sounds like a super old theme, @Skunk. I really wouldn't recommend using an older theme as they are considered "retired" and may not get the necessary updates to keep your website running nice and smooth.

It sounds like the area you are describing is the navigation section? We do have a newer theme called "Brisk 2"" I believe that has a side nav bar, although you can't add additional content here. What are you trying to add to this area?

Skunk · ‎09-07-2019

Hi, thanks for the response. I was hoping to add a little google adsense advertisement to the sidebar, I figured it would make the best use of this open space. I believe doing so would require some HTML/CSS editing, but I am not too experienced in doing that stuff so I am hoping someone here knows any ways to do this. I will attach the landing page's HTML code below.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=1100"/>
    </head>

<body class='landing-page  wsite-theme-dark'>
<div class="wsite-background"></div>
<div id="page-wrap">
	<div id="sidebar">
		<div>			
			<div id="title-block">
				<div id="logo">{logo}</div>
			</div>

			<div id="nav">{menu}</div>

			<div id="features">
				<div class="social">{social}</div>
			</div>
		</div>
	</div><!-- end sidebar -->
	
	<div id="content-area">
		<div id="banner-wrap">
			<div class="container">
				<div id="banner">
				
					<div id="bannerleft">
						<div class="wsite-header"></div>
					</div><!-- end banner-left -->
					
					<div id="bannerright" class="landing-banner-outer">
						<div class="landing-banner-mid">
							<div class="landing-banner-inner">
								<h2>{headline:text global="false"}</h2>
								<p>{headline-paragraph:text global="false"}</p>
								{action:button global="false"}
							</div><!-- end banner inner -->
						</div><!-- end banner mid -->
					</div><!-- end banner-right -->
					
					<div style="clear:both;"></div>
				</div><!-- end banner -->
			</div><!-- end container -->
		</div><!-- end banner-wrap -->

		<div id="main-wrap">
			<div class="container">
				{content}
			</div><!-- end container -->
		</div><!-- end main-wrap -->

			<div id="footer-wrap">
				<div class="container">
					{footer}
				</div><!-- end container -->
			</div><!-- end footer-wrap -->
	</div><!-- end content-area -->
</div><!-- end page wrap -->
</body>

<script type="text/javascript" charset="utf-8">
	if (jQuery("#sidebar > div").height() > jQuery("#sidebar").height()) {
		jQuery("#sidebar").addClass('overflow');
	}
</script>

</html>

Bernadette3 · ‎09-07-2019

There should be a Google Adsense element in the builder. Or do you mean adding the element to the space would require the html/css? If the latter, then yes, but I'm afraid I wouldn't be much help to you. Posting a link to your live site will help others help you out, though.

Skunk · ‎09-07-2019

The sidebar doesn't give the option to place any elements down since it's just used for the page navigation, so I will have to find out how to edit the HTML/CSS code to either embed in the Google AdSense code into the sidebar, or change the lower sidebar area so that I can drag and drop the AdSense element into that spot. This is a brand new website so there's no rush into getting this done instantly, but I would like to have it done before I make the website public of course.

Skunk · ‎09-08-2019

By putting this code in my navigation HTML, I am now able to place elements in the sidebar. Problem seems to be solved, if anything goes wrong I will come back to this thread.

{area-name:content max-width="200" max-height="200"}

Adam7 · ‎09-09-2019

Thanks for sharing that, @Skunk!

shania1 · ‎10-26-2019

Hi, good day. Where exactly do you place that HTML code to adjust the HEIGHT and WEIGHT for the sidebar banners? I am not seeing the "AREA=CONTENT" in the navigation bar. My banners in the sidebar are looking awful and I am fed of trying to figure out the problem. I am a free member because I wanted to test out the site first and I am truly thinking about closing my account. It's just too much of complication especially for persons like myself who have to intervere with coding and all this stuff. This needs to be more user-friendly for newbies.

shania1 · ‎10-26-2019

I am sorry, I meant the width and height lol

Bernadette3 · ‎10-26-2019

The code posted may not work for the theme you are on, @shania. Is there anything in particular you do not like about the sidebar, and/or what are your ultimate goals? We can't guarantee someone will be able to help you out with custom code, but you can post a link to your site just in case.

shania1 · ‎10-27-2019

Hi and thank you for replying. What I meant is that my banners are not properly aligned, parts are missing. For example, I put up a HostGator affiliate banner but only part of the banner can be seen in the sidebar, I have a few persons told me to take it down because it's not looking professional. There must be a way to fix this, right? I have no knowledge of HTML, configuration etc, but I think the website should indicate the sizes of banners that should be allowed. What size banners are allowed in the sidebar of the themes, where can I locate that info?

shania1 · ‎10-27-2019

My goal is to write articles and promote my affiliate links/banners. I have also signed up for google ad sense.

shania1 · ‎10-27-2019

Help, please!!!! Anybody, please help me. What's the standard size banners that are allowed on any theme sidebar. Because they all appear to be not working. I have changed the themes, I have tried small and large banners and they all are not fitting properly in the sidebar.

shania1 · ‎10-27-2019

Hi Bernadette, don't worry, I got through, thank you. I googled this website below and followed the instructions. I think it might be a temporary fix until I figure out the problem. I looked at this tutorial (https://editortricks.weebly.com/how-to-widen-the-blog-sidebar-of-your-weebly-site.html) on how to widen Weebly sidebar. It looks much better now, Anyone who probably has the same issue, I highly encourage that you have a look at it too. Also, keep in mind when you're making the change to please remember your Theme's name, it will ask for you to enter the name of your Theme and then save before exiting. (https://editortricks.weebly.com/how-to-widen-the-blog-sidebar-of-your-weebly-site.html) (/* Blog sidebar ------------------------------------------------------------*/ .blog-sidebar { width: 335px; padding-left:30px } .column-blog { float: right; width: 335px; margin: 0; padding: 0; } how to widen the side bare

Adam7 · ‎10-27-2019

Thanks for sharing that, @shania! I'm sure that will help others who had the same needs as you.

How do you add elements to sidebars?

Blog Sidebar / Embed Code

"Feed Reader" element missing

the button element

Moving Elements With Content

Reduce padding around Image element