Header und Footer verschwinden

Hallo,

ich bin recht neu in Typo3 und habe versucht meine Seite damit umzusetzen. Das hat auch alles soweit geklappt. Mein Header und Footer befinden sich als Layout in der Default.html.

Als Template habe ich eines angelegt Homepage.html. Das funktioniert auch alles wunderbar. Nur habe ich jetzt das Problem, dass mein Header und Footer aus der Layout (Default.html) nicht mehr angezeigt wird, sondern nur noch der Homepage.html mit den Inhalten. Lösche ich jetzt im Typoscript allerdings den Berreich kompletten Berreich ### 360 concepts und ### Advantages erscheint der Footer und Header wieder.

Kann mir jemand sagen, was ich falsch mache? Untenstehende die 3 Files.
Vielen lieben Dank schonmal für die Hilfe.

Typoscript:

page = PAGE

# Template
page.10 = FLUIDTEMPLATE
page.10 {
    partialRootPath = EXT:eauvation_landingpage_1/Resources/Private/Partials/
    layoutRootPath = EXT:eauvation_landingpage_1/Resources/Private/Layouts/

    ## Backend Layouts
    file.stdWrap.cObject = CASE
    file.stdWrap.cObject {
        key.data = pagelayout

        # Default Template
        default = TEXT
        default.value = EXT:eauvation_landingpage_1/Resources/Private/Templates/Homepage.html
    }

    ## Inhalte an die Templates übergeben
    variables {
        ### Slide
        slideDescription < styles.content.get
        slideDescription.select.where = colPos = 1

        slideContact < styles.content.get
        slideContact.select.where = colPos = 2

        ### Highlight Points
        highlightPointsLeft < styles.content.get
        highlightPointsLeft.select.where = colPos = 3

        highlightPointsRight < styles.content.get
        highlightPointsRight.select.where = colPos = 4

        ### Customer Reviews
        customerReviewsLeft < styles.content.get
        customerReviewsLeft.select.where = colPos = 5

        customerReviewsRight < styles.content.get
        customerReviewsRight.select.where = colPos = 6

        ### 360 Concept
        360conceptHeadline < styles.content.get
        360conceptHeadline.select.where = colPos = 7

        360conceptImage < styles.content.get
        360conceptImage.select.where = colPos = 8

        360conceptInformations < styles.content.get
        360conceptInformations.select.where = colPos = 9

        ### Advantages
        advantagesHeadline < styles.content.get
        advantagesHeadline.select.where = colPos = 10

        advantagesDescriptionLeft < styles.content.get
        advantagesDescriptionLeft.select.where = colPos = 11

        advantagesDescriptionRight < styles.content.get
        advantagesDescriptionRight.select.where = colPos = 12

        advantagesCalltoaction < styles.content.get
        advantagesCalltoaction.select.where = colPos = 13

        advantagesCalltoactionButton < styles.content.get
        advantagesCalltoactionButton.select.where = colPos = 14
    }
}

page {
    # Meta
    meta {
        X-UA-Compatible = IE=edge, crhome=1
        X-UA-Compatible.httpEquivalent = 1

        viewport = width=device-width, initial-scale=1
    }


    # Include CSS
    includeCSS {
        file10 = EXT:eauvation_landingpage_1/Resources/Public/css/bootstrap.min.css
        file10.disableCompression = 1
        file20 = EXT:eauvation_landingpage_1/Resources/Public/css/bootstrap-theme.min.css
        file20.disableCompression = 1
        file30 = EXT:eauvation_landingpage_1/Resources/Public/css/styles.css
    }

    # Include JS
    includeJSFooter {
        file10 = EXT:eauvation_landingpage_1/Resources/Public/js/jquery-3.2.1.min.js
        file10.disableCompression = 1
        file20 = EXT:eauvation_landingpage_1/Resources/Public/js/bootstrap.min.js
        file20.disableCompression = 1
        file30 = EXT:eauvation_landingpage_1/Resources/Public/js/custom.js
    }
}

# Adobe Typekit
page.1000 = TEXT
page.1000.value (
    <script src="https://use.typekit.net/wdz1ide.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
)

Layout.html:

<!-- Header and Navigation -->
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
                <div class="eauvationLogo">
                    <img src="images/EauVationLogo.png" />
                </div>
            </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#welcome">Willkommen</a></li>
                <li><a href="#360concept">360° Konzept</a></li>
                <li><a href="#advantages">Ihre Vorteile</a></li>
            </ul>
        </div><!--/.nav-collapse -->
        <div class="navbar-right">
            <span class="phone">
                <img src="images/iconPhone.png" /> +49 (0)160 7878017
            </span>
        </div>
    </div>
</nav>
<!-- END Header and Navigation -->

<f:render section="Main" />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="footerTop">
            <ul class="footerNav">
                <li>
                    <a href="#">Impressum</a>
                </li>
                <li>
                    <a href="#">Datenschutz</a>
                </li>
            </ul>
        </div>
        <div class="footerBottom">
            <p class="footerText">
                EauVation und die zugehörigen Produkte und Logos sind eingetragene Warenzeichen der Winterhalter Gastronom.<br/>Alle Rechte vorbehalten.<br/>&copy; 2017 Winterhalter Gastronom
            </p>
        </div>
    </div>
</footer>
<!-- END Footer -->

Homepage.html:

<f:layout name="Default"/>

<f:section name="Main">

    <!-- Highlight Slider -->
    <div id="welcome" class="highlightSlider">
        <div class="container">
            <div class="slide">
                <div class="description col-lg-8 col-md-8 col-sm-6 col-xs-12">
                    <f:format.raw>{slideDescription}</f:format.raw>
                </div>
                <div class="contact col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <f:format.raw>{slideContact}</f:format.raw>
                </div>
                <div class="arrowDown">
                    <a href="#360concept">
                        <div class="arrowBlue"></div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- END Highlight Slider -->

    <!-- Highlight Points -->
    <div class="highlightPoints">
        <div class="container">
            <f:format.raw>{highlightPointsLeft}</f:format.raw>
            <f:format.raw>{highlightPointsRight}</f:format.raw>
        </div>
    </div>
    <!-- END Highlight Points -->

    <!-- Customer Reviews -->
    <div class="customerReviews">
        <div class="container">
            <div class="grayBox col-lg-6 col-md-6 col-sm-12">
                <f:format.raw>{customerReviewsLeft}</f:format.raw>
            </div>
            <div class="grayBox col-lg-6 col-md-6 col-sm-12">
                <f:format.raw>{customerReviewsRight}</f:format.raw>
            </div>
        </div>
    </div>
    <!-- END Customer Reviews -->

    <!-- 360 Concept -->
    <section id="360concept" class="360concept">
        <div class="container">
            <h2 class="blue line-sides">
                <span class="blue">
                    <f:format.raw>{360conceptHeadline}</f:format.raw>
                </span>
            </h2>
            <div class="conceptImage col-lg-6 col-md-6 col-sm-12">
                <f:format.raw>{360conceptImage}</f:format.raw>
            </div>
            <div class="conceptInformations col-lg-6 col-md-6 col-sm-12">
                <f:format.raw>{360conceptInformations}</f:format.raw>
            </div>
        </div>
    </section>
    <!-- END 360 Concept -->

    <!-- Advantages -->
    <section id="advantages" class="advantages">
        <div class="container">
            <h2 class="line-sides">
                <span><f:format.raw>{advantagesHeadline}</f:format.raw></span>
            </h2>
            <div class="advantagesDescription col-lg-6 col-md-6 col-sm-12">
               <f:format.raw>{advantagesDescriptionLeft}</f:format.raw>
            </div>
            <div class="advantagesDescription col-lg-6 col-md-6 col-sm-12">
                <f:format.raw>{advantagesDescriptionRight}</f:format.raw>
            </div>
            <div class="calltoaction col-lg-12">
                <f:format.raw>{advantagesCalltoaction}</f:format.raw>
            </div>
            <div class="buttonInformations col-lg-12">
                <div class="button-center">
                    <a class="btn-blue" href="#welcome">
                        <f:format.raw>{advantagesCalltoactionButton}</f:format.raw>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- END Advantages -->

</f:section>

Latest Images

Trending Articles

Latest Images