06 Jul 2017

Customizing Blog Navigation Links

No Comments EverWeb, Software, Tips and Tricks

When you create blog posts in EverWeb you’ll want an easy way for your visitors to navigate from one post to another as well as to the Index and, possibly, archive page. EverWeb’s Blog Posts Navigation Links are the easy way to do this. Here’s how to add and customize navigation links in your Blog Post…

Customizing Your Blog Posts Navigation Links

To customize your blog posts Navigation Links, begin by selecting your Blog Posts page in the Web Page List. Next select the Blog Post widget. This ‘widget’ appears in the Blog Post Preview Window and contains the contents of the post itself such as any text and images that you’ve added in to the Blog Post Editor Window. The widget also contains the Blog Post header information.

With the Blog Post widget selected, go to the Widget Settings in the Inspector Window. If you don’t see the Widget Settings, click on the Inspector tab in the Inspector Window and click on the Widget Settings ‘cog’ button.

With the Widget Settings displayed you can now customize the look of your Blog’s Navigation Links. Remember that as you’re changing settings in the Blog Posts Preview Window, they’ll generally apply to all your blog posts.

Display Options
EverWeb displays the Blog Post titles as Navigation Links for the ‘previous’ and ‘next’ posts and a text label, ‘Index’, for the blog main index page. You can toggle these display defaults on and off using the ‘Include navigation links’ and ‘Include index page link’ check boxes in the ‘Post Options’ section of the Widget Settings.

Furthermore, if you want to change the name of the Index page label, just enter the name you want in the ‘Index page name’ box. This action doesn’t change the name of the blog main page itself.

Changing Navigation Link Colors and Underline
After you’ve set how your Navigation Links will be displayed, you can customize the links themselves in a number of ways.

Click on the ‘Navigation Links’ Fonts button in the Widget Settings to customize most aspects of the Navigation Links all at one time using the Fonts Panel. Change the font type, font weight and font size to suit your website style but, leave the color and underline options as they are.

Changing Navigation Links Color and Underline
Blog Posts Navigation Links are, as you’ve probably guessed, hyperlinks, so you change their color and underline properties in the same way as you would for other hyperlink. However, for blog posts, use the ‘Post Link Normal’, ‘Hover’ and ‘Visited’ and Underline toggle options in the ‘Post Options’ section of the Widget Settings. Do not Use the Hyperlinks tab from the Inspector Window.

The changes you make will apply to all hyperlinked text objects you create after the change e.g. if you add a hyperlink in the Editor Window it will inherit the changed hyperlinks attributes.

Changing the Navigation Links Separator Bar
If you want to customize the color of the separator bar between the previous, index and next Blog Post links click on the ‘Navigation Links’ Fonts button in the Widget Settings. This will display the Fonts Panel again. Click on the Text box button in the Fonts Panel Toolbar and change the color from the default black to the color of your choice. The separator bar will change color, but the text of your Navigation (Hyper)Links will remain the color that you set earlier.

Adding A Link To Your Archive Page
If you want to link your blog posts to your archive page, simply add a Text Box, or button shape with text on it, to the Blog Post Preview Window. Use the Hyperlinks Inspector tab to link the text to the archive page. As the hyperlinked text is in the Blog Post preview window, it will be displayed on all blog posts.

Alternatively, you can also add a hyperlink to the archive page on the blog main page. In this case, click on the blog main page in the Web Page List and click on the blog main widget in the Editor Window. In the Widget Settings, use the ‘Show full archive’ section to add the link to your archive page. If you don’t see this in your Widget Settings, make sure that you have EverWeb version 2.1 or higher installed.

Setting up navigation links is easy and versatile, but if you have any questions or problems, let us know below!

24 Jan 2017

EverWeb version 2.1 is Out NOW!

2 Comments EverWeb, Software, Tips and Tricks, Web Design, Widgets

EverWeb’s just been updated with the public release of version 2.1. The new version focuses on improvements to the new blogging environment, an upgrade for the Contact Form Advanced widget and some great small but really useful UI enhancements! There’s also number of under the hood improvements as well as the usual maintenance and stability fixes. Here’s a summary of what to look out for…

Blogging
EverWeb’s blogging feature adds a new section in the blog main page widget so you can include a link to your full blog archive. The option lets you set the name of the label you want to use and includes options for left, center or right alignment on the page. There are also a various minor fixes and enhancements mainly relating to Google Fonts, WordPress imports and Facebook commenting.

Contact Form Advanced Widget
The Contact Form Advanced widget debuted in EverWeb 2.0 and gets an update in version 2.1 with some new features. Perhaps the most important feature is the option to enter SMTP details in the Widget Settings. This is designed to improve reliability of receiving emails. It’s highly recommended that you fill in this section when using the CFA widget. There’s also a help button in the widget that will take you to an EverWeb knowledgeable article if you need help or guidance.

In EverWeb 2.1 the CFA widget now includes the ability to delete form options and reorder control options.

The most important fix for the Contact Form Advanced widget is that the ‘Reply To’ address is now set correctly. If you are using the CFA widget in EverWeb 2.0 or 2.0.2 it’s recommended you upgrade to 2.1 for this important fix.

Workflow Enhancements
The latest version of EverWeb includes some really handy keyboard tricks to improve your workflow.
If you hold the Command+Option keys down when dragging an object, EverWeb doesn’t change the selection. This means that, for example, if the object is covered by other objects it’s now easy to move the selected object.
The second keyboard trick is to hold the Command+Shift keys down when dragging or resizing an object. When you do this, all of the objects beneath it will move down so retaining the page layout that you originally created. This is a great time saver and highly recommended!
Other useful UI tweaks include Function+Arrow keys now work in the EverWeb Design Canvas and the addition of a ‘Rename’ option on the sub menu that appears when you right click on the Project file name in the Web Page List.

We’ll take a walk though the first two workflow enhancement features soon as well as a complete walk through of the new SMTP Settings of the Contact Form Advanced widget.

Updating to EverWeb version 2.1
You can update your version of EverWeb using the EverWeb-> Check for Updates… menu, or directly from the EverWeb Download page. The download is available in two forms, OS X 10.7 and Higher and OS X 10.6.

Before you update your copy of EverWeb, please remember that updates are free if you have purchased EverWeb less than one year ago, or have a valid updates & support plan if your EverWeb version is more than one year old. More information can be found on the EverWeb Download page.

In the meantime, let us know if you have any questions about the update or if there’s anything else you need to know about EverWeb!

11 Dec 2016

EverWeb Blogging Hints and Tips

7 Comments Tips and Tricks

Blogging with EverWeb version 2.0 gives you a dynamic canvas to work with. Here are some hints and tips that we’ve found to share with you…

  1. Use the Page Settings Tab
  2. As you probably know by now, when you create a blog in EverWeb, it contains three pages: blog, posts and archive. Just like any other web page that you create in EverWeb you can apply page settings such as content width, content height, header and footer height and so on. Remember that you can also set the page and browser background as well.

    The Page Settings tab is especially important for the posts page, as all of your posts will adopt these settings as you can see by looking at the blog posts preview window.

  3. Master Page or No Master Page?
  4. You can set defaults for the posts page using Page Settings and you can also add objects to the blog posts preview window that are then applied to all of your blog posts as well. So, what about Master Pages? Where do they fit it?

    The answer to this question is that it depends on how you want to work. If you use a Master Page, you will have to edit the Master Page to make changes. If you use the blog posts preview window instead, objects can be edited ‘live’ so any changes you make are instantly reflected on all blog posts. You may prefer one way of working over the other. You may find that using a combination of the two is best e.g. you use a Master Page to apply certain website defaults, such as content width and height, background colors etc. to your blog posts. You then add specific objects to the blog post preview window to customize the blog to make it appear as a special part of your website.

  5. How to Add a Thumbnail
  6. You can add a thumbnail image to your blog post when it is displays on the blog main or archive pages. To do this:

    1. Select the post you want to attach the thumbnail to in the blog posts list of the ‘posts’ page.
    2. Next go to ‘Post Image’ in the Post Options section of the Widget Settings.
    3. Select the image you want using the ‘Choose…’ button. When you select a Post Image it can then be used as a thumbnail for the post in the blog main/archive pages.
    4. The image appears in the Preview window of the post. If you do not want to display the image in the post itself, select ‘No Image’ as the ‘Style’.
    5. Next, go to either the blog or archive page.
    6. If you do not see the thumbnail displayed next to the post, select the widget. Next, go to the Widget Settings and set the ‘Style’ to something other than ‘Just Text’. The thumbnail will appear.
  7. Using Extra Space
  8. If you want to add extra space between your blog post listings in the blog main and/or archive pages, you can use ‘Extra Space’. If this does not seem to work, check to see if you have a thumbnail image included. If the thumbnail is higher than 50px the ‘extra space’ will not appear as it’s been used by the thumbnail.

  9. Setting a left hand margin when using Full Width
  10. If you’ve set the blog posts preview window widget to ‘Full Width’, you’ll see that your text appears flush against the left hand margin of the browser window. To create a margin on the left hand side, make sure the ‘posts’ page is selected then go to the Text Inspector tab and use ‘Insert Margin’ to create the left hand margin you require.

  11. Resolving gaps between shapes in your blog
  12. Shapes are often used to define specific specific areas of a web page e.g. a horizontal, colored rectangle is often used in the footer. A vertical rectangle shape is sometimes used down the side of the page e.g. to define a sidebar or navigation menu. You may want the vertical and horizontal shapes to meet to give the page a continuous appearance. That’s usually easy to do, but in blog pages you may see a gap where the vertical shape should meet the horizontal shape. This happens because the blog widget automatically adjusts vertically on publishing so pushing the footer down. To stop the ‘gap’ appearing set ‘Allow Free Dragging’ ON for the vertical shape and extend the shape down enough so that some of it encroaches into the Footer shape. This will ‘cover’ the gap (see screenshots below).

    Body footer gap

    On the right is the blog main page with where the yellow column meets the blue column. To the left if the preview, showing the gap between the object in the body area and the object in the footer.

    Body Footer no gap

    On the right hand side, the yellow column has ‘allow free dragging’ set on an the object encroaches into the footer underneath the blue object. The result to the left is no gap between the objects when previewed.

    Remember to first test using Preview to make sure the gap is filled before publishing!

  13. How to duplicate a blog post
  14. If ever you need to duplicate a blog post, select the post you want to duplicate in the blog post list. Right click on the post name and select ‘Duplicate’ from the menu. EverWeb will make a copy of the post for you!

