Mac SEO Blog

We all use keyboard shortcuts on our computers, usually for routine tasks such as cut, copy and paste. Although keyboards shortcuts have been dominant in the desktop world, they are also now coming to mobile devices as well e.g. if you use an Apple external keyboard on your iPad, hold down the Command key long enough and iOS will show you a list of shortcuts that can be used with the current app.

EverWeb includes many keyboard shortcuts combinations, most of which you will find listed to the right of their corresponding menu option. All very useful, but do we use keyboard shortcuts enough when designing our websites? Here are some of the benefits you can get from using shortcuts, specifically relating to using EverWeb.

It’s More Efficient

Using a keyboard shortcut is faster than using the mouse to get to the command, function or feature you want to use. This results in better productivity as you can get more done in less time. For example, if in EverWeb  you don’t want to see the Toolbar it’s quicker to use Cmd+Alt+T to toggle the Toolbar off and on when you want than going to the Window-> Hide/Show Toolbar menu every time.

You’re Multitasking!

In the above example, you’re actually multitasking as you are working with both keyboard and mouse at the same time doing two separate physical tasks. Using keyboard shortcuts helps free you from always having to follow the cursor or pointer on your screen which again saves you time and effort.

You Use Keyboard and Mouse

Keyboard shortcuts can be a great way to use your mouse and keyboard together at the same time. For example, if you want to drag the page contents beneath the selected object further down the page you use a combination of mouse and keyboard to do so. Hold the Cmd+Shift keys down and drag the selected object down the page with the mouse. More information on this feature can be found in our blog ‘New Ways to Move and Resize Objects in EverWeb 2.1’.

It’s The Only Way!

Sometimes you have to use a keyboard shortcut as the feature you want may not always be available in any other way. In the above example this is the case as there is only one way to move or resize objects in this particular way. You will also find this when using EverWeb’s ‘distance between object’ feature where you select an object and then hold down the Alt key whilst mousing over other objects to find the distance between the two.

Combat RSI and Other Occupational Health Problems

Repetitive Strain Injury (RSI) is the most common occupational health problem according to the US Department of Labor, Occupational Safety and Health Administration (OSHA), costing over $20 Bn per year. In addition, problems in the wrist, elbow and shoulder, such as Carpal Tunnel Syndrome, just add to occupational risks of computer usage. RSI is exacerbated by prolonged use of the mouse so using more  keyboard shortcuts will probably help you reduce or avoid these common workplace issues.

Better Accuracy

You may have times where you are positioning a shape, or some text, and want pinpoint accuracy. A mouse is useful for getting the object located reasonably well, but using the arrow keys on your keyboard may allow you greater precision and dexterity. Other ways to use the keyboard such as tabbing between fields to enter data may also be quicker than using the mouse to point and click in to the field.

Cross Apps Shortcuts

Many common shortcuts are shared throughout macOS and the apps you run on your Mac such as Cut (Cmd+X), Copy (Cmd+C) and Paste (Cmd+V). You may be surprised at how often you use these kinds of shortcut in your day without even thinking about it. So, why not look out for other shortcut keys that you can use across applications e.g. Open (Cmd+O) and Quit (Cmd+Q)

Useful EverWeb Keyboard Shortcuts

The following is a list of some of the shortcuts that are not found on EverWeb’s menu system and also some shortcuts that are useful, but not obvious, time savers.

• Distance from selected object to another: Alt key + mouse
• Move page contents beneath the selected object up/down: Cmd + Shift + mouse
• Move and object that is obscured by other objects: Cmd + Alt + mouse
• Select sub menu (especially useful for Pick Layer command in the Editor Window): Cmd+ mouse click
• Rotate selected object counter clockwise: Alt + Rotate button in the Toolbar
• Open Project File (Good for opening Project files not stored in the default location e.g. in the Cloud): Cmd+O
• Presentation Mode (Good for a quick page preview without having to use the Preview itself): Cmd+ Period (.)

Using shortcuts in EverWeb will save you time, will make you more productive and efficient and may help reduce the risk of developing health issues such as RSI and Carpal Tunnel Syndrome.

If you have any comments or suggestions about this blog, please let us know in the Comments section below, Thanks!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

