Archive for the 'EverWeb' Category

Update Your Website with EverWeb’s Updated Image Slider

Thursday, July 30th, 2015

EverWeb’s Image Slider has gained new features in version 1.8 with the addition of slideshow Captions, a Transparency option for your Slideshow background and the ability to add URL links to slides. So, why not give an existing slideshow an update or create a new slideshow from scratch incorporating some of these new features?

If you want to start a new slideshow, just drag and drop the ‘Image Slider’ widget from the ‘Widgets Inspector’ on to your page. Place and size the Image Slider placeholder as desired.

With the placeholder still selected, go to the ‘Widget Settings’ in the ‘Inspector Window’. Here is where you add, arrange and delete slide images. Drag and drop images from anywhere on your computer into the Assets List. To reorder the files in the list just drag and drop the image filename to where you want it. You can use Shift+click to select contiguous files or Cmd+click to select multiple files that are not next to each other in the Assets list.

If you have added an image that you do not want, highlight it’s filename in the Assets List and press the backspace key to remove it. Although the filename disappears, it can be always be added back using the ‘Choose…’ button.

You can also add images using the ‘Choose…’ button. When using ‘Choose…’ you will see a list of the image files  associated with your EverWeb Project. If the image file you want is not listed, click on ‘Choose…’ at the top of the list and navigate to where the image files you want are located. In EverWeb 1.8 you can now select contiguous files by using Shift+click to select contiguous files or Cmd+click to select multiple files that are not next to each other

When selecting Images for your slideshow, make sure that they are optimised for use on the Web. Large image files  slow the loading of your web page and affect the performance of your slideshow. EverWeb detects large files on import and offers you a choice as to whether you want to use the original file or a web optimised version.

screenshot_41

It’s also important to use images of the same size, quality and orientation in your slideshow e.g.  your images should either be all portrait or all landscape and not a mix of both. Images should be also of the same dimension and quality in your slideshow.

In the example below we have created a web page for a fictional company, ‘Fantastic Journees Inc’, with the company name in the top left hand corner of the page. Below the company name is the Image Slider followed by a Navigation Menu with a rectangular colored shape behind it providing a background contrast.

17 SS1

The original Image Slider page created in EverWeb 1.7.

We can start to update the Image Slider by making it ‘Full Width’. Select the Image Slider then go to the Metrics Inspector and click on the ‘Full Width’ button. In addition make the Image Slider ‘Fixed Position’ at the same time. Lastly, select Arrange-> Always On Top from the menu.

Next select the company name and make this also ‘Full Width’, ‘Fixed Position’ and ‘Always On Top’. If the find that the text is right up against the left hand margin of the page, use the Text Inspector to add a margin in using ‘Insert Margin’.

Repeat the above steps for the Navigation Menu and it’s background coloured rectangle. Rearrange any objects that may have moved position on page due to the use of ‘Fixed Position’.

With the basic page layout updated, let’s update the Image Slider. In this example we are going to add a caption to each slide.

To add a caption to a slide, select the image file name in the Assets List. Next enter the text  you want for your caption in the ‘Caption’ box. To change the font size and style, click on the Fonts button and use the Fonts Panel to select the options that you want to use.

If you want to add a URL link, enter it in the ‘URL’ box. If your visitor clicks on the image they will be taken to the page you have linked. When adding links, make sure you use the full descriptor e.g. ‘http://www.fantasticjournees.com/homepage.html. Remember to test the link using ‘Preview’ before going live with your changes.

Note that if you enter a link in the ‘URL’ box, it will override ‘Click to enlarge image’ if you have ticked it in the Behaviour section.

If you want to add a background colour to your caption select the ‘Background’ color swatch in the ‘Caption’ section at the bottom of the Widget Settings. Use ‘Background Opacity’ to change the background transparency. If you do not want a background color at all set the value to zero.

You can place the caption where you want within the Image Slider using a combination of ‘Caption Left’ and ‘Caption Top’. These options operate like x and y co-ordinates when placing the caption. When you publish the page, the caption automatically scales and resizes as you change the size of the browser window as seen in the two screenshots below.

18SS1

The Image Slider is full width and resizes as you adjust the browser size, as does the Navigation Menu.

 

18SS2

As the browser window shrinks you see that the caption automatically resizes. You can also see the results of the use of Fixed Position and always on top here as the items below the Navigation Menu scroll under the menu.

Use ‘Caption Width’ to define the height and width of the caption text and background box color if you have one.

