Mac SEO Blog

EverWeb’s Navigation Menu Widget has been updated in version 2.7 so is now responsive! What this means is that the Navigation Menu Widget can automatically adjust to suit the environment you are working in. In essence, this allows you to switch between the ‘traditional’ navigation and a ‘hamburger’ icon styled navigation at a user specified screen width.  The new hamburger icon is highly customizable so that you can get exactly the look to match perfectly with your website.

Getting Started

To start, add the Navigation Menu widget to your page by drag and dropping it from the Widgets tab on to the page, Size and position the widget as you require. For more on customizing the Navigation Menu widget please refer to the blog posts EverWeb’s Navigation Menu Widget: Adding a Menu and Styling Options.

If you already have the navigation Menu widget on the page, select it.

Using the Responsive Options

With the Navigation Menu Widget selected, click on the Widget Settings button in the Inspector Window. You will see the new ‘Responsive Options’ and ‘Hamburger Button’ sections have been added to the widget. We will begin with the Responsive Options.

1. Activate the Responsive Options by ticking the ‘Responsive Navigation Bar’ checkbox.
2. The ‘Appear at Width’ option lets you set at which point the Hamburger navigation is displayed in preference to the regular Navigation Menu. The default value is set to 700 pixels which is usually good for most mobile devices. To see how this option works,  drag the right hand vertical edge of the EverWeb window to the left until the navigation menu changes.
3. When the navigation menu changes you will see that the hamburger icon appears at the top of the page, regardless of where you have placed the navigation as this is the location it would be at on a mobile device. The original location of the navigation menu still appears on the Editor Window as an empty box. You can still work with the widget as usual.
4. If you want to have a hamburger style navigation menu as default for your website in place of the traditional navigation, set the ‘Appear at Width’ value to ‘99999’.
5. As different devices have different screen widths it is difficult to give precise guidelines as to which width to use for which devices.  However, 700 pixels should be suitable for most mobile devices although you may have to go down to 500. Don’t forget to test both desktop and mobile devices before publishing your website.
6. To set where the hamburger appears, select the Menu Position drop down and choose either Right or Left.
7. The hamburger navigation has a horizontal strip across the top of the page which has its color set by ‘Use Background Color’. To change the background color, first tick ‘Use Background Color’ then select the color you want using the Background Color swatch.
8. If you prefer not to have a color set, deselect the ‘Use Background Color’ tick box.

Hamburger Button Options

The Hamburger Button Options section of the widget allow you to customize the Hamburger icon.

1. To change the hamburger icon’s menu label just overtype ‘MENU’ with the label you want. If you do not want any label at all, delete the text from the ‘Label’ box.
2. To customize the size and font of the label click the ‘Fonts’ button at the bottom of the Hamburger Button Options to access the Fonts Panel. Select the font and font size that you require. When you change the font size of the label, the Hamburger icon will also be resized.
3. The color of the Hamburger icon itself is set using the Hamburger Color swatch.
4. To change the background color of the icon and label, tick the ‘custom Background Color’ option then use the ‘Background Color’ swatch.

Dropdown Menu Options

When your click on the Hamburger icon, a drop down menu of choices will appear based on how you have set up your menu structure in the Web Page List.

The color of the menu items is determined from the Hyperlinks Inspector as each menu item is in fact a hyperlink to a page in your website. To change the background of the drop down menu items for the navigation, as well as the separator line, use the Drop Down Menu options in the Widget Settings.

EverWeb’s new Navigation Menu widget options bring new responsive options to EverWeb. We hope you enjoy these new options! If you have any questions about this blog post, please let us know, we’re here to help!

Video Walkthrough

To find out more about using the updated Navigation Menu Widget check out our YouTube video Building a Responsive Navigation Menu.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re pleased to announce the immediate availability of EverWeb version 2.7 which features over half a million royalty free Stock Photos, an updated Contact Form Advanced widget and an updated Navigation Menu widget which now includes fully customizable responsive menu options. There are also lots of other minor feature additions as well as maintenance and stability improvements.

EverWeb version 2.7 is available in two versions:

• OS X 10.7 – 10.8 (32-Bit):  Lion, Mountain Lion
• OS X/macOS 10.9 and higher (64-Bit): Mavericks, Yosemite, El Capitan,  Sierra, High Sierra

If you are running OS X 10.6, EverWeb has been updated to version 2.5.2 which includes maintenance and stability enhancements.

When updating to EverWeb version 2.7, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.7 Includes…

[NEW] Responsive navigation bar, automatically updates to your visitors’ device or screen
[NEW] Over 500,000 free stock photos to use on your website (Window menu->Stock Photos)
[NEW] Contact form controls including section headers, field descriptions, more font customizations
[NEW] New custom button option in the Contact Form Advanced widget
[NEW] You can now select None for the Favicons to remove one
[NEW] Shadow colors can now be defined in the Font Panel

