Wolf. Responsive Website Designer. Mac Edition User Guide

Size: px

Start display at page:

Download "Wolf. Responsive Website Designer. Mac Edition User Guide"

Rosalind Simpson
6 years ago
Views:

1 Wolf Responsive Website Designer Mac Edition User Guide Version

2 Table of Contents What is Wolf Website Designer? Editor overview Save and open website Create responsive layout How to create responsive columns How to add a new photo How to add a new text box "Responsive Section" vs "Table Grid" How to modify font style, size and color How to add image background How to apply formatting to table How to link to and phone number How to add web link How to link to different sections within a page How to add custom HTML code How to add custom CSS code How to adjust spacing between responsive sections How to customize responsive column layout How to upload videos, documents and other files How to add a video How to find video URL for YouTube and Vimeo videos How to add a web form Web form objects How to add form objects How to customize web form placeholders How to customize web form multiple choice object How to complete Page Preferences Shared Header and Shared Footer How to define shared header How to define shared footer Page 2 ebook created with Orion PDF Author orion.aidaluu.com

3 Introduction What is Wolf Website Designer? Build beautiful, responsive websites! Brought to you by the team behind the Orion Mac Suite, Wolf's editor interface is designed with key focuses on simplicity and ease of use. Drag and drop to add objects to your design, click and drag to resize and manage layout. Page 3 ebook created with Orion PDF Author orion.aidaluu.com

Editor overview Add a new page Preview options: Desktop: shows sample preview of design in a desktop client Mobile: shows sample preview of design in mobile client Inspector Side Panel: Controls "New

4 Editor overview Add a new page Preview options: Desktop: shows sample preview of design in a desktop client Mobile: shows sample preview of design in mobile client Inspector Side Panel: Controls "New Objects" and "Format" and "Layers" Main design canvas Supports drag and drop, object resize. Right click (control-click) on objects for alignment options. Page 4 ebook created with Orion PDF Author orion.aidaluu.com

2 and earlier saves in "drp" format) Open saved website: File Menu > File > Open > Open Website Folder

5 Save and open website Each website is saved in its own folder, each page saves in "wolfdrp" format, this is the native file format for this app. (Wolf version and earlier saves in "drp" format) Open saved website: File Menu > File > Open > Open Website Folder To open saved website, please select saved website "folder" (NOT an individual file) Page 5 ebook created with Orion PDF Author orion.aidaluu.com

6 Create responsive layout 1. Launch editor 2. Drag and drop Responsive Sections from Inspector panel to canvas 3. Drag and drop objects such as text boxes and photos into Sections Page 6 ebook created with Orion PDF Author orion.aidaluu.com

Drag Section to canvas The following example uses a "2 Column Section": On

7 How to create responsive columns 1. Inspector Panel > Choose Responsive Section 2. Drag Section to canvas The following example uses a "2 Column Section": On a mobile client, the 2 column Section is designed to stack into a single column. Page 7 ebook created with Orion PDF Author orion.aidaluu.com

8 How to add a new photo When adding new objects, please make sure you are adding it to an available empty space "inside" a responsive section. When a new object is dragged over, you will see the cursor turn into a "+" symbol when the editor identifies there is sufficient space for a new object. Page 8 ebook created with Orion PDF Author orion.aidaluu.com

9 How to add a new text box 1. Open Inspector Panel, click "Objects" tab. Drag and drop "Text Box" onto the canvas. 2. Drop text box to desired section column 3. "Double click" on text box to edit text content Page 9 ebook created with Orion PDF Author orion.aidaluu.com

10 "Responsive Section" vs "Table Grid" A "responsive section" auto resizes its layouts when viewed on a mobile size client. For example, a "two column" responsive section will automatically fold to form a stacked single column. All contents inside the sections inherit the responsive properties and will rearrange layouts according to the section locations. A regular "table grid" is static. While the width of the table grid will resize to respond to different sized screens, the number of columns will stay the same (does not fold or stack) Page 10 ebook created with Orion PDF Author orion.aidaluu.com

11 How to modify font style, size and color 1. Open Inspector Panel, click "Formats" tab 2. Select text box 3. Modify "Font Style and Font Size" in Inspector Panel to modify text size and style 4. Click on "Color - Text" to update font color Page 11 ebook created with Orion PDF Author orion.aidaluu.com

How to add image background 1. Open Inspector Panel, click "Objects" tab (first tab) 2. Drag and drop "Background Pattern" onto the canvas or into a responsive section 3.

12 How to add image background 1. Open Inspector Panel, click "Objects" tab (first tab) 2. Drag and drop "Background Pattern" onto the canvas or into a responsive section 3. Select image you wish to use as background To remove un-wanted background, please right click (or control-click) on background image and choose "Remove Background Image" Page 12 ebook created with Orion PDF Author orion.aidaluu.com

How to apply formatting to table To format a table grid, please see these steps: 1. Select table grid 2. Use the Inspector Panel to apply formatting 3.

13 How to apply formatting to table To format a table grid, please see these steps: 1. Select table grid 2. Use the Inspector Panel to apply formatting 3. From the Inspector Panel, customize table font color, style and font size. You will also be able to adjust text alignment and grid cell background color. To apply formatting to a specific cell inside the table, please first click on the cell (checkmark icon will be displayed) and then adjust properties from Inspector Panel. Page 13 ebook created with Orion PDF Author orion.aidaluu.com

How to link to email and phone number For emails, please add a hyperlink in the following format: "mailto:me@domain.com", replace me@domain.

For phone numbers, please use a link in the format of "tel:123456789", this link will only trigger the phone app if used on a device that supports

14 How to link to and phone number For s, please add a hyperlink in the following format: "mailto:me@domain.com", replace me@domain.com with your own . For phone numbers, please use a link in the format of "tel: ", this link will only trigger the phone app if used on a device that supports calls. For example, this link will allow users to call if the user activates the phone link on a mobile device. If the user activates the link on a computer not capable of making phone calls, the link will not trigger any actions. Page 14 ebook created with Orion PDF Author orion.aidaluu.com

The "parent" option is used only if you're using frames on the page.

15 How to add web link Right click or control-click on object and choose "Hyperlink". The link option settings controls how the link "launches". In most scenarios, you will only need to select between "self" (same window as link )and "new" (brand new browser tab). The "parent" option is used only if you're using frames on the page. Here are examples of HTML link generations for different link option settings: <li><a href= target=_blank>launch in new window</a></li> <li><a href= target=_self>launch in existing window</a></li> Page 15 ebook created with Orion PDF Author orion.aidaluu.com

16 How to link to different sections within a page To link to a responsive section on a web page, please use a web hyperlink in the format of "#sectionid", replace sectionid with the customized ID you have assigned to the section. To assign a section ID: 1. Select responsive section 2. Choose "Format" tab of Inspector Panel 3. Enter a unique section ID Please select an ID that does not contain spaces. We will set up an example to help illustrate: 1. Let's create two pages in this website: page1.html and page2.html 2. On page1, let's create "page1sectiona", if you wish to link to sectiona from within the "same" page, you may create a link directly to #sectiona 3. If you wish to link to "page1sectiona" from page2, please create a link in the format of: page1.html#page1sectiona 4. If you wish to apply these links in a footer or header that is shared by many different pages in the website, please always remember to use the full page file name followed by the anchor section ID. (i.e. page.html#sectionid) Page 16 ebook created with Orion PDF Author orion.aidaluu.com

For tech savvy users comfortable with HTML markup tags, you will be able to add HTML code directly into text boxes and

17 How to add custom HTML code Drag and drop text boxes directly into "responsive sections". You will be able to apply a number of formatting such as font colors and styles directly from the Inspector Panel. For tech savvy users comfortable with HTML markup tags, you will be able to add HTML code directly into text boxes and table grid cells. Please set "Text Line Breaks" to "Ignore Line Breaks" for HTML Snippets. Page 17 ebook created with Orion PDF Author orion.aidaluu.com

Open Inspector Panel, click "Objects" tab. Drag and drop "Text Box" onto the canvas. 2.

18 <head> section CSS How to add custom CSS code 1. Settings > Page Preferences 2. Enter code into "Custom Header Code" 3. Code here will appear within the <head> tag Inline CSS 1. Open Inspector Panel, click "Objects" tab. Drag and drop "Text Box" onto the canvas. 2. Drop text box to desired section column 3. Wrap text content with any custom inline CSS code as desired Page 18 ebook created with Orion PDF Author orion.aidaluu.com

19 How to adjust spacing between responsive sections 1. Click to select responsive section 2. Open Formatting (second tab) of Inspector Panel 3. Adjust "Padding", "Margin" and "Section Column Padding" settings Page 19 ebook created with Orion PDF Author orion.aidaluu.com

20 How to customize responsive column layout 1. Click inside a responsive section column 2. Open Inspector Panel > Formatting Tab (second tab) 3. Update Responsive Grid Settings The example shown in the screenshot uses a "two column" responsive section. The Bootstrap framework maps to 12 grid spaces across the page, the default settings for a "two column" responsive section splits the 12 grid spaces, so each column occupies 6 grids. Mobile devices map to extra small screen size, each column will occupy 12 grids (the full screen width), this allows the section columns to automatically stack on mobile devices. TIP: Please keep default responsive grid settings unless you are experienced with the Bootstrap Grid System. Wrong settings create layout problems! Page 20 ebook created with Orion PDF Author orion.aidaluu.com

