How to use the Forge

The purpose of this document is to document how elements in the Forge will be created and/or imported into the site, the requirements for their setup, and how to properly export them for usage.

How to...

WordPress Requirements

  • Colour variables required
  • Additional CSS
  • Shortcodes required
  • Plugins required

Static Requirements

  • Colour variables required
  • HTML Structure
  • Additional CSS & JS

Creating the Element:

Elements added to the Forge must be set up for both WordPress and Static usage. This means creating the element in the Elementor editor with its corresponding CSS, as well as developing the element in HTML, with any necessary CSS and JS.

Steps to Create

  1. Element has been finalised and approved for the Forge by Design.
  2. Develop the element as a post using the Elementor editor.
  3. Add any Additional CSS needed for WordPress Design to the post in the “Wordpress Additional CSS” meta field.
  4. Document any colours, plugins and shortcodes used in the element in “Required Colour Variables” and “Required Plugins/Shortcodes” accordingly.
  5. Create the Static version of the site, using HTML, CSS, and JS
    1. Ensure the element is as close to the design as possible. Some items can be overlooked, as they are specific to each site.
      (eg. weight of heading, font-family, etc.)
  6. Add HTML, CSS, and JS to the Forge Static HTML, CSS, and JS meta fields for the post accordingly.
  7. Assign the post to an appropriate category.
  8. Screenshot the wordpress design, and add it as a featured image to the post.
  9. Review the post to ensure all content is appearing as expected on the front end.

WordPress Export

  1. Log into https://theforge.firesideagency.ca/wp-admin/.
  2. Visit the post for the element you want to export.
  3. Click “Edit with Elementor” to edit the post.
  4. Open the “Navigator” in the Elementor editor.
  5. Select the top wrapping element, right click, and select “Save as Template”.
  6. Assign an appropriate name, and save the template.
  7. From the next screen, find your template in the “My Templates” library, click the “…” icon, and export the template.
  8. Download the template, and delete the template from the “My Templates” library.
  9. Import the template to the site of your choosing for usage in WordPress.

Static Export

  1. Copy the HTML, CSS, and JS from the Static section of the element you wish to export.
  2. Paste the content into the appropriate location on your website. (.html file, stylesheet, script, etc.)
  3. Ensure to download the global stylesheet used by Forge elements from the top navigation.
    1. This is necessary to provide generic styling used by Forge elements.