[FIX] Closing a project while publishing would crash
[FIX] FTP Passwords are saved properly now
[FIX] Improved drawing quality of some images
[FIX] Linking to files within a blog post works properly now
[FIX] Publishing changes after renaming a folder publishes your website properly again
[FIX] Using 301 redirects with HTTPS websites works properly now
[FIX] Scroll positions work with directory pages now
[FIX] Tool tips and object positions are displayed again for 64Bit version of EverWeb
[FIX] Fixed exporting CSS issues when using a background image for shapes
[FIX] Fixed issue with widgets that use media files
[FIX] Fixed a crash on launch if a corrupted font was installed on your computer
[FIX] More responsive typing in the blog editor
[FIX] Fixed issue with incorrectly entered FTP details
[FIX] Fixed a crash when selecting a date for a blog post
[FIX] Fixed issues with some third party, older templates so they work properly
[FIX] Fixed issue with linking external files in blog posts
[FIX] Fixed contact form with & in a textbox or as a field name
[FIX] Fixed potential crash with Live Photos

How To Update To EverWeb version 2.7

You can easily update to EverWeb version 2.7 by

1. Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

Remember, you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.

EverWeb version 2.7 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free updates and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, you can purchase 1 more year of updates and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of Everweb that you need, either the OS X 10.6 version,or OS X 10.7 and later, version.

More Information About EverWeb version 2.7

If you need more information about the new version of EverWeb, please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb version 2.7 Video Walkthrough

Find out more about the new release of EverWeb in our What’s new in EverWeb version 2.7 video.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

As the saying goes, time is money. However, time is something we can never get back, so working efficiently is one way we can reclaim valuable time! Why take the long route when you can achieve what you want quickly and effortlessly by taking the short route? EverWeb has some great ways to shorten your website development time so you can have more time for yourself…

1. Short Cut Keys

We all use them, but are you taking advantage of all that is there? Learning the shortcut keys for functions that you often perform with a mouse or via a menu can be a great time saver. You will find the shortcut keys displayed on the Menubar in EverWeb. There are a couple of other shortcut keys that are not on the Menubar which are also helpful:

Distance to Object: Select an object, then hold down the Option (Alt) key and mouse to another object to see the distance between the two.

Moving Objects: Checkout Tip 6 below on  using the Cmd+Shift short cut key.

Moving Obscured Objects: Use the Cmd+Option shortcut keys.

For more information on moving objects, take a look at our New Ways to Move and Resize Objects in EverWeb 2.1 blog post.

2. Secondary Clicking

A secondary click is a two finger tap on the mouse or trackpad. It’s one of the best time savers in EverWeb as when you secondary click, you get a context sensitive list of menu options. So, for example, you will no longer need to go the menu Arrange-> Move to Back when you can just secondary click on the object you want to send to back instead.

3. Remember to Backup

The ultimate time saver if your project file gets damaged or you need to roll back to a previous version of your project. Use the shortcut key Cmd+. (Period) to access the EverWeb-> Preferences menu then click on the Backup tab to implement your backup program. Do not forget to also backup your computer itself to an external backup device on a daily, or even hourly, basis depending on your usage.

4. Add The Website URL when Publishing to Folder

This was one of the small additions introduced in EverWeb version 2.5. Adding in your website URL in to the Folder Location section when publishing to a Folder via Site Publishing Settings will make the published files accurately reflect your website. This is very useful if you publish on your local disk for testing purposes.

5. Use The ‘+’ Button to Add a Master Page

There are a number of different way to create a Master Page in EverWeb. The ‘+’ button is located to the right of the Master Page dropdown in the Master Page section of the Inspector Window. The button saves you having to mouse across to the Web Page List or to the Navigation Menu to create a new Master Page.

6. Easily Move Objects on Your Page Using Cmd+Shift Keys

This key combination is a great time saver when you need to create space on your page by moving objects below the currently selected object down the page en masse. Simply hold the Cmd+Shift keys down, then drag the selected object up or down the page. Everything beneath the selected object moves at the same time. When using this feature, remember that any objects that are on the same level as the selected object are not be moved.

7. Delete Unused Assets

If your Project file performance is slowing, try deleting any unused assets that you no longer need but are still in the Assets List. To do this, select the Assets tab in the Inspector Window. Just below the Assets search bar is an  up/down arrow symbol on the right hand side, opposite the word ‘Assets’. Click on this symbol and select ‘Find Unused Assets’ from the submenu. When the search is complete you can delete the assets that are no longer needed. As your Project file becomes smaller it should work more efficiently.

8. Preview without Using Preview

