Content inside page template is misplaced - php

Question

I have a template in my Genesis theme child that is assigned to my homepage with a div that has an ID that I've styled in a separate CSS file.
That div contains a text, in the CSS sheet there's a background image to it.
I have a styled header through hooking it up through functions.
I have a footer aswell.
The problem is - the div that I mentioned is rendered below all these elements, as if it's not a part of the genesis structure.
There's header, footer, and below that the image with the text.
If I edit the page through the dashboard a new post is created that is positioned correctly.
How do I display the picture between the header and footer like it should be?
The code for the homepage template is:
<?php
/*
Template Name: Homepage Template
*/
genesis();
echo "<link rel='style' type='text/css' href='styles.css' />";
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
</header><!-- .entry-header -->
<div class="entry-content">
<div id="home_slider">
Electrical & Mechanical Engineering<br>In Nigera
</div>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php endwhile; // End the loop. ?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Answer 1

The thing about Genesis content is that you have to use the Genesis hooks to add content to your page. There is a great visual guide for this here: http://genesistutorials.com/visual-hook-guide/
In your case, if you wanted to place your div just before the content area, you could do the following:
/**
* Template Name: Homepage Template
*/
add_action('genesis_before_content', 'add_extra_content_div');
function add_extra_content_div(){
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
</header><!-- .entry-header -->
<div class="entry-content">
<div id="home_slider">
Electrical & Mechanical Engineering<br>In Nigera
</div>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php endwhile; // End the loop. ?>
</main><!-- .site-main -->
</div><!-- .content-area -->
?>
}
genesis();
One other point is that in Genesis you do not need to put in get_header() and get_footer() so you should remove these from your template.
Also, make sure that genesis(); is the very last line in the template - this is very important.