If you want to try out EverWeb, or have just purchased the product, the first thing you will need to do is install EverWeb on your computer. In just a few steps, you’ll have EverWeb installed and ready to go!

Downloading EverWeb

1. If you have not already done so, start by downloading EverWeb from the EverWeb website (http://www.everwebapp.com).
2. Next click on the ‘Free Download’ button. You use this button regardless of whether you want to use the free trial version or have just purchased EverWeb.
3. On the Download EverWeb page, choose the version of EverWeb that applies to your macOS. Two versions are available: One for Mac OS X 10.6 (Snow Leopard) and one for MacOS X 10.7 (Lion) and later. To find the version of macOS that you are running on your computer, go to the Apple menu and select ‘About This Mac’.
4. Click on the EverWeb version that applies to your macOS. EverWeb will be downloaded in to your Downloads folder on your Mac.

Installing EverWeb On Your Computer

1. Once the download has completed, open the Downloads file. If you see the EverWeb icon, the downloaded file has been automatically unzipped. Drag and drop this ever web.app file on to the desktop and then go to step 5. If the file still has a  .ZIP extension, continue with step 2.
2. Drag and drop the EverWeb app ZIP file from the Downloads to the desktop.
3. Double click on the ZIP file to unzip it. Once you have unzipped the file, you will see the ‘EverWeb.app’ file with the EverWeb logo on your desktop.
4. Move the EverWeb zip file only to the Trash, leaving the ‘EverWeb.app’ file on the desktop.
5. The next step is to move the EverWeb.app to the Applications folder on your Mac. To do this, open the macOS Finder application.
6. In Finder, navigate to the ‘Applications’ folder. If you have the Sidebar displayed, you should see the Applications folder listed. If the Sidebar is not displayed, select the View-> Show Sidebar menu to display it.
7. If the Applications folder is still not displayed,  select Go-> Go To Folder… and type in ‘Applications’. This will navigate you to the folder containing all of the apps on your Mac.
8. With the Applications folder open, drag and drop the EverWeb.app file into the Applications folder. If there is an existing copy of EverWeb in the folder already, you will be asked if you want to replace it with the newer file, keep both or cancel the operation completely. Choose the option that is appropriate to you.
9. Once the EverWeb.app file is installed in the Applications folder, double click on it to launch EverWeb.
10. You may be asked some security questions as to the source of the download and if you want to install the application. Select to continue as you have downloaded the file from a valid source.

It is recommended to download EverWeb only from our website. Also remember to only install EverWeb on your local hard disk.

Adding EverWeb to the Dock

You may want to add EverWeb to your Dock so that it is always visible and quick to access.

1. Launch EverWeb if it is not already open using a Spotlight Search. To do this, hold down the Command key and then press Spacebar. A Spotlight search box will appear. Type ‘EverWeb’. As you type the search becomes more refined. When you see EverWeb in the ‘Applications’ section, double click on the app to open it.
2. EverWeb will launch and you will see the Projects Window displayed. The EverWeb app icon also appears in the Dock.
3. Mouse on top of the EverWeb icon in the Dock and right, or secondary, click on it.
4. A menu will appear with some options to choose from. Select Options -> Keep in Dock.
5. Now when you close EverWeb, the EverWeb app icon will stay in the Dock.
6. Next time you want to use EverWeb just double click the icon in the Dock.

Removing EverWeb from the Dock

If you want to remove EverWeb from the dock:

1. Make sure that EverWeb is not active. If EverWeb is already open, you will notice a black dot under the icon in the Dock. If the app is closed, there is no dot under the icon.
2. Click and drag the icon out of the Dock until you see ‘Remove’ displayed. When you see ‘Remove’, release the mouse button.
3. Make sure that when you do this that you drag the icon in to an open space on the desktop. Do not drag the app icon over other active apps.
4. Alternatively, right (or secondary) click on the EverWeb icon in the Dock.
5. Select Options-> Remove from Dock.

EverWeb is now set up and easily accessible at any time!

If you have any questions about installing EverWeb on your computer, please let us know in the Comments Section below!

Video Walkthrough

You can see the Installing EverWeb on Your Computer video our ‘Installing EverWeb On Your Mac‘ YouTube Video!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Over the last few years, web search giants such as Google and Microsoft have been encouraging website developers to encrypt all data  transmitted between their website’s host server and the end user’s desktop, tablet or mobile device browser window.

Why The Need For Data Encryption?

Data encryption is important for you, and your website visitors, as it provides a safe, secure way of transmitting data across the internet to all the devices your website visitors may be using. It is especially important where internet based financial transactions, such as web shopping carts, or confidential data, such as medical information, is involved. A secure website also gives your visitors more confidence and trust in your website. It’s also more professional and shows that you are up to date with today’s technology.

EverWeb’s Site Shield Addon

EverWeb version 2.4 debuted the Site Shield Addon providing a simple, easy, way to keep your website data secure through end to end data encryption. As you would expect with EverWeb, it only takes a couple of mouse clicks – EverWeb does all the complex, hard work behind the scenes!

To use EverWeb Site Shield Addon you will need:

• EverWeb version 2.4 or higher. To find the version of EverWeb you are currently running, check the Projects Window that you first see when you launch EverWeb, or go to the EverWeb menu and click on the About option;
• An EverWeb+Hosting plan. To add the Site Shield Addon to your EverWeb account, go to your EverWeb Client Area and add the EverWeb Secure Shield Addon to your account. If you have a 10GB or higher plan, EverWeb Site Shield is absolutely free. If you have a 2GB plan the Addon costs $29.95/year.

Using EverWeb’s Site Shield Addon

Using EverWeb Site Shield Addon is super easy:

1. Launch EverWeb and open your Project file
2. Go to the Site Publishing Settings.
3. Check the “Use HTTPS Secure URLs” box.
4. Publish your Entire Website using the File -> Publish Entire Site menu.

That’s all you need to do!

Checking Your Website

When your website has published, click on the ‘View Website Now’ button. You may not notice any change to your website, but if you look at your website’s URL in the browser search bar you may notice that the website now uses HTTPS as it’s prefix instead of HTTP. note that in some instances, you may need to click in the search box itself to see the full URL, or you may need to configure your browser settings to display full URLs.

You will notice that the web address starts with ‘HTTPS’. The ‘HTTP’ part stands for Hyper Text Transfer Protocol, and ‘S’ at the end means ‘Secure’. As such, your HTTPS website will encrypt any data communication between the EverWeb Server hosting your website and your visitors browser window. if your website is only HTTP then the end to end data communication is not encrypted and so not secure.

You may also notice that your website has a padlock symbol next to the URL. The padlock symbol acts a visual indicator that an HTTPS connection is in place and active. If you see ‘HTTPS’ displayed but no padlock symbol, check the page in the Project file. Third party widgets or third party code may be causing problems with the padlock displaying properly. Remember to check the Head/Footer Code section of your website’s ‘Site Publishing Settings’ and the Inspector Window of your web page as well to troubleshoot any issues.

Site Shield Addon For Better SEO

Site Shield Add-on has an addition benefit besides from being ideal for secure online end to end encrypted data transmission. It  is also great for your SEO Rankings as Google gives data encrypted websites a ranking boost over non-secure websites. If you use any analytics on your website, check them after a couple of weeks to see if you have any increase in traffic to your website. Remember that good SEO should always be part of your website design. Check out the SEO For EverWeb Video Course for more details.

EverWeb Site Shield’s the easy way for more secure websites and better search engine rankings all with just the click of a button!

Video Walkthrough

You can see EverWeb’s Site Shield Addon in action in our ‘EverWeb Site Shield‘ YouTube Video!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb 2.4’s new Language Localization feature improves your website’s SEO for better search engine ranking results by using language localization to better serve visitors searching the web with more relevant search results.

You can apply language localization in EverWeb in three ways:

1. Globally, to your whole website;
2. Globally with specific pages overridden to use specific local language settings;
3. Only specific pages localized. No global language localization set.

To illustrate how these settings are applied we will use an example of  a farming company based in the United Kingdom which has set up their own website in EverWeb. At present, the website is designed to serve only customers in the United Kingdom. As such, we can set the language in EverWeb at the global, website level only so that search engine results are focused more towards serving potential UK customers only.

Setting Language Localization for the Whole Website

To set the language localization for the website as a whole:

1. First go to the Site Publishing Settings in the Project file, using the File-> Edit Publishing Settings menu or by clicking on the name of the website in the Web Page List.
2. In the Head/Footer section is an option for ‘Language’. Click on the drop down where you will see a whole host of languages. In this example, scroll down to ‘English’, or just press ‘E’ on your keyboard to take you to the start of the section of languages beginning with ‘E’.
3. As there are many countries where English is spoken it is important for SEO to select the setting that best suits your situation. In this example, as my website serves only customers in the United Kingdom, ‘English (United Kingdom)’ is the most suitable option. If my website was designed to serve only customers in the US, I would select ‘English (United States)’.
4. To apply the Language localization setting, publish the website. It is recommended to publish the whole website using the File -> Publish Entire Site menu option.
5. If your website is not tied to a particular geographic location, e.g. you have a global website shopping website, you can still specify a language localization at the global level e.g. if my farming company only sells products via the Internet, I could set the Language setting in Site Publishing Settings to just ‘English’ without any country specified.

Overriding the Global Language

Imagine that the farming company has grown and now sells its products two other countries: The Netherlands and New Zealand. To accommodate this growth, extra web pages have been created in the Project file in the Dutch language to target the market in The Netherlands. To help better search engine ranking results in the Dutch market, I can apply EverWeb’s Language localization setting specifically to better serve the Dutch market:

1. First select one of the pages used for the Dutch market and make sure that the Page tab is selected in the Inspector Window.
2. Next go to the ‘Language’ drop down in the Page Details section.
3. Select ‘Dutch (The Netherlands)’.
4. This setting will now override the global Language setting of English (United Kingdom) that we set up earlier so that search engine results will better target the Dutch market.
5. Publish the website to apply the changes.

For my customers in New Zealand, the written language is still English, but if I make pages specifically for my New Zealand customers, I can ‘language localize’ these pages by selecting ‘English (New Zealand)’ on a page by page basis in the same way I have sone for my Dutch customers.

Language Localization For Specific Pages Only

EverWeb’s Language Localization feature can be set just on a page by page basis without a ‘global’ language localization being specified in Site Publishing Settings. There may be specific instances where you may want to use this option. Generally, though, you will usually use the one of the first two options described above.

Watch The Video Walkthrough

If you would like to see EverWeb’s Language Localization feature in action, check out our Language Localization for Better SEO video on our YouTube channel.

As always we would love to hear from you if you have any comments, suggestions or feedback. Please let us know in the Comments section below!

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 availability of EverWeb 2.4 which includes the EverWeb Site Shield Add-on. If you have an EverWeb+Hosting account,  EverWeb Site Shield Addon brings your website end to end data encryption – from your visitor browser window to the EverWeb Server, using HTTPS.

The second benefit of Site Shield Addon is that you will have a boost in your SEO rankings as Google gives data encrypted websites a rankings boost over non-secure websites!

If you have an EverWeb+Hosting Plan of 10GB, or higher, you automatically qualify for EverWeb Site Shield Addon. For other EverWeb+Hosting plans, the addon is available at $29.95 USD/Year.

EverWeb version 2.4 also adds Language Localization for SEO. This new feature improves your search ranking results by using language localization to better serve visitors searching the web with more relevant search results. You can apply language localization settings to your whole website, to specific pages in your website or to your whole website with specific pages localized.

EverWeb version 2.4 Includes…

[NEW] EverWeb Secure Shield Addon provides one click HTTPS Websites with EverWeb + Hosting accounts

[NEW] EverWeb Site Shield video added in to Site Publishing Settings

[NEW] Set Language in Site Publishing Settings, or per page to help improve local search engine rankings and provide support for multilingual websites.

[NEW] Page and Folder Deletion Confirmation Dialog Box Added

[NEW] Blog post images are used as the social image for Facebook and other social media shares

[NEW] Hyperlinking button added to the Blog Editor Toolbar

[NEW] Revised EverWeb User Manual

[FIX] Fixed various issues with the Contact Form Advanced widget

[FIX] Fixed an issue with finding unused assets and images used in blog posts

[FIX] Fixed potential crash with Navigation bar

[FIX] Fixed some typos in English and Dutch language versions

[FIX] Fixes and improvements for macOS Sierra and macOS High Sierra

How To Update To EverWeb version 2.4

You can easily update to EverWeb version 2.4 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.4 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.4

If you need more information about EverWeb version 2.4

• 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 on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Many websites have the blog index page displayed on the Home Pages. This is a good idea as typically your website’s Home page is the one that your visitors will land on first when accessing your site. Locating the blog on the Home page also gives it high visibility and it’s easy to access if your visitors want to drill down in to articles of interest that you would not put on your regular web pages.

You can easily set up your blog index page to appear on your Home page in EverWeb. Start by creating your blog in your website project file if you have not done so already. To do this, just add a page using the Add Page button in the Toolbar. Select the Blank Template in the left column and then select ‘blog’ as the page style you want on the right, Click Enter to finish. Add a few blog posts in your blog so that you build up an index of posts to display.

Typically when you create a blog, the blog main index page is called ‘blog’ and is located in the top level of your Web Page List (WPL) structure. You can, of course, change the name of ‘blog’ to something else if you wish. You can also move the blog structure of blog main, posts and archive pages into a subdirectories as well if you want. In this example, we will stay with ‘blog’ in at the top level in the WPL structure.

Once you have your blog set up, go to your website Home page and drag and drop the RSS Feed Widget on to your page from the Widgets tab.

Size and place the widget as desired. You can always adjust the exact size and position later if needed. Creating extra space for the RSS Feed widget is easy to do using the keyboard shortcuts introduced in EverWeb version 2.1, For example, holding down the ‘Shift+Cmd’ keys whist dragging the widget down the page will move everything below the widget down the page in synch. It’s a great time saver!

With the RSS Feed widget in place and selected, go to the Widget Settings tab in the Inspector Window.

In the ‘Feed URL’ box, enter

http://www.websitename.com/blog/rss.xml

Where ‘websitename.com’ should be replaced with your own website URL.

The ‘/blog’ portion of the URL indicates the folder location of the Blog Main page in the Web Page List.

The ‘rss.xml’ at the end of the URL is the name of the file used to generate the blog main index page on the Home page. The file is created when publishing your website the first time using the RSS Feed widget. As such, you may not see the RSS Feed widget updated in the Editor Window if the ‘rss.xml’ file has not yet been created.

Check the URL to make sure it is free of any typos and adjust the other RSS Feed widget settings as you wish, then publish your website to see the results.

Remember that if you use Preview and do not see your blog, it may be that the rss.xml file has not been created yet. If this is the case, or you find that the blog listing is not up to date, republish your website to update the rss.xml file. If your blog index still does not appear, check the URL in the RSS Feed Widget in case of typos.

The RSS Feed widget is a great way to easily add your blog index to your website Home page in just a few steps!

If you have any questions or comments, please let us know in the Comments section below. We are always happy to help and have your feedback!

Video Walkthrough

You can see this feature in action in our ‘Adding A Blog Index to Your Home Page‘ YouTube Video!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Since our last update at the end of 2016, we’ve been busy, as always, making EverWeb even better. Catch up on what you may have missed in our mid 2017 Review below!

EverWeb Versions 2.1 – 2.3

The last release of EverWeb in 2016 came in November with the huge version 2.0 release that added a fully featured, integrated, blogging environment to EverWeb. The all new Contact Form Advanced widget also debuted,  taking contact form creation to a new level.

2017 kicked off with the release of EverWeb 2.1 in January, adding a new ‘Link to Archive’ feature for the blog main page as well as new security features for the Contact Form Advanced widget, more details of which can be found below. Other additions to the widget included the ability to delete form options and reorder control options.

Two new keyboard shortcuts also debuted making your workflow a lot easier and time saving. The Command+Option key shortcut lets you easily drag an object out from underneath other objects whilst the Command+Shift key shortcut lets you to drag and drop objects up and down your page whilst retaining the page layout.

For more details, follow the links to the EverWeb version 2.1 release notes.

In February, EverWeb version 2.1.1 updated the Audio, Contact Form Advanced and Image Slider widgets as well as the usual maintenance and stability improvements. The EverWeb 2.1.1 release notes have all the details.

EverWeb version 2.2 followed in April with the brand new Animation Engine bringing you 16 different types of animation effects to use in your website. This is a great feature that really makes any website pop and are great ‘Call To Actions’ for your visitors.

The new ‘Distance to Object’ feature was also introduced, making it easy to see how far one object is away from other objects in the Editor Window. To use this feature, first select an object then hold down the Option key whilst mousing over other objects. You will see the distance between the source and target objects displayed directly in the Editor Window. For more on this and the other features of this release take a look at the EverWeb version 2.2 release notes.

Our final release for the first half of the year, EverWeb version 2.3, brought optimization and speed improvements to make websites load faster as well as bringing faster upload times when publishing websites.

Blogging

There’s a lot of information available about EverWeb’s new blogging feature. If you are new to blogging, or   transitioning from iWeb to EverWeb, our YouTube videos, and blog posts are there to help you get started. If there is something you want us to feature, please let us know, we would love to help!

We also have an updated iWeb to EverWeb YouTube video for EverWeb version 2.o making transferring from iWeb to EverWeb even easier with our step by step guide.

Since EverWeb 2.0 we have refined and added features to blogging such as updating the blog main widget to include a customizeable ‘Go To Archive’ page hyperlink feature and streamlining the import ofblog posts from iWeb and WordPress into EverWeb.

Updated Widgets

A number of widgets have been updated since the start of the year, notably:

Contact Form Advanced

The Contact Form Advanced widget added new features to make sending and receiving of forms more secure and reliable using SMTP features. This is an important addition to the widget as email apps get more aggressive about spam, you will still want ‘valid’ emails to come through without any problem.

The Contact Form Advanced widget now lets you reorder its Control Options and delete Form Options

Image Slider Widget

A couple of small, but great, additions to this widget. You can now center thumbnails and you can also change the color of the previous/next arrows to be either light or dark.

Audio Widget

One of first widgets that shipped with EverWeb 1.0 was updated to include audio looping, automatic playback on page loading, the ability to set the default sound volume and a mute option.

Working with Other Products and Tools

Our blog posts featured many different aspects of EverWeb but we also took the time to look at how EverWeb can be used with other products such as Font Awesome and JotForm. Our blogs also now have more links to corresponding YouTube videos so it’s even easier to see how features work.

If there is any feature that you would like to see us cover, please let us know in the Comments Section below, we’re happy to help!

Looking Ahead!

Although it’s been a busy first half of 2017, there’s plenty more to come in the second half of the year. We’re working hard on EverWeb version 2.4 at the moment and should have more news to share with you soon!

The most important part about EverWeb is giving you the best features and experience that we can. If there is anything that you would like us to consider for the future, or anything we can do better, please feel drop us a line I note Comments Section, we’re here for you!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Using a mouse or other form of pointing device such as a stylus, trackpad or even a finger,  is a given for any computer, tablet or phone user when navigating the its OS,  apps or website browser. Each method of ‘pointing and clicking’ has its own context e.g. you can hover a mouse over text, or a shape, and see it’s color change, but you cannot use the same hover over effect if you are using a finger on a mobile phone. This blog describes ‘mouseover’ effects but refers to any kind of pointing device. When using ‘mouseover’ effects in your own website remember to take into account the devices you are going to be interacting with and use the most appropriate effect.

The effects shown are ‘Call To Actions’ where you want to bring attention to something on screen that you want your website visitor to follow. The most common example of a mouse over effect is hyperlinked text such as ‘this will take you to the EverWeb website‘.

Text Effects Using Hyperlinking

The best known mouse over effect is the hyperlinked text effect. These are created in EverWeb using the Hyperlinks Inspector:

1. First select the text you want to hyperlink
2. Go to the Hyperlinks Inspector in the Inspector Window and tick the ‘Enable as Hyperlink’ box
3. Use ‘Link To’ dropdown to choose to link to a page in your website, an external page, a file or to an email message
4. Use ‘Behavior’ dropdown list to choose if you want to open the link in a new browser window, as a popup window or as default which will replace the current page contents with the linked page contents.
5. The section below ‘Behaviour’ displays options appropriate to what you have selected for ‘Link To’. Fill in the required information as appropriate.
6. The ‘Hyperlink Formatting’ section is where you select mouseover effects by setting the following properties:

Normal: How text looks before you mouseover it. You can change the color using the color swatch. Click the ‘U ‘ button to toggle the text underline on and off.

Rollover: Sets how the hyperlinked text looks when the mouseover it. This is sometimes referred to as ‘Rollover’ or ‘Hover Over’.

Visited: Sets how the hyperlinked text looks after it has been clicked on. This can differ from ‘Normal’ if it is important to let the visitor know that they have clicked the hyperlink before.

Hyperlink Formatting options can also be used on EverWeb’s built in Navigation Menu widget as the widget uses hyperlinks to take you different pages in your website.

When hyperlinking text, try to make the text itself unique e.g. if you hyperlink the words ‘click here’, in SEO terms it will never be found because everybody uses ‘click here’ as hyperlinked text! Try where possible to describe what the hyperlink is instead of using generic ‘click here’ text.

Setting Default Hyperlink Styles

You can set the default color and under line style for Normal, Rollover and Visited  hyperlink states by clicking on the ‘Default Styles’ button in the Hyperlinks Inspector, or from the Format-> Default Styles… menu option. Changes to any of the Default Styles only apply to anything created after you have updated the default.

Mouse Over Effects Using Shapes

As well as text, you can use mouseover effects for objects such as shapes or images.  Shape objects are often used as Call To Action objects e.g. as a button to press. Images can be used in a variety of different and innovative ways as we show later on.

1. To start, add a shape from the Toolbar to your page e.g. an arrow shape which, in this case, changes color when  moused over, and is hyperlinked when clicked on to go to another page on my website.
2. With the arrow shape selected, go to the Shape Options tab in the Inspector Window. By default, the ‘Fill’ type is set to ‘Normal’ with the color set to blue.
3. To setup the change of color on mouseover, change the ‘Fill’ type from ‘Normal’ to ‘Mouse Over’.
4. Next select ‘Color Fill’ from the drop down menu.
5. Use the color swatch to change the color for the mouseover.
6. When finished, use the ‘Preview’ button in the Toolbar to test that the mouseover works properly.
7. Finally, hyperlink the arrow using the Hyperlinks Inspector as described earlier in the blog. Note, however, that as this is a shape object, the Hyperlinks Formatting options will not work as they only apply to text.

Mouse Over Effects Using Images

Mouse over effects are also great for adding ‘discovery areas’ to images. In the following example, I have a map of Paris which I want to overlay some information on top of  when my visitor mouses over the Eiffel Tower. The information is a piece of text that has been converted in to an image file.

1. Start by adding an image to your page if you have not done so already, in my example, a map of Paris.
2. Next create a Text Box but delete its contents so that it is just an empty box.
3. Place the Text Box over the Eiffel Tower and size it appropriately.
4. With the Text Box still selected, go to the Shape Options tab in the Inspector Window.
5. Select the Fill Type as ‘Mouse Over’.
6. For the effect to work, the image file used contains the text I want. This file was prepared beforehand using a graphics editing program.
7. Add the image file using the ‘Image Fill’ option from the drop down menu.
8. Finally make sure that the image is always on top by using use the Arrange-> Always On Top menu option or the ‘Always On Top’ checkbox in the Metrics Inspector.
9. As the ‘Normal’ Fill Type is an empty box you will not see anything in the Editor Window except for the Text Box outline.
10. When you Preview the page, mouse over the area of the image that contains the empty Text Box and you will see the mouse over image containing the text appearing.

In the last example, you can use social media buttons to create ‘Call To Actions’ when they are moused over. For example, you could invert the regular Facebook logo from white text on a blue background, to blue text on a white background when hovered over. To do this:

1. First obtain the Facebook logo from Facebook’s own brand resource website.
2. Once you have the original white text on blue background logo, take this into a graphics editor and invert the image. Save the inverted image as a new file name but with the same settings as the original file.
3. Now go to your page in to EverWeb.
4. For the ‘Normal’ Fill, select ‘Image Fill’ from the drop down and select the original Facebook logo file.
5. For the ‘Mouse Over’ Fill again use ‘Image Fill’ from the drop down, this time selecting the inverted Facebook logo file.
6. Use Preview to test that the mouseover works correctly.
7. To finish, hyperlink the Facebook logo to your Facebook page using the Hyperlinks Inspector.

Mouse over effects give you a variety of methods to bring to attention to ‘Call To Actions’ regardless of the pointing devices  used or the environment your website is being used in.

Watch the Video!

For a walkthrough of a some of the mouse over effects shown above, why not check out our YouTube video, Using Mouse Over Effects in EverWeb.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Read the rest of this entry »

EverWeb makes it easy to embed a JotForm contact form into your web pages. JotForm is a free to use, third party online contact form builder that does not require any coding. Like EverWeb, JotForm has great drag and drop capabilities, templates and even widgets so that you can create and customize the contact forms you want quickly and easily.

In the example below, students are going to be voting for a new Student Union president. Voting is via a contact form that is embedded in a web page. In this example the contact form has already been created in JotForm.

1. To start, click on the ‘Add Page’ button from the Toolbar in the  EverWeb project file that you want the contact form to be embedded in.
2. Select the Theme Template you want to use e.g. the ‘University’ Theme Template.
3. Next choose the page style you want e.g. the ‘Blank’ page style, then click the ‘Select’ button.
4. Make sure that you have enough space to embed the form on your page. You can adjust the page layout later, but it is a good idea to get an approximate look for your page before you embed the JotForm.
5. With the page layout prepared in EverWeb, go to the JotForm website and log in to your account if you have not done so already.
6. Select the JotForm contact form that you want to embed in to EverWeb.
7. Click on the ‘Publish’ button in the menu.
8. Select ‘Embed’ from the left hand side and then click on the ‘Copy Code’ button which will copy the embed code to the clipboard so it can be pasted in to EverWeb.
9. Now go back in EverWeb and click on the ‘Widgets’ Tab.
10. Select the ‘HTML Snippet’ widget and drag and drop it on to the page in the space that you created earlier for the JotForm contact form.
11. Click in the ‘HTML Code’ box and paste the code in from JotForm.
12. Press ‘Apply’ to finish. You should see your Jotform form embedded in your EverWeb page.
13. Optionally, you may want to make the embedded JotForm full width. If this is the case, keep the HTML Snippet widget selected, go to the Metrics Inspector and check ‘Full Width’.
14. Finally, reformat the page layout as required so that the embedded form is in the correct place on the page.
15. ‘Preview’ or ‘Publish’ the form so that you can test that it works correctly. In this example, Use Preview to check out the layout and form content.  Only click on the ‘Submit’ button when you ‘Publish’ your website and not when using Preview as it will not work correctly if you do so. When you have published the website, rest the JotForm to make sure that the email sent is received properly by your email program.

Matching Up Colors

If you need to match up the colors in your JotForm contact form with those in your EverWeb page there are two ways you can do this:

Using the Eye Dropper in EverWeb

1. Begin by selecting the object in EverWeb that needs to have its color changed
2. Next Click on the Shape Options tab in the Inspector Window
3. Click on the color swatch in the Fill section. The Color Picker appears on screen
4. In the bottom left hand corner of the Color Picker you will notice there is an Eye Dropper. Click on this.
5. Your mouse pointer will change in to a large magnifier. Move the magnifier over the object whose color you want it to match with and then click
6. Your selected object will change color and match the object you clicked on.

Using Digital Color Meter

Digital Color Meter comes with macOS. Use a Spotlight search (Cmd+Spacebar) and enter the words ‘Digital Color Meter’. As you type, the whole phrase gets autofilled by the search. Just press enter when this happens to open the application. When using Digital Color Meter, remember to set ‘Display in Generic RGB’ from the drop down menu. Once you have done this, mouse over the color you want to select. Make a note of the R, G and B (Red, Green and Blue) values that are shown in the Digital Color Meter.

When you have the color values, go back to EverWeb and select the object that you want to be the same color as in JotForm, for example, a rectangular shape. Go to the Shape Objects tab and click on the color swatch in the Fill section. This will call up the Color Picker. Select the second tab from the left in the Color Picker and enter in the R, G, B values in the corresponding Red, Green, Blue values boxes.

YouTube Video Link

There’s also a YouTube video available of this blog so check out Embedding a JotForm in EverWeb for the audio-visual walkthrough.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw