Wolf Responsive Website Designer
Mac Edition User Guide
Version 1.41 Last updated: Jan 20, 2017
Wolf Website Designer
wolf.aidaluu.com
Table of Contents
Page 2
What is Wolf Website Designer?
3
Requirements
4
Editor Overview
5
Save and open website
6
Create responsive layout
7
How to create responsive columns
8
How to add a new object
9
How to add a new text box
10
"Responsive Section" vs "Table Grid"
11
How to modify font style, size and color
12
How to apply formatting to table
13
How to add custom HTML code
14
How to upload videos, documents and other files
15
How to add a video
16
How to find video URL for YouTube and Vimeo videos
17
How to complete Page Preferences
18
Shared Header and Shared Footer
19
How to define shared header
20
How to define shared footer
21
eBook created with Orion PDF Author
orion.aidaluu.com
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.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
Main design canvas Supports drag and drop, object resize. Right click (control-click) on objects for alignment options.
Page 5
eBook created with Orion PDF Author
Inspector Side Panel: Controls "New Objects" and "Format" and "Layers"
orion.aidaluu.com
Wolf Website Designer
wolf.aidaluu.com
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. emailed 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
Wolf Website Designer
wolf.aidaluu.com
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 7
eBook created with Orion PDF Author
orion.aidaluu.com
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.aidaluu.com
"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
Wolf Website Designer
wolf.aidaluu.com
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 12
eBook created with Orion PDF Author
orion.aidaluu.com
Wolf Website Designer
wolf.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. 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
Wolf Website Designer
wolf.aidaluu.com
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 email design.
Page 14
eBook created with Orion PDF Author
orion.aidaluu.com
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.aidaluu.com
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 "https://www.youtube.com/embed/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
Wolf Website Designer
wolf.aidaluu.com
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 https://www.youtube.com/ 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 https://player.vimeo.com/video An example of Vimeo embed URL is https://player.vimeo.com/video/175172966
Page 17
eBook created with Orion PDF Author
orion.aidaluu.com
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.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. 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
Wolf Website Designer
wolf.aidaluu.com
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
Wolf Website Designer
wolf.aidaluu.com
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
