Custom Coding On Your Website

RealtyNinja is a hosted website platform which uses pre-defined templates and customizable widgets. This means you won't be able to access the raw underlying source code (say via FTP), but that doesn't mean you can't make edits to your website and do fancy things with it. 

Table of contents:

Website editor and standard widgets

The quickest way to edit your website is by using the built-in functionality provided in the EDIT MY WEBSITE section of the backend of every RealtyNinja website. If you're not familiar with it please check out this guide first, as a lot of what you may be trying to achieve can be done using the standard editor.

Embed tool and custom code widgets

The Embed tool

The embed tool is great if you're looking to embed some third-party code directly on a page, such as a YouTube video, a third-party form or anything else that provides a simple "embed this on your website" function.

Here's how to access the embed tool:

1. Login to your website (yourwebsite.com/login)

2. Click EDIT MY WEBSITE

3. Go to any page you wish to edit

4. Click EDIT THIS PAGE

5. Click into any editable area

6. In the toolbar, click the EMBED TOOL icon

7. Paste in your embed code, then click EMBED THIS

Note: If you're looking to place an iFrame on your website, we have a more detailed guide for that.

8. Click APPLY CHANGES and SAVE CHANGES.

Custom code widgets

Note: The settings mentioned below are for web designers/developers only. We won't explain what each item is, as we assume you're 100% comfortable and familiar with them. RealtyNinja cannot be held responsible for any edits you make (without us) to these settings on your website.

Custom code widgets are a much better option for those looking to add custom code to a page (beyond a simple embed). For example you could add your own HTML and easily edit/re-order it amongst your other page widgets.

To access custom code widgets simply:

1. Login to your website (yourwebsite.com/login)

2. Click EDIT MY WEBSITE

3. Go to any page you wish to edit and click PAGE LAYOUT & WIDGETS (alternatively you could click the "Page Layout & Widgets" icon next to any page in the MANAGE PAGES lightbox).

4. Drag and drop the CUSTOM CODE widget from the list on the left to the right, in the order where you would like to display it.

5. Click the settings cog ⚙️ on the CUSTOM CODE widget to open the settings window.

6. Add any code you like to the available fields. It will be rendered in place of the widget after you save.

7. Click APPLY CHANGES and SAVE CHANGES.

Site-wide settings

1. Login to your website (yourwebsite.com/login)

2. Navigate your way to the SETTINGS section

Theme settings

3. Click on the "Theme" settings tab. Here you can set various options which effect the layout of the headers on your website (that's where your logo, contact icons and navigation menu usually goes) and other site-wide layout options that effect your websites theme. Here's a demo video of those settings in action.

Custom code settings:

Note: The settings mentioned below are for web designers/developers only. We won't explain what each item is, as we assume you're 100% comfortable and familiar with them. RealtyNinja cannot be held responsible for any edits you make (without us) to these settings on your website.

4. Click on the "Custom Code" settings tab. Here you can set all kinds of things that will load on every page of your website. Please read each fields description for an explanation of what it does and where it will be loaded. They include:

  • Custom CSS Styles
  • Custom Header Code
  • Custom Body Code
  • Custom Footer Code
  • Custom XML Sitemap / Custom Robots.txt File - more info

Page-specific settings

Note: The settings mentioned below are for web designers/developers only. We won't explain what each item is, as we assume you're 100% comfortable and familiar with them. RealtyNinja cannot be held responsible for any edits you make (without us) to these settings on your website.

If you just need to load your custom code on certain pages of the website then this method is for you.

1. Login to your website (yourwebsite.com/login)

2. Click on EDIT MY WEBSITE

3. Click on MANAGE PAGES

4. Click on the "Page Options" ⚙️icon next to any page you wish to load your custom code on

5. Click on "Show Advanced Options"

6. Add your page-specific Custom Header Code, Custom Body Code and/or Custom Footer Code in the fields provided. 

Note that anything entered here will load immediately AFTER site-wide options (if you've set those up).

7. Click APPLY CHANGES and SAVE CHANGES.

Widget-specific settings

Note: The settings mentioned below are for web designers/developers only. We won't explain what each item is, as we assume you're 100% comfortable and familiar with them. RealtyNinja cannot be held responsible for any edits you make (without us) to these settings on your website.

Custom CSS Classes on widgets

Every widget on your website has a "Custom CSS Class" field on it, which allows you to set your own CSS class which you can use to target via "SETTINGS > Custom Code > Custom CSS Styles".

Here's how to find this setting on any widget:

1. Login to your website (yourwebsite.com/login)

2. Click on EDIT MY WEBSITE

3. Go to any page you wish to edit and click PAGE LAYOUT & WIDGETS (alternatively you could click the "Page Layout & Widgets" icon next to any page in the MANAGE PAGES lightbox).

4. Click the Widget Options icon on any widget you want to target

5. Type in a custom class name under the "Custom CSS Class" field

6. Click APPLY CHANGES.

7. You can now target this widget in your CSS (in "SETTINGS > Custom Code > Custom CSS Styles") via its custom class. 

Custom CSS Classes on images

Every editable image on your website has a "Custom CSS Class" field on it, which allows you to set your own CSS class which you can use to target via "SETTINGS > Custom Code > Custom CSS Styles".

Here's how to find this setting on any image:

1. Login to your website (yourwebsite.com/login)

2. Click on EDIT MY WEBSITE

3. Click EDIT THIS PAGE (on the page containing your image)

4. Mouse-over the image you wish to set a custom class on, and click the "Image Options" icon

5. Click "Show Advanced Options"

6. Type in a custom class name under the "Custom CSS Class" field

7. You can now target this image in your CSS (in "SETTINGS > Custom Code > Custom CSS Styles") via its custom class. 

Still need help? Contact Us Contact Us

Related Articles