Exclusive to PortfolioPlus and ProSuite subscribers. Trials must upgrade to receive this feature.
Within the Other Blocks for your website, you will find the Code Block which will allow add custom HTML content to further customize your website with third-party tools like you Facebook Page feed, embedding a calendar, 3D Real Estate tour (Matterport), Mailchimp signup form, etc.
Please note that while the ability to add custom coded content to your website pages is being provided, there may be types of code and content that will not be supported. We are also unable to troubleshoot issues with the HTML code itself for the content. For some common troubleshooting please click HERE.
Some custom code me be require you to add at least a portion of the code to the <head> tag area of your website. For more information about adding code to the <head> tag of your website, click HERE.
Adding the Block
- In your Zenfolio account, use the
Website icon on the left-hand side to open the editor.
- Within the website editor, if you have a multi-page website, choose which page you want to edit.
- On that page, click on
icon in the location you want to place this Block, on the right-hand side.
- Scroll down through the Block options and choose the Code Block that you want to add.
Editing the Block
Once you've added the Code Block to your website page, the options for the selected Block will appear on the left-hand side.
- First choose what devices you want this Block to appear on; desktop, tablet, and/or mobile.
- You can also change the Appearance of the Block, by customizing the introductory Title and Body, as well as adding dividers or padding to the Block.
- For the Code Editor, this is where you will add and edit the code you want to embed into your page. Clicking on the HTML Code Editor block will open a new window for you to paste in your code. Click HERE for more information on using the Code Editor.
- The Background of the block can also be changed so that it has a different color.
On the right-side of the page, when you have the Block selected, you can control the location and layout of the Block.
- Use the up and down arrows to move the Block.
- The icon with the + will allow you to duplicate the Block.
- And the trash can icon will allow you to delete the Block. When a Block is deleted there will be a brief moment where you can recover the deleted Block, just use the "Undo Delete" button that appears. Once the undo button goes away, you can no longer recover the Block that was deleted.
Using the Code Editor to Embed Content in the Code Block
After adding the Code Block to your site page:
- Click on HTML Code Editor button on the left-hand side or click on the Block itself to open the code editor.
- In the Code Editor window, paste in the copied HTML code.
- Once you've pasted the code click on Done.
Important: The Code Block currently supports various types of code, including HTML/CSS and can be used to execute Javascript. However, please keep in mind that some executable codes, like Javascript, may cause the code block to not function properly. Please verify that you are copying and pasting the code in the editor correctly. Any code that is not compatible will result in an "Invalid code, please try again" message.
Troubleshooting common issues with embedding code
Content does not appear after successfully adding code
Verify that your HTML code does not contain width and/or height attributes that set the content to "100%" or 0px. An actual pixel dimension must be indicated (100px, 500px, etc.).
Additionally, content not appearing on the page is a sign that the content of the code is not currently fully supported through the Code Block. It would first be recommended for you to review that the code itself is not broken, and if the content continues to not appear, it may not be possible to add that specific content at this time.
The code is giving an "invalid code..." message when trying to add it to the Block
The "Invalid code, please try again" message indicates that the code you're attempting to use is likely not supported content which is not currently able to be used with this Code Block.
Embedded content shows out of alignment
If you're content shows left or right aligned when it should be centered, for example, this could be a sign that there is an alignment set within the code itself that is forcing the content into that alignment. Please review the code that you've added to ensure the proper alignment is set.