To set up Home Page 1, you have to install required plugins included: Elementor Website Builder and TemPlaza Elements.
The Home Page was created with different Elementor widgets.
Steps to Create the Home demo menu items
The Main Home page on the demo site was built with: Slider Revolutions, Heading, UI Card, Counter, UI Text, Button, UI Lightbox, UI Post.
Step 1: Create a new page
Go to wp-admin -> Pages -> Add New Page -> Edit with Elementor -> Publish
Step 2: Configure Elementor widgets
Used widgets on home page 1: Slider Revolutions, Heading, UI Card, Counter, UI Text, Button, UI Lightbox, Testimonials, UI Post, UI Image, WP Upcoming Events.
1. Heading section
Heading section uses TemPlaza: Heading, Text and Button
1.1. TemPlaza: Heading Widget
1.2. Text Editor
Enter your text and link -> configure button style and alignment
1.4. UI Image
This image is hidden on small screens. Please click on Advanced tab > Responsive > Configure its visibility on different devices.
1.5 Background image
To edit the background image behind UI Image, click to edit column > Style tab > Change the background image.
2. UI Card
Add section with 4 columns -> Drag ‘n drop TemPlaza UI Card Widget.
Add a section with 2 columns, drag & drop Counter widget. Set starting number, ending number, number suffix, and title.
Background image: Click on “edit column” to change the background image of the column.
4. Upcoming Events
This section was built with elements: UI Text, button, WP Upcoming Events
4.1. TemPlaza: UI Text
Create a new section with 2 columns, the first column is added with UI Text. You should enter a title (Upcoming Events and content)
4.2. Button – View All Events
Use the “Button” element to create this “View All Events” call-to-action button. Enter the button text, link, set its alignment, size.
4.3. Upcoming events
Please go to Wp-admin > Events > create your events. Upcoming Events need to have starting dates after the current date.
Back to the home page, create a new section and use “WP Upcoming Events” element.
5. Our Causes section
5.1. UI Text
This element is used to create the title and description of Our Causes section. Drag & drop UI Text to a new section and enter its title and content.
5.2. Our causes articles & settings
Go to WP-Admin > Causes > Add new. Here you can create new articles for the Causes sections. Edit the article’s content with Elementor, below the article’s title, you’ll see several cause options: Cause goal, Cause donate settings. – If select “Inherit from settings, all global settings will be applied. – If you select “Custom”, you’re supposed to configure options right below
Navigate to Settings tab > here you’re able to configure: PayPal settings, donate form message, donation amount, etc.
6. UI Lightbox
This section includes heading and a lightbox video
Lightbox video: this video was built with UI Lightbox element
Background image: please click to edit the column, you’ll be able to change the background image of this section.
7. Latest News Section
This section was built with elements: Templaza – heading, button and UI Posts
Add a new section with 2 columns, drag & drop Templaza – Heading element, and Button element to each column.
Below should be a section using UI Posts. Choose post resource and category. You can configure available options: Ordering, Limit, and manage the number of post columns on different devices.