EverWeb’s NEW Set Shape as Scroll Position Feature!

April 23rd, 2020
EverWeb's Set Selected Shape As Scroll Position Feature

If you have designed a responsive website in EverWeb, you will be delighted to know that in EverWeb 3.2 you can now attach anchor links to any shape in your website. Scroll Position debuted in EverWeb back in version 2.6 when the product only featured the fixed width (center and left aligned) page layout designs. When EverWeb 3.0 debuted it introduced the new Responsive page layout design which was not compatible with Scroll Position… until now that is!

The ‘Insert Fixed Scroll Position’ Feature

The new EverWeb 3.2 makes a minor change to the existing labelling of ‘Scroll Position’. In the Toolbar and in the Insert menu the feature is now called ‘Insert Fixed Scroll Position’. The renaming makes it clear that this type of Scroll Position is only for use in fixed width pages i.e. those using either a centered or left aligned page layout.

Although the labelling has changed, ‘Insert Scroll Fixed Scroll Position’ functions exactly the same way as ‘Scroll Position’ in previous versions of EverWeb. To find out more check out our blog ‘EverWeb’s NEW Scroll Position Feature‘.

If you are website has a responsive page layout, do not use ‘Insert Fixed Scroll Position’, instead use the new ‘Set Selected Shape as Scroll Position’ feature.

The New ‘Set Selected Shape as Scroll Position’

EverWeb 3.2 adds the option ‘Set Selected Shape as Scroll Position’ to the Toolbar and also to the Insert menu. This feature can be used on both Fixed Width and Responsive page layouts.

Essentially, you can add a scroll position to any shape. This also includes widgets such as the Responsive Row widget. Simply click on the object that you want to set the scroll position to, then either use the Toolbar-> Set Selected Shape as Scroll Position option or the Insert-> Set Selected Shape as Scroll Position menu option.

You will be presented with a dialog box where you name the Scroll Position. The dialog box also includes instructions on how to name the Scroll Position. The most important thing to remember is that the name must be unique to the page that it is on. Therefore, you can use the same name on different pages if you want to. Once you have entered the Scroll Position name, click on the ‘OK’ button.

You will notice that in the top right hand corner of the object a small anchor symbol appears indicating that the shape has a Scroll Position attached to it. You can now use the Scroll Position in the Hyperlinks Inspector.

The Shape Options-> Scroll Position Section

If you want to change the name of the object’s Scroll Position, you do so in the Shape Options tab of the Inspector window. Use the new ‘Scroll Position’ section to change the name of the Scroll Position. If you delete the name altogether, this will remove the Scroll Position from the object.

The Widget Settings tab is not used in this instance for the Scroll Position, as the Widget Settings are reserved for use by the object itself. For example, you may want to attach a Scroll Position to a Responsive Row widget. In this case, the widget has its own settings that occupy the Widget Settings tab so the object’s Scroll Position uses the Shape Options tab instead.

If you are using a Fixed Scroll Position line in a fixed width page layout, change its name by first selecting the Fixed Scroll Position line. Next go to the Widget Settings tab in the Inspector Window and change the name in the ‘Unique name’ field. To delete the scroll position line, first select the line before using the backspace key on your keyboard to delete it.

Using Scroll Position

Once you have set up your object with a Scroll Position you can attach the ‘anchor’ to a hyperlinked object. For example, you could create a rectangle shape on your page to be used as a button. Once you have created the button…

  1. Make sure the button is selected.
  2. Go to the Hyperlinks tab in the Inspector Window and check the ‘Enable as Hyperlink’ to activate the Hyperlinking settings.
  3. Use the Page field to select the page you want to Hyperlink to which contains the Scroll Position.
  4. Select the Scroll Position you want using the Position field.
  5. Your Scroll Position is set up. Preview to test that the hyperlinked button works correctly before publishing.

Set Shape as Scroll Position is a great way to set up anchors in both fixed with and responsive page layouts in EverWeb!

If you have a question about this blog post, please 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

Flipboard

YouTube

Twitter

Instagram

Introducing EverWeb 3.2! More Contact Form Advanced Features, Scroll Position Goes Responsive and Much More!

April 3rd, 2020

We’re delighted to introduce EverWeb 3.2 with more Contact Form Advanced widget features, giving you our most flexible and versatile contact form ever! There is also a new scroll position anchor feature for fixed and responsive pages, Master Page enhancements, pagination options for the Image Gallery Widget and much more!

The full list of what is new and updated is below as well as our ‘What’s New in EverWeb 3.2‘ video. Enjoy!

For a complete list of what’s new, improved and fixed, as well as how to upgrade to the new version, please see below!

Which Version of EverWeb is For You?

EverWeb is available in the following versions:

  • If you are running OS X 10.10 or macOS Yosemite, El Capitan, Sierra, High Sierra, Mojave or Catalina, EverWeb version 3.2 is available for you.
  • If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb 3.1 is available for you.
  • If you are running OS X 10.6 EverWeb version 2.5.2 is available for you.

When updating to EverWeb 3.2, the update process will automatically download the correct version of EverWeb for your operating system.

The EverWeb 3.2 Video

We’ve highlighted the main features of the release of EverWeb in our ‘What’s New in EverWeb 3.2‘ video. See below for the full release notes.

EverWeb 3.2 Includes…

[NEW] Contact forms can now send a confirmation email to the website visitor. The message is customizable and can include variables based on what the visitor has entered in the form. The default confirmation email includes an example. You can use any form control variable. This feature requires the Contact Forms Enhanced Addon and reCaptcha SPAM protection.

[NEW] Contact forms can forward the visitor to any page on your website after the form has been submitted.

[NEW] Contact forms can remove the “branding” in the submission emails (i.e. the links that ask you to upgrade or login to your account to download file uploads). This features requires the Contact Forms Enhanced Addon but it does not have to be selected in the Inspector or used in the form.

[NEW] Blog posts now include the ability to customize the previous/next post links at the bottom of the blog posts widget.

[NEW] Draft blog posts can now be sorted.

[NEW] You can now set an anchor name from Shape Options-> Scroll Position in the Inspector Window. Any object can be an anchor that you can link to in the Hyperlinks tab.

[NEW] You can set an anchor on any object using the Scroll Position Toolbar.

[NEW] The new Insert-> Set Selected Shape to Scroll Position… menu option can be used in both Fixed Width and Responsive page layouts.

[UPDATED] The Insert-> Scroll Position menu has been renamed to Inert-> Insert Fixed Scroll Position for clarity.

[NEW] Preferences-> Backup-> Manage EverWeb Cache option. EverWeb may have left over published cache and preview cache. You can now easily delete these cache files.

[NEW] Master Pages can be dragged in to the regular page list. This will create a copy of the Master page in the regular Web Page List.

[NEW] If you select a Master Page, all pages in the Web Page List that use that Master Page will be highlighted.

[NEW] The Image Gallery Widget now has pagination at the top, bottom and top and bottom.

[NEW] The Image Gallery Widget now includes similar styling options to the blog pagination feature.

[IMPROVED] Content area separators are now thicker so you can better see them between each section of the page.

[IMPROVED] If your project file has only one page in it, you are not allowed to delete that page as a project file must always contain at least one page.

[IMPROVED] More FTP failure error messages have been added.

[FIX] There was a social media image bug if you had a subdirectory included in the URL field. This has been fixed

[FIX] Various internal bug fixes.

[FIX] Fixes to enable the loading of some damaged projects.

[FIX] Issues where opening projects moved from other computers could lead to a ‘Cannot Connect to Network’ error message.

[FIX] PayPal widget issues causing generic PayPal error message to be displayed when the widget is used.

[FIX] When scrollbars are set to always be showing the Widgets tab list would jump from 3 to 2 columns.

[FIX] The Video Widget on responsive pages was not working properly after clicking the ‘Full Screen’ button then returning to regular size.

[FIX] Fixes for shadow not working correctly for rotated objects in fixed and responsive pages.

The following list of improvements and maintenance fixes were introduced in EverWeb versions 3.1.5 thru 3.1.7 and are incorporated in EverWeb version 3.2:

EverWeb versions 3.1.6 & 3.1.7

  • [FIX] Fixes an issue where the page color remained red (unpublished) in the Web Page List after a website has been published
  • [FIX] Fixes aContact Form submission issue experienced by some customers
  • [FIX] Fixes a rare crash when opening a project file
  • [FIX] Fixes issues when scrolling in the Inspector

EverWeb version 3.1.5

  • [IMPROVED] Significant improvements to Responsive websites on older browsers
  • [IMPROVED] Significant improvements to importing iWeb blogs
  • [IMPROVED] Fixed Width blog post page improvements when using background colors
  • [IMPROVED] Internal improvements for better compatibility with macOS Catalina
  • [IMPROVED] Improvements to Google Fonts and blog posts
  • [FIX] Fixed issues with some widgets using background images that were broken in EverWeb 3.1
  • [FIX] Undo after making a change to a widget under Inspector->Widget Settings updates the widget properly and the Inspector
  • [FIX] Fixes an issue for macOS Catalina users not being able to drag multiple files from the Assets list at a one time
  • [FIX] Fixes for rollover underline for hyperlinks
  • [FIX] Text Section widget fixes when placed within a responsive row
  • [FIX] Simple Contact form can have letters with accents in labels
  • [FIX] Fixed an issue with full width Contact Form Advanced Widget

How To Update To EverWeb 3.2

You can easily update EverWeb by either:

  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.

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon. Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

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

The update 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 update period from EverWeb’s Preferences window or from your client area.

If you have passed your one year of free EverWeb updates, 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 updates 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.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

  • The EverWeb website which has up to the moment information in it’s new blogging section
  • New EverWeb videos on YouTube
  • The EverWeb User Manual in EverWeb’s Help-> User Manual 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

Flipboard

YouTube

Twitter

Instagram

EverWeb’s Assets List Organizer!

April 2nd, 2020

EverWeb’s Assets List received a big makeover in EverWeb 3.0 with the addition of the Assets List Organizer which lets you organize your website project’s image files and other media such as audio, video and PDF files, into folders and subfolders. 

In this blog, we take a look at how easy it is to organize your project file’s assets just the way you want.

What Organize Your Assets

Image files and other media are your EverWeb project file’s “assets” which can be conveniently organised in to folders and subfolders. This is especially useful if your website has a large number of assets. It is also useful if you want to organize assets based on the pages you have created in your website.

When you click on the Assets tab, the first thing you will notice is the Assets List Organizer at the top of the Assets List. The new feature looks and functions in a similar way to the organizer in the Widgets tab.

