Archive for Tips and Tricks

03 Jun 2014

Image Text Wrap Widget For EverWeb

4 Comments EverWeb, Tips and Tricks, Widgets

imageI saw that a number of users were posting on the EverWeb forums that they would like to be able to wrap an image around text. I have created this simple to use widget that will allow you to accomplish this. Please note that the best way to use this widget is to load your image into EverWeb at the exact dimensions that you would like it to be on your site. I like to use Preview for resizing images so I highly recommend it. You can also adjust the font and font size by clicking on the Fonts button in the toolbar.

The image text wrap widget allows you to add alternative text for your image, as well as align the image on the left or right. You can also change your text alignment to left, right, center, and justify.

Watch the video tutorial on how to use this widget.

This widget is available for download free of charge. Please try it out and let me know what you think.

EverWeb is an iWeb alternative that allows you to easily build a website with no prior website building experience.

10 Mar 2014

New Features in EverWeb 1.3 Brings it Closer to iWeb

1 Comment EverWeb, Software, Tips and Tricks

Last week EverWeb 1.3 was released with a ton of new features. Over the next few posts we’ll discuss these new features in detail (there’s a lot!). Here’s a quick list of what’s new in EverWeb 1.3;

1. Direct FTP Publishing
2. An ecommerce widget for adding a Paypal store and shopping cart
3. 404 not found error pages
4. 301 redirects (we’ll talk about why these are insanely useful below)
5. Password protection

There are a few more features and you can find more details on the ragesw blog post.

One of my favorite new features is kind of an advanced one to understand, but a simple one to use. EverWeb now lets you implement 301 redirects so you can redirect an old website to your new website without losing your search engine rankings and without requiring visitors to update their bookmarks. Don’t be intimidated though, these are very easy to understand and use in EverWeb.

What Are 301 Redirects?
When you update your site, you may add or remove pages, specifically if you are rebuilding them in EverWeb. The links for your old website may not work anymore. This means if your website is listed in search engines, users may be directed to your old, outdated site, or no site at all if your old site has been deleted.

301 redirects are a way to tell search engines, and your visitor’s web browsers, that a specific page on your site has moved and should be redirected to another page. The major benefit of 301 redirects is that you won’t lose your existing search engine rankings.

How do I use 301 Redirects
301 redirects are a new feature of EverWeb 1.3, so you’ll have to make sure you download the latest version.

301 redirects work on a per page basis, so you’re going to have to decide which page on your new EverWeb site should replace a specific page on your old iWeb site.

1. Open your website in EverWeb and select your new page.

2. In your web browser, visit the old page that you want to redirect to your new page.

3. In the Path bar at the top of your browser window, copy the entire URL to your clipboard.

4. Return to EverWeb and select the Page Settings tab in the Inspector (It’s the first tab). Scroll to the bottom where you see the Redirects section. Paste the full URL in that field.

5. Now publish your website and when you visit your old URL in your browser it will go to your new EverWeb page.

If you have any problems, post your questions here and I will try and help. The process should be very straightforward.

Stay tuned for the next release where we talk about some of the other new feature.

06 Dec 2013

New Version of EverWeb adds Object Locking/Grouping

No Comments EverWeb, Tips and Tricks

Firstly, if you haven’t followed suite like many iWeb users and jumped over to EverWeb yet, now is the time!

A new version of EverWeb released a few days ago adds two new features users have wanted in iWeb for a long time. Grouping and locking objects!

Locking objects lets you lock the objects in place so they can’t be accidentally moved. This is really useful when you have many objects overlapping other objects. You can lock all objects in place so they are never accidentally moved or rotated.

The more exciting feature in version 1.1 of EverWeb is object Grouping. This means you can select a bunch of objects and group them so they all move around together.

For example, you can create a nice image gallery with captions and group all the images/captions together. Now you never have to adjust each object when you want to make a little change. This new feature makes editing web pages in EverWeb much more efficient.

Both locking and grouping can be accessed from the Arrange menu.

EverWeb Grouping Tips

Although you can’t resize objects that are grouped with the resize widgets, mouse gestures on our trackpad do work to resize or rotate grouped objects.

Grouped objects can be easily copied and pastes between pages which means updating sections of your site that are the same across multiple pages is much easier. Just delete the old objects and copy your grouped object from the “Master” page.

Let us know what you think of the new update by commenting below.

19 Nov 2013

EverWeb and Custom Fonts Part 2: Use Any Font On Your EverWeb Site

17 Comments EverWeb, Tips and Tricks

As discussed in our previous post about fonts in EverWeb, the easiest way to use custom fonts in EverWeb is to use Google Fonts. However, if there is a font that is not available on Google Fonts that you just have to use, it is actually fairly easy to use any Font in EverWeb.

On the Mac, most Fonts will have the file extension .tff or .otf. Your system Fonts can be found in;

/Library/Fonts/

(Note: this is your system’s Fonts folder, not your user Fonts folder which is where you’ll find any Fonts you have installed manually)

Here you will find a list of Font files ending in .ttf (truetype font) or .otf (opentype font).

Remember, before using any fonts on your website make sure you have checked the font’s licensing to make sure you are actually allowed to use it online. Fonts can have some complex licensing and you may need to purchase a license before you use it on your website.

So once you have your .ttf or .otf Font file, drop it onto EverWeb’s Assets list. It will be listed under the External Files section as shown;

EverWeb External Files

Fonts in EverWeb

Now create your text object and open the Fonts panel. Select your custom Font (remember, you must have your font installed on your computer for this to work).

Pay special attention to the Font name in the Font Panel because the code we will be entering in the last step requires that the Font name be entered exactly as shown in the Font Panel.

EverWeb Font Panel

Select your Custom Font from the Font Panel

Now for the last and final step we actually have to make sure that EverWeb publishes your website with the Font file. So select your web site name in the upper left hand corner to show your Publishing Settings. Go to the Head Code field and enter the following code. Pay special attention to the modifications you must make.

<style>

@font-face {

font-family: "FONTNAME";

src:  url("FONTFILE");

}

</style>

Remember when we previously said to pay close attention to the font name in EverWeb’s font panel? The reason is that in the above code FONTNAME must be exactly like the Font name in the Font Panel. In our example we installed Tribeca so that is what we would replace FONTNAME with.

For the FONTFILE we must replace that with a reference to our actual Font file. That is easy to do in EverWeb. go to your Assets list and right click on the Font file under External Files. Select ‘Copy Relative Path’ which will copy a file reference to your computer.

Copy Relative File Path

Copy Relative File Path for your Font file

Paste it over the FONTFILE section in the code. In our example, the final code will look like this;

<style>

@font-face {

font-family: "Tribeca";

src:  url("{!-ASSETSPATH-!}External%20Files/Tribeca.ttf");

}

</style>

And that’s all there is to it to get your fonts working with MOST web browsers. Of course one browser is going to give us trouble and you’ve guess it, Internet Explorer needs a different format for the Font file. We’ll discuss Internet Explorer in the next tutorial and how to use different stylings with these fonts.

13 Nov 2013

EverWeb and Custom Fonts Part 1: Google Fonts in EverWeb

3 Comments EverWeb, Tips and Tricks

Back in the old days of the web it was very difficult to add your own custom fonts to your web site. You had to use a set of “web-safe” fonts. That is, fonts that are installed by default on all operating systems that a visitor may be using when they visit your web site.

A font could only be used if it was actually installed on your visitor’s computer. Otherwise the browser would substitute the closest matching font and your web site could look completely different to all visitors.

One way around this, and the way iWeb handled this, was to convert non web-safe fonts to images. This had a number of issues. It would cause your web site to load slower, search engines couldn’t read the image text so they couldn’t properly rank your web site, resizing the text within the browser wouldn’t work correctly and assistive readers wouldn’t be able to properly display your web site.

Google has come up with a great, and completely free, solution called Google Fonts. Basically offerings hundreds of fonts for free that work on any browser and on any device. Now you have hundreds of fonts to choose from instead of just a handful.

Using Google Fonts is super easy in EverWeb. It basically takes care of all the hard work for you, all you have to do is download the font from Google Fonts and install it on your computer.

To download the font from Google Fonts simply press the “Add to Collection” button. You can add as many fonts as you like. Then press the Down Arrow button near the top of the page as shown below;

Download Google Fonts for use in EverWeb

Download Google Fonts for use in EverWeb

Once your font is downloaded double click it to open it up in Font Book. Font Book is your font manager on your computer. You’ll see a button that says ‘Install Font’ that you need to press to install your font on your computer.

Install the Font on Your Computer

Now your font is installed and you can use it in EverWeb just as you would with any font. In EverWeb, open the Fonts panel by pressing ‘Fonts’ in the bottom toolbar.

Select your Font in EverWeb's Font Panel

Select your Font in EverWeb's Font Panel

When you publish, EverWeb takes care of making sure your Google Font is properly installed on your site. You don’t have to do anything further.

Even though Google Fonts offers many fonts to choose from, you actually aren’t even limited to them. You can add any font you want to your EverWeb web sites. I’ll discuss how to do that in my next post!