Trouble Adding Plugin to "Static" Front Page, layout problems…

Hi everyone,

I’ve been working on a custom theme and I’m having some trouble integrating a plugin (Estro Slider), a frontpage, and some <div> boxes.

Please see http://www.easiestwebhosting.com/webdesign/svabc/
(ignore the PHP errors that pop up, that’s a separate issue…)

As you can see, the black boxes appear outside the main content area. There are three things I need here:

1. The page must be “editable” because the plugin requires that it be implemented via “short-text” on a WordPress page (example: “[pe_estro_slider id=”1″]”)

2. The div boxes should not be editable from the WordPress “pages” tab on the admin screen.

3. I would like for the black boxes to only appear on the front page – but I will also need to add other pages as well. Is this possible? From what I understand, to have the WordPress user able to edit text on a page, the template must be WordPress’ “page.php” – is there a way to create a custom front page template that can still be edited from the WordPress admin area (from the pages section I mean, by a person who knows nothing about code, not using the editor)?

I’ve tried playing around with the CSS and page code as much as possible but nothing seems to work. Here’s the current code I have for “page.php”:

<?php get_header(); ?>

			<div id="content">

				<div id="inner-content" class="wrap clearfix">

				    <div id="main" class="eightcol first clearfix" role="main">

					    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					    <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">

						    <header class="article-header">

							    <h1 class="page-title" itemprop="headline"><?php the_title(); ?></h1>

						    </header> <!-- end article header -->

						    <section class="post-content clearfix" itemprop="articleBody">
							    <?php the_content(); ?>
							</section> <!-- end article section -->

					    </article> <!-- end article -->

					    <?php endwhile; ?>		

					    <?php else : ?>

    					    <article id="post-not-found" class="hentry clearfix">
    					    	<header class="article-header">
    					    		<h1><?php _e("Oops, Page Not Found!", "bonestheme"); ?></h1>
    					    	</header>
    					    	<section class="post-content">
    					    		<p><?php _e("Uh Oh. Something is missing. Try double checking things.", "bonestheme"); ?></p>
    					    	</section>
    					    	<footer class="article-footer">
    					    	    <p><?php _e("This is the error message in the page.php template.", "bonestheme"); ?></p>
    					    	</footer>

    					    </article>

					    <?php endif; ?>
    				</div> <!-- end #main -->
				</div> <!-- end #inner-content -->
			</div> <!-- end #content -->
<div id="bodypan">
<div id="leftpan">
<div class="bodypan">
<h3>Latest News</h3>
<h4>New Website Launched</h4>
<h5>September 2012</h5>
2012 sees the redesign of our website. Take a look around and let us know what you think.
<a href="#">Read more</a>

</div>
</div>
<div id="middlepan">
<div class="bodypan">
<h3>About Us</h3>
Phasellus facilisis, orci in mattis placerat, elit felis congue dui, vitae convallis lorem dui sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Mission Statement could go here?

</div>
</div>
<div id="rightpan">
<div class="bodypan">
<h3>Forum Discussions</h3>
<ul>
	<li><a href="#">ICBC Changes</a></li>
	<li><a href="#">New Website</a></li>
	<li><a href="#">Question About New AGM Minutes</a></li>
	<li><a href="#">Expanding Collector Plate Program?</a></li>
	<li><a href="#">Welcome New Members</a></li>
</ul>
</div>
</div>
</div>

<?php get_footer(); ?>

Hope that all makes sense, please ask if not. Any help is greatly appreciated, thanks.
-Nik