Mac SEO Blog

The PayPal widget is perhaps one of EverWeb’s most feature rich widgets. As you may know, PayPal has over 203 million active user accounts and over 16 million merchant accounts active in 200+ markets worldwide. PayPal can be used even if you do not have a PayPal account as it accepts popular credit and debit cards from sources such as Visa, MasterCard and American Express.

EverWeb’s PayPal widget is ideal for facilitating e-commerce on your website without having to use code. Once you have signed up for a PayPal business account and have been authorised to use its e-commerce system, you can do many PayPal tasks within EverWeb just by using the PayPal widget.

The New PayPal Widget Donate Button

The latest update to the PayPal widget came with EverWeb version 2.6 when it gained updated button styles for the ‘Add to Cart’, ‘Buy Now’ and ‘View Shopping Cart’ icons. EverWeb also added in PayPal’s Donate button so that it is easy for you to help visitors give money to worthy causes.

The Donate button works in the same way as the Buy Now button in that it sends the donation funds to your PayPal account. Also be aware the usual fees for Credit Card transactions apply, although you can apply for discounted rates if you are a registered charity. Check out your local PayPal site for more information about how PayPal transaction fees apply in your country and for localized information relating to PayPal and registered charities and non-profit organisations.

Using the New Donate Button

The new Donate button works in the same way as the Buy Now button. To use the Donate button:

1. Add the PayPal widget to your page and move it to where you want it located on the page.
2. In the PayPal Widget Settings, enter the email address that corresponds to your PayPal account. You can set up different email addresses linked to your Merchant ID so e.g. you can set up an email address for donations. In this way, any donation transactions will be notified to the donations email address.To add an email address to your PayPal account, log in to your PayPal account and click on the Profile settings cog. Add a new email address to your PayPal account by clicking ‘Update’ in the Email section of the screen and completing the required fields. Once set up you can use this email address in the Email Address field of the PayPal widget.
3. Next set the Button Type to ‘Donate’. You can select the Button Sub Type as either ‘Product’ or ‘Service’.
4. In the Item Name field enter a name that reflects that this is a donation.
5. The following field, ‘Item ID’ is a key field that you must fill in. If you do not, then transaction will not work at all. It does not matter what kind of Item ID you use here but the field must be completed e.g. you could simply use the word ‘DONATION’.
6. As this is a donation, the Price field can be left blank if you want the donator to enter in their own amount when they click on the Donate button. You can also enter in a set amount in the field if you want.
7. Complete the currency that the donation is to be made in and also complete the ‘Country’ field appropriately.
8. As the donation will be made online, you do not have to complete any shipping information.
9. You may need to check with your local tax authorities to see if donations are liable to tax or not. Complete the ‘Tax Rate (%)’ as required.
10. It is recommended to select ‘Open shopping cart in new tab’ so that a new window is opened for the transaction.
11. Leave the ‘Show quantity field’ unchecked as the user will likely be making only one donation.
12. Use the Add button in Product Options/Prices to create set different levels of donation amounts. If you want donators to enter in their own amount, or you want just one set amount donation, do not add any Product Options/Prices. As in Step 6 above, in these instances leave the Price field blank (for donators to enter their own amount) or add an amount in the Price field for a set amount donation.
13. For the name of the Product Option you may want to include the currency symbol of the donation currency e.g. $15.00, €15,00, ¥100 etc. Also remember when filling in the donation amount in the prices part of the field to use the decimal period (full stop) or decimal comma as appropriate. If you use the wrong separator the transaction will fail.
14. In the Product Options section of the widgets add an ‘Option Label’ if required if you have added any Product Options/Prices.
15. If you want to use your own custom button instead of the default PayPal Donate button, use the new Custom Button section of the widget. EverWeb’s Stock Photos feature has many free ‘Donate’ buttons available to use. Check ‘Use Custom Button Image’ to activate the options. Select your own Custom Image using the ‘Choose…’ button. Optionally you can change the size of the button using the Height and Width options.
16. To complete your donation button, add a ‘Thank You page’ and a ‘Cancelled Page’ to your site.
17. When you have added these pages to your site, link each page to the Thank You Page and Cancelled Page dropdown menus in the Additional Options section of the PayPal widget. If the transaction is successful, when returning from PayPal, the Thank You page will be displayed. If  unsuccessful, the Cancelled Page is shown instead.
18. To return successfully from PayPal back to your website, remember to set up the ‘return’ mechanism in PayPal. In your PayPal account, go to your Profile and select ‘Profile and Settings’. Select ‘My Selling Tools’ from the list on the left side of the screen. In the ‘Selling Online’ options, set ‘Website Preferences’ to ‘Return customers to my website after they’ve payed with PayPal’.