And finally…

EverWeb version 2.0.2 is now available!
EverWeb had a maintenance update last week with the release of version 2.0.2. It’s a bug fix release and also includes some minor enhancements to the product. Check on the EverWeb-> Check for Updates… menu to update your version. For more information check out the blog on the EverWeb website!

Got your own tips about blogging in EverWeb to share? Don’t keep it to yourself, let us know in the Comments section below!

14 Nov 2016

EverWeb version 2.0 Launched with Blogging!

No Comments EverWeb, Software, Web Design, Widgets

ew20-default-posts-screen

EverWeb version 2.0 has just been released to the public and includes the highly anticipated blogging feature!

Great News For iWeb Users
For Apple iWeb users, EverWeb version 2.0 is the release many have been waiting for. It’s headline feature of a fully integrated, feature rich blogging experience comes with a look and feel that’s immediately familiar and intuitive to iWeb users. You can import your blogs from iWeb in to EverWeb at the touch of a button. Your blog entry headings, creation dates and main body text (including font styling) are transferred over easily. For those using WordPress blogging, EverWeb version 2.0 can import them in the same manner.

Key EverWeb version 2.0 Blogging Features
Whilst EverWeb’s new blogging feature retains an iWeb look and feel, there are still many new and improved features. EverWeb version 2.0 includes a blog post editing window to add and format your text, add images, hyperlink text, create lists, paragraph headings, quote levels and more! The Editor window is great for adding features specific to each blog post. You have all the tools bloggers expect with the convenience of a Toolbar to access commonly used features.

As well as the Editor Window, there’s also the Preview window. This window is where you can add features that you want to apply to all of your blog posts, e.g. social media buttons. Drag and drop the object that you want on to the Preview Window and it will then appear on all blog posts. In many ways it’s like using a Master Page.

There are a lot more features to discover, many of which can be found in the blog’s Widget Settings. For now though, here’s a summary of EverWeb 2.0’s main blogging features:

  • Automatic lists
  • Image wrapping
  • Justified text
  • Comments using Disqus or Facebook Comments
  • Importing iWeb & WordPress blog posts
  • Embedded media including video
  • Automatic Google Fonts
  • Automatic RSS feed creation and more!

Other EverWeb version 2.0 Features
Whilst blogging is the massive new feature of EverWeb 2.0, there are also some other great additions to the product!

  • The Toolbar has been relocated from the bottom of the UI to the top. This is good news as it’s better for your workflow. Once you’ve used it for a day you’ll never want it back at the bottom!
  • The new Contact Form Advanced widget that will help you create super advanced contact forms you can fully customize. The new Widget includes ten form ‘Controls’ so you can add questions to your contact form using drop down menus, radio button or checkboxes. You can include default values in Text Controls to help visitors via pre-filled text. All Contact Form Advanced options are easy to use as you would expect. The regular Contact Form remains in place for simple forms.
  • Character Spacing has been added to the Spacing section of the Text Inspector so you can now stretch out text horizontally. Great when you need to tweak the the look of your text!
  • A new RSS Subscribe button has been added on the Insert-> Button menu so your visitors can subscribe to your EverWeb or external blog.
  • The EverWeb User Manual has been updated and improved and includes info on blogging in EverWeb. As a small new feature, you can now access the Manual directly form the Projects Window as well as from the EverWeb Help menu.

For more on the new EverWeb version 2.0 and a new look EverWeb website, go to the EverWeb website to see it’s new blogging feature in action!

For information about updating your version of EverWeb to the new version 2.0, check out the official EverWeb version 2.0 announcement.

If you’re looking for EverWeb tutorials about the new version, there are preview videos on YouTube to enjoy.

If you have a question about the new version of EverWeb, let us know in the Comments section below. We’ll have lots more on EverWeb 2.0’s new features in the near future for you!