Golden Hearts – Installation

November 30, 2021

At first, please make sure your system meets the following requirements

Download Package

Go to Themeforest.net > Your Download page. Please download the package from your download page

Installing Golden Hearts Theme

To install the theme correctly, after downloading the theme package from Themeforest, you need to Unzip the package. There are folders inside.

Install Theme via WordPress Admin

  1. Navigate to Appearances--> Themes
  2. Click Add New button and then hit the Upload Theme button
  3. Click on Browser to upload golden-hearts.zip in Theme folder and click Install Now.
  4. Click Activate to activate the installed themes.

Install Theme via FTP

  1. Unzip golden-hearts.zip in theme folder of theme package.
  2. Upload the extracted folder in previous step into /wp-content / themes/
  3. To activate the theme, go to Appearances --> Themes> and activate it.

Golden Hearts – Home page 3

November 29, 2021

To set up Home Page 3, please make sure you have installed the required plugins including Elementor Website Builder and TemPlaza Elements.

Install required plugins

Steps to Create the Home page 3 demo

Step 1: Create a template site

  • Go to WP-admin > pages > Add new
  • Enter the page's title 
  • Select a templaza style: Home page 3
  • Start to edit the page's content with Elementor

The Home Page was created with different Elementor widgets: Slider Revolutions, Heading, Image, UI Card, UI Text, Button, UI Lightbox, UI Post, Image Carousel, Testimonials

Create a new page and choose a templaza style

Slider Revolution

This section uses Slider Revolution

  • Add a new section with 1 column, drag & drop "Slider Revolution 6" element
  • Select a module from Slider Revolution Plugin
  • Insert this shortcode: [rev_slider alias="slider-home-version-1" slidertitle="Slider Home Version 1"][/rev_slider]
Slider Revolution

About Us section

This section includes UI Text and background image, button and Testimonials.

  • Create a new section with 2 columns, drag & drop those elements into each column
About us

Testimonials

Drag & drop the Testimonials element to the column

Enter the content, choose an image, person's name, title, image position, alignment

  • Go to the Advanced tab > Positioning
  • Width: Inline
  • Position: Absolute
  • Configure offset of both horizontal and vertical orientation
Testimonials

Background image

To edit the background image, please click to edit the column > tab "Style" > background image > Choose an image

  • Position: Center Center
  • Repeat: No-repeat
  • Size: Cover

Our Mission Section

This section includes Templaza - heading, UI Card. Create new sections, drag & drop those elements to them respectively. 

  • Templaza Heading: Enter heading title and content
  • UI Card: create 4 inner columns and add UI Card widgets to them. Enter each card's title and content
UI Card

Upcoming Events Section

This section includes UI Text, Button and upcoming events

UI Text & button:

  • Create a new section with 2 columns, drag & drop UI Text into the 1st column, the other with a button
  • Edit your text and button

Upcoming Events:

  • Create a new section right below the Upcoming Events title, and add the WP Upcoming Events widget to it.

This section will automatically derive upcoming events from Events sector

  • Configure the number of events to show, order, and order by
Configure upcoming events

Our Causes section

This section includes UI Text for the title and UI Posts for Causes articles

  • For the title "Our Causes", please add a new section, then drag & drop UI Text element into it
  • Enter a title and content
  • Continue to add another new section, drag & drop UI Posts element into it
  • Choose a resource, category, and configure the number of columns on devices.
  • Move to Slider Settings, enable the option "Display Articles as Slider"
Our Causes
Enable Slider Option

UI Lightbox

This section was built with Tempaza UI Lightbox element

  • Add a new section and drag&drop UI Lightbox to it
  • Insert a video's URL and choose an icon

Background image

Click to edit the section > tab Style> background > Change the background image

Latest News Section

This section includes UI Text, Button, and UI Posts:

  • Create a new section with 2 columns, drag & drop UI Text into the 1st column, and the other with a button
  • Another new section below will be filled with UI Posts
  • Choose a resource, categories, ordering and configure the number of columns on devices
Latest News

Import Templaza template styles

November 29, 2021
Import templaza styles

Step 1: Create a template style

  • Go to unzipped folder -> data-import -> templates
  • Go to wp-admin -> Theme Options -> Templates -> Click "Add New" -> Import / Export
  • Insert Template title -> Click Publish
  • Choose import file to import file
  • Then you'll see the template layout displayed in the Layout tab

You can create your own templates or import prebuilt ones to save your time.

Template layout

Golden Hearts – Footer

November 28, 2021
Footer

How to create footer's layout

Please go to wp-admin > Golden Heart Options > templates > edit your template > layout:

  • Edit elements the text block of Newsletter, "Connect with us" title
Footer's layout

How to change the line below the Newsletter box

  • Please edit the text block under Newsletter and social icons
  • In the Design setting tab, change the border color
Edit the line block
Edit border

How to change Footer logo

Please edit the logo's text block in the Footer section, you can see the image below:

Edit the logo block
Edit the footer's logo

How to change the footer's background color

  • Please click to edit the Footer Section > tab Design Settings
  • Change the background color option
Edit footer section
Change the footer's background color

Golden Hearts – Breadcrumb image

November 28, 2021
Breadcrumb image

How to edit breadcrumb image

Please go to wp-admin > Golden Heart Options > templates > edit your template > layout:

  • Click to edit the breadcrumb section
  • In the tab "Design settings", upload a background image
  • You can also change the background overlay
Edit breadcrumb section
Change background image of breadcrumb

Golden Hearts – About Us

November 28, 2021

To set up About Us page, you have to install the required plugins including Elementor Website Builder and TemPlaza Elements.

Install required plugins

Steps to Create the page:

  • Please go to Wp-admin > Pages > Add new
  • Enter the page's title
  • Select a templaza style: Full - Width
  • Start to edit the page's content with Elementor

The page was created with different Elementor widgets: Heading, Image, UI Text, Button, UI Lightbox, UI Post, Image Carousel

About Us section

This section includes a heading, image, UI Text and background image.

  • Create a new section with 2 columns, drag & drop those elements into each column

Background image

To edit the background image, please click to edit the column > tab "Style" > background image > Choose an image

  • Position: Bottom Left
  • Repeat: No-repeat
  • Size: Contain

UI Image

This image will be invisible on Laptops, Tablets, and mobile devices (according to our demo settings)

  • Add UI Image, and select your image
  • Configure its size (ex: 300x300)
  • Go to Advanced tab > Responsive > Configure its responsive visibility
Background image

Counter

This part is built with a Counter element

  • Create an inner section in the column, drag & drop Counter element into it
  • Configure counter options
Configure Counter options

What We Do Section

This section is built with UI Text and UI Card elements

  • Create new sections, drag & drop those elements into them 
  • Add contents and configure their options
What We Do section

UI Lightbox

This section was built with Tempaza Heading and UI Lightbox element

  • Add a new section and drag&drop these elements into it
  • Enter Heading title
  • Insert a video's URL and choose an icon with Lightbox element.
  • Background image: Click to edit the section > tab Style > edit background image
    - Position: default
    - Repeat: No-repeat
    - Size: Cover
UI Lightbox

Our History section

This section is built with UI Text, UI Timeline
Our History title:

  • Create a new section and add UI Text to it
  • Enter a title and add your content

Timeline:

  • Create another new section and add UI Timeline to it
  • Add different timeline items and configure their title, timeline date, meta-text, and content
History Timeline

Trusted Donors Section

This section is built with Title and Image Carousel element

Title:

  • Create a new section and add a title element to it
  • Enter a title 

Trusted Donors:

  • Create a new section and add Image Carousel element to it
  • Select images from your media library
  • Configure related options
Image Carousel

Golden Hearts – Contact Us

November 28, 2021

Create Contact Us Page

  • Go to Pages > Add New. Here you create a new page
  • Enter the page's title
  • Select a Templaza style: Full-Width
Create Contact Us Page

Add elements

This page was built with Title, Icon list, Map, Form, and button:

  • Edit the page's content with Elementor
  • Add a new section, drag & drop Title element to the section, and name it "Our Offices"
  • Create a new section with 3 columns and use Icon List element
Contact Us

Contact Form

Create a new section with 2 columns:

  • Column 1: add the title "Looking For Volunteer Job" and a button "Become a volunteer"
  • Column 2:
    - Add a title "Get In Touch",
    - Text Editor "Your email address will not be published. Required fields are marked *"
    - Add a WP Form and select a form that should be created with WP Form plugin.
    - A button: "Contact Us"

Note: Please make sure WP Form plugin is installed and activated. You should create your own form previously.

Contact Form

Golden Hearts – Home page 2

November 27, 2021

To set up Home Page 2, you have to install the required plugins including Elementor Website Builder and TemPlaza Elements.

Install required plugins

Steps to Create the Home page 2 demo

Create a new page

  • Go to WP-admin > pages > Add new
  • Enter the page's title 
  • Select a templaza style: Home page 2
  • Start to edit the page's content with Elementor

The Home Page was created with different Elementor widgets: Slider Revolutions, Heading, Image, UI Card, UI Text, Button, UI Lightbox, UI Post, Image Carousel

Slider Revolution

This section uses Slider Revolution

  • Add a new section with 1 column, drag & drop "Slider Revolution 6" element
  • Select a module from Slider Revolution Plugin
  • Insert this shortcode: [rev_slider alias="slider-home-version-1" slidertitle="Slider Home Version 1"][/rev_slider]
Slider Revolution

About Us section

This section includes a heading, image, UI Text and background image.

  • Create a new section with 2 columns, drag & drop those elements into each column
Elements included in About Us section

Background image

To edit the background image, please click to edit the column > tab "Style" > background image > Choose an image

  • Position: Bottom Center
  • Size: Cover
Background image

Our Mission Section

This section includes a heading, image, text editor, UI text, and background image.

  • Create a new section with 2 columns, drag & drop those elements in 
  • Background image: edit the column > Style tab > edit background image
Our Mission section
Edit background image

Our Causes section

This section includes UI Text for the title and UI Posts for Causes articles

  • For the title, please add a new section, then drag & drop UI Text element into it
  • Enter a title and content
  • Continue to add another new section, drag & drop UI Posts element into it
  • Choose a resource, category, and configure the number of columns on devices.
Our Cause Title
Configure UI Posts

UI Lightbox

This section was built with Tempaza UI Lightbox element

  • Add a new section and drag&drop UI Lightbox to it
  • Insert a video's URL and choose an icon
UI Lightbox

UI Lightbox background image

  • Go to the tab Advanced > background > Change the background image
Background image

UI Card

This section includes a Templaza - heading and UI Card

Templaza - Heading:

  • Create a new section (1 column) and drag & drop Templaza - heading element into it
  • Enter a heading title, highlighted title and after highlighted title

UI Card:

  • Create another section right below the heading with 4 columns
  • Drag & drop UI Card element into 4 columns and enter a title for each card
  • Add their content and choose icons
UI Card

Upcoming Events Section

This section includes UI Text, Button and upcoming events

UI Text & button:

  • Create a new section with 2 columns, drag & drop UI Text into the 1st column, the other with a button
  • Edit your text and button

Upcoming Events:

  • Create a new section right below the Upcoming Events title, and add the WP Upcoming Events widget to it.

This section will automatically derive upcoming events from Events sector

  • Configure the number of events to show, their order, and order by
Configure upcoming events

Latest News Section

This section includes UI Text, Button, and UI Posts:

  • Create a new section with 2 columns, drag & drop UI Text into the 1st column, and the other with a button
  • Another new section below will be filled with UI Posts
  • Choose a resource, categories, ordering and configure the number of columns on devices
Latest News

Image Carousel

This section will display logos of sponsors or partners.

  • Create a new section with 1 column, drag & drop Image Carousel element into it
  • Select logo images from your library
  • Configure image size, slide to show (the number of images per slide), slide to scroll ...
Image Carousel

Golden Hearts – Blog Masonry

November 27, 2021

Create blog articles

Please go to wp-admin > Posts > Add New

  • Here you can enter a post's title and add your own content to each blog post
  • Upload a featured image for the post
  • Assign the post to a category
Create event's content

Create Blog Masonry page

  • Go to Wp-admin > pages > Add new
  • Enter the page title and its content
  • Select a Templaza style: no sidebar
  • Then publish and continue to edit the page with Elementor
Create blog masonry page

Create blog masonry with UI Posts

  • Create a new section and drag & drop UI Posts to it
  • Choose a resource: from Post resource
  • Select categories and configure other options
  • Set the number of columns on devices
Configure UI Posts

Golden Hearts – Blog List

November 27, 2021

Create blog articles

Please go to wp-admin > Posts > Add New

  • Here you can enter a post's title and add your own content to each blog post
  • Upload a featured image for the post
  • Assign the post to a category
Create event's content

Add a blog menu item

  • Go to Appearance > Menus > Select Primary menu
  • Add your blog categories to the menu
  • Then Save