Top 2 deals for RAGE Software Software

The latest release of EverWeb brought with it many headline features such as Popup Windows, the Carousel Widget and Object Pinning. There is though, one other new feature that to all intents and purposes is invisible in this release and that’s Saved State. Yes, EverWeb 4.5 now remembers how your project file has been set up so that when you re-open it, you will find it as you left it.

You will also find that most of the Save State settings are applied to each project individually. In versions of EverWeb prior to 4.5 if you had multiple projects and changed, for example, the position of a splitter, this would affect all of your projects. Now that will not happen and only the project you have changed will keep the changed setting.

EverWeb’s Saved State

So what exactly gets saved when you exit your EverWeb project file? For a start, the Web Page List that runs down the left hand side of the app gets saved as it is at the time you exit the project. This is a long requested feature that our users have been asking for, and we are happy to deliver it! If you have folders open or closed in the Web Page List they will remain in the state that you set them up in.

You will also notice that when you reopen your project that you will now be on the page that you were on when you closed the project, rather than being back on the Home page. So, you can immediately carry on where you left off, rather than having to remember where the page is that you were on and then having to navigate to it.

Splitters

You will also see that Splitter lines remain where you set them. Probably the most prominent use of a splitter line is on the Web Page List’s right hand vertical edge. This is where it buffers up to the Editor Window. When you mouse between the border of these two sections, the mouse pointer will change in to a splitter icon. Click and hold to adjust the width of the Web Page List in relation to other Editor Window. This is very handy when you have long page names that you need to see more of in the Web Page List. You will also find a horizontal splitter too, between the Master Page and Regular page sections of the Web Page List.

In the Blog Posts page each section has a horizontal splitter separating it from the next section. In addition, in the Blog Posts List, the top section, there are vertical splitters that can be moved left and right. Note that these Splitters get reset when you exit and return to your project.

Page Layout Display Options

In addition to the new automatic “Saved State” feature, there are other ways in which you can tailor your site to how you want to work. Some of these options will always be applied, some will only be applied for your current EverWeb session. Some of the options will affect what you see displayed in the Editor Window whilst others affect the EverWeb UI which we discuss below.

Most options that affect the Editor Window can be found in the Window menu. For example you can hide the layout lines that usually display in the Editor Window. The same is true for the horizontal and vertical ruler guides that are usually displayed around the Editor Window. Additionally, there is also an option to display vertical breakpoint lines which is useful when seeing how your design will look across different browser window widths.

There are a couple of options that are available that are not available from the Window menu. These are the Hyperlink indicator (the white arrow in the blue circle icon), position guides and the option to make layout buttons smaller or larger in the Editor Window.

The last feature that you can show or hide in the Editor Window are hidden objects. These objects are one that have Show on Device set on or off in the Responsive section of the Metrics Inspector. Depending on their settings these objects will only appear on the device types that you have selected. By default All device types are selected. If you have selected, for example, a Textbox, not to appear on a desktop device, the TextBox would be hidden until you increase or decrease the width of the EverWeb app for it to appear. Using the Show/Hide Hidden Object feature, you can see where the object is on the page when it is hidden. This is useful when you want, in this example, to edit the text in the TextBox, or other hidden object.

Setting Up Your EverWeb UI

EverWeb also lets you customize the UI. For example, the Toolbar can be hidden if you need more screen real estate using the Window-> Hide Toolbar menu option. You can also hide the Inspector Window, but this option is session-specific so it will reappear the next time you open the project.

If you’re looking to se how your page will look but do not want to preview your project, try using the Window-> Presentation Mode. This will strip out the EverWeb UI so you can see how the page will look. Everything on the page is still editable so be careful when using this option. Also when using Presentation Mode, when you exit from it, the Toolbar will be reinstated if it was previously hidden.

Setting Up EverWeb’s Settings/Options

There is one other important area of EverWeb that has an effect on your user experience. On a Mac this will be your EverWeb-> Settings menu. In older versions of EverWeb you will see this option as ‘Preferences…’. For Windows users, it is the Edit-> Options menu option. This option will show you a number of options that can be toggled to affect EverWeb’s UI.

These options are found in the General tab. This is where you can toggle the Hyperlinks indicator on or off. You can also set how you want your object alignment guides displayed and also how you want Layout buttons displayed, either small or normal sized.

Customizing your EverWeb workspace now only takes a few minutes and together with Saved State, will help you save time and frustration as everything will be where you expect it whenever you use EverWeb!