When creating captions for all of your slide images, try to make the text about the same length for each slide so that the caption box remains a consistent same size from slide to slide when viewing the slideshow.

In addition to captions, you can now make the slideshow background transparent. This is useful when you use Thumbnails and want the slideshow to blend in with the page background color. See the two screenshots below.

18sst1

The Image Slider with Thumbnails and the original background color.

18SSt2

The Image Slider with Thumbnails and with transparent background selected.

And finally, don’t forget that there are some great Transition effects to play with such as Pulse and Flash. Try experimenting with these as they can really liven up a slideshow especially when used with vibrant background colours that you set using the ‘Background’ color swatch in the Appearance section.

The Image Slider update keeps your website slideshow fresh and up to date a new modern, dynamic look and feel. With a little experimenting of Image Slider’s new, and old, features, you will give your visitors a great slideshow experience!

How to Make Fixed Headers in EverWeb

Thursday, July 23rd, 2015

EverWeb 1.8 has a host of new features that give you more design flexibility than ever. In the example below, we are going to use a combination of three of these new features – ‘Always on Top’, ‘Fixed Position’ and ‘Full Width’ – to create a fixed header. With a fixed header  your web page contents slide under the the ‘fixed’ header as you scroll up and down the page.

In this example, we will create a Master Page using the Spa template from EverWeb’s template library. The Master Page can then be applied to any web page in your website project.

  1. To start, add a new Master Page. Click on the ‘New Master Page’ button or select File-> New Master Page…’ from the menu. This example uses  the ‘Home’ template of the Spa theme. Once you have created the Master Page, double click on its name and over type it with ‘Spa Master Page’.
  2. In the Page Inspector, set the ’Header Height’ to 160.
  3. As this is a Master Page, remove any objects that are in the body of the page. Your page should look similar to the screenshot below.spa1
  4. To add a Navigation Menu to the header, just drag and drop the Navigation Menu Widget in to the Header section. Place, size and style all the objects that are in the header as desired such as shown below.spa2
  5. Select all the objects in the header and then tick the checkbox ‘Fixed Position’ in the Metrics Inspector This will keep the objects in place when you scroll up and down the web page.
  6. Use the Shapes button in the Toolbar to add a rectangle to the page. In the Metrics Inspector tick the checkboxes ‘Full Width’ and ‘Fixed Position’. The rectangle will be stretched across the full width of the screen.
  7. Move the rectangle to the top of the the page and set the height of the rectangle so that it is meets the bottom border of the header as shown below. Remember that you may need to hold the Cmd key down to move the rectangle from the body of the page into the header.spa3
  8. As the rectangle now obscures the other objects in the header (as in the above screenshot) select Arrange-> Send to Back from the menu to place it behind all of the header objects.
  9. With the rectangle now in place change it’s color as desired using the Fill section of the Shapes Options.
  10. To complete the Master Page, select all of the objects in the header. Select Arrange->  Always on Top from the menu.The reason for using ‘Always on Top’ is that Master Page objects normally lie underneath the contents of web pages. In our example, however, we need the Master Page header objects to be on top so that web page contents can slide beneath them. ‘Always on Top’ is how we can force objects to be on top of everything else in order to achieve the effect we want.
  11. Once your Master Page is complete, create a web page and attach the Master Template ‘Spa Master Page’ using the ‘Master Template’ dialog box in the Page Inspector. Add the content that you want to include in the body of the page. As you scroll up and down the body contents, the contents will slide under the header.
  12. When you have completed your page, use Preview to see how the page looks before you commit to publishing it on the Internet. You can see the results of scrolling in the screenshots below.
    The initial view of the page...

    The initial view of the page…


 

spa5aa

… and the effect when scrolling down the page.




Easily Create ‘Sticky’ Buttons in EverWeb

Thursday, July 16th, 2015

Many websites today have social media buttons pinned to the side of the page so that they are always clickable as you scroll up and down the screen.

This is a great feature for your website and is easy to do with EverWeb 1.8. To achieve the effect need to use the new ‘Fixed Position’ feature in the Metrics Inspector. ‘Fixed Position’ lets you lock the position of an object on its x-axis. This means that as you scroll up and down your page (i.e. along the y-axis), the object remains fixed in place.