When working on your web pages you may want to get an idea of how the page looks. If you are working on a large Project file, using Preview may take too much time as, by necessity, it processes all of the Project’s pages when generating  the Preview. Instead, if you just want a ‘quick look’ at how the page will look, try Presentation Mode instead (Cmd+period shortcut key toggle). Presentation Mode is located on the Window menu. The feature strips out all of the UI elements of EverWeb. When using Presentation Mode, if you want to turn off the page layout, use the Window->Hide Layout menu option. If you have hyperlinks indicators visible you can hide these using the EverWeb=> Preferences=> General-> Show Hyperlinks Indicator checkbox.

Remember that if you are using Presentation Mode you are still working with the live Editor Window, so use with caution!

9. Setup Default Styles

This is an easy one to miss when you first start your Project and just want to crack on with creating your site! Set your Default Styles as soon as you can. Use the Format-> Default Styles menu to define the default look of your text font, size and color, the default color for your shape objects and shape strokes and the defaults used for hyperlinked objects in normal, mouse over and mouse down states. If you set up these defaults immediately, you will save much time and work later on!

10. Other Available Resources

There are lots of resources available for EverWeb users such as this blog, our Facebook page, YouTube channel and  EverWeb Knowledgeable articles that are available from the Support tab on the EverWeb website. Finally, there is the EverWeb Discussion Forum and our Support service if you have a question or need help and support.

If you have your own tip about productivity in EverWeb, why not share it with the community below in the Comments Section?

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Color Picker is an often used tool when building your web pages. In EverWeb it’s easy to access through the Toolbar, by the Window-> Show Colors menu option or by using the Cmd+Shift+C short cut key toggle. Whenever you click on any color swatch in the Inspector Window, Color Picker is also there, coming up front and center.

The Color Picker has five available tabs:

• Color Wheel
• Color Slider
• Color Palette
• Image Palette
• Crayons

Whilst selecting the color that you want to use is self explanatory, there are some other useful things to know about Color Picker…

1. Resizing the Color Picker

Resizing the Color Picker is a useful if you are using a large screen and need Color Picker to be more visible. Just grab one of the corners of the Color Picker window and drag outwards to make Color Picker larger. You can also resize the Color Picker vertically to make it taller, just grab the top of the window and drag the mouse pointer higher. This is also useful if you cannot see all of your saved colors in the color palette at the bottom of Color Picker.

2. Saving Colors

If you select a color in Color Picker, it is displayed as the large swatch in the bottom left corner of the Color Picker app. If you want to save the selected color just drag the color from the large swatch on to one of the empty small swatches. By default, there are two lines of small swatches. Drag the color to where you want it and drop it in to place. If there is a color at the drop location already, the color and all those to the right of it will move along one spot to accommodate the new color. Swap colors around just by dragging and dropping the color you want to move to a different swatch location.

3. Removing a Color

To remove a color from the saved color swatch palette, drag and drop the color you want to remove to the Trashcan. This appears to be the only way to delete colors you have saved and no longer want in the saved swatch palette.

4. Color Matching

If you need to match up a color to replicate it on your website, you used to only have the option of using the Digital Color Meter. Now in EverWeb, there is an eye dropper that does the the same thing as Digital Color Meter. Start by clicking on the eye dropper which is to the right of the large color swatch in the bottom left hand corner of the Color Picker.

The mouse pointer will become a magnifying glass. This is great as it enables you to pinpoint the exact color you want more easily. Once you have found the color you want to color match, just click and the color is then available as the large color swatch. You can then use that color elsewhere. If you want to save the color just drag it to one of the small color swatch locations.

5. Accessing Saved Colors

If you have more than two rows of saved colors, there are a few ways in which you can view colors if they are not easily visible. You can resize the Color Picker so that it reveals any rows of small color swatches that are not visible. Alternatively grab the top of the Color Picker Window and stretch it vertically until the color swatch rows that are hidden become visible. If you want to keep the view at only two color swatch rows, drag vertically when the mouse pointer is over the color swatch rows. You will see that any hidden rows will scroll into view. A side bar slider also appears when you perform this dragging action. Lastly, resize the Color Picker horizontally. Stretching the Color Picker will make longer rows of the small swatches.

6. Making Your Own Color Palette

Color Picker allows you to make your own Color Palette. To make your own palette:

1. Select the Color Palette tab which is the center tab of the Color Picker.
2. Click on the Settings Cog.
3. Select New.
4. An ‘Unnamed’ color palette is created with one unnamed color
5. Drag any of the small color swatches that you want included into the new color palette. When you do this, they will also be ‘Unnamed’.
6. Double click on the ‘Unnamed’ label and rename each color that you have added to the color name you want to use.
7. To add the large swatch color to your color palette just click on the ‘+’ button.
8. To remove a color from the color palette, highlight it in the list and click on the ‘-‘ button.
9. To name your color palette, use the Settings Cog again and select ‘Rename’.

Color Picker is a surprisingly versatile tool with more options than first meet the eye. Let us know if you have a tip of your own in the Comments sectoin below!