The post EverWeb Your Way: Setting Up Your Work Environment… first appeared on Website Building for Mac OS X | EverWeb Website Builder.

Two of EverWeb 4.5‘s new features, On Click Actions and Popup Windows can be easily and effectively combined to make it easy to trigger actions based on user interaction in the pages of your EverWeb site.

On-Click Actions allow you to trigger actions when a visitor clicks on an object on the page, such as a button. You can even daisy-chain use On Click Actions to trigger a sequence of actions if you need to .

In this post, we are going to look at how to combine On Click Actions with another new EverWeb 4.5 feature, Popup Window. We are going to create a Video Popup Window that will display in the bottom left hand corner of the screen when a button is clicked on in the page.

Exploring The Popup Window’s Close Button

To start, let’s add a Popup Window to the page. Select the page you want the Popup Window to appear on, then click on the Popup Windows button in EverWeb’s Toolbar. Select the option ‘New Popup Window’. A new Popup Window will be added to the page. 

Name the Popup Window ‘On Click Video by clicking in the Popup Window’s Object Label, which by default is ‘Popup Window’. Rename the Popup Window then press Enter to finish.

The next thing we want to do is to click on the Close button in the top right-hand corner of the Window. This is where we will see On Click Actions at work, but that for later on… in the meantime, click on the Metrics Inspector. Notice that the Close button has its proportions constrained so that it keeps its length and height in proportion if you resize it. The next thing to note is that ‘Allow Free Dragging’ is set on. This means that you can move the button around the Popup Window and pin it to whichever sides you want. Use the ‘Pin Settings’ button for this purpose if you need to. The last thing of note here is that the icon has ‘Always on Top’ set on so that it always floats above other objects within the Popup Window.

In this example, let’s change the color of the Close button. Click on the Shape Options tab then change the Fill Color to something else. In this example, I am going to use green. I can also change the button used if I want to as well. To do this, go to the Background Mask section. You will see the Close button in the Background Mask’s preview window. Note that it is an SVG file, so will not lose resolution at scale.

Click on the preview image on the left-hand side of the Background Mask section. Click on the User Interface selection and choose a different Close button. In this example, I am going to use a filled in circle with a cross in the middle of it. After changing the icon, you will notice that the button uses the color we chose earlier.

Next, position the Close button so that it sits in the top right corner of the Popup Window. You should not need to adjust the Pin Settings as they are already set to pin the button to the top and right-hand edges of the Popup Window.

The Close Button’s On Click Action

Now that the Close button has been styled and positioned as we want, let’s look at its On Click Action. Click on the Hyperlinks tab in the Inspector Window. You will see that the On Click Action section is open and that there is one item in the On Click Action list. This shows that when the button is clicked, the parent container, i.e. the Popup Window, will close.

Creating The Video Popup Window

Now let’s create our video popup. Click on the Add button in the middle of the Popup Window. Choose ‘Video’. This will add a Video Fill to the Popup Window. Click on the Shape Options tab if it is not already selected. Choose the video that you want to play in the Fill section. Usually it is best to link to a video rather than to embed a video in to your project. In this example, I am going to change External Video URL to YouTube. I can then easily add in my YouTube video link in the field below. Choose the appropriate options. Remember that it is important that ‘Show Controls’ is checked so that the user can play the video. The one option you should not check is ‘Auto Play’. If you checked this, the video will automatically play when the page loads, which is not what we want, so do not check this option!

The next step is to match up the Video Fill and the Popup Window so that the latter appears like a frame around the video. In my example, I need to widen the video and reduce the dimensions of the Popup Window until the Video Fill is framed how I want it.

When adjusting the Popup Window, you will notice that the video sits at the top of it. To change this, first make sure that the Popup Window is selected. Next, go to the Widget Settings and set Object Alignment, Vertical to ‘Middle’. Reframe the video within the Popup as desired. Whilst we have the Widget Settings open, let’s also position the Popup Window into the bottom right-hand corner, using the Position dropdown menu option. The last thing we need to do is to set how the Popup Window will be triggered. Change the ‘Popup Trigger’ to ‘Manual’.

We are almost done with the Popup Window. The last thing I want to do is to change the background color of the Popup Window. As it is still selected, we can go back to the Shape Options tab and change the Color Fill to the color we want. Make sure that the frame contrasts with the color of the Close icon.

Creating an On-Click Action Button

The final task is to create a button that when clicked upon, causes the Popup Window to appear. Add a rectangle shape to the page and add a button text to it, for example ‘Press Me!’ With the button still selected, go to the Hyperlinks Inspector.