The Assets List Organizer

The Assets List Organizer includes a search box so that you can easily locate the asset you want. The Organizer also has three buttons:

  • The ‘+’ button lets you to add a new folder to the Assets List
  • The ‘-‘ button allows you to delete a folder, or one or more assets, from the Assets List
  • The Settings Cog displays a menu of actions specific to the Assets List: Sorting the list, finding unused assets and displaying detailed information about the assets in the Assets List. The Settings Cog replaces the up/down arrows found in versions of EverWeb prior to 3.0, but the features functionality remains the same as before.

Creating an Assets List Folder

To create a new Assets List folder:

  1. Click on the Assets tab in the Inspector Window if you have not done so already.
  2. To create a folder in the ‘Images’ section of the Assets List, either click on the title ‘Images’, an existing folder in the Images section, or on one of the image assets in the Images list.
  3. To create a folder in the ‘External Files’ section of the Assets List, either click on the title ‘External Files’, an existing folder in the External Files section, or on one of the assets in the External Files list. 
  4. Click on the ‘+’ button to create the new folder.
  5. Enter the name of the folder. You can use letters, numbers and a variety of special characters. If you enter characters that are not allowed, EverWeb will ignore them. Click on the ‘OK’ button to finish. The folder will be created.
  6. The folder will be created at the top of the Assets List unless you have created a subfolder. In this case, the new folder will be inside the patent folder. To create a subfolder highlight a folder in the Assets List, then click on the ‘+’ button. Name the folder as in the above step.
  7. You can also create a new folder by secondary clicking in the Images or External Files section. A menu will appear. Click on the ‘Add Folder’ option and continue with step 5 above.

Renaming a Folder

To rename a folder in the Assets List, just double click on its name. Edit the name and press ‘Enter’ to finish.

Adding and Moving Assets

To add an asset in to a folder, drag it from its current location in the Assets List and drop it on top of the folder. The file will be added to the folder. If you already have files within the folder and the folder itself is open, you can drag and drop the file on top of the files that are within the folder.

To move a file from a folder, drag it to the left of the triangle symbol. The file will be relocated one level up. To move a file back in to the main Asset List, move it left of the left most triangle symbol. To move a subfolder, drag and drop the folder to its new location.

To move a group of assets that are listed consecutively in the Assets List, click on the first asset in the list, then Shift+Click on the last asset you want to move in the list. Drag and drop the highlighted assets to their new location.

To move files that are listed in different locations in the Assets List, click on the first asset you want to move, then press Command+Click on each of the other assets in the list that you want to move. When you have finished selecting the assets, drag and drop the highlighted assets in to the folder where want you them.

Deleting an Assets List Folder

You can delete a folder from the Assets List in a number of ways. First highlight the folder you want to delete in the Assets List then either:

  • Click on the ‘-‘ button in the Assets List Organizer.
  • Press the backspace key or
  • Secondary click on the folder and select the ‘Delete Folder’ option.

In all cases, a dialog box will be appear with options to ‘Delete Folders & Contents’, ‘Delete Folders Only’ or ‘Cancel’. Select the option of your choice
If you select ‘Delete Folders Only’, any assets the folder contains will be moved to the next folder level up in the Assets List. 

Displaying Folders

When you add a new folder to the Assets List, it will be empty and the folder will be displayed as closed, which is shown by the triangle symbol pointing to the right, towards the folder name. You can toggle the folder open or closed by clicking on the triangle symbol. When the folder is open, the triangle points downwards and the folder contents are displayed.

EverWeb’s New Assets List folder capabilities is a great way to organize your asset management. In a future blog, we will take a closer look at the Asset Lists new Share Sheet and Preview options!

Please let us know if you have a comment or question in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram


EverWeb Website Tips for Business During COVID-19

March 20th, 2020

The spread of COVID-19 across the world has left the world reeling. Many people are now working from home as a result of the necessary restrictions that have been put in place by governments across the world. For many small businesses and self employed entrepreneurs, the financial consequences are possibly devastating.

There are many challenges ahead. How can you make best use of your time at home and keep your business viable?

These simple questions may have complicated answers, but with more people staying at home, the Internet is being frequented more than ever! So now may be the perfect time to develop, or update, your website project to get the word out to the world that your business is alive and kicking!

Team EverWeb Is Here For You!

As always Team EverWeb is here for you! Our 24 x 7 x 365 (ok, 366 this year!) remains in place to help if you need it. Please remember that to use our technical support you will need a current EverWeb support and product update license.

Alternatively, there is also the EverWeb Discussion Forum that you can use if you have any questions, or if you need to know how to do something specific in EverWeb, or have feature requests for the product.

In addition, there is also the EverWeb YouTube channel with hundreds of video tutorials and this blog, as well as those by third parties, such as All About iWeb, which should help you find what you need!

So, how can you make your website the most visible it can be on the Internet for your customers to see and interact with or to purchase from? Here are some tips to get you started…

Invest in Your Website’s SEO!

If you have not tuned your website for Search Engine Optimization, now may be the time to do so! You use SEO to help improve your Search Engine Ranking Page results. The better your SEO, the better chance of your website being higher up the page when potential customers are searching the Internet for goods and services.

The SEO for EverWeb Video Course takes you though the whole process so that your website is as optimized as it can be! There’s no magic involved in SEO and it does not cost any money to implement it either! Just some of your own time.

Your E-Commerce Store Needs You!

If your website includes an online store, now may be a good time to refresh its content and look. If you have a PayPal account, EverWeb’s PayPal widget takes the strain away from adding products to your site. You can now directly add in product images and descriptions from within the widget. You can also use your own button images, or styled text buttons, to get the perfect look for your website.

Remember that your customers do not need to have a PayPal account to be able to pay through PayPal. It may be worth mentioning this in your website that PayPal is just the payment provider, and that the customer does not have to have a PayPal account to purchase goods and services from you.

Although EverWeb supports PayPal, there are other E-Commerce stores and platforms that are also supported, such as E-Junkie, ECWID and Shopify. If there is an E-Commerce platform that you need supporting, please let us know in the Comments Section below.

Keeping Your Customers Updated!

Customer contact is especially important at this time for a number of reasons. First, you want your customers to know that you are still in business, second that your business is taking precautions over the Corona virus, and third, you can effectively update your clients on the products and services that you offer. Your products and services may be subject to change due to the current business trading environment, so alerting your customers as to what is available (and when), and to any possible alternatives, is a proactive step to take.

Maintaining contact with your clients is also important so that your business is not overwhelmed by customers asking questions. You may need to consider altering your home page, or adding a specific page or blog to your site to keep your customers up todate.

The Power of Contact Forms!

EverWeb’s Contact Form Advanced widget is the perfect way to for customers to contact you. The widget is highly customizable so that your contact form blends in perfectly with your website design. If you are using EverWeb 3.0 or higher, you can also purchase our Contact Forms Enhanced addon. This is the perfect companion to the Contact Form Advanced widget in that it allows you to store all contact form submission data in one safe, secure place in your EverWeb Client Area. The database of contact form submissions can be downloaded on a per form basis which will allow you to create an email address list. You could then use this list in e.g. MailChimp to email out to your clients your latest business news and updates.

Keep Your Social Media Options Optimal!

Keeping the communication between your business and your customers is paramount at this time. Remember to include the social media widgets and buttons that are relevant to your business in your website. Social media is a great way to communicate quickly and effectively. EverWeb includes FaceBook Like, FaceBook Page Timeline, Twitter, LinkedIn, Vimeo and YouTube widgets in the product with third party widgets also available for other social media platforms. There are also a range of social media buttons that you can use as well from EverWeb’s Insert menu.

If you have any of tips that you think might help other EverWeb users during these difficult times, please use the Comments Section below! Thanks!

Safe safe and well.

Team EverWeb

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Uploading Customer Files Made Easy with EverWeb!

March 5th, 2020

One of the most popular requests from the EverWeb community was to include the ability for customers to be able to upload files to the website’s host. The introduction of EverWeb 3.0 made this possible with the updated Contact Form Advanced widget and the new Contact Forms Enhanced Addon.

Prerequisites

To begin with you will need the following:

  • EverWeb 3.0 or higher
  • Contact Forms Enhanced Addon


Purchasing & Setting Up Contact Forms Enhanced Addon

To use Contact Forms Enhanced Addon, add the Contact Form Advanced widget to the page, if you have not done so already, then go to the Widget Settings.

If you have not already purchased Contact Forms Enhanced Addon, go to the ‘Contact Forms Enhanced Add-ons’ dropdown menu in the Widget Settings and select the ‘Add Contact Forms Enhanced Features…’ option. In the dialog box that appears, click on the ‘Buy Now’ button and follow the instructions to complete your purchase.

After completing your purchase, you will receive three emails: the first confirms your order, the second confirms payment and the third informs you that the addon has been set up and is ready for use in the Contact Form Advanced widget.

To activate the Contact Forms Enhanced Addon go back to the form in your project file. Click on the ‘Contact Forms Enhanced Add-on’ field’s dropdown menu. You should see the addon in the menu e.g. you should see something similar to ‘Contact Forms Enhanced – 1GB (12345)’. If the addon has not been added to the menu, close the project file then reopen it and try again. If this does not resolve the problem, check that you are logged in to your EverWeb account using the EverWeb-> Preferences -> Account menu.

Once you have added the Contact Forms Enhanced addon, it is usually a good idea to name the form in the Contact Form Name (Online Management) field. This will help you easily identify and manage your form submissions especially if you have more than one form that uses the Contact Forms Enhanced Addon.

Setting Up File Uploads in Your Form

If you want to include a file upload feature to your form you can now do so. In the Form Submission Settings of your contact form, you will see the ‘Form Controls’ section. If you have just added the Contact Form Advanced widget to your page, you will see three default form controls listed: Name, Email and Message. You can add, edit or delete form controls as you wish.

Add a new Form Control for customer file uploads to your contact form using the Add button below the Form Control list. Name the field as you want e.g. ‘Upload File’. Press Enter when finished. The form control and label ‘Upload File’ are added to the contact form in the Editor Window.

Next, change the Control Type for the ‘Upload File’ form control from the default ‘Checkbox’ type. First, make sure that the ‘Upload File’ form control is still selected in the Form Controls list. Click on the ‘Control Type’ dropdown menu and select ‘File Upload’. The form will update again in the Editor Window. A ‘File Upload’ button and ‘no file selected’ text will be displayed.

If you have forgotten to add Contact Form Enhanced to the contact form, when you select the File Upload Control Type, this will be automatically added. If you have not purchased Contact Forms Enhanced, you will be asked if you would like to purchase it in order to use the file upload feature.

Publishing & Testing Your Form

Complete your contact form then publish your website. Test the form to make sure that everything works properly, including the file upload feature.

When testing file uploading, note that you can only upload files of less than 2MB. If you try to upload a file that is over 2MB you will receive a warning that the selected file cannot be uploaded. When a file is uploading, a progress indicator is displayed.

Once you have submitted your form, you will receive an email confirmation in the mailbox of the email address that you stipulated in the ‘Email Address to Send Form to’ field of the contact form. 

The confirmation email includes the data that was completed in the submitted form as well as a notification of a file attachment.

By default, the email confirmation contains a link so you can login to your EverWeb Client Area to manage, search and export your form submission data and download the file that has been sent to you. The email also displays the amount of server space used by file uploads.

Downloading Uploaded Files

You can also access your form submissions by directly logging in to your EverWeb Client Area. On the Client Area home page you will see the ‘Contact Form Submissions’ section on the left of the window. Click on ‘View Form Submissions’ to access the form submission data.

Click on the ‘Please select your form to access its submissions’ dropdown menu. A list of your forms will be displayed. Highlight the form you want and then click on the ‘Select’ button.

You will see the forms that have been submitted displayed. Move the mouse so that it hovers over the list of form submissions then scroll the information displayed to the right so that the ‘Attachment’ field comes in to view.

Click on the the field heading ‘Attachment’ to sort the form submission list based on whether the form submission has a file attachment or not. Click on the file attachment icon (an I within a circle) to initiate the download of the attached file of the form submission that you want. The file will be downloaded to your computer’s Downloads folder.

Adding a file upload feature to your contact form only takes a few steps and EverWeb makes it easy to mange files that you receive from your customers!

If you have a question about this article, please let us know in the Comment Section. We’re always here to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

EverWeb Preferences 1: The Account Tab

February 20th, 2020
EverWeb's Preferences Tab

EverWeb’s Preferences are used to define systemwide settings and controls. As such the Preferences that you set will apply to all of your EverWeb projects. You can access the Preferences window through the EverWeb-> Preferences menu option or by pressing the Cmd+, shortcut keys.

The Preferences window is a floating window so you can keep it open if needed whilst working on your website project. You can minimise the window using the yellow minimise button in the top left hand corner of the window. This will minimise the window to the dock. Click on the window in the dock to return it to its pre-minimized state. If you have the Preferences window open, but cannot find it (e.g. you have many other windows covering it), use EverWeb’s Window menu then select Preferences. To close the Preferences window, use the red close button in the top left hand corner of the window.

There are four Preferences tabs: Account, General, Publishing and Backup. In this blog we take an in-depth look at the first tab…

The Account Tab

The first tab in the Preferences window is the Account tab. This is the tab that you use to login to your EverWeb account. It is the same account as the one that you set up originally when you purchase (or try out) EverWeb.

Creating and Using an EverWeb Account

If are evaluating EverWeb and have downloaded the software to try it out, use the ‘Create Account’ link to create your own EverWeb account. Click on the Account dropdown menu and select ‘Register’. Enter your details and click the box to accept the terms and conditions before clicking the ‘Register’ button to create the account. Once you have an account you can use it on the EverWeb Support Forums. The account you create can also used if you decide to purchase EverWeb at a later time.

When you have created an account use the email and password that you have set up in the account registration form in the Email and Password fields of the Account tab. Click on the ‘Sign In’ button to log in to your EverWeb account. You can opt to add your email/password details to your Apple account’s keychain (which is recommended).

If at any time you need to change your password, you can do so by using the ‘Forgot Password’ hyperlink. Follow the instructions to reset your password.

Usually, you will always stay signed in to EverWeb. There is no need to sign out.

The Accounts Dialog Box

Once you have clicked on the ‘Sign In’ button, the ‘Accounts’ dialog box will display information about the services that you have associated with your EverWeb account together with when they are due to expire. Note that the expiry date for EverWeb relates to the technical support and updates that you receive. If you do not renew your support and services plan after the expiry date, you will still be able to use the original EverWeb product that you purchased. You will, however, not receive any product updates or qualify for 7×24 technical support.

If you have an EverWeb+Hosting account, you will see on the left of the account name a triangle dropdown symbol. If you click on this symbol, you will see all of the domains that are associated with your account.

In addition to your EverWeb account you may also see additional accounts e.g. if you have purchased the Contact Forms Enhanced you will see this listed below your EverWeb+Hosting account.

Managing Your Account

When signed in to your EverWeb account, you have access to the ‘Manage Account’ button. When you click on this button you will be taken to your EverWeb Account profile in a browser window. Once you have logged in to your account, you will be able to administer your customer profile and all the services attached to your EverWeb account.

Other Account Tab Options

The Account tab has two other options. The first is ‘Use Secure Publishing’. If you have connection problems when trying to publish your website, deselecting this option may help your website to publish.

The last option ‘Automatically Check For Updates’ was introduced to EverWeb in version <find out> When a new version of EverWeb is released, when you next log in to the product, you will be asked if you would like to install the update if you are not currently on the latest version. If you dismiss this reminder, EverWeb will prompt you again a few days later if you have the ‘Automatically Check For Updates’ box checked.

In the next blog, we will take an in-depth look at the Preferences window’s General tab.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Sticky Navigation for Responsive Websites in EverWeb

February 6th, 2020

Creating a navigation menu is one of the core features of most websites, making it easy for website visitors to navigate the pages within the site. EverWeb includes the Navigation Menu widget for just such a task. The widget is extremely customizable as shown in the Navigation section of the Video Tutorials page of EverWeb website. There are also third party Navigation Menu widgets available, e.g. from everwebwidgets.com, if EverWeb’s built in widget does not suit your requirements.

One important requirement when using a navigation menu for many website developers is that it remains at the top of a page whilst the visitor scrolls the page. In this way, the navigation will always be visible.

If you have created a fixed width website (i.e. one that uses a Centered or Left Aligned page layout), check out our Creating a Sticky Navigation Menu video, which shows you how to easily create this effect.

If you have a responsive website and want a sticky navigation, read on…

Set Up: Use a Master Page

It is always recommended that you use Master Pages in your website so that you only need to add your navigation once to your website. Any page using a Master page will inherit its navigation. As EverWeb’s Navigation Menu widget is so customisable, you will only want to set it up once. If you change the style of the Navigation Menu widget at a later date in Master page, all the pages that use the Master Page will be automatically updated. This is a great time saver as you do not have to update every page in your site with the same change.

Creating The Master Page

In this example, start by creating a responsive Master page:

  1. Click on the ‘New Master Page’ button in the Master Page section of the Web Page List. This section is colored blue at the top of the Web Page List above the name of your website. If you are using Dark Mode, the area is colored black. If you do not see the ‘New Master Page’ button, drag the splitter bar (the row of dots above the name of your website) down until the button becomes visible.
  2. Once you have clicked on the New Master Page button, the Theme Template Chooser will appear. Choose the ‘Responsive Blank’ theme from the list of Theme Templates on the left of the dialog box. Click on the ‘Home’ page style and click ‘Select’ to finish.
  3. A blank new Master Page will be added in to the Master Page List. The page will be called ‘Home’, you can rename it as you would any other page in the Web Page List by double clicking on its name, entering a new name, then pressing Enter to finish.
  4. You can always check to make sure that you have created a responsive page by checking the Page Layout section of the Page Settings tab in the Inspector Window. I

Adding The Navigation To The Master Page

Now that you have created a Master Page, keep it selected. The next step is to add the Navigation Menu widget to the page.

  1. Click on the Widgets tab and drag and drop the Navigation Menu widget on to the page.
  2. As this is a responsive page, the widget will automatically display at full width. As this is the first object placed on the page, it will be appear at the top of the page.
  3. The Master page footer contains the ‘Made with Love with EverWeb’ image. You can remove this if you do not need it and add your own content if you want.

Making the Navigation Stick

Now that the Navigation Menu widget is in place on the page, it is time to make it stick so that content will be able to scroll underneath the navigation when the page is scrolled.

  1. In the Widget Settings of the Navigation Menu widget, tick the ‘Use Background Color’ checkbox and add a background color to the navigation using the ‘Background Color’ color swatch. This step will stop the contents of the page from being visible under the navigation when you scroll the page.
  2. Next, go to the Metrics Inspector and make a note of the Height of the Navigation Menu widget, e.g. by default this is usually 50 pixels.
  3. In order for the sticky navigation to work, you will need to place a dummy rectangle shape on the page. Create a new rectangle shape using the Shapes button in the Toolbar.
  4. The rectangle will be created as a full width object directly below the Navigation Menu widget.
  5. Change the color of the shape to match the color of the background of the navigation. To do this go to the Shape Options tab whilst the shape is selected. In the ‘Fill’ section change the color of the ‘Color Fill’ using the color swatch.
  6. Next, change the height of the shape so that it is the same as the height of the Navigation Menu widget. To do this, go to the Metrics Inspector and change the Height field in the ‘Size’ section to 50 pixels.
  7. Now that the changes to the rectangle are complete, reselect the Navigation Menu widget and go to the Metrics Inspector.
  8. Tick the ‘Fixed Position’ box. This will pin the navigation menu widget in place. Leave ‘Relative to browser left’ ticked
  9. When you select ‘Fixed Position’ for the Navigation Menu widget, you will notice that the rectangle shape below it slides underneath it. When using Fixed Position on a full width object in a Responsive page, it is as if the object becomes a layer above the page. 
  10. As content in responsive pages has to be in continuous sections down the page, we need to fill the space below where the navigation was. If we do not do this, when we use the Master Page on a regular page, part of the regular page content may be obscured underneath the navigation.
  11. This is the reason why the dummy rectangle shape is needed and created with the same height as the Navigation Menu widget to fill the gap where the navigation menu would have been if it had not become its own ‘layer’.
  12. Finish styling the Navigation Menu widget as you want and add the other objects you want to the Master page as desired.

Finishing Tasks

Once you have finished styling he Master Page

  1. Select a regular page in the Web Page List to attach the Master Page to.
  2. In the Page Settings tab of the Inspector Window, click on the dropdown menu in the Master Page section and select the Master page that you have just created.
  3. The Master Page will be attached to your regular page.
  4. Scroll the contents of the page to see them slide under the navigation.
  5. Use Preview to test out the sticky responsive navigation.

