Custom code

Add custom code to your site by going to the Settings area of the Visual Builder, and navigating to “Custom Code” under the Advanced tab.

You can apply custom CSS rules, insert code into the <head> of your pages, or add custom JavaScript to the end of the body.

Custom code warning P7

Enter content into these area only if 1) the ProPhoto team has instructed you to do so, or 2) you are certain that you know what you are doing. Nearly every other styling decision can be achieved using the options ProPhoto already provides.

If adding code to this area causes problems with your site, come back and delete the code you added.

Site custom CSS

This area allows you to manually code extra CSS for your site. If you know how to look up CSS classes and IDs from the HTML markup of your site, and you understand how to write CSS code, feel free to experiment here. But be aware that you should test your changes in several browsers and on mobile devices to make sure everything behaves as expected. Extra styling added here is stored in the database, and written to an external stylesheet so changes will not be overwritten when you upgrade your ProPhoto theme.

Most of the time, you will want to enter custom CSS in “ProPhoto > Customizer > “Layout” at the site level or as custom SASS in a specific block, row, or column.

Insert into head

This area is intended for any third party applications that require you to add a “meta tag”, or other info into the <head></head> area of your blog. The only application like this that we specifically approve is Google Webmaster tools.

What you enter here shows up in the markup right before the </head>. insert_head_example Unless you really know what you are doing, you should contact us before pasting any other code into this area. Of course if it breaks something you can always pull it back out!

Custom javascript

If you are comfortable creating and using custom JavaScript code, or you received Custom JavaScript code from somewhere else that you’re wanting to add to your site, you can do so in that field. It will be inserted into the markup at the end of the body as shown below.

location of custom javascript in markup

(If you aren’t really sure what you’re doing though, it’s best to leave this field blank as incorrect code in this area could negatively affect your site.)

You can also add JavaScript directly to the “head” of your site in the “insert into head” area on this same page.