Macro Documentation

Button Macro

Description: This is normally used within a Rich Text Editor. If you add copy/text and then want to add a button that goes with the copy.

You would click on the gear icon and a side window will pop up.

You can search for the macro you are looking for to narrow it down.

Once you see the macro you click on it.

 

Button text is the copy will show up on the button.

You can link externally or internal.

  • To link internal, you would click on add and the pages of your website will show up and you pick the page.
  • To link External, you would just put the URL in the box.

 

If you use the Button Download link that overrides the internal and external links. This is usually used for a PDF.

 

 

You can pick the button color, boarder color and text color if you want it to look different than the styling of the site settings. You also can right, center or left align the button.

 

 

Here is the button on the front end after you save and publish it.

Content Image Macro

Description: The content image macro displays images and content horizontally.  A link can be added to the image and can also be added through a button in the content. 

Formatting: Pictures should be jpegs or pngs; it is recommended that images are at least 2000px wide to ensure highest resolution for desktop.

Add your copy/text in the Content box. You have all the options in the RTE to format/add macros as previously shown in the RTE with site styling section.

 

Here is where you would add an image and you can control the image fit and orientation. You can link the image if you wish and have the option of when the image is clicked that it opens the URL in a new window and to place the image on the left side depending on how your content is set up.

 

You can set a content and image width also so make things look how you want.

 

Here is what it could look like after set up.

 

Content Marketing Event Locator Macro

Description: Renders a group of filters based on the settings chosen that will allow the user to filter the content they find on a Content Marketing Renderer.

Graphical user interface, text, email

Description automatically generated

 

You have settings in the pop up that can be filled out. Search Title is commonly used and then linking the Content Page Root is needed so it pulls the information needed.

Graphical user interface, application

Description automatically generated

Graphical user interface, text, application

Description automatically generated

Here is an example of a result.


Content Marketing Filter

Description: Renders a group of filters based on the settings chosen that will allow the user to filter the content they find on a Content Marketing Renderer.

This is used on the Blog page if one is made. This sets up a search bar/filter on the front end. You have some option that you can use when setting this macro up. Search Title and Content Page Root are the ones that are always used.

 

Content Marketing Macro

Description: Renders the articles of the current Content Marketing page.

This is used on the Blog page if one is made. When this is set up it displayed the blog articles that are put in. You have option within this macro to use.

                                                    Graphical user interface, text, application, email

Description automatically generated


Custom CSS Macro

Description: This macro is used to insert custom CSS that the client wants to use on a page.

Here is what the icon looks like.

Graphical user interface, application, Word

Description automatically generated

After clicked on you will get a pop up and it was a box where you put the custom CSS at and then you would save and publish your changes.


Custom Javascript Macro

Description: This macro is used to insert custom Javascript that the client wants to use on a page.

Here is the icon for it.

A picture containing logo

Description automatically generated

After clicked on you will get a pop up and it was a box where you put the custom Javascript at and then you would save and publish your changes.

 


Form Injector

Description: This macro is used to insert a form onto a page that isn’t set up as an aimbase form page.

With this you still must make/set up the form as you normally would as an Aimbase form page doc type.

A picture containing text

Description automatically generated

Save and publish the like you normally would.

Here is the icon for Form injector.

To set this up after you insert the macro you just need to link it to the form you are wanting to show up there.

For instance, this one is set up to be linked to a Newsletter form.

In some instances you may need to set up the very bottom Form ID field and that should match what was used when the form was created.

To find that if needed you would go to the form and click on Form Posts and use the List Codes info as shown here.

Gallery Macro

Description: Macro used for displaying one or multiple images and videos in a grid like configuration. 

Formatting: Images should be either JPEG or PNG. For best quality when resizing, it is recommended that a large (2000px) hi-res image be used for desktop. Video should be an mp4 or hosted on a third-party site (i.e Youtube)

You have control of the layout and some other settings.

Choose the image or video you are wanting to use.

You can also add a caption to the image that will show up when the image is clicked on.

You have some other controls also like show caption on full screen etc..

 

 

Here is what it could look like.

When an image is clicked on it should open. Example here:


