14 Dec 2017

Easy, Advanced Hyperlinking with Scroll Position!

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

Hyperlinks are something almost every website you design will include at some stage. In EverWeb, even the Navigation Menu widget is based on hyperlinks to specific pages in your website.

The Hyperlinks Inspector tab in the Inspector Window is used to link to other pages within your website, to your email program or to enable the downloading of linked files such as .pdf files. EverWeb version 1.9 added the ability to open hyperlinked pages within pop-up windows or in a new window. Now EverWeb version 2.6 lets you do even more with the new Scroll Position feature.

Introducing Scroll Position

Scroll Position places an ‘anchor’ in the place you want it on your web page that can be hyperlinked to, from any page within your website. For example, you may want to set up a Scroll Position to take your visitor to a particular paragraph on your page, or to an image or media object. You may also want to use it to create a ‘Back To Top’ feature for your page which we’ll come on to later…

Introducing Scroll Position

To set up a Scroll Position go to the page where you want to add it then click on the Scroll Position button in the Toolbar, or use the Insert -> Scroll Position menu option. You’ll see a turquoise line appear across the width of the page. This means that the Scroll Position line is currently selected. If you click on another part of the page, the Scroll Position will be deselected and changes to a dark blue color.

To select a Scroll Position line, just click on it. Its color will change to turquoise. Scroll Position lines don’t have selection handles as they’re a special type of object so if you want to move it just click and drag the line to where you want it. Release the mouse button to finish. You’ve now set up an ‘anchor’ that you can hyperlink to.

If you’ve added a Scroll Position to your page by mistake just select it then hit the backspace key on your keyboard to delete it.

Naming Scroll Position Lines

Each Scroll Position has a unique name. To see the name, select the Scroll Position then click on the Widget Settings tab in the Inspector Window. You’ll see the default name ‘scroll position-‘ followed by a number. The number represents the vertical (Y) position of the Scroll Position line on your page. Remember that the zero vertical ‘Y’ position is at the top of the page. If you move the line up or down the page, the Y position number will update when you reselect the Scroll Position.

The Scroll Position ‘Unique Name’ can be edited which is handy if you have several Scroll Positions on the page.Using a user friendly name will make it easier to identify the Scroll Position rather than having to remember its location on the page. It’s good to use Unique Names if you’re using Scroll Position to jump to different sections, or paragraphs, on a page.

Hyperlinking with Scroll Position

To Hyperlink an object to the Scroll Position you’ve created,

  1. Click on the object you want to Hyperlink to. This may be on the same page as the Scroll Position, or on a different page, in your website.
  2. Next go to the Hyperlinks Inspector and tick the ‘Enable as Hyperlink’ checkbox.
  3. Set the ‘Page’ dropdown to the page that includes the Scroll Position then click on the ‘Position’ drop down.
  4. Here you’ll see ‘Page Top’ and the Scroll Position Unique name that you added earlier.
  5. Click on the Scroll Position.
  6. Your Scroll Position is now set up!
  7. Use EverWeb’s Preview to test that the Hyperlink scrolls you to the location of the Scroll Position that you set up.

Creating a Back To The Top Feature

You can also use Scroll Position to add a ‘Back to Top’ feature on your page to smooth scroll from the bottom of the page to the top,

  1. Start by adding a TextBox to the bottom of your page with ‘Back To Top’ as the text.
  2. Next, add a Scroll Position and move it to the top of the page (e.g. at Y position zero).
  3. You may want to call the Scroll Position ‘Back To Top’ although this step is optional.
  4. Finally, link the Scroll Position to your ‘Back to Top’ text as described above.
  5. Again, use Preview to test that the Scroll Position functions as you expect!

Scroll Position is a great way to easily hyperlink to exactly where you want to take your visitors in your website! Have fun with this new feature and please let us know if you have any questions!

30 Nov 2017

EverWeb 2.6 Is Here! Lightning Fast Publishing, Scroll Position and Much More!

No Comments EverWeb, Software, Web Design, Widgets

EverWeb version 2.6 has just become available with a raft of new and updated features to enjoy. It’s a big release so here are some of the major highlights you can look forward to…

Lightning Fast Publishing
EverWeb 2.6 allows you to set the number of connections to the publishing host server through the EverWeb-> Preferences menu. This means that publishing of files to the host server can now be done in parallel rather than one file at a time. The result: much faster publishing, possibly up to 5x the speed of EverWeb 2.5. This is great news, especially if you’ve got large project files to publish.

Publishing also gives you more accurate and detailed information on the Site Publishing Settings screen during the publishing process.

Support for FTP+SSH
In addition to lightning fast publishing, EverWeb now supports FTP+SSH in addition to FTP and FTP+SSL. There’s also a new ‘Test Connection’ button that you can use before publishing to check your connection to the host server.

Scroll Position
EverWeb now supports anchor links so you can set up hyperlinks anywhere in your project pages e.g. if you want to hyperlink to a particular section in your web page, such as a paragraph heading, you can do this easily by inserting a Scroll Position line at the paragraph heading. When you click on the hyperlink linked to the Scroll Position, you’ll be taken directly to the paragraph heading. In previous versions of EverWeb you would be taken only to the top of the page you hyperlinked to.

Checkout the video on the new Scroll Position feature.

Updated UI Elements
EverWeb’s UI has had a freshen up in version 2.6 with room being made on the Toolbar for Scroll Position. There’s also a new, fresh look for all of the built-in widgets in the Widgets tab.

Insert Buttons have also seen an update with fresh new looks for all of EverWeb’s buttons bringing them up to date with a contemporary look. Buttons are now also scalable too so you can size them as you like.

Theme Templates
There’s lots happening with Theme Templates in this version of EverWeb. First of all, when you open the Theme Template Chooser, you can now just start typing the name of the theme you want if you know its name as EverWeb uses Type Ahead technology to take you quickly to the template you want.

In addition, any new templates that are downloaded are flagged with a ‘New’ badge so you can easily see what’s new.

The best news though, is that at least 20 new themes have been added with this version of EverWeb! Many of the new templates employ new version 2.6 features such as Scroll Position. Some templates themes also have a ‘Blog’ page as well. Some of the new templates feature Google Fonts, so when you install them, you may be asked if you want to download the theme’s fonts as well which we recommend you do!

PayPal Widget Updated
For those of you who use EverWeb’s E-Commerce PayPal widget, you’ll notice that the buttons for ‘Buy Now’, ‘Add to Cart’ and ‘View Cart’ have been updated with PayPal’s latest designs. There’s also a brand new ‘Donate’ purchase type available. If you use your own customized buttons, these can now be scaled in size.

Preview Server Updated
EverWeb introduced Preview Server in version 2.5. In the new 2.6 release you can find settings for the feature on the EverWeb-> Preferences-> General tab. You can turn Preview Server off if it causes problems with your browser (e.g. Google Chrome may be problematic). You can also see the IP address used for the preview in Preview Server’s Preferences. This is useful as you can now preview on one device on your network and view that preview on any other device connected to your local network.

Other Notable Enhancements
A lot of work’s been done with fill types, especially for page and browser backgrounds so that they now work better. There’s also improvements to how scaling works in Shape Options. The Facebook Page Timeline widget includes fixes for issues with the Show Timeline, Show Events and Show Messages checkboxes not being respected. The RSS Feed, Audio and Video widgets have also had some minor tweaks and upgrades.

These are just some of the highlights in the new version of EverWeb. There are a lot more little nips, tucks and fixes in this version so updating is highly recommended.

If you have a question about this article, please drop us a line in the Comments Section below!