By One of the great things about EverWeb is that when it comes to designing your website, you can choose how you lay out the EverWeb User Interface (UI) to suit your own needs. There are many different ways to configure your EverWeb environment to be just how you want it. This will help make building your site a more fluid, efficient experience.
Small Screen?, No Problem
If you’re developing your site on a small screen sized laptop, such as on a 13 inch (33cm) or less, you might have the need for some more screen real estate. If so, you can trim EverWeb’s UI down to maximize the Editor Window instead. Probably the first thing to remove is the Toolbar at the top of the UI. All Toolbar functions are can be found in EverWeb’s menus, so this is a good part of the UI to hide away. Just use the Window-> Show/Hide Toolbar menu option. As this is a toggle, you can get the Toolbar back using the Window-> Show/Hide Toolbar menu option again. Easy! Alternatively, use the keyboard shortcut toggle of Command+Option+T on a Mac and Ctrl+Alt+T in Windows.
The Window menu is also where you can hide the Inspector Window which runs down the right hand side of the EverWeb UI. In this case use the Window-> Show/Hide Inspector menu option. If you’re using EverWeb version 4.0 or higher, you can use the Settings Cog button in the Object’s Toolbar to change the object’s Widget Settings. To change other settings that are only in the Inspector Window, you can quickly bring back using the Command+Option+I keyboard shortcut toggle on a Mac, or Control+Alt+I in Windows. Alternatively, use the Window-> Show/Hide Inspector menu option.
If you want to remove all of EverWeb’s UI and just have the Editor Window to work with, use the Window-> Presentation Mode menu option (Commmand+. on a Mac, Ctrl+. in Windows). Presentation Mode is usually used so that you can see how your page is going to look without having to use EverWeb’s Preview feature. In this instance, you get the additional benefit of a UI free Editor Window. You can still edit the page whilst in Presentation Mode. Again, to exit from this mode, use the shortcut key toggle, or the Window-> Presentation Mode menu option again. In this case, you’ll see a checkmark against the menu option that indicates that Presentation Mode is currently active.
Note that the only part of the EverWeb UI that you can’t individually hide is the Web Page List that runs down the left hand side of the UI.
Customizing the Editor Window
The second area in EverWeb that you’re likely to want to customize to your own needs is the Editor Window, the area in the middle of EverWeb where you build your pages. Again, this is an area where the Window menu comes in to play, but there are other settings available to further customize your EverWeb experience, but we’ll get to those later…
Changing UI Height and Width..
You can easily change the height and width of a couple of UI elements in EverWeb. The first is the Web Page List, which you can change the width of if needed. Simply, put the mouse to the right hand edge of the Web Page List until the mouse pointer changes to a vertical bar with a double headed horizontal arrow bisecting it. You can now drag the right hand vertical edge of the Web Page List left or right until it’s how you want it. Note that when you do this, any other EverWeb projects that you may have will adopt the same setting. At the moment, this is a global system function. We’re hoping that this will change in the future so that you can set the Web Page List individually for each project.
If you’re using EverWeb’s blogging feature, you adjust the height of each section of the Posts page. Again, hover the mouse cursor in the area between sections until it changes to the move border icon e.g. if you want to increase the height of the blog posts section at the top of the posts page to see more posts. Once the mouse cursor has changed, drag the border up or down until you get the height that you want.
Use this method to change the height of the Blog Posts section, the Blog Post Editor Window and the Blog Posts Preview Window. Again, these changes will affect all of your project files.
The other option that affects the appearance of EverWeb’s UI is the Window-> Show/Hide Rulers option. As the name implies, when you toggle this option on, the rulers that run across the top and down the left hand side of the Editor Window will not be displayed.
Using EverWeb’s Settings To Customize Editor Window Features
In addition to changing the look of EverWeb’s UI to suit your needs, you can also set preferences for the Editor Window. These settings can be found in two different locations. In the Window menu, and in the EverWeb-> Settings menu option on a Mac or using the Edit-> Options menu in Windows. If you are using a version of EverWeb for Mac prior to version 4.2, EverWeb-> Settings is referred to as EverWeb-> Preferences. Let’s stay with the Window menu for the moment.
The first option that you may find useful is the Window-> Show/Hide Layout menu option. This does just that, it removes the blue border lines from view that separate the sections of the page from each other. You;’ll also notice that the margins padding is no longer displayed if you have set margins for objects.
The next option of note is the Window Show/Hide Breakpoints. This is usually an option that’s not on as default as you’ll probably only want to use this in a Responsive Page Layout. Even then, you’ll only want to use this option if you’re needing to check how your page is going to look when being viewed on different device types. if you’re an advanced EverWeb user this may be an option for you.
The last option in the Window menu is ‘Show Hidden Objects’. This option is used when you have objects that are only displayed on certain device types. For example, you may want to display TextBox on a desktop device but not on a mobile device, where you want it to be hidden. Use the menu option to force EverWeb to show the contents of the hidden object. To set an object to only display on certain device types, use the Responsive section of the Metrics Inspector. When using hidden objects, you may also want to use the Show/Hide Breakpoints menu option.
EverWeb’s Settings/Options menu
The remaining configurable UI options can be found in EverWeb’s Settings on a Mac, using the EverWeb menu. If you’re an EverWeb Windows user, use the Edit-> Options menu to access these options. Once you have accessed the menu, click on the General tab to view the options that you can configure. There are two sections that can be customized. The first is Alignment Guides that sets how objects are aligned. The second section is the Interface section. Here you can toggle the Hyperlinks display indicator on or off, and also set how you want EverWeb’s layout buttons displayed. You can either use small or standard sized display buttons.
EverWeb allows you a lot of freedom to customize its UI to suit all of your working needs. We’re looking forward to the next version to see what’s in store for more user UI customization possibilities!
Loading ...
Comments