When creating a Custom Page, to be used on your Zenfolio website, there are some common issues that can occur when adding certain content like videos, slideshow, copied text, etc. to the Custom Page.
| Note: While Zenfolio does provide the ability to add custom HTML code and embedded content to Custom Pages, we are not able to support or troubleshoot any issues with, or caused by, customized code added to the page. These troubleshooting tips should may work for general fixes, but we cannot guarantee that they will completely resolve all issues seen. For example, <script> codes are not compatible with the Zenfolio website creator and may not perform as expected and could cause unwanted behavior of your website. |
Some common issues seen on Custom Pages are:
Portrait Images Incorrectly Aligned In Slideshow
Video Alignment Not Centered
Remove Copied Text Formatting
JotForm Custom Form Not Displaying Correctly
Embedded Content Not Displaying
Custom Page Does Not Display Correctly On Mobile
Spacing Continually Being Added To Text
Portrait Images Incorrectly Aligned In Slideshow
If you have added a Slideshow to your Custom Page and the portrait oriented images are not properly centered in the slideshow area, there could be some conflicting alignment formatting that is impacting the content in the slideshow.
To fix this, you will need to set a Fixed Alignment for the Slideshow and remove any text formatting that could be impacting the slideshow image alignment.
In the Custom Page, hover your mouse pointer over the Slideshow box in the Content area.
Click on the Edit button that appears.
In the Slideshow window that appears, go to the Set Layout tab
Set the Layout to Fixed Alignment, choose the Centered alignment option
Click the Update button
In the Custom Page Content area, click on the Slideshow box. This will highlight the content.
With the Slideshow box highlighted, click on the icon in the formatting toolbar. This will remove the text formatting from the highlighted content.
Video Alignment Not Centered
If you have added a Video to your Custom Page and it is not properly centered in the slideshow area, there could be some conflicting alignment formatting that is impacting the video.
To fix this, you will need to set a Fixed Alignment for the Video and remove any text formatting that could be impacting the video alignment.
In the Custom Page, hover your mouse pointer over the Video in the Content area.
Click on the Edit button that appears.
In the Video window that appears, go to the Set Layout tab
Set the Layout to Fixed Alignment, choose the Centered alignment option
Click the Update button
In the Custom Page Content area, click on the Video. This will highlight the content.
With the Video highlighted, click on the icon in the formatting toolbar. This will remove the text formatting from the highlighted content.
Remove Copied Text Formatting
In some cases, you may be creating the text of your Custom Page through another source like Microsoft Word, Google Docs, etc. When creating a document outside of Zenfolio to copy/paste the text, or copying the text from another webpage, you may copy over text formatting from the original source. For example, when copying text from Google Docs, the text will be pasted into the Zenfolio Custom Page Content area as bold text automatically.
It is also worth noting that when there is formatting like font, size, or color added the the text through the the Custom Page Content area, this formatting will override any text settings applied through the Theme being used on your site.
To fix this, so that the text appears correctly on the Custom Page, you will need to remove the formatting from the text.
In the Custom Page, highlight the text you want to remove the formatting from in the Content area.
With the text highlighted, click on the icon in the formatting toolbar. This will remove the text formatting from the highlighted content. Keep in mind that this will remove any font, size, color, bold, italics, and alignment added to the text. After removing the formatting you will need to go back through and add formatting, that you do want, to the text in the Content area.
JotForm Custom Form Not Displaying Correctly
When embedding a custom form from JotForm, and possibly other sources, the Zenfolio Embed option may not handle the content as expected. For example, with the code provided by JotForm, the content will display with a very small width on the Custom Page.
To fix this, you can use the other option for embedding option through the use of the Source button.
In the Custom Page, if your embedded form is not displaying correctly, hover your mouse pointer over the Embedded Content box in the Content area.
Click on the Delete button that appears.
Click on the Source button in the formatting toolbar. The Source button will turn orange.
Click inside of the Content area and paste the embed code.
Click on the Source button again to close the source code area – the Content area may appear empty.
Scroll up and click on Save and Preview to view the code that was pasted into the Source area.
Embedded Content Not Displaying
When using embedded content on your custom page, the embed code being used may not always work properly with the Zenfolio embed option. In this case, you would see the "Embedded Content" box in the edit page, however when you view the live version of the page nothing is seen.
To fix this, you should be able to use the Source option to embed your content into your Custom Page, rather than using the Zenfolio provided Embed option.
To use the Source code area for your embedded content, it is important to note that while Zenfolio does allow you to edit the source code of the Custom Page, it is recommend that you only do this if you are comfortable with editing in this code area. Removing code or adding code here could cause the Custom Page to not display or perform as expected and we are not able to troubleshoot or support any custom HTML coding issues that may be run into.
That being said, there is a simple trick that can help you add code to the Source area by identifying the location you want the content to be.
First, in the Content area of your Custom Page, click on the Embedded content box that is not appearing on the live page.
Click on the Edit button in the top left corner of the Content box.
In the options that appear, go to the Content tab and copy the embed code.
Close out of the options and Delete the embed content box.
In its place, or where ever you want the content to appear, place unique identifying text like "CODEGOESHERE"
Next, click on the Source button in the formatting toolbar
If there is not a lot of content on your Custom Page, you should be able to locate the unique identifying text that you entered.
Once you've located your unique identifying text, highlight it and paste the embed code in its place.
Click on the Source button again and you may see your embedded content now added to the Content area.
Note: sometimes when using the Source area to embed content, the embedded content may not appear int he Content area of the Edit page, but should appear on the live Custom Page.
Click on the Save and Preview button to preview your Custom page where you should see your embedded content now appearing on the page.
Custom Page Does Not Display Correctly On Mobile
When creating a Custom Page for your website, it is important to keep in mind how the content might be displayed on the mobile version of the page. The mobile version of your website, provided by Zenfolio, is optimized to be displayed on mobile devices; however, Custom Pages are only optimized to display simple text pages.
In most cases, with a simple text Custom Page, it will be able to display on the smaller mobile device screens without any issue. When other elements like tables, embedded content, and other custom coding are added to a Custom Page, this can cause the page to not display as expected on mobile devices.
One example is when using a table to organize text and images. When images are used in a Custom Page, they will be placed on their own line, separate from any other content it is next to when viewed on Desktop. This can be seen in the example below:
It is recommended to view the mobile version of a Custom Page as you create it, so that you are taking into account the way the page displays on mobile devices. Because Custom Pages do not need to be published before their saved changed are live on your website, you can refresh the Custom Page on your mobile device after saving your changes.
Spacing Continually Being Added to Text
When creating a custom page that features text and images mixed together, there can sometimes be an anomaly of conflicting formatting between the images and text. This causes the text of the page to continually be spaced out further each time the edit page of the Custom Page is opened. 
This is generally caused when the images are set to a Fixed Alignment while being added right next to normal text, and can be resolved by setting the images to be "Inline With Text".
In your account hover your mouse pointer over the Website button.
Click on Custom Pages from the dropdown menu.
Select the Custom Page you're needing to edit, that is seeing this issue.
With the Custom Page open, remove all the additional spacing that is unwanted.
Then hover your mouse pointer over an image in the page, click on Edit
Select the Set Layout tab
Set the Layout option to be Inline with text
Click Update
If you want the image centered on the page, click on the image and set the alignment in the formatting toolbar
Repeat this for each image in the Custom Page.
Once finished, Save and Close the edit page, and reopen it to confirm that spacing is no longer being added to the text. 