Agentfire Editor: Spark Creator

Test your creativity with the Spark Creator Block which allows you to build out custom blocks and create unique content.

Brycen Lawson avatar
Written by Brycen Lawson
Updated over a week ago

Welcome to our Agentfire Editor - Spark Creator! If you're here you're learning how to create new pages and customize them in a way to speak to your users! Within this guide you'll learn how to navigate through the Spark Creator and understand some of the features it offers.


Go into the Agentfire Editor, and click on 'Add New Block'.

Add block on Agentfire Editor

Find the Spark Creator and click on the 'Add Block' button.

Use Spark Creator on the Agentfire Editor

Once you have the block added, hover over the block, select the edit button and start editing and adding content. First thing you will notice when you select the edit button is the floating modal. Move this around freely to edit your page and view your results in real time.

Edit the Spark Creator Block in the Agentfire Editor

Block

In the modal, you will notice 3 tabs. Rows, Design, and Advanced.

  • Rows

    Create rows to add content to your page. You can manipulate the rows by devices like mobile and tablet as well as portrait and landscape.

Edit Rows in Block in Spark Creator
  • Design

    Change the style of the block by selecting the design tab. You can adjust things like Background Type, Background Overlay, Spacing, Responsiveness, Display None (Click on the device size to hide the block), Vertical Align, create custom sizing by view height (Ex. 100vh is the entire screen), Borders, Download or save your block to use for later and even add animation to your block!

Edit Design in Block in Spark Creator
  • Advanced

    Add a custom ID or CSS classes to your blocks to style it even further. (Access to CSS would need to be granted by Agentfire Support - email [email protected] for access)

Edit Advanced in Block in Spark Creator

Rows

First, you will need to add a new row by selecting 'ADD NEW ROW'. (you can have multiple Rows in a Block)

Rows act the same way Blocks in its basic functions. You can delete, duplicate, rename, and re-order. By right clicking the Row name, you can Rename that row.

Add a Row in Block in Spark Creator

In the modal, you will notice 3 tabs. Columns, Design, and Advanced.

  • Columns

    When. you select 'ADD COLUMNS', you will be offered layout choices which you can choose from.

Add Columns in Row in Spark Creator
  • Design

    Change the style of the row by selecting the design tab. You can adjust things like Background Type, Background Overlay, Spacing, Responsiveness, Display None (Click on the device size to hide the row), Align, Container, create custom sizing by view height (Ex. 100vh is the entire screen), Box Shadow, Borders, and even add animation to your row!

    By default, a container is added to the row which adds some styling to it. This gives some spacing on left and right and creates the container in the center of the page.

    .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

Edit Design in Row in Spark Creator
  • Advanced

    Add a custom ID or CSS classes to your rows to style it even further. (Access to CSS would need to be granted by Agentfire Support - email [email protected] for access)

Edit Advanced in Row in Spark Creator

Columns

Second, you will need to add a column type by selecting 'ADD COLUMN'. (you can have as many columns as you can fit content on.)

Columns act the same way as Rows in its basic functions. You can delete, duplicate, rename, and re-order, the difference here is you can adjust the width (Ex. 70%). You can also create Horizontal and Vertical spacing to add some design to your columns. By right clicking the Column name, you can Rename that column.

Add Columns in Row in Spark Creator

Add more columns by selecting 'ADD COLUMN' and adjust the sizing of the column by changing the percentage below the column.

Add Horizontal Spacing and Vertical Spacing to allow your columns to breathe and give your page better design.

Editing Columns in Rows in Spark Creator

In the modal, you will notice 3 tabs. Widgets, Design, and Advanced.

  • Widgets

    In the widgets, section, select from the numerous widgets Agentfire has to offer.

Column in Spark Creator

When you select Widgets, you'll be able to see a slider from the left hand side of the screen. The widgets we have to offer on our Spark Creator are:

  • Accordion

  • Article

  • Button

  • Coder

  • Counter

  • Divider

  • Heading Text

  • Home Valuation

  • Icon List

  • Image

  • Lead Form

  • Map

  • Slider

  • Tabbed Content

  • Text

  • Video

  • WordPress Menu

Widgets in Spark Creator
  • Design

    Change the style of the column by selecting the design tab. You can adjust things like Background Type, Background Overlay, Spacing, Responsiveness, Display None (Click on the device size to hide the column), Align, Align Self, Align Content, create custom sizing by view height (Ex. 100vh is the entire screen), Box Shadow, Borders, create a Column Link and even add animation to your row!

Edit Design in Column in Spark Creator

Advanced

Add a custom ID or CSS classes to your rows to style it even further. (Access to CSS would need to be granted by Agentfire Support - email [email protected] for access)

Edit Advanced in Column in Spark Creator

That does it for our Spark Creator. Check out more information on our widgets within the spark creator!

  • Accordion

  • Article

  • Button

  • Coder

  • Counter

  • Divider

  • Heading Text

  • Home Valuation

  • Icon List

  • Image

  • Lead Form

  • Map

  • Slider

  • Tabbed Content

  • Text

  • Video

  • WordPress Menu

Did this answer your question?