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.

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

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.

You can add custom code directly into text boxes. Whenever you add custom code into a text box, whether it's HTML, JavaScript or CSS, don't forget to set the text box's formatting to "Ignore Text Line Breaks".

This is an option under the "Formatting" tab of the Inspector Panel. This change will allow Wolf to output your custom code without any line breaks, otherwise you will see line break tags being inserted between lines, this may cause custom code errors.

If you are adding custom code to embed widgets, please note some third party widgets require online connection in order to load properly. In these cases, these widgets may load as blank spaces in local preview, you may need to export the page and publish to your website before you can see the widget loading.

Use Page Preferences to customize page properties such as title, page file name and meta tags.
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.

After you complete your design, please use the export features to export your design to source file format. Exported files will be ready for publishing to your website.

For example, exporting a page with file name "index.html" will generate the HTML file and a folder containing media files (such as photos) used on the page. Exported files may also contain additional folders for web frameworks and scripts.

For this example, please publish both "index.html" and source file folders to the same web server directory. If you make a change to the design, please note these files need to be updated to reflect the latest change.

Depending on your web host, there are a few different ways you can publish your files. Here are the most common options:
- publish by uploading the files directly through your web host's file manager
- publish using your own FTP client. If you do not already have a FTP client, there are a number of great FTP client apps available, both free and paid. Many of our users like:
- FileZilla
- CyberDuck
- Transmit

The upload process is usually quite straight forward, but each web service provider may have slightly different setups. Please get in touch with your web host for more detailed instructions on how to upload files to your website.

Please open the page listing panel to delete and duplicate a web page, see steps below:
1. Toolbar > Page Listings
2. Select the page you wish to delete
3. Choose "Delete"
4. Choose "Save"

For the best user experience, we would suggest selecting a "web font" for your design. When designing using a local system font, your website font style may vary in appearance because not all systems and devices support the same set of fonts. Using web fonts help your website render more consistently across different devices.

Wolf provides a number of the most widely used Google web fonts. These fonts appear at the top of the font list in the font selector. You can also customize settings so the font selector only show web fonts by going to Menu > "Wolf Website Designer 2" > Preferences > "Fonts" > "Show web fonts only"

Custom fonts:
Other than the bundled Google web fonts, Wolf will also retrieve all fonts installed on your Mac. You can manually download and install new web fonts and use these fonts in your design.

Depending on the web font you use, you may need to include a link to it in the Custom Header code in order to ensure the font is fully loaded when the website loads. If you use Google Web Fonts, Google will automatically generate the link you need which can be copied and pasted into Custom Header Code (available under Page Preferences)

To import files from Wolf 1, please see steps below:
1. From Wolf 2, go to File > "Import Files From Previous Versions"
2. From the file open panel, select all design files saved from Wolf 1

A new file compatible with Wolf 2 will be created.

Wolf is not able to directly read HTML Egg files, but all of our web design apps share a number of common attributes which make it relatively easy for users to migrate websites between apps.

If you are rebuilding a website originally developed in HTML Egg, here are a few design tips to help you with migration:

- During the rebuild process, any existing widgets and code segments can be reused.

- If you use "Custom Header Code", code can be directly copied and pasted between the "Custom Header" field from Page Properties.

- Use shared header and shared footer for content that you wish to present on all pages in the website. Wolf use "Shared Header" and "Shared Footer", this is the same as "Basetemplate" in HTML Egg.

If you run into any issues during migration, our support team is here to help. Please do not hesitate to contact us with any questions.

Right click or control-click on object and choose "Hyperlink".
The link option settings control 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.

We recommend exporting the page and launching the exported HTML source file in order to fully test out links. If you are working with a website containing multiple pages, please export all pages to the same output folder when testing relative links.

Please note Wolf 2 For Mac does not connect to the internet, external links and custom widgets requiring online connection will not be active in built-in preview.

For emails, please add a hyperlink in the following format: "mailto:me@domain.com", replace me@domain.com with your own email.
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 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.

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)