Your widget is now set up. Remember to test your page and Donate button to make sure that the PayPal transaction completes successfully and that the return to your website pages also work correctly.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Adobe recently announce the immediate discontinuation of their website building software Muse its the last feature update released on March 26th 2018. If you currently use Muse you will no doubt be considering alternative website building products before support for Muse ends in May 2019 [Updated: Support now ends on March 26th 2020].

EverWeb has been recommended as a replacement for Muse by HostingAdvice.com

“The go-to site-building solution for fans of iWeb and Adobe Muse, the EverWeb drag-and-drop website builder creates cleaner, faster, and more compatible websites than the discontinued platforms. EverWeb offers an intuitive platform that makes web development accessible to a wider audience by offering extensive features, support, and resources in the familiar macOS interface.”

About EverWeb

Ever web is a drag and drop website builder for the Mac. EverWeb is NOT sold as a subscription. You get to keep the version you purchase (plus any upgrades you are entitled to while your account is active) for life. You will never lose access to the software you purchased if you decide not to renew your plan. Follow the link for more information about purchasing EverWeb and FAQ’s.

EverWeb is installed locally to your hard disk which has the advantage of no lag when developing your website. EverWeb is designed to be easy to use whilst making complex features simple to implement without having to resort to coding. You can use fully customizable Theme Templates to develop your site, or start with a blank template if you are redeveloping your existing site from scratch.

We have already had many Muse users enquiring about EverWeb and how the two products compare. Whilst it is always difficult to directly compare products, the list below gives you some indication of the features that EverWeb and Muse have in common.

EverWeb and Muse: Comparable Features

Whilst no means an exhaustive list, these are some of the major features that EverWeb and Muse have in common. Inevitably there will be features that are in Muse that are not available in EverWeb, and vice versa. In such instances, there may be alternatives or workarounds available. Please refer to the ‘Resources to Help’ section below for help here. We also recommend downloading the free trial version of EverWeb so you can experiment to see what is possible.

• Drag and drop, no coding needed to build your website.
• You can publish your site to your own hosting provider or to EverWeb’s own hosting (recommended).
• Support for hyperlinks and mouse normal, rollover and mouse down states.
• Support for page anchors (known as Scroll Position in EverWeb).
• Built in widgets for E-Commerce, Image gallery, Image Slider, Facebook, Navigation Menus, RSS feeds, Contact FormsPayPal, YouTube and many more. Third Party Widgets are also available.
• E-Commerce features built in with our robust PayPal Widget.
• Fully featured integrated Blogging Environment.
• WordPress blog post import.
• HTML code can be injected at page and site level if required.
• Built In Contact Forms with built in controls for customization.
• Auto generated desktop, mobile and responsive  Navigation Menu widget.
• Fast Loading Times.
• Ability to Attach Files.
• Spell Checker.
• Secure Websites Support Available with EverWeb+Hostng Accounts.
• Built In Animation features.
• 64-Bit App.
• Website files can be published to a folder on the local hard disk.
• Built in Preview.
• Stock Photos library with over 500,000 free to use images.
• Built in SEO together with our SEO for EverWeb video course.

Try EverWeb for Free

EverWeb is free to try. You can download the trial version at the EverWeb website. The trial version is fully functional so you can develop your website immediately. The only restriction with the trial version is that you cannot publish to your local hard disk or to the Internet. EverWeb comes complete with built in help with a downloadable user manual and help videos throughout the product wherever you see the ‘?’ symbol displayed.

Resources To Help

There are plenty of resources to help you discover more about EverWeb. This blog has lots of information about EverWeb’s features and how to use them. There is also the EverWeb website itself which contains lots of information and video tutorials, our YouTube Channel and our Discussion Forum.

If you have any questions about EverWeb, please let us know. We’re always happy to help.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Since the release of the Contact Form Advanced widget in EverWeb version 2.0, the widget has consistently added new features and functionality. In EverWeb version 2.7 we have added additional features based on feedback from the EverWeb community.

New Header and Description Controls

The Contact Form Advanced widget now gives you the ability to add sections to your form, using three new control types: Header 1, Header 2 and Description.

Header controls are ideal for adding titles and subtitles to your form, enabling you to easily create sections. For example, you may want to use the Header 1 control as the form title and use multiple Header 2 controls as section headings in the form.

The Description control can be used to add descriptive text to the form e.g. what the purpose of the form is, when the form needs to be completed by, what the special competition prize is and so on.

The New Control Instructions/Tip Field

