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.

 

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.

 

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.

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.

 

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.