Customizing your Zenfolio website has become even easier with the Website Editor. Your website is composed of customizable blocks that can include photos, text, buttons, and contact forms. To learn more about customizable blocks, click HERE.
|
|
To access the Website Editor, navigate to the Website icon located on the left-hand side of the page within your account's Dashboard. |
Design Settings
Once you access the Website Editor, you will find a preview of your website on the right side. On the left-hand side, click on the Design icon. You will then see the fundamental options for your website, such as the Template, Navigation, Color Theme, Fonts, and Buttons & Scrollbars.
Template
A Template refers to a pre-designed collection of design settings and website components that constitute your website. You have the flexibility to modify the template by selecting the Change Template option and choosing from our assortment of available templates.
When you change the template used for your website, it will solely update the design settings such as colors, fonts, and button styles to align with the selected template. The modification of the template will not affect or remove the blocks that you have added to your website. The custom content and SEO settings of these blocks will be preserved, while only the visual appearance of the website template will be altered.
Navigation
The Navigation options will dictate the placement of the Navigation Block on your website pages, either at the top or on the left-hand side.
If you choose the Top Navigation option, your website will exhibit a Header at the uppermost part of each page and a distinct Footer at the lowermost part of the pages.
If you opt for the Left Navigation option, your website will integrate the Header and Footer into a single Navigation Block positioned on the left-hand side.
Color Theme
The Color Theme options provide the ability to define the overarching color scheme for your website. You can either select a preset based on a Light or Dark background color, or manually customize the colors for each available element on the website.
Color Theme Presets
To facilitate the quick selection of colors for your website, you have the option to choose from a range of pre-established color theme presets. These presets will determine the Background Color, Primary Accent Color, Secondary Accent Color, Button Color, and Text color.
You have the ability to change the preset at any given moment, and you also have the option to further personalize specific colors after selecting a preset. This allows you to make adjustments to just one of the various preselected colors if desired.
You have the option to select the Background Color for your website from a range of choices, including White, Cream, Gray, or Black.
Upon changing the Background Color, the default setting will ensure that the text color for the Paragraph, Navbar, and Footer automatically adapts to provide optimal readability on the chosen Background color for the Website.
Note: It is not going to be possible to choose a custom background color.
The color of some unique forms of texts and interactive items on you website like buttons, headers, and links will be controlled by the Primary and Secondary Accent Color.
- Primary Accent Color - The default accent color that will be used for headers, links, buttons, etc.
- Secondary Accent Color - For some elements, like buttons, you will have the option to change to the Secondary color.
When you select the color, the elements that will use the accent color will automatically update within the blocks of your website.
Button Color
The color of buttons across your website will be managed by this single selection. The chosen color preset will define the default button color, but you have the flexibility to opt for a custom color by manually selecting or entering the desired hex code.
Website Text
By default, the text on your website will utilize the text color from any preset you selected, as well as the adaptive text color option. This adaptive option automatically adjusts the text to ensure optimal visibility against the selected background color.
However, you also have the ability to choose a custom color or select from a range of preselected colors, including White, Black, Dark Grey, Medium Grey, and Light Grey.
By selecting the Reset option, the text option will revert back to the adaptive/default setting.
Fonts
With the Fonts options you can choose one of the available Font Pairings to determine the font style that will be displayed on your website.
If you are unable to find a combination of font styles that you prefer, you have the option to utilize the Mix & Match feature. This feature allows you to choose specific fonts for different types of text that will appear throughout your website.
Note: It will not be possible to choose a custom font for your website.
Buttons & Scrollbars
Within the available blocks for your website, there are buttons that can be utilized. These buttons can be configured to direct users to galleries or external websites. Through the Buttons & Scrollbars options, you have the ability to select from various button styles, including those with rounded or non-rounded corners. When integrating a button into your website using a Button Block, you can further determine whether to use a solid button or one with a border style.
By default, the button colors will align with the Primary Accent Color defined for your website. However, it is possible to modify the buttons to use the Secondary Accent Color.
Furthermore, if you wish to enhance accessibility, you can enable or disable the display of a physical scrollbar on your website.
Site Pages
To modify the settings of your website page, please click on the Navigation icon. This will display the various pages of your website. You can then click on the
icon to rename the page or edit the SEO options. Click HERE for more information about the SEO options. Additionally, you can add sub-pages to create a dropdown menu or change the visibility of pages. Click HERE for more information about page visibility.
Use the icon to add new pages to your website. You will have the option to create a new Blank page, Gallery page, Folder page, External URL, or Blog page (PortfolioPlus and ProSuite only).
All newly created pages will initially be set to Draft status by default. Should you wish for a page to be accessible through a direct link or to appear in your site's navigation menu, you may modify the page's visibility settings accordingly.
Types of Page Visibility
-
Draft Pages represent the initial state of all newly created pages. Drafts are not visible on your website in any form.
-
Hidden Pages are accessible only via direct link and do not appear in the site's navigation menus. To access these pages, one must distribute the link or incorporate it into a button.
-
Public Pages are visible through your site's navigation menus and are easily accessible to all visitors of the website.
Click here for more information about adding pages to your website.
Site Settings
To modify the Site Settings, please click on the Site Settings icon. Within this section, you can update general settings of your website, such as the Google Analytics ID, Facebook Pixel, or unpublish your website. Additionally, you can view your website's domain here, and if you wish to add a custom domain, you may do so through your account settings.
Adding and Customizing Blocks
There are numerous Blocks available for selection on your website. To insert a new Block above an existing one, click on the orange plus icon located above the current Block. Conversely, to add a new Block below an existing one, click on the orange plus icon
situated below the current Block.
Note: It is not possible to add a Block above the Hero Block of your site. Additionally, only one Hero Block can be added.
You will be presented with various options for content Blocks that you may add. Please select the new Block you wish to incorporate.
Editing Blocks
After incorporating a Block into your site, the options for this Block will automatically appear on the left-hand side. To edit an existing Block, simply click on the desired Block, and the options will be displayed on the left.
All Blocks added to your website can be configured to appear on all or specific types of devices (Desktop, Mobile, or Tablet). This functionality allows for the customization of your mobile site independently from your desktop or tablet site. However, other types of Blocks will feature options specific to the content contained within that Block.
For instance, a Block that contains a photo will provide options to select the photo, adjust the focal point, and choose the alignment. Conversely, a Block with only text will offer text alignment options but will not include the option to add a photo. To incorporate both a photo and text, you must select a Block designed to include both elements.
You can also modify the location, select the layout, or delete the Block using the options available in the top right-hand corner of the selected Block.
All modifications executed will be automatically saved within the Website Editor, enabling you to edit your site without the alterations being visible to your clients and other site visitors. Upon finalizing all desired changes to your website, you may then proceed to Publish the updates.
Removing Blocks
To delete a content block, select the desired block and click on the trash icon located in the top right-hand corner of the block.
If you inadvertently remove a block that you wish to restore, you will have a limited opportunity to undo the change by utilizing the Undo Delete button that will appear in the Website Editor. Once this undo option is no longer available, it will not be possible to recover the deleted block.