Video Walkthrough

As well as this blog post, we also have a video walkthrough of Color Picker on YouTube.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s Language Localization feature is a great way to target geographic local markets and audiences or for multilingual websites that targets different countries and/or language groups. When designing and building a website, you probably have some kind of audience, focus or target in mind right from the outset. Even if your website seems to have no specific target market or audience, you can still apply some SEO (Search Engine Optimisation) and SERP (Search Engine Results Page) implementation with Language Localization.

Targeting a Non-Target Market

If you think your website does not have a target market or audience, think again, as you will have written your site’s pages using at least one language.  At this level, your market or audience scope is probably very large e.g. all English, Spanish, or Chinese speakers. Even at this scale, you have a place to start for SEO and you can optimize more as you learn more about your target market later on.

At this scale, set your Language Localization at the global level in your EverWeb Project file. To do this:

1. Go to the File-> Edit Publishing Settings menu, or click on your Project name in the Web Page List. The Site Publishing Settings will appear.
2. In the ‘Head/Footer Code’ section is the ‘Language’ option. Click on the drop down box and select the language that your website is written in e.g. if your website is written in Spanish, select ‘Spanish’.
3. When you click on the drop down to open the list of available languages, start to type the name of your language. The language list uses predictive search. As you type, the closer to your language you will get in the list.
4. Once you have selected the language you want to use, publish your entire website as the global nature of the language localization will be applied to all of the pages in the Project file

Your website will use the language localization setting to better to serve web visitors with results that are geared relevant to Spanish speaking audience.

Narrowing The Market Focus

You probably noticed that as well as the ‘Spanish’ language option, there were other ‘Spanish’ language options available on a country by country level. If your website is geared towards only one specific country, select the Spanish country option for your market e.g. ‘Spanish (Chile)’ This will help better refine your SEO for your target market or audience.

Market Targeting with Multilingual Websites

If you have a website that uses more than one language, using EverWeb’s Language Localization feature on a page by page basis is probably the most suitable way to optimize for a better SERP. Again, it’s easy to set up:

1. First set up the primary language that website uses in Site Publishing Settings as we did above when setting up Spanish (Chile) as our primary language.
2. The next step is to use the Language Localization drop down menu on each page of your website that uses the secondary language.
3. To do this, select a page in your Project that uses the secondary language.
4. Next go to the Page Settings tab in the Inspector Window.
5. In the ‘Page Details’ section is the ‘Language Localization’ drop down. Select the language and country that you require. In our example,  the Project file is mainly in Spanish as it is targeting the Chilean market, however, there are also some pages in Portuguese for the Brazilian market. In this case, set the page  Language Localization as Portuguese (Brazil).

When using Language Localization on a page by page basis in your website, it does not matter if you have more than one language/country combination in the Project file as long as you each has its own page. In our example above, we could also have had pages for Spanish speakers in Bolivia. In this case, the Language Localization would be set to ‘Spanish (Bolivia)’ to more specifically target Bolivian Spanish speakers.

If you have created multiple project files for your multilingual website and linked them together using external URL links, it will be easy to implement Language Localization at the website (global) level for each project file.

EverWeb’s Language Localization feature can help your SEO and SERP rankings at all levels within your website, even if your website appears not to have any  specific market or audience focus.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Preview Server was introduced in EverWeb version 2.5, enhancing EverWeb’s Preview feature by presenting an exact local preview of what you would see if you  published your website. In EverWeb version 2.6, Preview Server can now be used to preview your website from any device connected to your own WiFi network e.g. an iPhone, iPad, desktop or laptop computer.

About Preview Server

By default, Preview Server feature is ‘On’. You can see this when you use Preview.  If you look at the URL in your browser’s search box, you will see something similar to the web ‘address’ below:

http://127.0.0.1:13434/31A0255CBF744FC48068FD6A18BB6618/index.html

The web ‘address’ is used to establish an IP (Internet Protocol) connection to the same computer being used by the end-user. The first part of the IP address, ‘127.0.0.1’, is known as the ‘localhost’ or ‘loopback address’. This is followed by the filename of your Project. What is displayed is actually the real filename of your Project file as it is stored on disk. To make things easy, you name your website Project file in EverWeb with an ‘alias’, which by default is  ‘NEW WEBSITE’. The ‘alias’ is associated with the real filename that is stored on disk. The final section, ‘index.html’ refers to the web page that you are previewing.

When you Preview your webpage on your computer, it will use the ‘local host’ (technically written as ‘localhost’) address. The preview will now be accessible to other devices on your local WiFi network.

Preview Server Preferences

To access Preview Server’s Preferences use the EverWeb-> Preferences-> General tab menu option. In Preferences you can turn off the Preview Server by un-ticking the ‘Use Preview Server’ box. If you turn Preview Server off, the information for ‘Local URLs’ and ‘Remote URLs’ both become N/A as you are no longer using your WiFi network for preview.