Just follow the simple steps below to easily have social media buttons on the vertical and always visible.

  1. First add  the social media buttons that you want to your page, e.g. Facebook, LinkedIn, Pinterest, Email, Google Plus etc. Using the ‘Insert > Button menu to add buttons to your page or use drag and drop your buttons from the Widget Inspector on to your page. When placing buttons line them up vertically close to the left or right hand edge of the page.
  2. When you add each button, make sure that you tick the box ‘Fixed Position’ on the Metrics Inspector. This will lock your button in place on the horizontal x-axis (see screenshot below.)

    screenshot_11

    To fix the social media button in place, first select it, then checkmark the box ‘Fixed Position’ in the Metrics Inspector, as shown in the example above.

  3. Remember to make sure that your Social Media buttons are properly aligned and distributed.
    Select all of the buttons that you have placed on the page. Next use the ’Arrange > Align Objects > Left’ menu so the buttons appear flush to the left, and use ‘Arrange > Distribute Objects > Vertically’ to evenly space the buttons.
  4. If you are adding buttons to a Master Page, you may need to use ‘Always on Top’. Objects on Master Pages lie underneath those on your normal web page. If you find your buttons are not visible use ‘Always on Top’ so that they appear above all other objects on your page.
  5. The last  step is to use Preview to see how your design looks and to test out your ‘Sticky’ buttons before publishing (see screenshots below.) Always remember to test your buttons. Once you have published your website, don’t forget to test each button to make sure that your links work properly!
screenshot_12

Use Preview to see how your ‘Sticky’ buttons work.

screenshot_13

As you scroll up and down your web page, the social media buttons remain in place as the page content slides under the buttons.

How to Stop Referral Spam in Google Analytics

Friday, July 10th, 2015

What is Referral Spam?

Referral spam is a technique used by spammers to make it seem like you are getting a lot of visitors from their website which entices you to visit their site. This gets more visits to the spammers website.

Although technically harmless to your website, the biggest issue is that referral spam appears in your analytics software, such as Google Analytics, and misrepresents the data in there. It will appear as if you are getting more traffic than you actually are and your conversion rates will be significantly lower.

You can see if you are getting referral spam by doing the following;

 

  1. Log into your Google Analytics account
  2. Go to your website Acquisition->All Traffic->Referrals
  3. You can usually identify referral spam because it will come from a domain that either has nothing to do with your website content, or implies it is related to seo, traffic monetization etc… Referral spam is usually 100% new users, 0% conversion and a very high bounce rate
Referral Spam Example List

Referral Spam Example List

Can Referral Spam be Stopped?

There are a couple things you can do to help slow down referral spam. However, because these spammers use many different domains and techniques, it does require some maintenance.

You also cannot remove any previous referral spam from your Google Analytics, you can only make sure that in the future you do not see them.

Also, there are so many different domains that spammers may use. In fact there are thousands of domains that may appear in your Google Analytics.

The technique suggested here requires a list of domains so that Google, or your website, know to either not count the traffic as real traffic, or completely block them from accessing your server.

 

How to Stop Referral Spam

You can stop referral spam by creating a Google Analytics filter which will make sure that when you check your stats in the future, these spam websites won’t appear in any Google Analytics reports. Unfortunately you won’t be able to remove them from previous reports with this filter. To do that, you’ll have to create a Segment which we’ll have to do another blog post for in the future.

To set up a filter to stop the referral spam, follow the steps;

  1. Log into Google Analytics
  2. Go to your Reports page for your website
  3. Click the Admin tab at the top of your browser
  4. On the next screen select ‘All Filters’All Filters
  5. Then press the ‘New Filter’ button
  6. New Filter Button
  7. On the next screen you will actually set up your filter. Here are the settings to use;
    1. Filter Name: Referral Spam
    2. Filter Type: Custom
    3. Exclude: Selected
    4. Filter Field: Campaign Source
    5. Filter Pattern: A list of domains separated by a | character. Do not include http:// or www. They are only domain names. The list will keep changing as you notice more referral spam from new domains. Here is what I have set up in this screenshot which you can copy and paste into this field;4webmasters.org|trafficmonetize.org|guardlink.org|best-seo-offer.com|howtostopreferralspam.eu|free-social-buttons.com|100dollars-seo.com|webmonetizer.net|erot.co|floating-share-buttons.com
      Google Analytics Referral Spam Filters

      Set up your referral filter as shown

       

  8. Lastly select all ‘Available Views’ and press the ‘Add’ button to add them to the ‘Selected Views’ list.
    Google Analytics Referral Spam Filters

    Apply all your filters to your views

     

  9. Now click Save

Starting in 24 hours, your new reports will stop showing the domains you have entered in the above steps.

Blocking the Domains from Accessing your Website

