wordpress development how to make theme options for home page - wordpress

Question

I'm trying to figure out a way to make a dynamic home page on wordpress, i want the ability to edit the front page, and add content without hardcoding it.
Basically i want to have my home page to look similar to this.
https://html5up.net/forty
and i am aware that i need theme options to do this, how would i integrate that in my wordpress theme.
I want to be able to make columns, add rows, add hero image, etc.
and no, i dont want to use the visual composer. I am currently using Advanced custom fields.
Here is current front page on my theme, i dont want to use advanced custom fields because i still have to hard code.
In a nutshell how to make theme options for wordpress theme
template-frontpage.php
<?php
/**
* Template Name: Front Page
*
* #package Eli
*/
$image = get_field('hero_image');
get_header();
?>
<div class="row">
<div class="hero" style="background-image:url(<?php echo $image;?>); width:100%; min-height:350px; background-size: cover;">
<div class="container">
<div class="col-md-12">
<header class="hero-text">
<?php if (get_field('hero_title') ):?>
<h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
<?php endif;?>
<?php if (get_field('hero_span') ):?>
<span><?php the_field('hero_span'); ?></span>
<?php endif;?>
<?php if (get_field('hero_span_2') ):?>
<span id="move"><?php the_field('hero_span_2'); ?></span>
<?php endif;?>
</header>
</div>
</div>
</div>
</div>
<section class="section-home">
<div class="row">
<div class="container">
<div class="line"></div>
<?php if (get_field('content_block_left') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_icon'); ?>
<?php the_field('content_block_left'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left2') ):?>
<div id="cbl" class="col-md-4 col-xs-12 ">
<?php the_field('content_block_left_2_icon'); ?>
<?php the_field('content_block_left2'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left3') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_3_icon'); ?>
<?php the_field('content_block_left3'); ?>
</div>
<?php endif;?>
</div>
</div>
</section>
<div class="section-about">
<div class="row">
<h1>Beat Your Rivals</h1>
<div class="line"></div>
<div class="container">
<?php if (get_field('image_left') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
</div>
<?php endif;?>
<?php if (get_field('caption_text') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<?php the_field('caption_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
<div class="row">
<div class="container">
<?php if (get_field('test_text') ):?>
<div id="cbl3" class="col-md-12 col-xs-12">
<?php the_field('test_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="about-us">
<div class="row">
<div class="container">
<?php if (get_field('about_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('about_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
<div class="row">
<div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
<div class="container">
<?php if (get_field('consult_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('consult_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
</div>
<?php if (get_field('contact_us') ):?>
<div class="contact-us">
<div class="row">
<div class="container">
<h1 class="contact-h1">Contact Us</h1>
<div class="line"></div>
<div class="col-md-12 col-xs-12">
<?php the_field('contact_us'); ?>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php get_footer(); ?>

Answer 1

Ok, It seems you have already done the basic theme options. Now if you want to create real theme options like the ones everyone creates in their themes then you have three cool options. WP Theme Customizer API , Redux and Codestars
You need to study them. Anyone of the above you can use in your project.