Now we need to set up our On Click Action. In the Action field, set the menu option as ‘Show’. Next click in the Element field. Choose ‘On Click Video’ from the list of objects. The last step is to click on the Add button so that the On Click Action is added to the list of actions.

Testing and Publishing

Click on Preview to test. To fully test, publishing may be better as you will then see the YouTube video in action.

The post Using On Click Actions with EverWeb’s Popup Windows first appeared on Website Building for Mac OS X | EverWeb Website Builder.

For macOS users, macOS 27 Golden Gate is going live now around the world as Apple has just started its global rollout! We have tested EverWeb 4.5 against the new OS whilst it was in beta and fortunately we found no issues!

When you decide to update your macOS to the latest version, please remember to back up anything critical on your computer before you install the new software, including your EverWeb project files. You can also get EverWeb to back up your project files on a regular basis. Check out how you can do this our post about Backing Up Your EverWeb Project Files.

We also recommend always using the latest version of EverWeb at all times so before you start to back up your computer, check to see if there is a more up to date EverWeb version you can install. Use the EverWeb-> Check for Update… menu to find out.

We are already testing the next release of EverWeb, version 4.6 against macOS Golden Gate to ensure that it is also fully compatible with Apple’s latest OS release.

If you encounter any problems, please touch base with EverWeb Support.

The post macOS 27 Golden Gate and EverWeb Compatibility first appeared on Website Building for Mac OS X | EverWeb Website Builder.

The new EverWeb 4.5 release, for macOS and Windows, brings a whole host of new features such as Object Pinning, the Carousel Widget, Overlay Effects and Background Masks. In addition to these new EverWeb features we also introduced On Click Actions. This new feature gives you the ability to control what happens when a visitor to your site clicks on an object. Use On Click Actions when you want to add one, or more, step by step actions that are activated on the click of a mouse. On Click Actions help you control where you want your visitor to go in your site, or activate Call To Actions.

The following is an example of an On Click Action that is used to facilitate a video playback button for a video fill on the page,. During this process we will explain how the On Click Action is used.

1. Start by adding a Video Fill to the page. This will contain the video that our video playback button will play when it is pressed. To add a Video Fill click on the Shapes button in the Toolbar, then click on the first shape in the list – the rectangle shape. We sometimes also refer to this button as ‘referred to as the ‘default shape’.
2. Next, click on the Shape Options button in the Inspector Window on the right hand side of the screen. In the Fill section, change the Fill Type for the rectangle shape from ‘Color Fill’ to ‘Video Fill’.
3. You now have some choices about where the video you want to use is located. From the dropdown menu, choose the option that fits where your video is located which will be either External Video URL, Local Video File (if your video is stored in the project’s Assets List), YouTube Video, or Vimeo Video.
4. After the Video Fill has been added to the page, name the Video Fill. This will make it easy to locate when the On Click Action is created later on. To change the name of the Video Fill, double-click on the ‘Video Fill’ name label that is displayed at the top of the Video Fill. In this example I have renamed the Video Fill as ‘My Video’.
5. The next step is to add a Video Playback button to the page. In this example, I am going to use a Triangle shape. Click on the Shapes button in the Toolbar again. This time choose the Triangle shape. 
6. Position the triangle where you want it on the page. To rotate the triangle so that it looks like a play button, go to the Metrics Inspector. In the Rotation section, set the angle to 270 degrees. This will result in rotating the triangle so that it looks like a Play button. You can style the triangle if you want, by adding a shadow to it.
7. If you prefer, you can use a Background Mask as the Playback button instead of a triangle. In this case, add a default shape or rectangle shape to the page, then check the box to activate Background Mask in the Shape Options tab. Click on the SVG button then select, for example, an arrow shape. Once added, the SVG file will retain its sharpness at any resolution. You can add effects to it as well such as color and Overly Effects if you want.
8. After adding your Playback button, keep it selected, then click on the Hyperlinks Inspector button in the Inspector Window. If the On Click Actions section is not open, click on the triangle to the left of ‘On Click Actions’. The section will open. 
9. Click on ‘Select an Option’ in the ‘Action’ field. Choose the ‘Play’ option. 
10. The Element field will now become active, and this is where we add the Video Fill to be played. Click in the Element field and select ‘My Video’. 
11. The ‘Add’ button is now activated, so click on it to add the new On Click Action to the On Click Action list. A dashed line will appear, connecting the Play button to the ‘My Video’ Video Fill.
12. We have now finished our Video Playback button.
13. Click on the Preview button in the Toolbar to preview and test out the On Click Action. Click on the Play button that you created and you should see the video play. 

