Wolf Website Designer

Transcripción

1 User Guide Version 1.40 Last updated: Dec 16, 2016

2 Table of Contents What is Wolf Website Designer? Requirements Editor Overview Save and open website Create responsive layout How to create responsive columns How to add a new object How to add a new text box "Responsive Section" vs "Table Grid" How to modify font style, size and color How to apply formatting to table How to add custom HTML code 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 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

4 Requirements Mac OS X 10.9 and up Publish website to your own web host: This app allows you to publish website directly from the app via FTP, SFTP or FTP/SSL. If you do not use FTP, you can also export the web design source files and publish them outside this app. Page 4 ebook created with Orion PDF Author orion.aidaluu.com

5 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 Main design canvas Supports drag and drop, object resize. Right click (control-click) on objects for alignment options. Inspector Side Panel: Controls "New Objects" and "Format" and "Layers" Page 5 ebook created with Orion PDF Author orion.aidaluu.com

6 Save and open website Each website is saved in its own folder, each page saves in "drp" format, this is the native file format for this app. To share design files, each "drp" file can be transferred individually. (i.e. ed as attachment) Open saved website: File Menu > File > Open > Open Website Folder To open saved website, please select saved website "folder" (NOT an individual file) Page 6 ebook created with Orion PDF Author orion.aidaluu.com

7 reate 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 7 ebook created with Orion PDF Author orion.aidaluu.com

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

9 How to add a new object 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 9 ebook created with Orion PDF Author orion.aidaluu.com

10 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 10 ebook created with Orion PDF Author orion.aidaluu.com

11 "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 11 ebook created with Orion PDF Author orion.aidaluu.com

12 ow 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 12 ebook created with Orion PDF Author orion.aidaluu.com

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

14 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. Use HTML code to apply custom formatting as well as add widgets to the design. Page 14 ebook created with Orion PDF Author orion.aidaluu.com

15 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 15 ebook created with Orion PDF Author orion.aidaluu.com

16 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 16 ebook created with Orion PDF Author orion.aidaluu.com

17 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 17 ebook created with Orion PDF Author orion.aidaluu.com

18 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 18 ebook created with Orion PDF Author orion.aidaluu.com

19 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 19 ebook created with Orion PDF Author orion.aidaluu.com

20 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 20 ebook created with Orion PDF Author orion.aidaluu.com

21 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. Page 21 ebook created with Orion PDF Author orion.aidaluu.com