The Page Editor allows you to drag and drop different Page Elements on to your page. This is how you add content to your page. You can add text, images, video, galleries, horizontal line breaks, contact forms, spacers, and HTML. Click the icon at the top of the Page Editor and then drag the Page Element to where you want it to appear.
Use the text element to add text to your page, such as your bio, client list, client testimonials, contact info, etc.
Use the built-in text editor to:
• Style your text (bold, italicize, underline).
• Format your text using Heading 1-6 (these are set in the Design Editor).
• Create links and email links by highlighting the text and clicking the link icon.
• Make bulleted or numbered list text.
• Edit the HTML directly by clicking the Source button.
Use the image element to upload a single image to a Page. This is useful for adding a photo to a Bio page, a map graphic to your Contact page, a logo to your Clients page, etc.
Note: Images uploaded using the Image Element are NOT resized during the Upload process. To ensure the fastest possible loading times for your images on Pages, resize them to an appropriate size before uploading them to a Page. A good rule of thumb is to upload an image at about 2x the size you intend for it to be displayed. This will provide adequate quality to allow for scaling as well as better image quality on high-resolution displays (ie Retina quality displays).
Using the Image Element:
• Click the image icon and drag and drop it to where you want your image to appear.
• Click the Plus (“+”) button and then click the Upload a New Image button. When the System file browser appears, locate the file you wish to use and select it.
• Once the image has successfully been uploaded, it will appear in the preview window.
• Adjust the size of your image by dragging the grey horizontal bar at the bottom of the image. You cannot expand an image larger than the original size.
• Click the Gear icon in the top right corner of the image to access Image Options. You can replace the image by uploading a new image, add a link to your image, scale the image to fill the column width, and set the image alignment.
• Image size is constrained by column width - image will display at 100% or if it is wider than the column, it will be scaled down to fit width wise.
• To delete an image, click the “X” in the top right corner of the image.
• Note: Images uploaded to a Page are NOT saved to your All Images folder.
Use the Video element to embed a video uploaded to a video sharing service (YouTube or Vimeo) on your Page. Once you have dragged the video element to your page, click the Gear icon in the upper right corner of the video placeholder image. Enter your video’s Share link from vimeo or YouTube in the provided field. The video player window will scale to fit the width of the column.
Use the Gallery Element to embed a gallery of images to a page. Gallery Elements allow you to show multiple images on a non-gallery page (i.e. photos of our studio, pictures of wedding albums we've done for past clients, staff photos, etc.).
You can also create a Gallery Page with custom settings that differ from your global gallery settings. This allows you to set your global Gallery style to Grid in the Design Editor, yet still have a horizontal scrolling gallery on your Homepage.
You will need to first create the Gallery before you can embed it on the Page. If you only want the Gallery to appear on a Page and not in your Navigation Menu, create the Gallery in your Hidden Content.
Using the Gallery Element:
• Click the Gallery icon and drag and drop it to where you want your gallery to appear.
• Click the Plus (“+”) button and then select from one of your existing Galleries in the drop down menu.
￼• Replace gallery by selecting a new gallery from the drop down and edit your Custom Gallery Settings. To delete the Gallery, click the “X” in the top right corner of the image.
• To override your global Gallery style and settings from the Design Editor, check the Custom Gallery Settings box. You can then select a new Gallery style and set options for your Info Panel, Toolbar and Arrows.
Note: If you select a different gallery style from your global gallery style, the gallery style options are defined within the Design Editor. For example, if your global gallery style is Slideshow but you have set this Gallery Element to Grid, check the settings for your Grid Style Options in the Design Editor. Please see the instructions for setting your Gallery Style Options.
• Once the gallery has successfully been uploaded, it will appear in the preview window.
• Adjust the size of your gallery by dragging the grey horizontal bar at the bottom of the image.
• Click the Gear icon in the top right corner of the image to access Gallery Options. You can
replace gallery by selecting a new gallery from the drop down and edit your Custom Gallery Settings.
• To delete the Gallery, click the “X” in the top right corner of the image.
Use the line element to add a horizontal line between elements on your page. This allows you to visually separate blocks of text and images. Click the Line icon and drag and drop it to where you want your line to appear.
Add a Contact Form to your page and collect contact details from your site visitors. The Form is already prepopulated with Name, Email Address, and Message fields. Submitted forms will be emailed to the email address you have designated.
Using the Form Element:
• Click the Form icon and drag and drop it to where you want your gallery to appear.
• The form will appear in the preview window.
• Click the Gear icon in the top right corner of the form to access Form Options. Enter your email address – this is who will receive the submitted forms. Enter a confirmation message that will be shown to anyone who submits the form.
• To delete the Form, click the “X” in the top right corner of the image.
The Spacer element allows you to add a block of space to your page. Inserting a block of space between elements is how you will resize images and text elements. Since elements will fit to the width of the column you have created, you can insert a spacer element to decrease the width of the columns.
You can also use spacers between rows of content. You can adjust the size of the spacer by dragging the grey horizontal bar up and down. To expand the spacer width-wise, click and drag the handles that appear on the left and right side of the spacer.
To delete the spacer, click the click the “X” in the top right corner.
Using the HTML Element:
• Click the HTML icon and drag and drop it to where you want your HTML to appear.
• Double-click the HTML placeholder text to edit.
• Enter your HTML code within the provided field.
• To delete the HTML element, click the “X” in the top right corner of the image.