Archive for the 'Software' Category

EverWeb’s New Site Shield Addon Explained

Thursday, August 17th, 2017

EverWeb's Site Shield Add-on Explained

 

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

Better SEO with EverWeb’s New Language Localization Feature

Thursday, August 3rd, 2017

Language Localization with EverWeb for Better SEO

 

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

 

Introducing EverWeb version 2.4 with Site Shield Addon

Friday, July 28th, 2017

EverWeb 2.4 introducing EverWeb Site Shield Add-On

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

Adding A Blog Index To Your Home Page

Thursday, July 13th, 2017

Add A Blog Index To Your Home Page

 

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 Elect 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

EverWeb Highlights: Summer 2017

Thursday, June 29th, 2017

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

Creating Mouse Over Effects in EverWeb

Friday, June 16th, 2017

Creating Mouse Over Effects in EverWeb

 

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

EverWeb’s Updated Audio Widget!

Thursday, June 1st, 2017

(more…)

Embedding JotForm Contact Forms in EverWeb

Thursday, May 18th, 2017

Embedding JotForm Contact Forms in EverWeb

 

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

Using Font Awesome Icons with EverWeb

Thursday, May 4th, 2017

Font Awesome Icons in EverWeb

 

If you have not heard of Font Awesome, it’s a collection of over 600 scaleable icons that you can include in your web pages and it’s absolutely free! In addition, Font Awesome’s icons do not need to be downloaded and they can be updated by those who supply them. For example, Google updated its Google+ icon about a year ago and later updated its Font Awesome icon. The updated icon is automatically used in your web pages so you do not have to update. or republish. your website. The icons can be customized so that you can combine icons together, change the icon’s color and other effects. Last but not least, using Font Awesome’s icons is a great way to ‘dip you toes’ into the ‘waters’ of HTML.

 

Getting Started With Font Awesome

To start using Font Awesome icons is very simple and only takes a few steps:

  1. Go to the Font Awesome website and click on the ‘Getting Started’ menu.
  2. Sign up by entering your email address and clicking on the ‘Send my Font Awesome embed code’ button.
  3. Check your email. If you have not received an email, check your junk mail folder just in case.
  4. Copy the CDN (Content Delivery Network) embed code from the email to the clipboard.

 

Adding Your Font Awesome Embed Code in EverWeb

The CDN embed code is going to be added to your EverWeb Project file. Font Awesome uses the CDN, or Content Delivery Network, as a simple, fast and efficient way of loading and rendering icons on your page. Now that you have copied the CDN embed code, you can use it in EverWeb:

  1. Open your Project file in EverWeb
  2. Go to the ‘Site Publishing Settings’ either by clicking on the website name in the Web Page List or by using the File-> Edit Publishing Settings menu.
  3. Go to the Header/Footer Code section. In the Header Code section, paste in the CDN embed code.

 

You are now all set up to use Font Awesome icons in your Project. As you have added the code to the Project’s Header code section, the embed code is now available on all of your Project’s pages so you place add icons anywhere in your website.

 

Using Font Awesome Icons in EverWeb

Now that everything is set up you can start to use Font Awesome icons. Each Font Awesome icon has its own name e,g. the Instagram icon is called ‘fa-instagram’, an icon representing a desktop pc is called ‘fa-desktop’ and so on.’fa’ is used as a prefix to identify the icon as a Font Awesome icon. All available icons and their names are listed on Font Awesome’s Icons page which is sorted by category and completely searchable.

To get started, it’s a good idea to try out some examples from Font Awesome’s ‘Examples’ menu. You will find a great camera example in the ‘Larger Icons’ section which shows you how to scale the icon to different sizes, a ‘Stacked Icons’ section that shows you how you can place icons on top of one another and so forth.  Even if you have never had any experience in HTML it is easy to get started using the code relating to each icon.

To add an icon to your page in EverWeb do the following:

  1. Start with an example from Font Awesome’s icon page e.g. the camera in  the ‘Larger Icons’ section.
  2. Copy the code that relates to the icon on the left hand side e.g. for the largest camera icon displayed,  copy the code on the right of it to the clipboard e.g.
    <i class="fa fa-camera-retro fa-5x"></i> fa-5x
  3. Next, in EverWeb, drag and drop the HTML Snippet widget on to the page.
  4. Paste the code you have copied from the clipboard in to the the ‘HTML Code box’ of the widget and press ‘Apply’ to implement the code.
  5. The widget will update in the Editor Window. In this example above, the camera icon and the name of the icon (fa-5x) are displayed.

 

If you do not want the text that is displayed, just delete the text ‘fa-5x’ from the end of the line of code and press the ‘Apply’ button again to update the widget.

Next you may want to start using other icons e.g. to use a Facebook icon with the same size as the camera example, you could use the code

 

<i class="fa fa-facebook fa-5x"></i>

 

in the HTMLSnippet widget. Use the examples in Font Awesome’s website to experiment more, especially if you are new to coding. Use the examples to stack icons, create lists of icons, animate icons and so on. There is plenty to discover! You will usually see the results of your work immediately in EverWeb as the HTML Snippet widget updates when you press the ‘Apply’ button.

 

More Help and Resources

The main source of help is the Font Awesome website itself. It has many examples and a blog where you can find out more information, hints and tips on using these icons.

As Font Awesome involves some coding, the W3Schools website may also be of use as it has a specific section dedicated to Font Awesome as well as further examples and information on how to start with HTML if you are interested.

 

Enjoy discovering Font Awesome in EverWeb!

 

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Introducing EverWeb version 2.3: Speed & Performance

Tuesday, April 25th, 2017

EverWeb version 2.3

 

We are pleased to announce the immediate availability of EverWeb 2.3. The new release includes some internal optimizations to EverWeb’s generated HTML and CSS code. This means your websites will load faster for your visitors, will upload faster and, in general, operate much more efficiently.

We have also included an important fix for a ‘Dropped Connection’ error when uploading websites to FTP or to your EverWeb account.

With EverWeb 2.3 you should see speed improvements in your websites from these optimizations.

 

EverWeb version 2.3 Includes…

  • A variety of code optimizations implemented to make websites load and publish faster.
  • Fix for using mouse over and mouse down effects for a regular rectangle shape which now works properly when returning to its original state.
  • Fixes an issue so that uploading to FTP or EverWeb account no longer produce a ‘Dropped Connection’ error.

 

How To Update To EverWeb version 2.3

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

If you need more information about EverWeb version 2.3

  • 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