Editor Orientation

This help page will acquaint you with the PageCloud editor and it’s various features.  This image shows the basic structure of the editor screen.

 

In the Bottom Left Corner

SITE DASHBOARD  takes you back to the administration page for the site that is currently being edited. 

PAGE BROWSER  opens a new window on top of the editor screen that displays a list of the pages in the site you are currently working on.   There are two views in this screen – thumbnail and list –  activated using the following controls:

Clicking the “3 dot” icon for any page in either of the views will display a list of operations that can be performed for that page.   These include:  

  • creating a duplicate of the page for rapidly creating similar pages
  • renaming the page
  • Making the selected page the home page. 
  • Deleting the page

Mobile Mode

You can edit a custom view for mobile devices by clicking the mobile icon at the bottom of the screen.  

When in mobile mode you will see a stylized outline of a mobile device.   This is a template that shows a standard mobile viewport and you will need to arrange your content within this template in order for it to display properly on mobile devices.   You can return to desktop mode by clicking the alternate icon.   Click here for more information about:   Mobile Mode

 

In the Bottom Right Corner

There are a number of controls in the bottom right of the editor screen:

 

SHARE  provides several alternatives for sharing the link of the current page.

SHORTCUTS  provides a list of keyboard shortcuts to speed up frequently used operations.    This is also a handy list to browse to acquaint you with all the things you can do with PageCloud.

 

SUPPORT  connects you to information and assistance you will need in creating your site.   This includes help pages,  a user forum where you can post questions of your own or read about what other users are doing.  And of course you can connect directly with us at PageCloud to help resolve any issues you run into.

SAVE  stores all your changes.   Be sure to save regularly to reduce the risk of losing any of your work.

VIEW LIVE  shows you immediately how your site will look on the internet.

LOGOUT  terminates your current PageCloud session and securely logs you out of PageCloud.

 

 

The STYLE tab

FILL adds a color to the body of a selected object such as a rectangle or a circle.   Note that objects that are already visually filled such as images will not show any difference by adding a fill color.

BORDER  adds a line around the perimeter of the selected object.   You can also specify the color of the line as well as the thickness of the line.

OPACITY  is a slider control that applies to the selected object and varies the percentage of the object that displays versus the amount of the background that shows through.   100% opacity will completely obscure the background while 0% opacity will make the object invisible and completely transparent.  

MOBILE STYLES  provides the ability to reset mobile mode which has the effect of removing all mobile mode formatting and you can then reapply the formatting you want.  

 

 

The IMAGE tab

IMAGE LOCATION  displays where an image is stored.   For example an image can be stored inside PageCloud as a site asset, or it can also be a link to somewhere on the Internet.

ALTERNATIVE TEXT  is a short text label you can associate with an image that will display in situations where the image itself may not or cannot be displayed.

IMAGE RESET  allows you to restore an image to the state it was in when it was brought into PageCloud.   This can be useful if you have adjusted attributes of the image such as aspect ratio and would like to quickly reset the image and begin adjusting again.   

BACKGROUND  (Advanced Features) provide various options for how an image is displayed.   Technically this feature places the image inside an HTML DIV tag and provides various options for changing the image’s position in the DIV’s background.

 

 

The LINK tab

HYPERLINK:  Selecting an object and then clicking “Hyperlink” allows you to enter the information required to create a hyperlink from the selected object to another destination.    Click here for more information on  Linking

 

 

The PAGE tab

PAGE VISIBILITY:  The “Apply visible page styles” displays a white area on your page that lines up with the PAGE WIDTH setting.   Keeping your web page design within this area will ensure the page displays well on all desktop screen sizes.

PAGE WIDTH: sets the width of your web page.   This width is used for determining relative placement of objects for centering of your page within a browser window.   Note:  page width’s wider than 1200 appear in red as this can lead to parts of your page display being cut off on smaller screens or narrower browser windows.

PAGE MINIMUM HEIGHT: ensures a minimum height for your page.  

WINDOW FILL  sets a default background color for your page.

WINDOW BACKGROUND  uses the selected image as the background for your web page.

PAGE TITLE  is the text that appears in the top of a browser tab.  This text is also part of the page data used by search engines to index your page and is useful for SEO. 

PAGE DESCRIPTION  is part of the page data used by search engines to index your page and is useful for SEO.

PAGE KEYWORDS  are used by search engines to index your page and are useful for SEO.

 

 

The ARRANGE tab

Back, Front, Backward and Forward:  apply to the selected object(s) or group and operate in the same way as Keynote or Powerpoint to move the selection between display layers in your page.

Align: operates in the same way as Keynote or Powerpoint to align the selected objects in the following orientations:  Top, Center, Bottom, Left, Right.

Distribute: operates in the same way as Keynote or Powerpoint to distribute the selected objects either horizontally or vertically.

SIZE  provides manual px level control to set the width and height of an object.   This is useful when making sure the size of objects is exactly the same.

POSITION  provides manual px level control to set the exact location of an object.  

GROUP/UNGROUP: operates in the same way as Keynote or Powerpoint to group objects into a single object for convenient manipulation.

LOCK/UNLOCK: locks one or more objects on the page.  This is useful when you are doing other edit operations nearby and want the selected objects to remain undisturbed.

 

 

The EFFECTS tab

FULL BLEED:  stretches an image automatically across the full width of the page and will auto-size to whatever display width is used by a viewing browser.

LIGHTBOX GALLERY: automatically groups the selected images which can be displayed at any size, often thumbnail size, and when view live, the images are displayed in a gallery-style viewing frame.   This effect is useful for display a curated collection of images. 

SLIDER GALLERY: automatically groups the selected images and displays them in an animated sequence when viewed live.   This effect is often used in conjunction with FULL BLEED so that the images appear across the entire width of the page.

FIXED HEADER  locks the selected image in such a way that other objects when scrolled will slide over or under the selected image depending on how the display layers are arranged (ARRANGE Front/Back).   

IMAGE ZOOM:  enables a subtle zooming animation for the selected image.   This animation effect is sometimes referred to as the “Ken Burns” effect.

 

 

The DATA tab

This tab is mainly for Advanced users.  The different options provide the abilitity to add meta data to the selected object. 

ID:  lets you attach an identifier to an object that can then be used as an “anchor” to link to from other locations on the same page.

Click here for more information on Linking

 

 

The VIDEO tab

VIDEO CONTROLS

Autoplay:  starts playing the selected video automatically.

Loop video:  plays the selected video continuously

Show video controls:  displays the embedded player controls when available.

Allow full screen:  allows the embedded player to display fullscreen.

Mute video:  mutes the audio in the selected video

VIDEO EFFECTS

Make poster video:  displays the selected video across the full width of the browser window in much the same was as “Full Bleed” does in the Images tab.

Make background video:  displays the selected video as the background for the page.

Thank you! Your comment has been submitted for approval.

Was this article helpful?
Thank you for your feedback!