How to upload videos, documents and other files If you wish to upload videos and

Set up your FTP account in Wolf so you're able to upload files to your website 2.

21 How to upload videos, documents and other files If you wish to upload videos and files from your own computer, please follow these steps 1. Set up your FTP account in Wolf so you're able to upload files to your website 2. Go to Publish Menu > "Upload Documents and Other Files", select and upload your file 3. Once uploaded, click on "Copy Link to Uploaded File", this copied text is the URL to your newly uploaded file Page 21 ebook created with Orion PDF Author orion.aidaluu.com

22 How to add a video 1. Drag and drop to add a responsive section onto the page 2. Drag and drop to add "Video" into the responsive section The video URL in the video code is " o5soqddhzg". When you implement this, please make sure you replace this URL with your own URL. Page 22 ebook created with Orion PDF Author orion.aidaluu.com

23 How to find video URL for YouTube and Vimeo videos How to find embed video URL from YouTube? 1. Open YouTube and navigate to the video you wish to embed 2. Click on the "Share" button and then click on "Embed", copy the video URL in the embed code, this URL starts with the prefix embed/ How to find embed URL from Vimeo: 1. Open Vimeo and navigate to the video you wish to embed 2. Click on the "Share" button and copy the "Embed" code 3. From the embed code, identify the Video URL, this video URL will start with the prefix An example of Vimeo embed URL is Page 23 ebook created with Orion PDF Author orion.aidaluu.com

Please make sure you are launching Wolf in multidoc editor mode.

24 How to add a web form To create a web form, pleas go to File Menu > Add to website > Blank web form. Please make sure you are launching Wolf in multidoc editor mode. New web form will generate a file in PHP format. Page 24 ebook created with Orion PDF Author orion.aidaluu.com

Web form objects Please note input objects such as text fields and comment boxes are only available when you are working with a web form (they do not

25 Web form objects Please note input objects such as text fields and comment boxes are only available when you are working with a web form (they do not show on regular web pages) A web form is in php format, a regular page is in html format. Page 25 ebook created with Orion PDF Author orion.aidaluu.com

26 How to add form objects 1. Add responsive section 2. Drag form object from Inspector Panel to canvas Page 26 ebook created with Orion PDF Author orion.aidaluu.com

27 How to customize web form placeholders The placeholder is a "hint" that describes what you expect the user to enter into the form field. Placeholder values are displayed in light gray before the user enters anythings into the form field. Placeholder values are optional. Example without placeholder: Example with placeholder: Page 27 ebook created with Orion PDF Author orion.aidaluu.com

28 How to customize web form multiple choice object To add additional multiple choice option, please right click (or control-click) on multiple choice and choose "Add Multiple Choice Option". Page 28 ebook created with Orion PDF Author orion.aidaluu.com

29 How to complete Page Preferences The Page Preferences section contains file page and page title information for your web page. Under Page Preferences, you will also be able to enter custom meta keywords and meta descriptions, these fields are not displayed on the page but will be used by search engines for indexing your page. Page 29 ebook created with Orion PDF Author orion.aidaluu.com

Shared Header and Shared Footer If you have more than one page in the website, using a shared header and shared footer will help you maintain a consistent look across different pages.

30 Shared Header and Shared Footer If you have more than one page in the website, using a shared header and shared footer will help you maintain a consistent look across different pages. Using shared header and footer is optional. When defined, all pages in the website will automatically inherit designs from these files. Website header is displayed at the very top of the page, above the page content. Header and footer are added to pages in the website in "Web Preview" mode and when published. Website footer is displayed at the very end of the page, below the page content. Page 30 ebook created with Orion PDF Author orion.aidaluu.com

31 How to define shared header 1. Toolbar > Create New > Define Shared Header 2. Customize default header with navigation menu, text boxes and photos. This example header contains a drop down navigation menu and a banner section. Page 31 ebook created with Orion PDF Author orion.aidaluu.com

32 How to define shared footer 1. Toolbar > Create New > Define Shared Footer 2. Customize default footer by new text boxes and photos. This example footer contains two responsive sections. Test shared header and footer in Web Preview Page 32 ebook created with Orion PDF Author orion.aidaluu.com

Org Chart Designer Pro

Org Chart Designer Pro User Guide Version 3.73 Last updated: Feb 12, 2016 Table of Contents Editor overview How to add from template File save format Format colors Update line thickness and line pattern