Alita – Home Page

August 4, 2021 Alita

To setup Home Page You have to install require plugins included: Elementor Website Builder and TemPlaza Elements.

Click begin installing plugins to install plugins

The Home Pages using different Elementor widgets.

View homepage layout view on frontend:

Demo home use the Home Page template

Steps to Create the Home demo menu items

The Main Home page on the demo site uses TemPlaza: Heading, UI Text, UI Button, UI Card, Testimonials, UI Image, UI Post, UI Marker & Counter widgets to display the Content.

Here is a guide to create Home Page:

Step 1: Create a template site

  • Go to unzipped folder -> data-import -> templates -> home_page.json
  • Go to wp-admin -> Alita Options -> Templates -> Click “Add New” -> Import / Export
  • Insert Template title -> Click Publish
Choose import file to import file
Click “Upload file” >> Choose import template file from download package >> Click “Import”

Step 2: Create a new page

Go to wp-admin -> Pages -> Add New Page -> Edit with Elementor -> Publish

Add title -> Edit with Elementor
Select Templaza style.

Step 3: Configure Elementor widgets

Home Page uses TemPlaza: Heading, UI Text, UI Button, UI Card, Testimonials, UI Image, UI Post, UI Marker & Counter widgets.

1. Heading section

Heading section uses TemPlaza: Heading, Text and UI Button

1.1. TemPlaza: Heading Widget
Add title, highlight and after highlight text. Configure heading style and highlight effect.
1.2. Text Widget
Add text widget with class=”uk-text-lead”
1.3. TemPlaza: UI Button
Enter your text and link -> configure button style and shape

2. Feature Box

Add section with 3 columns -> Drag ‘n drop TemPlaza UI Card Widget.

Enter your title, content.

Extra settings

Choose Layout Type and Icon
Choose Card Style and Card Size
Add button text and style.

3. Testimonials

Add quote text, author and position.

4. About Company

About Company section uses TemPlaza: UI Text, UI Image and UI Button

4.1. TemPlaza: UI Text
Enter your title, sub title and content.
4.2. TemPlaza: UI Button
Enter your button text, link, icon and color.
4.3. TemPlaza: UI Image
Select your image. Configure image size and animation.

5. Counter Section

Add section with 4 columns -> Drag ‘n drop Counter Widget.

Enter starting number and ending number.

6. Portfolio Section

Portfolio section uses TemPlaza: UI Text and UI Post

Choose Resource: Portfolio. Select category or leave it blank. Configure limit and Responsive columns

Extra settings

Select Filter Position
Configure Title settings
Configure content display

7. Marker Section

Marker section uses TemPlaza: UI Text and UI Marker

Add maker items and configure them
Marker Options
Map Settings
Title configure

8. Blog Section

Blog section uses TemPlaza: UI Text and UI Post

Choose Resource is Post, Select your category, Limit and Responsive Columns
Tags: , ,