You may want to turn Preview Server ‘Off’ if you are having problems with Preview Server working properly with your browser. For example, there are some known issues with the way in which Google Chrome interacts with local WiFi networks. When Preview Server is ‘Off’, the URL in the search bar reverts to something like the example below which is how EverWeb previews in versions prior to EverWeb 2.5:

file:///var/folders/2y/h6w0rl0n6kd5vcdltlgqryv80000gn/T/TemporaryItems/EverWeb/31A0255CBF744FC48068FD6A18BB6618/index.html

Using Preview Server on Your WiFi Network

To see a preview from your local host computer (i.e. the computer where you use EverWeb) on another device on your WiFi Network:

1. Make sure that all devices on your WiFi network are connected and working properly.
2. In EverWeb, go to the EverWeb-> Preferences-> General tab and make sure that  the ‘Use Preview Server’ box is ticked.
3. Make a note of one of the ‘Remote URLs’ e.g. ‘http://192.168.178.40:13434/’. The Remote URL address refers to your ‘private use’ network, typically your home or office network.
4. If you have Apple’s Universal Clipboard available, copy the ‘Remote URL’ to the clipboard instead of manually noting.
5. Go to another device on your WiFi network and enter, or paste in, the ‘Remote URL’ address that you noted (or copied to the clipboard) in the above step into your browser’s search box.
6. After entering or pasting in the URL, the Preview will be accessed from the local WiFi network and you will see an Index page of choices. In the example below  there are three folders that represent three different previews. In the example there are multiple computers using EverWeb on the local WiFi Network, with each person working on their own project file (see screenshot below).
7. Each folder is named after the EverWeb Project file that a preview has been generated for. If you are working on just one project on one computer you will only see one folder named after your Project.
8. Click on the Project file name whose preview you want to see.
9. The Preview is generated.

The IP address in the Search Bar may look something like this:

http://192.168.178.40:13434/31A0255CBF744FC48068FD6A18BB6618/

As you can see, instead of using the localhost address (used when previewing the project locally on the computer where EverWeb is installed), this time the address begins with 192.168 indicating that the private network is being used instead.

Preview Server is great when you want to access previews from different devices on your local WiFi, and we are hoping to be adding more functionality to this feature in the future!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

One of the common objects used in website design is the humble button.  Typically the primary function of a button is to trigger an action of some sort. This ‘trigger’ could be a hyperlink to another page, a place somewhere else on your current page or to an external website. Buttons can also used to initiate downloads, payment processes, send emails and so on.

Some of EverWeb’s widgets use buttons e.g. the Contact Form, Contact Form Advanced and also the PayPal widget which also let’s you create your own buttons if you don’t want to use the default ones PayPal offers.

Creating Your Own Button

If you want to create buttons for your own website, you can easily and quickly do in EverWeb. There are a few simple steps required as outlined below. In our example we will be recreating a button from the Modern Theme Template which is a new Theme Template coming in EverWeb version 2.6. If you download and install the Modern Theme Template, EverWeb will ask you if you want to install the ‘Work Sans’ font during the installation process. You can also install the Work Sans font directly via the Google Fonts website.

Let’s create a button in EverWeb…

Create and Style Text in a TextBox

1. First create a TextBox by clicking on the Textbox button in the Toolbar. Replace the default text with “Show me more”.
2. Make sure that the text you have just added is highlighted, then click on the Fonts button in the Toolbar.
3. Change the default text font (Arial) to ‘Work Sans’ from the Fonts Panel.
4. Change the font weight to Extra Bold.
5. The font size should also be changed from the default 12 to 18 point.
6. The font color should be changed black to white and again this can be done directly in the Fonts Panel.
7. Once finished, close the Fonts Panel and resize the shape so all of the text appears on one line.
8. Now the text will need to be centered within the text box so with the text highlighted go to the Text Inspector.
9. Change the Horizontal alignment from left aligned to Center alignment.
10. Changethe Vertical alignment to middle from top.
11. You will notice that the text is still not in the centre of the box as After Paragraph is set to 15 by default. Change this setting to zero.
12. The text should be centered but if it is not check to make sure that the Inset Margin setting is zero.
13. The text is now centered.

Creating and Styling the Button

Now that the text we want has been created, styled and centered within the TextBox, the next stage is to create the button to go around the text.

1. Next go to the Shape Options and change the Shape from default to rounded rectangle. This creates the shape of the button.
2. Set the fill type to Gradient fill as this is the type of fill used on the original button.
3. Change the colors to match those in the example. The top color swatch should be ‘Tomato’ color and the bottom color swatch should be ‘Tangerine’. This will give you an approximate color match with the original button.
4. Next add a line border using the Stroke options. Create a white coloured border with a 3px width.
5. Adjust the button size until you have the look you want.
6. Use the blue dot in the rounded rectangle shape to alter the roundness of the button’s cornersas required or use the shape’s widget settings.

Adding an Animation To The Button

When using the Home page of the Modern Theme Template, you will see that the button, and the headline text, has been animated.  To animate the button:

1. Select the button.
2. Go to the Shape Options button in the Inspector Window.
3. Tick the checkbox to the right of the text ‘Animations’ to activate the settings.
4. Set the animation type to Fade from Bottom.
5. Set the duration of the animation to 1.0 second.
6. Set the animation delay to 0.2 seconds.

Hyperlinking the Button

The last step in setting up our button is to add a hyperlink to the scroll down the page. The Home page of the Modern Theme Template includes a scroll position line (in blue) which the button can be hyperlinked to. When pressing the button, the page will scroll down to the scroll position line. Scroll Posiotn is available in EverWeb version 2.6. If you are using an earlier version of EverWeb, you could replace the instructions below with e.g. hyperlinking to a different page in your website.

1. If you want to insert your own scroll position line, click on the Scroll Position button in the Toolbar or use the Insert-> Scroll Position menu option. Drag and drop the turquoise line to where you want it on the page. You may also want to name the Scroll Position using the Widget Settings.
2. Next, click on the button text, then go to the Hyperlinks Inspector.
3. Tick to ‘Enable the Hyperlink’.
4. Set the ‘Link To’ option as the page that you are currently on.
5. Set the ‘Position’ field to the Scroll Position you want, wither the one that is already on the page, or to the one that you have created.
6. If you are using a version of EverWeb prior to version 2.6, replace steps 4 and 5 as follows: Set ‘Link To’ as the page you want to hyperlink. The Position

You have now finished setting up your button! Preview to test that your button looks and works as you expect before publishing to the Internet. Creating buttons in EverWeb is easier and you can add your own flair and style in your own design. You can even animate your button to bring extra attention to it!

If you have a question about this blog post, please let us know in the Comments Section. We’re always happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

The new Scroll Position feature introduced in EverWeb 2.6 is a great way to hyperlink to anywhere in your website, from any position. In addition to using Scroll Position on regular web pages, you can also use it to link to specific places in your blog post pages. Here’s how to do it…

Before You Start…

1. Make sure that you are using EverWeb version 2.6 or higher and
2. You have created a blog with one or more posts in it.
3. If you are not familiar with Scroll Position yet, please read the EverWeb’s NEW Scroll Position Feature blog post first.

Overview

In this example, we are going to set up some hyperlinks on the Home page of the ‘Woody’ Theme Template that will link to different paragraph titles of different blog posts using Scroll Position. The Woody Theme Template is new in EverWeb version 2.6.

The Blog Posts

The blog in ‘Woody’ website project file contains two blog posts. One post is called ‘Sanding & Finishing’ and has two paragraphs, one titled ‘Sanding’ and one titled ‘Finishing’. The second blog post is called ‘Polishing’ and has only one paragraph titled ‘Polishing’. In this example, we want to hyperlink each paragraph title to its corresponding button on the Home page.

The Website Home Page

There are three sections in the Home page with salmon colored buttons containing the text ‘READ MORE’. When clicking on the ‘READ MORE’ text for the ‘Sanding’ section, the hyperlink will go to the ‘Sanding’ paragraph title of the ‘Sanding & Finishing’ blog post. For the ‘Finishing’ section on the Home page, clicking its button will hyperlink to the ‘Finishing’ paragraph title, again in the ‘Sanding & Finishing’ blog post. Finally, the button for the Polishing section will hyperlink to the ‘Polishing’ paragraph title of the ‘Polishing’ blog post.

Setting Up ‘Sanding’ and ‘Finishing’ Scroll Positions

Let’s start with creating a hyperlink from the Sanding section on the Home page to the Sanding paragraph title in the ‘Sanding & Finishing’ blog post.

1. Go to the blog Posts page of the project
2. Select the ‘Sanding & Finishing’ blog post.
3. Note that the Blog Post Preview Window is where Scroll Positions are added, edited and deleted for blog posts.
4. Add a Scroll Position to the the top of the Sanding paragraph title by clicking on the Scroll Position button in the Toolbar or by using the Insert-> Scroll Position menu option.
5. Drag and drop the Scroll Position to the just above the title of the ‘Sanding’ paragraph.
6. With the Scroll Position still selected, go to the Widget Settings and give the Scroll Position a ‘Unique Name’, in this case  ‘Sanding’.
7. Add another Scroll Position, this time for the Finishing paragraph.
8. Drag and drop the Scroll Position at the just above the title of of the Finishing paragraph. Again, give it a Unique Name, in this case ‘Finishing’.

You now have two Scroll Positions set up in the Blog Post Preview Window.