You can actually block the domains from even accessing your website if you have the knowledge to create a .htaccess file. If you use your own web hosting provider you can create a .htaccess file as described here,

For EverWeb + Hosting customers will be adding this feature automatically for you in an upcoming release. Stay tuned for our announcement.

 

I hope this post was useful and if you have any questions, be sure to post in the comments below.

 

New Features Coming In EverWeb 1.8

Tuesday, June 9th, 2015

We are getting closer and closer to officially releasing version 1.8 of EverWeb.  If you have not yet heard, we have added many great new features that is taking EverWeb to a whole other level. Some of the updates include:

  • Auto save and automatic backup
  • Asset organization
  • Enhanced e-Commerce with a more powerful PayPal widget
  • Full width shape features
  • Updates to Image Gallery widget
  • Updates to Image Slider widget

These are just a few of the many great updates that will be included in EverWeb 1.8.

Below is an introductory video that will illustrate some of the new features in EverWeb, and what how these changes will allow you to create a better and more modern website.

If you are too excited to wait for the official release of version 1.8, you can head over to the EverWeb forums and download a copy of the latest beta release of EverWeb 1.8. Also, if you would like to learn more about the changes that have been done in 1.8, you can read this post on the EverWeb forums.

Directory Changes in EverWeb 1.7

Sunday, December 28th, 2014

With the release of EverWeb 1.7 we made some changes to the way directories work, but don’t worry, you can easily return to the old functionality with a simple checkbox.

Directories in EverWeb 1.6 and earlier would be their own page. Which means that if a visitor to your page clicked the directory name in the navigation bar, they would be taken to the page you designed for that directory.

On a desktop computer, when the mouse hovered over the directory page in the navigation menu the visitor would see the drop down menu. On mobile devices there is no mouse hover. The visitor has to click on the directory page to see the drop down menu. On iOS this worked pretty well, when you clicked on a directory in the navigation menu you would see the drop down menu. Clicking again would take you to the directory page.

On Android devices this wouldn’t work this way. Basically clicking on the directory page would instantly take you to that page and never show the drop down menu.

For this reason, and because it is unlikely that a visitor would visit that specific directory page, we changed the default behavior. As of EverWeb 1.7 a directory page is not an actual page. So you will now add sub pages to the directory but you can’t actually edit the main directory page.

However, we did leave the option of going back to the old behavior if you preferred that. Keep in mind though, this will cause problems as mentioned above on Android devices.

To return to the old behavior, select the directory in EverWeb and go to Page Settings in the Inspector (first tab). Under the Web Page Description field you will see the option that says ‘Redirect to first child page’. Uncheck that and EverWeb will work as it did before.

EverWeb 1.7 Released; Our Holiday Gift To You

Thursday, December 25th, 2014

We’re thrilled to announce one of the biggest releases to EverWeb yet!

EverWeb 1.7 brings an updated user interface for Yosemite and improvements to SEO features including making sure all images show up in search engines and support for alternative image text.

Some other features include improved integration with iPhoto, image optimization settings, a much lighter file size for faster updating and so much more!

See below for a complete list of changes, but check out our new EverWeb YouTube video;

EVERWEB 1.7 CHANGES
– New Yosemite User Interface
– Significantly reduced download size of EverWeb for faster updating
– You can now drag and drop images onto existing image shapes and replace the shape contents with the new image while keeping the shape properties/settings
– Images dragged from iPhoto will use the iPhoto title instead of the file name
– New template system lets you remotely update templates
– Support for direct previewing in the iOS Simulator
– Support for img alternative text for better search engine optimization
– Images now use the img tag when possible
– All images can now properly appear in search engine result pages
– Option to adjust the quality of JPEG images within the preferences
– Option to not include the Color Profile in JPEG images so that the image size is smaller (though the colors may look slightly different within your browser) – Type ahead searching within the Assets list
– New Header Text Widget for inserting html headers
– New Mask button in toolbar
– EverWeb websites work better with HTTPS servers now
– Google fonts will now work on secure (https) websites
– Fixed an issue where using line feeds in success message for the contact form would break it
– Fixed Youtube widget in IE 9
– Fixed blue border around images in published image gallery in Internet Explorer
– New Pages now get added after the currently selected page
– Default styling settings for underlined links will now work properly
– ‘Edit Default Styles’ button under the Hyperlinks tab in the Inspector
– Fixes for RSS Feed Widget so it now displays the proper image when publishing
– RSS Widget now looks for an image within the post content if no image is specified as the post thumbnail
– Clicking the Dock icon no longer creates a new website
– New “Made With EverWeb” button graphic
– When adding images, EverWeb is better at recognizing images that are only slightly different than existing images on your site
– Issues with using prices with decimals for Paypal widget
– Fixed issues with changing font styling in text boxes
– Speed improvements when typing in text boxes while the font panel is opened
– Made significant changes to the way assets work. You can now easily change the display name of assets after import to create retina versions (i.e. adding @2x before the file extension)
– Pinterest pin it button widget
– Updated User Manual
– Image file names no longer append the order index to their file name unless you have used an image multiple times on one page.
– Include in navigation bar option in Templates window is not visible when creating a Master Page
– Widgets are automatically added to widget list in all opened documents when installing a new one
– Enhancements to the Widget API