The new Control Instructions/Tip section of the widget allows you to enter in instructions relating to the control that is currently selected in the Form Controls list. For example, you may have a Checkbox control in your form, so your ‘Instructions’ may be to inform the person filling in the field that they can check more than one box if they want.

Using the New Controls

The new Form Controls work in the same way as the other Contact Form controls. Use the Add button in the Form Control section of the widget to add a new control.

The form control label will be the text used for the Header or Description in the form. As headings or descriptions can be long, it is advisable to set Edit-> Spelling-> Show Spelling  on to capture any spelling mistakes if you are typing directly in to the Control.

Form Control Font and Styling Options

The new Fonts and Styles section of the widget allows you to change the font and style of the three new controls and also for the Control Instruction/Tip field.

Click on the Fonts button to the right of the Control you want to style. The Fonts Panel will appear so you can apply the styling choices you want. This can include the font style, font weight, color and font size. The Contact Form will update automatically as you make your styling changes.

Remember that if you have more than one Form Control of the same Control Type in your form (e.g. Header 2) any styling changes you make to the Control Type will be applied to all Form Controls using that particular Control Type.

More Options for the Submit Button

The Submit button can now be left aligned, right aligned or centered within the Contact Form.

You can now also use your own button images by checking the ‘Use Custom Image Button’ checkbox. Once this box is checked, you can add your own custom images as the Submit button for normal, mouse over and mouse down states. The width and height of the custom image can be adjusted using the new Width and Height fields.

Video Walkthrough

We also have a YouTube video of the New Features of EverWeb’s Contact Form Advanced Widget to enjoy.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s Navigation Menu Widget has been updated in version 2.7 so is now responsive! What this means is that the Navigation Menu Widget can automatically adjust to suit the environment you are working in. In essence, this allows you to switch between the ‘traditional’ navigation and a ‘hamburger’ icon styled navigation at a user specified screen width.  The new hamburger icon is highly customizable so that you can get exactly the look to match perfectly with your website.

Getting Started

To start, add the Navigation Menu widget to your page by drag and dropping it from the Widgets tab on to the page, Size and position the widget as you require. For more on customizing the Navigation Menu widget please refer to the blog posts EverWeb’s Navigation Menu Widget: Adding a Menu and Styling Options.

If you already have the navigation Menu widget on the page, select it.

Using the Responsive Options

With the Navigation Menu Widget selected, click on the Widget Settings button in the Inspector Window. You will see the new ‘Responsive Options’ and ‘Hamburger Button’ sections have been added to the widget. We will begin with the Responsive Options.

1. Activate the Responsive Options by ticking the ‘Responsive Navigation Bar’ checkbox.
2. The ‘Appear at Width’ option lets you set at which point the Hamburger navigation is displayed in preference to the regular Navigation Menu. The default value is set to 700 pixels which is usually good for most mobile devices. To see how this option works,  drag the right hand vertical edge of the EverWeb window to the left until the navigation menu changes.
3. When the navigation menu changes you will see that the hamburger icon appears at the top of the page, regardless of where you have placed the navigation as this is the location it would be at on a mobile device. The original location of the navigation menu still appears on the Editor Window as an empty box. You can still work with the widget as usual.
4. If you want to have a hamburger style navigation menu as default for your website in place of the traditional navigation, set the ‘Appear at Width’ value to ‘99999’.
5. As different devices have different screen widths it is difficult to give precise guidelines as to which width to use for which devices.  However, 700 pixels should be suitable for most mobile devices although you may have to go down to 500. Don’t forget to test both desktop and mobile devices before publishing your website.
6. To set where the hamburger appears, select the Menu Position drop down and choose either Right or Left.
7. The hamburger navigation has a horizontal strip across the top of the page which has its color set by ‘Use Background Color’. To change the background color, first tick ‘Use Background Color’ then select the color you want using the Background Color swatch.
8. If you prefer not to have a color set, deselect the ‘Use Background Color’ tick box.

Hamburger Button Options

The Hamburger Button Options section of the widget allow you to customize the Hamburger icon.

1. To change the hamburger icon’s menu label just overtype ‘MENU’ with the label you want. If you do not want any label at all, delete the text from the ‘Label’ box.
2. To customize the size and font of the label click the ‘Fonts’ button at the bottom of the Hamburger Button Options to access the Fonts Panel. Select the font and font size that you require. When you change the font size of the label, the Hamburger icon will also be resized.
3. The color of the Hamburger icon itself is set using the Hamburger Color swatch.
4. To change the background color of the icon and label, tick the ‘custom Background Color’ option then use the ‘Background Color’ swatch.

Dropdown Menu Options

When your click on the Hamburger icon, a drop down menu of choices will appear based on how you have set up your menu structure in the Web Page List.