Add a dropdown menu:
- Drag and drop "Dropdown Menu" to canvas
- Right click on menu and go to "Table" to customize menu items
- If you are adding the menu to a responsive section, please make sure you're working in a "Single Column Section"

Add submenu items:
- Right click on a menu item and choose "Table" > "Insert Row", repeat this action to add multiple submenu items
- Customize link label, right click on cell and choose "Hyperlink" to add links
- Leave unneeded table cells blank (you do not need to fill in all the table cells)

Tips:
- Always assign links to the "second level" menu items, do not assign links to the "top level" items.
- Links assigned to top menu items will be ignored as top level clicks are designed to open the associated submenu.
- Try to add the menu to the shared "header" so the menu is automatically inherited by all pages in the website.

We recommend exporting the page and launching the exported HTML source file in order to fully test out links. If you are working with a website containing multiple pages, please export all pages to the same output folder when testing relative links.

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)

1. Click to select responsive section
2. Open Formatting (second tab) of Inspector Panel
3. Adjust "Padding", "Margin" and "Section Column Padding" settings

1. Click inside a responsive section column
2. Open Inspector Panel > Formatting Tab (second tab)
3. Update Responsive Grid Settings

The Bootstrap framework maps to 12 grid spaces across the page, the grid spacings are then split out proportionally for multiple columns. As an example, 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!

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"

1. Drag and drop "Background Pattern" object from Inspector panel to the canvas, place into any responsive section
2. Select video file
3. Select image file as placeholder image. (image will be displayed before video fully loads)

The video background is currently designed to be horizontally centered on the device, the video width will adjust to fit the screen width but the background is designed to occupy the full screen height.

General guidelines for adding video backgrounds:
- Test video background in "Preview". (Please note video backgrounds do not show in the editor, please use "Preview" or publish the page in order to test the video background)
- When using a video background, we also recommend adding a photo as the "image background", this allows the page to display the image background while the video is downloading, providing the web visitor with a better experience.
- While you can technically add any sized video as the background, please keep the file size in mind as you select videos. A smaller video will load faster and will consume less server bandwidth. Try to keep your video file size under 10 mb. If you're looking for examples of videos suitable for website backgrounds, check out https://coverr.co

1. Drag and drop "Collapsible Image Panel" object from Inspector panel to the canvas, place into any responsive section
2. Add Image
3. Customize title and description, edit formatting and apply links as needed
4. Preview web page using the built-in Desktop and Mobile preview
5. Click on image in preview mode to test out interactive features with the collapsible panel

1. Drag and drop "Image With Hover Caption" object from Inspector panel to the canvas, place into any responsive section
2. Add Image
3. Customize title and description, edit formatting and apply links as needed
4. Preview web page using the built-in Desktop and Mobile tool
5. Hover on image in preview mode to test out interactive features

Form features allow users to create website contact forms with modern form elements including text fields, checkboxes, dropdown lists, multiple choice selectors, Google reCAPTCHA and more. To add form objects, please drag and drop the form objects into a responsive section. Please note form objects are only available in the Objects list once you have unlocked the web form component through in-app purchase.

While you can add web form objects to any page in the website, we recommend creating a dedicated contact form page.

When adding a text field or email text field object, a default placeholder value will appear within the field. This is the optional placeholder, you can customize or remove this placeholder text as desired. 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.

To add additional multiple choice option, please right click (or control-click) on multiple choice and choose "Add Multiple Choice Option".

Wolf 2 for Mac allows you to preview web form layouts directly within the app, please publish the form to a web server with support for PHP to fully test form submission and email notification features.

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.

Website footer is displayed at the very end of the page, below the page content.

Header and footer are added to pages in the website in "Web Preview" mode and when published.

1. Prepare fav icon images and size them at 16x16, 32x32 and 96x96
2. Open your website in Wolf, navigate to "website_shared_header", go to Settings > Page Preferences and enter the following into "Custom Header Code"
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">

<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">

<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
3. Export and upload source files and the fav icons to your website
4. Clear browser cache (very important) and visit your website to check on the new favicons

Please reference video tutorial at https://youtu.be/GY-bneeeJq4