EverWeb 1.6 Released; Faster Website Publishing & More…

Monday, October 6th, 2014

We’re very happy to announce the release of EverWeb 1.6.

With version 1.6 we focused on enhanced publishing which means your web sites will publish much faster to your EverWeb + Hosting account or to your FTP server. Now, minor changes will only publish the changed files even if you change the publishing location. This also means previewing websites is faster as well!

On your first publish with this new version, your entire website will have to be published. After that, you will find publishing to be significantly faster.

We also added a feature to not include new pages in the navigation bar so that your entire site does not have to be marked as changed when adding new pages.

Lastly we made lots of improvements for Retina and High resolution screens. Your websites will load faster and more efficiently on iOS and other mobile devices.

CHANGES
– Enhanced publishing significantly improves publishing changed web page files
– Option to not include new pages in the navigation bar so your entire site doesn’t have to be republished
– If you change the name of an asset to use @2x it will be used appropriately for retina images
– Retina CSS is not included if there aren’t retina images
– Fixed paypal widget button not appearing until you modify an option under Widget settings
– Fixed the default background color for the nav bar mouse over sub menus being exported as white instead of gray
– You can now enter anchors within the External Link field
– Fixed a crash when pressing the Add Page button while publishing your website
– Fixed issue with Facebook widget not appearing in preview
– Fixed contact form labels so they don’t wrap to a second line
– Fixed navigation bar issues
– Fixed issue with header/footer code field marking entire site as modified when copying text from it

Let us know what you think of this new version. Come on over to our discussion forums, we’d love to hear from you!

iWeb Yosemite | Is iWeb Compatible With OS X 10.10 Yosemite

Monday, July 28th, 2014

With the recent announcement of OS X 10.10 – Yosemite – many iWeb users are wondering whether or not iWeb will still work on the latest release. Apple has opened up the Yosemite beta to the public, which means that many every day users will be downloading the new operating system a few months ahead of schedule.

So the bottom line is does iWeb work with Yosemite? We have tested iWeb on systems running Yosemite and iWeb does appear to still work with some limitations. Users may come across a few bugs here and there. For example, we came across this small bug when adding a blog to our site. The ‘Add Entry’ and ‘Delete Entry’ buttons that appear when on the blog page now appear when on any page on the website. Other issues we encountered were missing images for some widgets and incompatible widgets (such as Google maps & the MobileMe gallery).

Screen Shot 2014-07-28 at 3.13.11 PM

Though most iWeb features do still work with Yosemite, there are a few things that iWeb users should keep in mind. iWeb has not seen a major update since 2009. One day, iWeb 09 will stop working on a future update of OS X, just as iWeb 08 no longer works on OS X 10.9 or later. In addition, no future updates to iWeb will be released.

EverWeb, our iWeb replacement is compatible with OS X 10.6 through OS X 10.10, Yosemite. In addition, we have continued to update it with new features such as drop down menus, mobile websites, mouse over effects, master pages and much more. Our goal with EverWeb is to provide a modern replacement for Apple’s discontinued iWeb. Plus, we’ve made it really easy to transition your iWeb site to an EverWeb site.

EverWeb is currently being used by thousands of ex-iWeb users and they are very happy with it. Check out what EverWeb customers have to say about EverWeb. Still not convinced? Read the third party EverWeb reviews.

If you are thinking about switching from iWeb to another website builder, we encourage you to give EverWeb a try. You can download it free of charge. You can try EverWeb for an unlimited period of time. We guarantee that you will love it (so much that we have a 60 day money back guarantee when you decide to place your order).

Remember, EverWeb also comes with our free SEO for EverWeb video course to help you get more visitors to your website.

And of course, as always, if you have any questions about EverWeb join the thousands of EverWeb users on the EverWeb discussion forums.