Alita – Services

August 5, 2021 Alita

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

Click begin installing plugins to install plugins

The Services Page using different Elementor widgets.

View Services Page layout view on frontend:

View page the Service Page template

Steps to Create the Service demo menu items

The Service page on the demo site uses TemPlaza: Heading, UI Text, UI Card, Testimonials, UI Image, UI Marker & UI Icon widgets to display the Content.

Here is a guide to create Service Page:

Step 1: Create a template site

  • Go to unzipped folder -> data-import -> templates -> elementor_template.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” >> Add Title “Elementor Template” and click to Publish

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

Service Page uses TemPlaza: Heading, UI Text, UI Accordion, UI Card, Testimonials, UI Image, UI Marker & UI Icon widgets.

1. Heading section

Heading section uses TemPlaza: UI Text

Add title and content. Configure heading style “Medium” and title tag “h1”.

2. About Company

About Company section uses TemPlaza: UI Text, UI Accordion

2.1. 10 Years’ Experience In It

Use UI Text to setup Title and Content. To setup likes demo please use code below:

<div class="uk-flex-inline uk-flex-bottom"><span class="uk-text-bold uk-margin-small-right" style="font-size: 180px; color: rgb(235, 43, 122); line-height: 0.82;">10</span> Years’ experience in IT</div>

Use UI Text to display content use style Lead to display content.

Enter your title, sub title and content.
2.2. World Map with UI Marker

Use UI Marker to setup Map and marker.

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

3. Feature Box Section

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

Enter your title, content.

4. Testimonials

Add quote text, author and position.

5. Image Section

Image section uses UI Image.

Select Image and configure image size.

6. Our Services

Our Services uses UI Text and UI Card for info box. Add section with 2 columns -> Drag ‘n drop TemPlaza UI Card Widget.

Enter Title, Icon and Description of UI Card to setup Infobox

7. Call to action section

Call to Action section uses TemPlaza Heading and UI Icon.

7.1. TemPlaza: Heading
Add call to action text and add link
7.2 TemPlaza: UI Icon
Configure Icon and Link
Tags: , ,