Setting Up The ‘Polishing’ Scroll Position

With the two Scroll Positions set up for the ‘Sanding & Finishing’ blog post, now we need to add the last Scroll Position for the ‘Polishing’ blog post.

1. Select the Polishing blog post.
2. Important! The Scroll Positions we set up for the ‘Sanding & Finishing’ blog post are still visible in the Blog Post Preview Window. This is because the Blog Post Preview Window acts like a Master Page. Anything placed on the Preview Window appears, and is available, to all the other posts in the blog. This is also the reason why we gave each Scroll Position a Unique Name so it is easy to determine which Scroll Position relates to which blog post.
3. Add a new Scroll Position and drag and drop it to the top of the ‘Polishing’ paragraph title.
4. Name the Scroll Position as ‘Polishing’.

You have now set up all the Scroll Positions you will be using for the three buttons on the Home page.

Hyperlinking the Buttons on the Home Page

1. Go to the Home page to set up the three Hyperlinks.
2. First click on “READ MORE” text for ‘Sanding’ section.
3. Go to the Hyperlinks Inspector and tick the ‘Enable as Hyperlink’.
4. Set the ‘Link To’ dropdown as ‘One of My Pages’.
5. Set the ‘Page’ as the ‘Sanding & Finishing’ blog post page.
6. The ‘Position’ dropdown shows the Scroll Positions that have been set up. Select ‘Sanding’, which is the Unique Name we set up earlier. The first hyperlink has now been set up.
7. Next, select ‘READ MORE’ text for the ‘Finishing’ section and ‘Enable as Hyperlink’ in the Hyperlinks Inspector.
8. Again, set the ‘Link To’ dropdown as ‘One of My Pages’ and the ‘Page’ dropdown to the ‘Sanding & Finishing’ blog post page.
9. The ‘Position’ dropdown should be set to the ‘Finishing’ Scroll Position. The second hyperlink has now been set up.
10. Lastly, select the ‘READ MORE’ text for the ‘Polishing’ section of the Home page.
11. Again ‘Enable as Hyperlink’ in the Hyperlinks Inspector and set the ‘Link To’ as ‘One of My Pages’.
12. This time, set the ‘Page’ dropdown as the ‘Polishing’ blog post page.
13. Set the ‘Position’ dropdown as the ‘Polishing’ Scroll Position. The last hyperlink has now been set up.

Preview and Publish!

Once the hyperlinks have been set up, test the links using Preview. Click on the ‘READ MORE’ text for each button you have hyperlinked to see how the Scroll Position works.

Using Scroll Position in blog posts is very useful for focusing your visitors on hyperlinked objects and text. When using this Scroll Position for blog posts, remember that the Blog Post Preview Window shows every blog post’s Scroll Positions on the Preview Page at the same time. As such. using a Unique Name for each Scroll Position is usually a good idea so you can keep track of each Scroll Position. It’s also worth remembering to be careful when moving or deleting Scroll Position lines in the Blog Post Window as you don’t want to inadvertently move or delete a blog post’s Scroll Position!

Video Walkthrough

There’s also a video walkthrough of this blog post, Scroll Position and Blog Posts which takes you through the whole process of linking buttons on your Home page to specific sections of your blog posts.

If you have any questions about this post, please do let us know in the Comments Section below, we’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 2.6 introduces a great new feature, Scroll Position, which allows you to hyperlink an object such as a button, text or image to any location on any page in your website. For example, you could set up three buttons on a page, each button taking you to a different paragraph on the same page, or set up a ‘Back to Top’ text link at the bottom of your page to smooth scroll back to the top of the page. There are many case uses for this feature!

Using Scroll Position

There are two ways to set the Scroll Position, either by the Scroll Position button in the Toolbar, or by using the Insert -> Scroll Position menu option.

When you add a Scroll Position, a horizontal turquoise line is added to the page across the Editor Window. The currently selected Scroll Position line appears turquoise, otherwise the lines appear dark blue. Notice that the Scroll Position line does not have any selection handles as it is a different type of object to those that do have selection handles.

Once you have added a Scroll Position you will want to move it to where you want it on the page e.g. at the top of a paragraph. To do this, simply click and drag the line up and down the page as required. Release the mouse button when finished with positioning.

Naming Scroll Position Lines

If you are using more than one Scroll Position on your page, it is a good idea to name each Scroll Position. This makes things easier when hyperlinking the Scroll Position to an object. Each Scroll Position is identified by the number of pixels it is down from the top of the page, so adding a user friendly name will help save time especially if you have many Scroll Positions on your page. To name a Scroll Position, first make sure it is selected, then go to the Widget Settings in the Inspector Window. Enter the name you want.  You can change the name later if you want.

Hyperlinking To The Scroll Position

Once you have the Scroll Position in the place you want it  you will need to link it to an object. For example, you may have set up a button at the top of the page that when pressed takes you to a Scroll Position further down the page, such as a specific paragraph. To do this:

1. Click on the text label inside the button at the top of the page.
2. Next go to the Hyperlinks Inspector.
3. Tick the checkbox to ‘Enable as Hyperlink’.
4. Make sure that the ‘Link To’ drop down is set as ‘One of My Pages’.
5. In the drop down for ‘Page’ select the page that you are currently on as this is where your Scroll Position is.
6. For ‘Position’ click on the drop down arrows and change ‘Top of Page’ to your Scroll Position location.
7. The button and the Scroll Position are now linked.

When you have set up the link, Preview to test the button. When you press the button, the page should smooth scroll to the Scroll Position.

Relocating and Removing Scroll Position Lines

To relocate a Scroll Position to another location, simply click on the Scroll Position line and drag it to its new location. If you need to delete a Scroll Position line, click on the line so that it changes from dark blue to turquoise then press the delete (backspace) key on the keyboard.

Video Walkthrough

To watch a video walkthrough of this blog post check out our “EverWeb’s Scroll Position Feature” YouTube video.

If you have any questions about this post, please do let us know in the Comments Section below, we’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re pleased to announce the immediate availability of EverWeb version 2.6 which features up to 5x faster publishing and the new Scroll Position feature. We have updated and improved lots of features as well as some updating of EverWeb’s User Interface graphics. This release is packed full of improvements so check out the full list of what’s new and updated below. You will also find instructions on how to update your version of EverWeb to version 2.6 as well…

EverWeb 2.6 is available in two versions:

• OS X 10.7 – 10.8 (32-Bit): Snow Leopard, Lion, Mountain Lion, Mavericks
• OS X 10.9 and higher (64-Bit): Mavericks, Yosemite, El Capitan,  Sierra, High Sierra

EverWeb version 2.5.1 will remain the current version for users of OS X version 10.6 for now.

When updating to EverWeb version 2.6, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.6 Includes…

[NEW] Fast Publishing for EverWeb+Hosting, FTP and FTP over SSH. In EverWeb’s Preferences you can specify how many files can be uploaded at once.

[NEW] Scroll Position lets you insert an anchor position and from Inspector->Hyperlinks you can select one when you select ‘Link to one of my pages’

[NEW] 20 new Theme Templates have been added, many using scroll position and some with themed blog pages.

[NEW] Type Ahead for Theme Templates. When adding a page, if you know the Theme Template your want, just start typing the name of the Theme and EverWeb will take you to the Theme as you type.

[NEW] Server Preview Preferences. You can view previews on any local device on your local network. Use EverWeb-> Preferences-> General to turn Server Preview on or off as desired.

[NEW] New Widget icon ‘covers’ for all inbuilt widgets.

[NEW] New Insert Button icons which can also be scaled as reqiured.

[NEW] New Instagram button.

[NEW] PayPal widget now lets you specify height/width of custom buttons so you can add retina buttons.

[NEW] PayPal widget now uses updated style default ‘Buy’ buttons.

[NEW] PayPal widget now includes a ‘Donate’ option.

[NEW] Animations now work with shadows.

[NEW] Scroll Position Anchor icon added to the Toolbar.

[NEW] Insert -> Scroll Position menu option.

[NEW] A ‘New’ label is included in the Theme Template Chooser when new Theme Templates have been added.

[NEW] URL of published website will be shown if you are overwriting one when publishing. Only for the English version of EverWeb at present.

[IMPROVED] Working with a project file with full width images should be faster when resizing the window or the design canvas.

[IMPROVED] Previewing a website will only export the image for the screen type e.g. only a retina image on retina Macs is exported.

[IMPROVED] Page shadow background uses CSS now so it looks better when you specify a top margin.

[IMPROVED] Shadows are exported as CSS unless you are using a PNG or shape that is anything other than a rectangle.

[IMPROVED] Renaming pages or directories no longer creates a new XML file in the project file, preventing project files from growing very large, very quickly.

[FIX] When duplicating directories with sub pages, the sub pages are now also duplicated.

[FIX] The FaceBook Page Timeline widget now respects the ‘Show Timeline’, ‘Messages’ and ‘Events’ checkboxes.

[FIX] Full width scale to fill images should be exported properly with the scale to fill effect in the browser. The images are exported at the highest possible size.

How To Update To EverWeb version 2.6

You can easily update to EverWeb version 2.6 by

1. Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

Remember, you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.

EverWeb version 2.6 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of Everweb that you need, either the OS X 10.6 version,or OS X 10.7 and later, version.

More Information About EverWeb version 2.6

If you need more information about EverWeb version 2.6 please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb version 2.6 Video Walkthrough

Click on the link for a video walkthrough of some of the important new features of EverWeb 2.6.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw