Alita – Contact

August 5, 2021 Alita

To setup Contact Page You have to install require plugins included: Elementor Website Builder, Contact Form by WPForms and TemPlaza Elements.

Click begin installing plugins to install plugins

The Contact Page using different Elementor widgets.

View Contact Page layout view on frontend:

Contact page use the Elementor template

Steps to Create the Contact demo menu items

The Contact page on the demo site uses TemPlaza: Heading, UI Text, UI Accordion, UI Card, UI Marker, WP Form widgets to display the Content.

Here is a guide to create Contact 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

Contact Page uses TemPlaza: Heading, UI Text, UI Accordion, UI Card, UI Marker, WP Form widgets.

1. Heading section

Heading section uses TemPlaza: UI Text

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

2. Contact Form Section

Add section with 2 columns. Contact Form section uses TemPlaza: Heading, UI Text, UI Accordion and WPForm

2.1. TemPlaza: Heading
Enter title and highlight title. Configure Heading Style
2.2. TemPlaza UI Text
Use UI Text widget to add text content.
2.3. TemPlaza: UI Accordion
Add accordion item. Enter title and content.
2.4. TemPlaza: WPForms
Select Contact form from WPForm

3. Marker Section

Marker section uses TemPlaza: UI Marker

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

4. Contact information Section

Contact information section uses TemPlaza: UI Card

Enter your title and content.
Tags: , ,