As this is a responsive page, the navigation will automatically on mobile devices. To display a Hamburger Navigation icon when on using the navigation on mobile pages, select ‘Responsive Navigation Bar’ in the widget settings of the Navigation Menu widget.

Video Walkthrough

You can also enjoy a video walkthrough of this blog post in our YouTube video Responsive Sticky Navigation Menus.

If you have any questions or comments about this blog post, 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

Flipboard

YouTube

Twitter

Instagram

PayPal Widget Features You May Have Missed…

January 22nd, 2020

The PayPal widget is one of EverWeb’s most popular and versatile widgets having debuted in EverWeb 1.3. It is also a widget that is frequently  updated with almost every point release of the product.

In this review of the PayPal widget, we are going to take a look at the major new features that have been introduced to it from EverWeb 2.8 onwards. Some of these additions to the widget help you work more efficiently than in previous EverWeb versions. Other features have been added or enhanced, as they have been popular requests coming from you, the user community!

Let’s begin with the introduction of Responsive Website Design in EverWeb 2.8 and how to use the PayPal widget in responsive websites.

 

PayPal Widget and Responsive Website Design

The introduction of responsive web design to EverWeb led to a host of responsive tools and widgets that blended in seamlessly to the existing product .

Whilst many of EverWeb’s existing widgets were optimized to work natively within either a fixed width and/or a responsive page, some widgets such as the PayPal widget function best as a fixed width only widget.

To be able to add the fixed width PayPal widget to a responsive page design, you first need to add a Responsive Row widget to your page. Once you have done this you can then drag and drop the PayPal widget on to the page on top of the Responsive Row widget that you have just added.  The Responsive Row widget allows fixed width objects such as the PayPal, FaceBook Like, FaceBook Page Timeline and Live Photo widgets to operate properly as fixed width objects within a Responsive page environment.

We also created a handy YouTube video about using the PayPal Widget in a Responsive page which will give you hints and tips on how to get the best out of the PayPal widget in a responsive page.

 

Product Info Section

EverWeb 2.8 also introduced a new section to the PayPal widget, the Product Info section. In this section, you can select a Product Image and/or a Product Description. This is a great feature as before EverWeb 2.8 you had to add the product image and text description manually. Now it is all incorporated in the widget.

If you have updated your version of EverWeb to 2.8 or later, this is one area where you might want to update the pages in your site that use product images and/or product descriptions. It is much easier to replace manually places images and text by using the new Product Info section in the PayPal widget instead.

 

Styled Customizable Pay Button

EverWeb 3.0 introduced a new Styled Customizable Pay Button to the PayPal widget. The new options allow you to set the text that you want on the custom pay button, and apply styling effects such as background color, text color, button border radius (which will make the button’s corners square, or rounded) and mouseover text and background colors. Additionally you can also set the Text font and size using the Fonts button options.

 

Shipping and Handling Options

When EverWeb 3.1 debuted, the PayPal widget gained a couple of requested Shipping and Handling features. The first option now looks you to apply a shipping discount when customers order more than one product.

The new Handling option allows you to apply a handling fee to customer orders. The option applies a flat fee to the whole order.

 

Updated Styled Text Editor

The Styled Text Editor was introduced in EverWeb 2.8 to the PayPal widget as well as the FlexBox and Text Section widgets. Since its introduction the Styled Text Editor has been updated for all widgets it is used in. This means  bullet and numbered lists, a remove text formatting option, and a full screen editor window which is very useful if you have a lot of text in your description.  The font list has also been optimized to be faster when being loaded for the first time.

 

Updated PayPal Widget User Interface

The growth in options and complexity in the PayPal widget has meant that some reorganisation of the widget’s features was necessary. You should find it easier to identify the section of the widget that you want to use, and there are also more helpful text descriptions than previously.

 

All in all, the PayPal widget goes from strength to strength, adding new features and refining existing ones to create the best experience without having to delve in to PayPal itself to find what you need.

If you have a question about this post, please let us know as we are always happy to help! 

 

 

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

EverWeb’s Blog Pagination Feature!

January 9th, 2020

EverWeb 3.0 introduced some great new features such as Asset List Organization and a new database backend to the Contact Form Advanced widget so that you can keep your email respondents details all in one place. EverWeb’s blogging feature also gained a couple of new features such as Blog Pagination which we take a deep dive look at in this post…

Blog Index Pagination Options

The new blog pagination feature lets you set how many blog posts per page you want to see on the blog main (or archive) page. Fully customizable buttons will take you to the previous and next page of posts or to the first and last pages in the pagination.

Setting Up The Blog Index Pagination

In the following example, I am going to set up a blog pagination using a blog that contains 35 posts. I am going to set up my pagination on the blog main page as follows:

  1. First select the blog main page in the Web Page List of the website project.
  2. Click on the blog main widget. This is the list of blog posts that you see displayed in the Editor Window.
  3. The Widget Settings tab for the blog main widget will be displayed in the Inspector Window. The first option to look at is the ‘Total Number of Posts’ option. This sets the number of blog posts, out of the total of 35, that I want to see displayed. For example I may only want to display the most recent 25 blog posts only, so I set the value at 25. The Editor Window will update accordingly so only the 25 most recent posts are visible.
  4. Next move down to the Pagination Options section and click on the ‘Show Pagination Buttons’ checkbox. The Pagination Options become available.
  5. At the bottom of the blog main widget, the pagination buttons display. When the website is published, the following buttons will become available: The ‘<<‘ arrow takes the visitor to the first page in the pagination whilst the ‘>>’ to goes to the last page. The ‘<‘ button goes back one page from the current page with the ‘>’button advances one page forward from the current page. To go to a specific page, the visitor can click on the page number button of their choice.
  6. I can now select how many of the posts from the 25 ‘Display Posts’ I have to see at one time. For example I may only want to have 5 posts displayed at a time. Therefore, I set the ‘Posts Per Page’ option to 5.
  7. The Editor Window will update so that I now only see 5 posts per page. As I have 25 posts that I want to display, the pagination buttons update to show numbered buttons 1, 2, 3, 4 and 5.

