Displaying Locations

Displaying Elementor Locations in your theme is a simple posses. The elementor_theme_do_location() function will display the location defined by the user. In addition, theme developers can set fallback designs if on template was assigned to the location.

Simple Location Display

Let’s see how it is done in an empty theme with a header and a footer. We are going to implement an archive location in our archive.php file:

<?php
get_header();

// Elementor `archive` location
elementor_theme_do_location( 'archive' );

get_footer();

Location with Fallback Design

Some themes have default design. We want to allow the user either to show custom archive locations designed in Elementor, or the regular theme layout if the user didn’t set any Elementor design to this location.

<?php
get_header();

// Elementor `archive` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'archive' ) ) {
	get_template_part( 'template-parts/archive' );
}

get_footer();

Custom Location Display

Many themes have sidebars, we can let the user design this area using Elementor. This can be done by registering new “main-sidebar” location.

<?php get_header(); ?>

<div id="primary" class="content-area">

	<main id="main" class="site-main" role="main">
		<?php
		// Elementor `single` location
		if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {
			get_template_part( 'template-parts/single' );
		}
		?>
	</main>

	<aside id="secondary" class="sidebar" role="complementary">
		<?php
		// Elementor `main-sidebar` location
		if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'main-sidebar' ) ) {
			get_sidebar( 'main' );
		}
		?>
	</aside>

</div>

<?php get_footer(); ?>

This is a simple example, you can add custom locations above the header for your top bars, custom locations for the footer, create your own content layout in single pages and archive pages giving the user to ability to edit each locations using Elementor. The possibilities are endless.