Inertia Scroll With Hello Theme

For the correct creation and construction of a Smooth navigation, some containers to move the elements on page scrolling are needed.

The structure is based on 2 main containers:

  1. the viewport (OUTER-WRAP);
  2. the moving container (WRAP).

This block together will produce the effect via javascript.

Many good themes just wrap many parts of the page: 

  • Header;
  • Main Content;
  • Footer.

This is an example of the HTML page with wrapper:

<body>

    <div id="outer-wrap">
        <div id="wrap">

            <header id="site-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
            </header><!-- #site-header -->

            <main id="main">
            ... THIS IS THE CONTENT OF PAGE...
            </main><!-- #main -->

            <footer id="footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
            </footer><!-- #footer -->            

        </div><!-- #wrap -->
    </div><!-- #outer-wrap -->

<body>


Hello Theme created by Elementor doesn't create it, so we need to create them.

First of all, it's necessary to consider the need to modify some theme files, to do it correctly I recommend you to create a theme-child, like all themes and also Elementor recommends, you can read some indications here:

https://docs.elementor.com/article/583-hello-theme


First of all, override the files dedicated to the header and footer which constitute the opening and closing of the page.

Copy the structure of Hello-Theme starting from the folder [template-parts] which will contain inside:

  • template-parts > header.php;
  • template-parts > footer.php.

in your theme-child.

In the files add the tags related to the 2 wrappers, which in the end will simply look like this:

header.php

<?php
/**
 * The template for displaying header.
 *
 * @package HelloElementor
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}
$site_name = get_bloginfo( 'name' );
$tagline   = get_bloginfo( 'description', 'display' );
?>

<!-- Open WRAPPERS -->
<div id="outer-wrap">
        <div id="wrap">

            
            <header class="site-header" role="banner">
                <div class="site-branding">
                    <?php
                    if ( has_custom_logo() ) {
                        the_custom_logo();
                    } elseif ( $site_name ) {
                        ?>
                        <h1 class="site-title">
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( 'Home', 'hello-elementor' ); ?>" rel="home">
                                <?php echo esc_html( $site_name ); ?>
                            </a>
                        </h1>
                        <p class="site-description">
                            <?php
                            if ( $tagline ) {
                                echo esc_html( $tagline );
                            }
                            ?>
                        </p>
                    <?php } ?>
                </div>

                <?php if ( has_nav_menu( 'menu-1' ) ) : ?>
                <nav class="site-navigation" role="navigation">
                    <?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
                </nav>
                <?php endif; ?>
            </header>

footer.php

        <?php
        /**
         * The template for displaying footer.
         *
         * @package HelloElementor
         */

        if ( ! defined( 'ABSPATH' ) ) {
            exit; // Exit if accessed directly.
        }
        ?>
        <footer id="site-footer" class="site-footer" role="contentinfo">
            <?php // footer. ?>
        </footer>

    <!-- Close WRAPPERS -->
    </div>
</div>


IDs are customizable from the interface:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us