Configuring the Designer Page Settings

In the Designer page, accessed via the PAGES tab of the Website Editor, you can edit the page settings of the Designer. These settings allow you to configure the size of the Designer within the page and to set the availability of the Introduction Popup.

To configure the Designer page settings:

1. Click on the PAGES button in the Website Editor Toolbar.
   
2. Click on the Designer page tab.
3. Click anywhere in the Designer page in the content area.

   The Designer Settings popup will be displayed.

   
4. Configure the Designer page settings as required.

   FULLSCREEN SETTINGS

   The Fullscreen Settings let you configure whether you want the Designer to cover the full screen and also the exit method for different screen sizes. To configure the Fullscreen settings:

   1. Click on the FULLSCREEN SETTINGS row to expand the section.
      
   2. Configure the settings for each of the device sizes.
      • Fullscreen on Mobile/Tablet/Desktop: tick the checkbox if you want the Designer to cover the entire screen. 
      • Exit Designer Method: allows you to choose the method by which your website visitors can exit the Designer.
        • None: does not include a control for exiting the Designer.
        • Home Icon (links to home): displays a Home icon, which allows the website visitor to exit the Designer by going to the Home page.
        • Logo (links to home): displays the store logo, which allows the website visitor to exit the Designer by going to the Home page.
        • Back Button (links to last page): displays a back icon, which allows the website visitor to exit the Designer by going back to the previous page.
        • Close Button (links to last page): displays a close icon, which allows the website visitor to exit the Designer and go back to the previous page.

   INTRODUCTION POPUP

   The Introduction Popup Settings let you configure whether you want an introduction popup to be displayed when the Designer loads. To configure the Introduction Popup settings:

   1. Click on the INTRODUCTION POPUP row to expand the section.
      
   2. Configure the Introduction Popup settings.
      • Show Introduction Popup: tick this checkbox if you want the Introduction Popup to be displayed when the Designer loads.

        This is the default Introduction Popup that will be displayed.

        
      • Override Introduction: tick this checkbox if you want to override the default introduction text.

        An Introduction Title field and a WYSIWYG HTML Editor will be displayed below the checkbox when it is ticked.

        

        Enter the Introduction Title and Introduction Text, and configure the style of the text as required, using the Text Formatting toolbars.

        • Source: lets you toggle the WYSIWYG text and the source code.
        • Clipboard/Undo Toolbar:
          • Cut: removes the selected control or text and places it on the Clipboard.
          • Copy: copies the selected text onto the Clipboard.
          • Paste: inserts the contents of the Clipboard at the current location.
          • Paste as plain text: pastes text as unformatted text.
          • Paste from Word: pastes text while preserving the formatting of the original text.
          • Undo: lets you undo one change each time you click it.
          • Redo: lets you redo one change each time you click it.
        • Font: select a font family from the dropdown list.
        • Size: select a preset font size from the dropdown list.
        • Text Color: Select a font color using the Color popup. Click here for instructions.
        • Basic Styles Toolbar: Lets you format the style of the text.
          • Bold: formats the text with thicker lines.
          • Italic: formats the text with a slant to the right.
          • Underline: displays a line underneath the text.
          • Strikethrough: displays a horizontal line through the middle of the text.
          • Subscript: formats the text as small letters below the text baseline.
          • Superscript: formats the text as small letters above the normal line of type.
          • Remove format: removes all formatting applied to the text.
        • Paragraph Toolbar: Lets you set the formatting of the paragraph.
          • Insert/Remove Numbered List: starts a numbered list at the cursor position and applies a numbered list to selected text/removes a number point from the current cursor position and removes a numbered list from selected text if a numbered list is applied.
          • Insert/Remove Bulleted List: starts a bulleted list at the cursor position and applies a bulleted list to selected text/removes a bullet point from the current cursor position and removes a bulleted list from selected text if a bulleted list is applied.
          • Decrease Indent: decreases the distance between the start of the paragraph and the left margin.
          • Increase Indent: inreases the distance between the start of the paragraph and the left margin.
          • Block Quote: creates a block element to enclose text as an extended quotation. The block is rendered visually by the display of a grey line down the left of the quote container and italicized text that is indented from the left margin.
          • Create Div Container: creates an HTML div container to encapsulate a group of content.
          • Align Left: aligns text to the left margin.
          • Center: centers text horizontally between the left and right margins.
          • Align Right: aligns text to the right margin.
          • Justify: aligns text to both left and right margins.
          • Text direction from left to right: sets the text to start from the left margin and move towards the right margin as you type.
          • Text direction from right to left: sets the text to start from the right margin and move towards the left margin as you type.
        • Links Toolbar: Lets you configure hyperlinks on your text.
          • Link: lets you specify a URL to an arbitrary web address.
          • Unlink: removes a previously configured hyperlink.
          • Anchor: Lets you specify a name for an anchor point that you wish to link to from elsewhere on the page.
        • Insert Toolbar: Lets you insert other elements into the text both.
          • Image: lets you insert an image and configure its appearance.
          • Flash: lets you insert a flash animation.
          • Table: lets you insert a table and specify its properties.
          • Insert Horizontal Line: lets you insert a horizontal line and specify its appearance.
        • Maximize/Minimize: lets you toggle the size of the HTML Editor. Maximize makes the editor the full size of the screen. Minimize reduces it back to its original size.
        • Placeholder: lets you insert your company details into the text block using the data fields in the dropdown list. Details for the data fields are taken from your account information.
          
5. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.