Styling The Blog Pagination Buttons

Now you can style the pagination buttons using the Pagination Options section:

  • Background Color: Sets the background color of the buttons that can currently be clicked upon, except for the current page.
  • Mouse Over Background: The color used when you mouseover a button.
  • Selected Background: This is the color used for the currently selected page.
  • Disabled Background: This is the color used for buttons that are cannot be currently selected. For example, if you are currently on page one of the pagination, the previous page and first page pagination buttons will not be available for use.

You can adjust the look of the pagination buttons using the ‘Border Radius’ option. To make the button rectangular set the ‘Border Radius’ to zero. To make the button appear elliptical, set the value to the maximum of 50

To change the font and font size and style of the pagination buttons, double click on the pagination buttons in the Editor Window. The whole row will become highlighted. Next, click on the Fonts button in the Toolbar and change the font and font size as you want using the Fonts Panel options.

Preview your blog and try out the buttons before you publish!

Video Walkthrough

You can also watch our video walkthrough: Blog Pagination in EverWeb.

If you have any questions or comments about this blog, please let us know in the Comments Section. Thanks!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

12 New Contact Form Advanced Widget Features in EverWeb 3.0! Part II

December 19th, 2019

The first part of this blog post took a deep dive into many of the Contact Form Advanced widget’s new features that were introduced in EverWeb 3.0. After exploring features such as import text file, Placeholder text, Selection List control type and Control Padding, this post takes an in-depth look at the remainder of the widget’s new features…

New ‘Control Section Options’

The updated Contact Form Advanced widget’s settings have been reorganised in EverWeb 3.0 with the introduction of the new ‘Control Section Options’ section. This gives you greater flexibility in the display of your form controls with a number of small, but significant, new features that can make a big impact to your form.

The first option allows you to add a Custom Background Color for the currently selected control. Select the control that you want in the Form Controls list, then check the ‘Use custom background color’ option. The color swatch then becomes available so that you can choose the color that you want as the background. This is a great feature when you want to highlight a particular field in your contact form.

The Control Padding feature adds vertical and horizontal padding to the currently selected control. If you want vertical padding only, select the ‘Control Spacing’ option in the Fonts and Styles section of the widget. However, note that this option applies to all of the controls in the form. You may find that you get best results using a combination of the two options.

The third new Control Section option is ‘Max Content Width’. This option lets you control how wide the control can be. This is a useful option when the form is displayed on a large monitor. You may find that the fields in the form appear too wide. Use the Max Content Width option to limit how wide the field can be displayed on a screen.

The final new option in the ‘Control Section Options’ is the control ‘Alignment’ field. Highlight the control that you want in the Forms Control list, then use the Alignment dropdown menu to set the control to be either Left, Center or Right aligned.

New Submit Styled Button

EverWeb 3.0 introduced the Styled Button to the PayPal and Contact Form Advanced widgets. In the Contact Form Advanced widget the Styled Button is used specifically to style the ‘Submit’ button. In the PayPal widget, the Styled Button can be applied to all of its button types: Add to Shopping Cart, Buy Now, View Cart and Donate. For both widgets, the Styled Button works in the same way and has the same features.

When using the Contact Form Advanced widget, you can either use the default button, your own button image or a Styled Button. In all scenarios, start by changing the ‘Submit Caption’ to change the button’s label. If you want to change the alignment of the button to either left, center, right or full width, use the ‘Alignment’ dropdown menu.

Next click in the ‘Use styled button’ box to activate the Styled Button’s settings. If you already have ‘Use Custom Image Button’ already checked, this will be deactivated in favour of the Styled Button settings. If you decide that you actually want to use an image and not a Styled Button, recheck the ‘Use Custom Image Button’ which will automatically deselect the Styled Button options.

The options for the Styled Button are straightforward to use. Set the background color of the button using the ‘Background Color’ swatch and change the color of the button’s text using the ‘Text Color’ swatch. Use the ‘Border Radius’ option to set how rounded the button’s corners will be. If you have a setting of zero, the corners will be square, whilst using a setting of 50 will make the corners very rounded. The ‘Mouseover Background’ and ‘Mouseover Text’ options set their respective colors for when a visitor mouses over the button. The final option is ‘Button Font’. Click on the ‘Fonts’ button to open the Fonts Panel where you can adjust the type of font and font size so that they match the style of your website.

On their own, the new features added to the Contact Form Advanced widget make for a significant upgrade in features and functionality. Add in the SPAM Protection and Contact Form Enhanced Addon, and you have the perfect way to create the contact form that you have always wanted!

If you have a question, comment or suggestion, please let us know in the Comments Section. We’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram