In this tutorial, we shall find out how users can add features in the front page of their website using the Elementor plugin. Typer theme comes with this plugin as a recommendation plugin to help users build custom pages on their site. Users will be able to interact with the plugin Features such as drag and drop capability, easy previews while editing, and support of previews in multiple devices. This shows that WordPress users can create custom pages on Typer Theme which are user and SEO friendly with this plugin.

We will be replicating the first section from Typer Travel Agency demo

To get started follow the steps below accordingly:

Step 1: Plugin Installation

• To install Elementor plugin head over to your WordPress Dashboard >> Plugins and click on Add New.
• Next you need to simply search for Elementor in the search bar.
• Once it appears, click on Install Now and then Activate. 

This plugin also comes with the pro version (Elementor Pro) which users can purchase and install. However you will need the basic Elementor plugin for the Pro plugin to work.

Step 2: Create a HomePage

In this section we shall go through the steps to create your Homepage. This could be one of the easiest steps but we need to ensure that its done before proceeding.

• To do this, head over to your WordPress Dashboard >> All Pages >> Add New.
• This redirects you to a new page editor where you should enter the name of your page.
• Once done click on Publish and go to the next step.

Step 3: Front Page Settings

In this section we need to ensure that the front page we display shows the actual homepage and not a blog page. To do so,

• Head over to your WordPress Dashboard >> Settings >> Reading.
• Under ” Your homepage displays” choose a static page.
• This gives you an option to select which Homepage and Posts page you want to use. 
• Just select the page you created in step 2 and choose your blog page accordingly. 

Step 4: Elementor Builder Editing – Settings

Here, we shall begin the steps of how to build the first section of your front page.

• First, head to the page you created in step two and click on ” Edit with Elementor”.
• Next it opens the builder in the Frontend, you’ll notice your page will appear empty with only a title.
• Remove the title heading by Clicking on the settings icon in the bottom left corner.
• It opens up a general settings panel, simply choose “Hide Title & Breadcrumbs “.

Step 5: Adding Sections 

Next we need to add sections which will define the parts of the template. Sections can be grouped in rows that have several columns. 

• In the first section, Click the red plus icon to add a single row section.
• In its Layout settings change the content width to ” full width “.
• In the Style settings choose ” Background Type” to be Classic. 
• Under image you can upload an image suitable for your site and ensure that it’s large enough to fit the full width (above 1280 px).
• Change the position to “Custom ” and under X Position  enter 70 px while Y Position enter 66px

Step 6: Adding Inner Section

In this step we shall add an inner section that shall be the Background of the slider section. We need to ensure that the Background is unique and does not prevent the post slider from not having good readability. 

• To do so, head over to the Elementor main left panel and search for, Inner section panel. It’s basically a two column section. 
• Drag and drop it section into the top row you created in step 5.
• Delete one section and expand the other to fit your display width.
• In its settings you simply need to change the Style settings.
• Under Background type select “Classic “.
• On the Color option choose your favourable site color.
• Under Background Overlay also select  Classic and leave the rest to default. 
• In the advanced tab settings, change the bottom Padding only to 30px.

Step 7: Adding a Post Slider

This part will show you how to add and set a slider that displays your website posts. Users can also set different Post and number of posts to be shown within the slider. 

• To do this, go to the left panel of Elementor and search for ” Article  Slider” by Typer.
• Then simply drag and drop it to the Inner section you created in step 6.
• You will notice it will give an overview of your posts.
• In its content settings you can give a title like ” latest articles”.
• It has two styles you can choose from to display the articles.
• Set the maximum number the slider can display.
• Then you can sort the order of how the post should be displayed in terms of ” newest,  oldest or random” .
• There is also an option to include sticky posts in the slider.
• In the style tab, set the Background type to Classic.
• Then choose a different color of the Posts.