Golden Hearts – Gallery Masonry

Create Gallery Masonry

  • Go to Pages > Add New. Here you create a new page
  • Enter the page's title
  • Select Templaza style: No sidebar
Create a cause page

Create Image Gallery

  • Edit the page's content with Elementor
  • Add a new section, drag & drop UI Gallery element to the section
  • Choose images from your media  library
  • Set limit images if you need
  • Configure the number of columns displaying the gallery on devices
  • Enable masonry option
Enable masonry option

Golden Hearts – Gallery Grid

Create Gallery Grid Page

  • Go to Pages > Add New. Here you create a new page
  • Enter the page's title
  • Select Templaza style: No sidebar
Create a cause page

Create Image Gallery

  • Edit the page's content with Elementor
  • Add a new section, drag & drop UI Gallery element to the section
  • Choose images from your media  library
  • Set limit images if you need
  • Configure the number of columns displaying the gallery on devices
Configure number of columns

Golden Hearts – Causes List

Create Causes articles

To create the Causes - List page, you're supposed to create causes articles first.

  • Please go to wp-admin > Cause > Add new
  • Enter the cause title
  • Assign the cause to a category
  • Upload featured image and add intro-text to excerpt box
Create a cause

Configure Causes Options

  • Below the content section, you'll see Cause Options
  • Please select Cause Donate settings
    - Inherit from setting
    - Custom > configure custom options
Configure Cause Options

Create Cause List Page

  • Go to Pages > Add New. Here you create a new page
  • Enter the page's title
  • Select Templaza style: No sidebar
  • Edit the page's content with Elementor
  • Add a section, drag & drop UI Posts element to the section
  • Select post resource: Cause and choose categories, ordering.
  • Configure the number of columns on devices with 1 column only
Create a cause page
Configure number of columns

Golden Hearts – Causes Grid

Create Causes articles

To create the Causes - grid page, you're supposed to create causes articles first.

  • Please go to wp-admin > Cause > Add new
  • Enter the cause's title
  • Assign the cause to a category
  • Upload featured image and add intro-text to excerpt box.
Create a cause

Configure Causes Options

  • Below the content section, you'll see Cause Options
  • Please select Cause Donate settings
    - Inherit from setting
    - Custom > configure custom options
Configure Cause Options

Create Cause Grid Page

  • Go to Pages > Add New. Here you create a new page
  • Enter the page's title
  • Select Templaza style: No sidebar
  • Edit the page with Elementor
  • Add a section, drag & drop UI Posts element to the section
  • Select post resource: Cause and choose categories, ordering, and number of columns on devices (should be more than 1 column)
Create a cause-grid page
Configure the number of columns

Golden Hearts – Event Page

Create Event articles

Please go to wp-admin > Event manager > Add New

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

Configure Event Data

  • Below the content section, you'll see Event Data
  • Configure event data > then publish
Configure event data

Create Event Page

  • Go to Pages > Add New. Here you create a new page
  • Enter the page's title
  • Insert the shortcode [events]  into the page content-box
  • Select Templaza style: No sidebar
Create an event page

Golden Hearts – Home Page 1

To set up Home Page 1, you have to install required plugins included: Elementor Website Builder and TemPlaza Elements.

Alita – Theme Activation

You have to active theme to use Import Demo Content

Click “Active Product” to begin the process
Popup will appear immediately. Click “Proceed” to complete Theme Activation
Theme Activation Completed

Elementor – Configuration

You have to configuration follow this article to use custom style.

Disable Default Colors and Default Fonts to load font from Themes

Please Disable Default Colors and Disable Default Fonts to make Elementor inherit the colors and fonts from theme.

Use external CSS file and Google Fonts load
  • CSS Print Method: Select “External File”
  • Google Fonts Load: Select “Default”

Widget

Widget Settings
Widget settings
  1. Admin label: this helps you identify better than you did with this element. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the element you have added. This will surely save you from a lot of hassles.
  2. Widget: Select a widget available in the list. And configure options of the selected widget that appears right below. 
  3. Widget title HTM element: Choose a 
  4. Text align: This feature allows you to set the horizontal alignment of a text. A text can be left or right-aligned, or centered.
  5. Custom class: Write the class name used for writing custom CSS or JS.
  6. Custom ID: Give a custom ID to override the auto-generated ID
Design Settings
Design Settings

Under this tab the options are as follows:

  1. Background: Select a color or tick on the box "transparent" if you don't want a background color.
    - Background repeat: sets if/how a background image will be repeated.
    - Background size: specifies the size of the background images.
    - Background attachment: sets whether a background image scrolls with the rest of the page or is fixed.
    - Background position: sets the starting position of a background image.
  2. Upload an image if you're interested in decorating the background with an image.
  3. Border: set the thickness of the element border by entering numbers in boxes top, right, bottom, and left. 
    There are many border styles including solid, dashed, dotted, double. 
    Choose a color for the borderline.
  4. Spacing: Add margin and padding values over the row to improve its appearance on different devices. Spacing units are px, rem, em, and %.
  5. Custom color: select a custom color for the element or otherwise make it transparent. You can set a custom color for text, regular link, hover link and active link. 

WP Woocommerce Products

WP Woocommerce Products Settings

Under this tab the options are as follows:

  1. Admin label: this helps you identify better than you did with this element. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the element you have added. This will surely save you from a lot of hassles.
  2. Widget: Select a widget that is available in the drop-down list.
  3. Widget title HTML element: Select a HTML element for widget title.
  4. Number of products to show: Set the number of woocommerce products that you want to show.
  5. Show: There are 3 available options: All Products, Onsale Products, and Featured Products. Choose a product option to show from the list.
  6. Order by: Choose one of order type that products will be sorted by (Date, Randon, Price or Sales)
  7. Order: Select the ordering of how woocommerce products will be ordered. The result will be displayed in ascending or descending order.
  8. Hide free products: If you created free products with woocommerce, but do not want them to be visible in front-end. Just enable this option.
  9. Show hidden products: Enable this option if you want to show hidden products.
  10. Text align: This feature allows you to set the horizontal alignment of a text. A text can be left or right-aligned, or centered.
  11. Custom class: Write the class name used for writing custom CSS or JS.
  12. Custom ID: Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

  1. Background: Select a color or tick on the box "transparent" if you don't want a background color.
    - Background repeat: sets if/how a background image will be repeated.
    - Background size: specifies the size of the background images.
    - Background attachment: sets whether a background image scrolls with the rest of the page or is fixed.
    - Background position: sets the starting position of a background image.
  2. Upload an image if you're interested in decorating the background with an image.
  3. Border: set the thickness of the element border by entering numbers in boxes top, right, bottom, and left.
    There are many border styles including solid, dashed, dotted, double.
    Choose a color for the borderline.
  4. Spacing: Add margin and padding values over the row to improve its appearance on different devices. Spacing units are px, rem, em, and %.
  5. Custom color: select a custom color for the element or otherwise make it transparent. You can set a custom color for text, regular link, hover link and active link.