What Next? Exploring On-Click Actions

In our example, the next step would probably be to create other buttons in the same way, such as pause, stop and toggle playback, and mute and un-mute. You can even daisy-chain actions together to make a sequence of events. You may find when running a series of On Click Actions one after the other that in that the Delay feature comes in handy. And don’t forget that On-Click Actions are great to trigger Popup Windows for example, as well as hiding objects once their actions have been completed.

We have only explored one example of the uses of On-Click Actions. The rest is down to your imagination!

The post Getting Started with EverWeb’s NEW On Click Actions first appeared on Website Building for Mac OS X | EverWeb Website Builder.

If you’re designing your responsive website in EverWeb, its new object pinning feature, which debuted in EverWeb 4.5, is a must have feature addition! What object pinning allows you to do is to attach objects that are inside a Container to its edge, or to the edge of the page. Pinning objects to a Container, or page edge, allows you to design with more freedom when using a responsive page whilst still conforming to responsive web design principles. In essence, you can now design your responsive page in a way that is more akin to fixed width page design principles than ever before.

Allow Free Dragging

To be able to use object pinning, first select the object you want to pin, then go to the Metrics Inspector. In the Position section, check the box to set ‘Allow Free Dragging’ on. Doing this in itself will allow the object to be moved around the Editor Window freely as if it were an object on a fixed width page. You can even drag the selected object across boundaries such as between the Content and Footer sections. Checking the ‘Allow Free Dragging’ checkbox is a requirement for activatint the Pin Settings button which you will see is now visible.

Pinning Objects with Pin Settings

The Pin Settings button allows you to control how the selected object is pinned on the page or container. Click on the Pin Settings button to view and modify the selected object’s Pin Settings. In the window that pops up, you can set object pinning to the horizontal edge of the container, the vertical edge of the container, or both. For vertical pinning, you can choose to either pin the object to the Top, Middle or Bottom of the Container by clicking on the appropriate button. For horizontal pinning, click on either the Left, Center or Right buttons.

If you prefer, you can pin the object to the horizontal and/or vertical edge(s) of the page by checking the horizontal and/or vertical ‘Constrain to edge’ checkbox(es). In addition, you can also use either a pixel value or a percentage value for the pinning. If you use pixel value, the pinning will be fixed, i.e. always at the same pixel value, as you increase or decrease the width of the browser. So if you place the object your are pinning 50 pixels away from the edge of the Container or page, it will always be 50 pixels away from the pinned edge no matter what the browser width is. If you use Percentage on the other hand, this becomes relative so if the object you are pinning is 10% away from the browser edge, it will always be at 10% as you adjust the browser width.

The great thing about object pinning is that you can mix and match the pinning to suit your requirements. Sometimes you may just need horizontal pinning and not vertical pinning for example. You can test out your pinning just by changing the width of the EverWeb app. You will see what happens to the pinned object immediately so can adjust your pinning until you are happy with the results.

Object Pinning Visual Feedback

When you use Pin Settings on an object, you will see the settings translated visually in the Editor Window. Pinning guides will display on the edges that you have selected to pin. You will also see Pixel or Percentage values as well alongside the pinning guide lines. This information will help you to pin objects with accuracy.

Freeing Objects in Container Row and Container Column

As well as Object Pinning in general, EverWeb 4.5 goes one step further in that you can use pinning in Container Rows and Container Columns. This is a boon when you want to keep the structure of the Container but need to position e.g. a single object inside the Container, in a ‘Container Free Flow way’. You could use a Container Free Flow Container perhaps, but free-flow is just that so it will be more difficult to keep objects aligned in the way that a Column or Row Container can. So, the solution is easy. Create your Container Row or Column, then populate it. Click on the object you want to “free” from the Container structure, then hit Allow Free Dragging. Move the freed object to where you want within the Container (or page) and use the Pin Settings as you want. Easy. Either change the width of the EverWeb app, or use Preview to see how the pinning works in practice.

EverWeb’s Object Pinning feature is a great addition to its feature set, freeing your design whilst still following responsive web design rules!

Check out our video at the top of the page for a run through of Pin Settings!

The post Exploring EverWeb’s NEW Pin Settings for Complete Object Control! first appeared on Website Building for Mac OS X | EverWeb Website Builder.