For SharePoint 2016, is there a way to place web parts within HTML custom code?

Question

I am looking for ideas/guidance for importing web parts into custom coded HTML in SharePoint 2016. Below is a web layout that uses a rotating card layout from Creative Tim and Bootstrap styling.

The page has custom HTML and web part sections. I could only make it so that I can add web parts at the bottom sections of the page. We want to give this product to a customer and they can make adjustments easily themselves to as much of the page as possible. They do not know Javascript, CSS, or HTML code, so I need to have the editable sections in web part form or other way that will be easy for them. Right now, I cannot place the web parts within the HTML code I created.

IF it is possible, I would like to replace the static images on the cards with an image web part, and the text on the card with a content editor web part.

If that is not possible, I will have to create a custom Master Page and page templates. Is there anything that would make it easier for the user to adjust the page from the front end? A workaround?

<div class="col-md-3 col-sm-4">
     <a class="linked" href="http://www.google.com/">
       <div class="card-container manual-flip style_prevu_kit">
        <div class="card">
            <div class="front view hm-zoom">
                <div class="cover">
                    <img src="images/rotating_card_thumbb.png"></div>
                <div class="user" id="BWP">
                    <!--<img class="" src="images/rotating_card_profile3.png"/>-->
                </div>
                <div class="content">
                    <div class="main">
                        <h3 class="name">Training</h3>
                        <p class="profession">SharePoint and Office 365</p>
                        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter homines, aliter philosophos loqui putas oportere? </p>
                    </div>
                    <div class="footer">
                        <i class="fa fa-mail-forward"></i>                        </div>
                </div>
            </div> <!-- end front panel -->

        </div> <!-- end card -->
    </div> <!-- end card-container -->
        </a> **strong text**

It may not be very helpful, but I put some of the code up:

http://lancebitner.com/Training3.html

Answer 1

I asked my lead developer about this and here is what he told me:

I think a custom page layout is the best option in this case. I have actually done something very similar to what you describe using page layouts with no changes to the master page. To do that, publishing will need to be enabled on the site you need to change. From there, you want to look into the Design Manager and how to modify Page Layouts. The short version is that you do the majority of the work in HTML/CSS, upload it to a special library and it converts your HTML to a layout page.

In the version I did, I created a “Static” portion of the page and then added some web part zones so that end users could add their own content, but didn’t have access to modify the majority of the page, which sounds like it fits the bill for you. I think it’s something that we shold do more of here, but not many of the developers have had experience with it. It may take some reading and ramp-up time on your part, but I think it well be well worth the effort.

I think this is the link you want: link here