Hover Tout Macro

Description: Renders a teaser image that displays teaser text upon hovering over the image. The Hover Tout can also be linked to an internal page.

Pick the image you want to use in the Hover Tout Image box. Click there and it will bring up your media. The Hover Tout Title is the copy/text that will show up on top of the image. You can link externally or internally. This is mostly linked Internally to a form page on the website like a quote or brochure form.

Here is what it could look like when set up.

This is when you hover over it.

This is non hover.

 

Image Macro

Description: Macro that adds a single image 

Formatting: Image should be either a JPEG or PNG.  For best quality when resizing, it is recommended that a large (2000px) hi-res image be used for desktop.

Add the macro and when you click on it you will get a side window that pops up with your media.

Pick the photo you want, or you can upload a new/different one. You can add an Image Caption under the photo also if needed.

 

Here is what it looks like on the front end.

 

Juicer.io Social Media Feed Macro

Description: This macro is used to insert your Social Media onto a page.

Here is the icon for it.

After clicked on you will get a pop up and you need to fill out at least the top 2 fields.

The first one is going to need the Data Feed ID so it knows where its pulling from.

Graphical user interface, application

Description automatically generated

Second one is how it shows up. You can different options here when you open that dropdown. And then save and publish like normal.


List Macro

Description: Can be used to display a list of items with a Hide and Show button functionality.

What the icon for List Macro looks like.

Graphical user interface, application, Word

Description automatically generated

You have control of how many columns you want displayed, the button copy for both show and hide and the alignment of the buttons.

Graphical user interface, text, application, email

Description automatically generated

Click the New List+ button

Graphical user interface, text

Description automatically generated

After hitting New List+ a new area will show up in a grey area. You must name the Category in order for the New List Item+ button to show up.

Graphical user interface, text, application

Description automatically generated

This is where you put in your list items. You can keep hitting New List Item+ to add as many as you need. If you need to add a new Category, then just hit New List+.

Graphical user interface, application

Description automatically generated

Here is an example.

Graphical user interface, application, Teams

Description automatically generated

Chart

Description automatically generated with medium confidence


Navigation Bar Creator Macro

Description: This macro can be used to display navigation bar on a page. You set up what you need and how it works is when you click on that link in the nav bar it takes you to that section on that page.

 

Here is the icon for this macro.

First you would put the text you want in the Link Display box.

Next you would pick if you want that link to take you to a specific row, page or a where you want it to go here in this dropdown.

Last you must pick the row, page etc. so it knows where to take you. For instance, this one is set up to row so in the Choose Row dropdown you must pick the section/macro that it should take you too when it’s clicked on.

You can continue setting up however many you need and then save and publish.

This is what it could look like on the front end and then when one of these is clicked on it takes you to that section automatically.

Owner Reviews Macro

Description: Gives you the ability to add reviews of your product/items without using the Ratings and Reviews macro that pulls from Aimbase. Macro has some fields that gives you some control on how it looks. RTE based where you place the review and can add an image to go along with it.

What the icon for this macro looks like.




You can control of the fields that show up on the macro. You can control the column width and image width. Put the name of the review and the model that the review has. Put the review in the RTE as below.


Graphical user interface, text, application, email 
Description automatically generated

You can add an image of the boat or whatever you wanted wanting to use, add an alt tag for that image and pick the orientation of the image (cover or contain).

Here is an example. (if the review is too long a Read More button will show up)

 


Product Builder Steps Render Macro

Description: Finds the Product Builder steps based on the selected product then renders the steps in the appropriate order.

Here is the icon for it. This is usually used under Build Yours on the Build page in umbraco.

                                    Graphical user interface, application, Word

Description automatically generated

When added you will get a pop up on the right side. You will need to link where it says Select the Form page to the builder form page. 

This will make it so when you build the product it reflects all your choices on that image that shows on the form. Example like color and if there are options that had actual images with them.


Product Builder Summary Mapper

Description: This macro is used to configure a summary page layout for each product.

Here is the icon for it. This is usually used under Build Yours on the Summary page in umbraco.

 

Graphical user interface, application, Word

Description automatically generated

When macro is added it will look like this on the page.

Graphical user interface, text

Description automatically generated

You will then need to open the dropdown and set up EVERY product the same way. By doing something to one of them doesn’t apply it to all.

Once you pick a product an empty box will show up and you can pick the Width you want and what Builder Step to use. You can use 1-12 as your width.

Based on what Builder Step you pick will indicate if you need to put anything in or not. For example, this one using an Image Macro so you can upload an image and it will show for that model on the builder summary page.

Once you have everything set up the way you want it you Save and publish the page.

Product Comparison Results Macro

Description: Configure display settings for product comparison results.

Used on a compare page to compare different models if needed. You can select the number of columns you want to display and then you need to link it so it pulls in the correct models/information.

Application

Description automatically generated with medium confidence

Product/Layout Selector Macro

Description: The Product/Layout Selector Macro auto-generates all products or layouts on a page for the user to select. Once the user selects a product or layout, they will be taken to the respective page.

Here is the icon for it. This is usually used under Build Yours on and Select Your Model page in Umbraco.

Graphical user interface, application

Description automatically generated

When macro is added you will get a pop up on the right side.

You will need to pick the product/layout page you want used/displayed as shown here.

You can pick how you want the images/products to display in columns also.

You can use these fields or hide them. You can also add a new button if something you want isn’t here.

Graphical user interface

Description automatically generated

This is what it could look like on the front end depending on styling.



Rich Text Editor (with Site Styling)

Description: Macro used primarily to add text to a page but can also be used to display additional macros (buttons, images etc).   Selecting the macro with site styling will automatically pull in the general site styling that has been set in Rancor.

You can change the format of text in the RTE (H1 – H5) You click on Formats and pick what you would like to use. Below are examples of each.

 

You can Bold and Italicize text also if needed. You would highlight the text and then hit what you need. Example below.

 

You Can left, center and right align text within the RTE also. You would highlight the text you are trying to add the alignment too and then hit one of these 3 buttons shown below.

 

You can make a bulleted list or a numbered list if that is something you are looking for.

You can link text a single word or a while sentence if needed. You can do external or internal. You would highlight the copy and then click on the chain looking icon. A side window will show up and then you will need to fill out a few things. If you are doing external you will put the external link in the Link box at the top. Most of the time the Target checkbox is used also so when the copy that is linked is clicked on it opens in a new tab and not in the same one. To link internally you would pick from the options under Link to page.

If you are needing to add an image you can do by clicking on the Media Picker icon. A side window will show up and you can go into the folder and pick what image you are wanting and then click on it. It will insert it into the RTE. If you click on the image you can make it smaller/bigger by using the boxes in the corners. You can also center it by using the right, center or left align options mentioned in a previous section.

You can also insert a new macro inside of the RTE an example of this would be a button macro. But you click on insert Macro and a side window will pop up and you can pick what you are needing.

You can also add a table of info within the RTE if needed. You would click on the icon in green below and hover over table and then hover over the boxes in the side pop out to pick what size table you are needing. If shows you the table size at the bottom also.

 

After you pick what size table you want click and it will insert the table. You will need to drag the little boxes that are in the top and bottoms corners to make the table expand.

 

After doing that you will be able to see the whole table. You also have a table control box that shows up at the bottom. Its how you insert a new row or column and delete a row or column or to delete the whole table.

You can change the font color also if needed. You can highlight the text and then click on the last option and the colors will show. If you have a hex code, you can also enter that by clicking on Custom and the bottom.

If you click on custom to enter the hex code, you put the info in the bottom field here.


Side By Side Image Macro

Description: Lets you set up two images/videos side by side with copy under them and you can link the image/video to a page if needed. You have some other options you can use also in the macro like an external link that will overwrite the link image.

Graphical user interface, application

Description automatically generated

Single Slide Macro

Description: Macro that adds a single image or video that can be used as a header image

Formatting: Images should be a png or jpeg; it is recommended images are at least 2000px wide to ensure the best quality for desktop. Videos should be an mp4 and under 10 seconds for site speed. You also have the option of doing a YouTube url embed.

You can control the header height for desktop and mobile.

 

You have the option of using an image, a video (that you upload in media) or embed.

If you pick video, you have some video controls that you can turn on/off depending on what you are looking for. Also, videos here can be hidden on mobile. If you do this you need to upload a Poster image so that image loads on mobile.

You can choose your fill mode for the image (description of both) you can also choose your image alignment; text alignment and you have control of text animations.

Header is the text that will show up on the header image. You have control of the font color also if you do not want to use default.

You have the option of adding a Title link, you can link this Externally or Internally. You have some buttons color controls also.

When you link externally you would use the URL you are trying to link too. When you link internally you would hit Link and pick what page of your website you want to link too.

Here is what it would look like on the front end.

 

Slideshow Macro

Description: Macro used primarily to display a series of images or videos.  This is frequently used as a hero image.

Formatting: Images should be a png or jpeg; it is recommended images are at least 2000px wide to ensure the best quality for desktop. Videos should be an mp4 and under 10 seconds for site speed. 

You can control the whole macro settings which will control the slides also, but then you have controls of each individual slide also.

You have the option to make the slider loop (if you use more than 1 image or video) you can hide/show pagination. You can control the timing of the slides also.

You can control the height of the image for desktop and mobile.

 

You have the option to Hide a side if needed. You can pick an image, video, or embed video. You have the option of turning on/off text animations.

Headline will be the main copy/text that will show up in on the header image. You can put sub copy/text under that in the Summary RTE.

You can add a button also and link it Internally or Externally. To link Externally you would put the whole URL in the field. To link Internally you pick a page within your website to link too.

Here is what it could look like on the front end.

 

Tabbed RTE’s Macro

Description: Gives you the ability to show different packages/options/editions of a model and what is available or standard. Macro is a RTE where you can enter information along with a field to name the tab.

What the icon for this macro looks like.

Graphical user interface, application

Description automatically generated

Click on New Tab+ and it will add a title box and an empty RTE.

Graphical user interface, text, application

Description automatically generated

To add another one hit New Tab+ add it will add a second one. Enter your information.

Graphical user interface, text, application, email

Description automatically generated

This is an example.

Graphical user interface

Description automatically generated with medium confidenceGraphical user interface

Description automatically generated with medium confidence


Testimonials Macro

Description: This macro can be used to display a collection of reviews given by customers. Displaying the name, model, source, and an image to go along with the review.

What the icon for this macro looks like.

Graphical user interface, application

Description automatically generated

You have setting with in the macro that you can control:

Graphical user interface, application

Description automatically generated

You pick the image you want to use for the review/testimonial.

Graphical user interface, application

Description automatically generated

You have control of how you want the fill mode to show along with the info for the reviewer info. You put the actual review in the testimonial RTE.

Graphical user interface, text, application, email

Description automatically generated

Here is what it could look like on the front end.

 

A picture containing graphical user interface

Description automatically generated

Vertical Content Image Macro

Description: This macro displays and image with content below it that is entered in a rich text editor

Formatting: Pictures should be jpegs or pngs; it is recommended that images are at least 2000px wide to ensure highest resolution for desktop. 

Choose your image, you can put in an image height if desired and you can pick the image orientation also from the dropdown.

Enter your copy/text into the Content RTE box. You also have the ability to add a button as previously shown in the RTE with Site Styling section. Here is an example of a set up.

You can link Internally if needed. Click on Add and pick what page of your website you want to link too. Also, if you put copy/text in the RTE you can checkmark the last option and that copy will show up above the image.

Here is what this looks like on the front end of the website.

 

Video/iFrame Embed Macro

Description: Externally hosted video or URL embed.  This is frequently used to display videos, 360 walk throughs or iframed forms. 

Formatting: Recommended that videos be hosted on YouTube, Vimeo, or other third-party sites.  

A note to remember is if you are using a video from YouTube you do not need the whole Embed code that it gives you. You only need this section of it.

 

You put that part of the code in the Embed/IFrame code field. This is the only field that is required. You have the option to add a Headline, Subtitle and Bottom caption if needed.

 

Would look like this on the front end.