The color of the menu items is determined from the Hyperlinks Inspector as each menu item is in fact a hyperlink to a page in your website. To change the background of the drop down menu items for the navigation, as well as the separator line, use the Drop Down Menu options in the Widget Settings.

EverWeb’s new Navigation Menu widget options bring new responsive options to EverWeb. We hope you enjoy these new options! If you have any questions about this blog post, please let us know, we’re here to help!

Video Walkthrough

To find out more about using the updated Navigation Menu Widget check out our YouTube video Building a Responsive Navigation Menu.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re pleased to announce the immediate availability of EverWeb version 2.7 which features over half a million royalty free Stock Photos, an updated Contact Form Advanced widget and an updated Navigation Menu widget which now includes fully customizable responsive menu options. There are also lots of other minor feature additions as well as maintenance and stability improvements.

EverWeb version 2.7 is available in two versions:

• OS X 10.7 – 10.8 (32-Bit):  Lion, Mountain Lion
• OS X/macOS 10.9 and higher (64-Bit): Mavericks, Yosemite, El Capitan,  Sierra, High Sierra

If you are running OS X 10.6, EverWeb has been updated to version 2.5.2 which includes maintenance and stability enhancements.

When updating to EverWeb version 2.7, the update process will automatically download the correct version of EverWeb for your macOS.

EverWeb version 2.7 Includes…

[NEW] Responsive navigation bar, automatically updates to your visitors’ device or screen
[NEW] Over 500,000 free stock photos to use on your website (Window menu->Stock Photos)
[NEW] Contact form controls including section headers, field descriptions, more font customizations
[NEW] New custom button option in the Contact Form Advanced widget
[NEW] You can now select None for the Favicons to remove one
[NEW] Shadow colors can now be defined in the Font Panel

[FIX] Closing a project while publishing would crash
[FIX] FTP Passwords are saved properly now
[FIX] Improved drawing quality of some images
[FIX] Linking to files within a blog post works properly now
[FIX] Publishing changes after renaming a folder publishes your website properly again
[FIX] Using 301 redirects with HTTPS websites works properly now
[FIX] Scroll positions work with directory pages now
[FIX] Tool tips and object positions are displayed again for 64Bit version of EverWeb
[FIX] Fixed exporting CSS issues when using a background image for shapes
[FIX] Fixed issue with widgets that use media files
[FIX] Fixed a crash on launch if a corrupted font was installed on your computer
[FIX] More responsive typing in the blog editor
[FIX] Fixed issue with incorrectly entered FTP details
[FIX] Fixed a crash when selecting a date for a blog post
[FIX] Fixed issues with some third party, older templates so they work properly
[FIX] Fixed issue with linking external files in blog posts
[FIX] Fixed contact form with & in a textbox or as a field name
[FIX] Fixed potential crash with Live Photos

How To Update To EverWeb version 2.7

You can easily update to EverWeb version 2.7 by

1. Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

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

EverWeb version 2.7 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free updates and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you have passed your one year of free EverWeb upgrades, you can purchase 1 more year of updates and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of Everweb that you need, either the OS X 10.6 version,or OS X 10.7 and later, version.

More Information About EverWeb version 2.7

If you need more information about the new version of EverWeb, please check out the following resources:

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb version 2.7 Video Walkthrough

Find out more about the new release of EverWeb in our What’s new in EverWeb version 2.7 video.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

As the saying goes, time is money. However, time is something we can never get back, so working efficiently is one way we can reclaim valuable time! Why take the long route when you can achieve what you want quickly and effortlessly by taking the short route? EverWeb has some great ways to shorten your website development time so you can have more time for yourself…

1. Short Cut Keys

We all use them, but are you taking advantage of all that is there? Learning the shortcut keys for functions that you often perform with a mouse or via a menu can be a great time saver. You will find the shortcut keys displayed on the Menubar in EverWeb. There are a couple of other shortcut keys that are not on the Menubar which are also helpful:

Distance to Object: Select an object, then hold down the Option (Alt) key and mouse to another object to see the distance between the two.

Moving Objects: Checkout Tip 6 below on  using the Cmd+Shift short cut key.

Moving Obscured Objects: Use the Cmd+Option shortcut keys.

For more information on moving objects, take a look at our New Ways to Move and Resize Objects in EverWeb 2.1 blog post.

2. Secondary Clicking

A secondary click is a two finger tap on the mouse or trackpad. It’s one of the best time savers in EverWeb as when you secondary click, you get a context sensitive list of menu options. So, for example, you will no longer need to go the menu Arrange-> Move to Back when you can just secondary click on the object you want to send to back instead.

3. Remember to Backup

The ultimate time saver if your project file gets damaged or you need to roll back to a previous version of your project. Use the shortcut key Cmd+. (Period) to access the EverWeb-> Preferences menu then click on the Backup tab to implement your backup program. Do not forget to also backup your computer itself to an external backup device on a daily, or even hourly, basis depending on your usage.

4. Add The Website URL when Publishing to Folder

This was one of the small additions introduced in EverWeb version 2.5. Adding in your website URL in to the Folder Location section when publishing to a Folder via Site Publishing Settings will make the published files accurately reflect your website. This is very useful if you publish on your local disk for testing purposes.

5. Use The ‘+’ Button to Add a Master Page

There are a number of different way to create a Master Page in EverWeb. The ‘+’ button is located to the right of the Master Page dropdown in the Master Page section of the Inspector Window. The button saves you having to mouse across to the Web Page List or to the Navigation Menu to create a new Master Page.

6. Easily Move Objects on Your Page Using Cmd+Shift Keys

This key combination is a great time saver when you need to create space on your page by moving objects below the currently selected object down the page en masse. Simply hold the Cmd+Shift keys down, then drag the selected object up or down the page. Everything beneath the selected object moves at the same time. When using this feature, remember that any objects that are on the same level as the selected object are not be moved.

7. Delete Unused Assets

If your Project file performance is slowing, try deleting any unused assets that you no longer need but are still in the Assets List. To do this, select the Assets tab in the Inspector Window. Just below the Assets search bar is an  up/down arrow symbol on the right hand side, opposite the word ‘Assets’. Click on this symbol and select ‘Find Unused Assets’ from the submenu. When the search is complete you can delete the assets that are no longer needed. As your Project file becomes smaller it should work more efficiently.

8. Preview without Using Preview

When working on your web pages you may want to get an idea of how the page looks. If you are working on a large Project file, using Preview may take too much time as, by necessity, it processes all of the Project’s pages when generating  the Preview. Instead, if you just want a ‘quick look’ at how the page will look, try Presentation Mode instead (Cmd+period shortcut key toggle). Presentation Mode is located on the Window menu. The feature strips out all of the UI elements of EverWeb. When using Presentation Mode, if you want to turn off the page layout, use the Window->Hide Layout menu option. If you have hyperlinks indicators visible you can hide these using the EverWeb=> Preferences=> General-> Show Hyperlinks Indicator checkbox.

Remember that if you are using Presentation Mode you are still working with the live Editor Window, so use with caution!

9. Setup Default Styles

This is an easy one to miss when you first start your Project and just want to crack on with creating your site! Set your Default Styles as soon as you can. Use the Format-> Default Styles menu to define the default look of your text font, size and color, the default color for your shape objects and shape strokes and the defaults used for hyperlinked objects in normal, mouse over and mouse down states. If you set up these defaults immediately, you will save much time and work later on!

10. Other Available Resources

There are lots of resources available for EverWeb users such as this blog, our Facebook page, YouTube channel and  EverWeb Knowledgeable articles that are available from the Support tab on the EverWeb website. Finally, there is the EverWeb Discussion Forum and our Support service if you have a question or need help and support.

If you have your own tip about productivity in EverWeb, why not share it with the community below in the Comments Section?

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Color Picker is an often used tool when building your web pages. In EverWeb it’s easy to access through the Toolbar, by the Window-> Show Colors menu option or by using the Cmd+Shift+C short cut key toggle. Whenever you click on any color swatch in the Inspector Window, Color Picker is also there, coming up front and center.

The Color Picker has five available tabs:

• Color Wheel
• Color Slider
• Color Palette
• Image Palette
• Crayons

Whilst selecting the color that you want to use is self explanatory, there are some other useful things to know about Color Picker…

1. Resizing the Color Picker

Resizing the Color Picker is a useful if you are using a large screen and need Color Picker to be more visible. Just grab one of the corners of the Color Picker window and drag outwards to make Color Picker larger. You can also resize the Color Picker vertically to make it taller, just grab the top of the window and drag the mouse pointer higher. This is also useful if you cannot see all of your saved colors in the color palette at the bottom of Color Picker.

2. Saving Colors

If you select a color in Color Picker, it is displayed as the large swatch in the bottom left corner of the Color Picker app. If you want to save the selected color just drag the color from the large swatch on to one of the empty small swatches. By default, there are two lines of small swatches. Drag the color to where you want it and drop it in to place. If there is a color at the drop location already, the color and all those to the right of it will move along one spot to accommodate the new color. Swap colors around just by dragging and dropping the color you want to move to a different swatch location.

3. Removing a Color

To remove a color from the saved color swatch palette, drag and drop the color you want to remove to the Trashcan. This appears to be the only way to delete colors you have saved and no longer want in the saved swatch palette.

4. Color Matching

If you need to match up a color to replicate it on your website, you used to only have the option of using the Digital Color Meter. Now in EverWeb, there is an eye dropper that does the the same thing as Digital Color Meter. Start by clicking on the eye dropper which is to the right of the large color swatch in the bottom left hand corner of the Color Picker.

The mouse pointer will become a magnifying glass. This is great as it enables you to pinpoint the exact color you want more easily. Once you have found the color you want to color match, just click and the color is then available as the large color swatch. You can then use that color elsewhere. If you want to save the color just drag it to one of the small color swatch locations.

5. Accessing Saved Colors

If you have more than two rows of saved colors, there are a few ways in which you can view colors if they are not easily visible. You can resize the Color Picker so that it reveals any rows of small color swatches that are not visible. Alternatively grab the top of the Color Picker Window and stretch it vertically until the color swatch rows that are hidden become visible. If you want to keep the view at only two color swatch rows, drag vertically when the mouse pointer is over the color swatch rows. You will see that any hidden rows will scroll into view. A side bar slider also appears when you perform this dragging action. Lastly, resize the Color Picker horizontally. Stretching the Color Picker will make longer rows of the small swatches.

6. Making Your Own Color Palette

Color Picker allows you to make your own Color Palette. To make your own palette:

1. Select the Color Palette tab which is the center tab of the Color Picker.
2. Click on the Settings Cog.
3. Select New.
4. An ‘Unnamed’ color palette is created with one unnamed color
5. Drag any of the small color swatches that you want included into the new color palette. When you do this, they will also be ‘Unnamed’.
6. Double click on the ‘Unnamed’ label and rename each color that you have added to the color name you want to use.
7. To add the large swatch color to your color palette just click on the ‘+’ button.
8. To remove a color from the color palette, highlight it in the list and click on the ‘-‘ button.
9. To name your color palette, use the Settings Cog again and select ‘Rename’.

Color Picker is a surprisingly versatile tool with more options than first meet the eye. Let us know if you have a tip of your own in the Comments sectoin below!

Video Walkthrough

As well as this blog post, we also have a video walkthrough of Color Picker on YouTube.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s Language Localization feature is a great way to target geographic local markets and audiences or for multilingual websites that targets different countries and/or language groups. When designing and building a website, you probably have some kind of audience, focus or target in mind right from the outset. Even if your website seems to have no specific target market or audience, you can still apply some SEO (Search Engine Optimisation) and SERP (Search Engine Results Page) implementation with Language Localization.

Targeting a Non-Target Market

If you think your website does not have a target market or audience, think again, as you will have written your site’s pages using at least one language.  At this level, your market or audience scope is probably very large e.g. all English, Spanish, or Chinese speakers. Even at this scale, you have a place to start for SEO and you can optimize more as you learn more about your target market later on.

At this scale, set your Language Localization at the global level in your EverWeb Project file. To do this:

1. Go to the File-> Edit Publishing Settings menu, or click on your Project name in the Web Page List. The Site Publishing Settings will appear.
2. In the ‘Head/Footer Code’ section is the ‘Language’ option. Click on the drop down box and select the language that your website is written in e.g. if your website is written in Spanish, select ‘Spanish’.
3. When you click on the drop down to open the list of available languages, start to type the name of your language. The language list uses predictive search. As you type, the closer to your language you will get in the list.
4. Once you have selected the language you want to use, publish your entire website as the global nature of the language localization will be applied to all of the pages in the Project file

Your website will use the language localization setting to better to serve web visitors with results that are geared relevant to Spanish speaking audience.

Narrowing The Market Focus

You probably noticed that as well as the ‘Spanish’ language option, there were other ‘Spanish’ language options available on a country by country level. If your website is geared towards only one specific country, select the Spanish country option for your market e.g. ‘Spanish (Chile)’ This will help better refine your SEO for your target market or audience.

Market Targeting with Multilingual Websites

If you have a website that uses more than one language, using EverWeb’s Language Localization feature on a page by page basis is probably the most suitable way to optimize for a better SERP. Again, it’s easy to set up:

1. First set up the primary language that website uses in Site Publishing Settings as we did above when setting up Spanish (Chile) as our primary language.
2. The next step is to use the Language Localization drop down menu on each page of your website that uses the secondary language.
3. To do this, select a page in your Project that uses the secondary language.
4. Next go to the Page Settings tab in the Inspector Window.
5. In the ‘Page Details’ section is the ‘Language Localization’ drop down. Select the language and country that you require. In our example,  the Project file is mainly in Spanish as it is targeting the Chilean market, however, there are also some pages in Portuguese for the Brazilian market. In this case, set the page  Language Localization as Portuguese (Brazil).

When using Language Localization on a page by page basis in your website, it does not matter if you have more than one language/country combination in the Project file as long as you each has its own page. In our example above, we could also have had pages for Spanish speakers in Bolivia. In this case, the Language Localization would be set to ‘Spanish (Bolivia)’ to more specifically target Bolivian Spanish speakers.

If you have created multiple project files for your multilingual website and linked them together using external URL links, it will be easy to implement Language Localization at the website (global) level for each project file.

EverWeb’s Language Localization feature can help your SEO and SERP rankings at all levels within your website, even if your website appears not to have any  specific market or audience focus.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Preview Server was introduced in EverWeb version 2.5, enhancing EverWeb’s Preview feature by presenting an exact local preview of what you would see if you  published your website. In EverWeb version 2.6, Preview Server can now be used to preview your website from any device connected to your own WiFi network e.g. an iPhone, iPad, desktop or laptop computer.

About Preview Server

By default, Preview Server feature is ‘On’. You can see this when you use Preview.  If you look at the URL in your browser’s search box, you will see something similar to the web ‘address’ below:

http://127.0.0.1:13434/31A0255CBF744FC48068FD6A18BB6618/index.html

The web ‘address’ is used to establish an IP (Internet Protocol) connection to the same computer being used by the end-user. The first part of the IP address, ‘127.0.0.1’, is known as the ‘localhost’ or ‘loopback address’. This is followed by the filename of your Project. What is displayed is actually the real filename of your Project file as it is stored on disk. To make things easy, you name your website Project file in EverWeb with an ‘alias’, which by default is  ‘NEW WEBSITE’. The ‘alias’ is associated with the real filename that is stored on disk. The final section, ‘index.html’ refers to the web page that you are previewing.

When you Preview your webpage on your computer, it will use the ‘local host’ (technically written as ‘localhost’) address. The preview will now be accessible to other devices on your local WiFi network.

Preview Server Preferences

To access Preview Server’s Preferences use the EverWeb-> Preferences-> General tab menu option. In Preferences you can turn off the Preview Server by un-ticking the ‘Use Preview Server’ box. If you turn Preview Server off, the information for ‘Local URLs’ and ‘Remote URLs’ both become N/A as you are no longer using your WiFi network for preview.

You may want to turn Preview Server ‘Off’ if you are having problems with Preview Server working properly with your browser. For example, there are some known issues with the way in which Google Chrome interacts with local WiFi networks. When Preview Server is ‘Off’, the URL in the search bar reverts to something like the example below which is how EverWeb previews in versions prior to EverWeb 2.5:

file:///var/folders/2y/h6w0rl0n6kd5vcdltlgqryv80000gn/T/TemporaryItems/EverWeb/31A0255CBF744FC48068FD6A18BB6618/index.html

Using Preview Server on Your WiFi Network

To see a preview from your local host computer (i.e. the computer where you use EverWeb) on another device on your WiFi Network:

1. Make sure that all devices on your WiFi network are connected and working properly.
2. In EverWeb, go to the EverWeb-> Preferences-> General tab and make sure that  the ‘Use Preview Server’ box is ticked.
3. Make a note of one of the ‘Remote URLs’ e.g. ‘http://192.168.178.40:13434/’. The Remote URL address refers to your ‘private use’ network, typically your home or office network.
4. If you have Apple’s Universal Clipboard available, copy the ‘Remote URL’ to the clipboard instead of manually noting.
5. Go to another device on your WiFi network and enter, or paste in, the ‘Remote URL’ address that you noted (or copied to the clipboard) in the above step into your browser’s search box.
6. After entering or pasting in the URL, the Preview will be accessed from the local WiFi network and you will see an Index page of choices. In the example below  there are three folders that represent three different previews. In the example there are multiple computers using EverWeb on the local WiFi Network, with each person working on their own project file (see screenshot below).
7. Each folder is named after the EverWeb Project file that a preview has been generated for. If you are working on just one project on one computer you will only see one folder named after your Project.
8. Click on the Project file name whose preview you want to see.
9. The Preview is generated.

The IP address in the Search Bar may look something like this:

http://192.168.178.40:13434/31A0255CBF744FC48068FD6A18BB6618/

As you can see, instead of using the localhost address (used when previewing the project locally on the computer where EverWeb is installed), this time the address begins with 192.168 indicating that the private network is being used instead.

Preview Server is great when you want to access previews from different devices on your local WiFi, and we are hoping to be adding more functionality to this feature in the future!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

One of the common objects used in website design is the humble button.  Typically the primary function of a button is to trigger an action of some sort. This ‘trigger’ could be a hyperlink to another page, a place somewhere else on your current page or to an external website. Buttons can also used to initiate downloads, payment processes, send emails and so on.

Some of EverWeb’s widgets use buttons e.g. the Contact Form, Contact Form Advanced and also the PayPal widget which also let’s you create your own buttons if you don’t want to use the default ones PayPal offers.

Creating Your Own Button

If you want to create buttons for your own website, you can easily and quickly do in EverWeb. There are a few simple steps required as outlined below. In our example we will be recreating a button from the Modern Theme Template which is a new Theme Template coming in EverWeb version 2.6. If you download and install the Modern Theme Template, EverWeb will ask you if you want to install the ‘Work Sans’ font during the installation process. You can also install the Work Sans font directly via the Google Fonts website.

Let’s create a button in EverWeb…

Create and Style Text in a TextBox

1. First create a TextBox by clicking on the Textbox button in the Toolbar. Replace the default text with “Show me more”.
2. Make sure that the text you have just added is highlighted, then click on the Fonts button in the Toolbar.
3. Change the default text font (Arial) to ‘Work Sans’ from the Fonts Panel.
4. Change the font weight to Extra Bold.
5. The font size should also be changed from the default 12 to 18 point.
6. The font color should be changed black to white and again this can be done directly in the Fonts Panel.
7. Once finished, close the Fonts Panel and resize the shape so all of the text appears on one line.
8. Now the text will need to be centered within the text box so with the text highlighted go to the Text Inspector.
9. Change the Horizontal alignment from left aligned to Center alignment.
10. Changethe Vertical alignment to middle from top.
11. You will notice that the text is still not in the centre of the box as After Paragraph is set to 15 by default. Change this setting to zero.
12. The text should be centered but if it is not check to make sure that the Inset Margin setting is zero.
13. The text is now centered.

Creating and Styling the Button

Now that the text we want has been created, styled and centered within the TextBox, the next stage is to create the button to go around the text.

1. Next go to the Shape Options and change the Shape from default to rounded rectangle. This creates the shape of the button.
2. Set the fill type to Gradient fill as this is the type of fill used on the original button.
3. Change the colors to match those in the example. The top color swatch should be ‘Tomato’ color and the bottom color swatch should be ‘Tangerine’. This will give you an approximate color match with the original button.
4. Next add a line border using the Stroke options. Create a white coloured border with a 3px width.
5. Adjust the button size until you have the look you want.
6. Use the blue dot in the rounded rectangle shape to alter the roundness of the button’s cornersas required or use the shape’s widget settings.

Adding an Animation To The Button

When using the Home page of the Modern Theme Template, you will see that the button, and the headline text, has been animated.  To animate the button:

1. Select the button.
2. Go to the Shape Options button in the Inspector Window.
3. Tick the checkbox to the right of the text ‘Animations’ to activate the settings.
4. Set the animation type to Fade from Bottom.
5. Set the duration of the animation to 1.0 second.
6. Set the animation delay to 0.2 seconds.

Hyperlinking the Button

The last step in setting up our button is to add a hyperlink to the scroll down the page. The Home page of the Modern Theme Template includes a scroll position line (in blue) which the button can be hyperlinked to. When pressing the button, the page will scroll down to the scroll position line. Scroll Posiotn is available in EverWeb version 2.6. If you are using an earlier version of EverWeb, you could replace the instructions below with e.g. hyperlinking to a different page in your website.

1. If you want to insert your own scroll position line, click on the Scroll Position button in the Toolbar or use the Insert-> Scroll Position menu option. Drag and drop the turquoise line to where you want it on the page. You may also want to name the Scroll Position using the Widget Settings.
2. Next, click on the button text, then go to the Hyperlinks Inspector.
3. Tick to ‘Enable the Hyperlink’.
4. Set the ‘Link To’ option as the page that you are currently on.
5. Set the ‘Position’ field to the Scroll Position you want, wither the one that is already on the page, or to the one that you have created.
6. If you are using a version of EverWeb prior to version 2.6, replace steps 4 and 5 as follows: Set ‘Link To’ as the page you want to hyperlink. The Position

You have now finished setting up your button! Preview to test that your button looks and works as you expect before publishing to the Internet. Creating buttons in EverWeb is easier and you can add your own flair and style in your own design. You can even animate your button to bring extra attention to it!

If you have a question about this blog post, please let us know in the Comments Section. We’re always happy to help!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw