06 Jan 2017

All About the Blog Main and Archive Pages

No Comments EverWeb, Software, Tips and Tricks

If you’re familiar with blogging in iWeb, you’ll have a short learning curve when starting to blog in EverWeb version 2.0. Whilst the two products have many similarities, iWeb’s development stopped over five years ago. EverWeb on the other hand get’s regular updates throughout the year adding new features and enhancements to keep up with today’s technologies. In this blog we take a look at EverWeb’s blog main and archive pages, how to use them, how to get the best out of them and where there are differences for those used to iWeb.

EverWeb’s Blog Structure
Everweb 2.0s blogging environment is structured like iWeb with three page types: blog main, posts (called entries in iWeb) and archive. Each page has a specific purpose: the blog main page acts as the ‘index’ for the posts you create, the posts page contains all the blog posts you have created, and the archive page which lists older blog posts that you no longer want to see on the main blog page, or can be used as a reference catalog of all the blogs posts created. Whilst these pages look like any other pages in your Web Page List, each page has some unique functionality. In addition, you can create more than one blog for your website e.g. you may have one blog for desktop and one for mobile, or one for marketing & sales and second blog for technical posts, etc..

The Blog Main page
When you create a new blog in EverWeb, the blog main page is created as an open folder containing the posts and archive pages within it. The posts and archive pages cannot be deleted, only the blog itself. If you delete the blog main page you also delete all the posts you’ve created within it so caution is advised. If you delete the blog by accident, use cmd+Z to immediately undo the action. It’s also useful to set autosave and automatic backups on in your EverWeb-> Preferences menu just in case you need to roll back at any time.

The Blog Main/Archive Widget
The blog main page is the ‘index’ page of the blog displaying some, or all, of the blog posts you have created within the widget on the Editor Window. The widget can’t be deleted from the page. The same is also true for the archive page which has a similar widget which works in the same way as the blog main page. The blog main/archive page widget differs from ‘regular’ widgets as it only has selection handles on its vertical sides. Therefore, you can change the width of the widget whilst the length is automatically handled by EverWeb based on the Widget Settings e.g. the number of posts you wish to display, whether you include thumbnail images and where they are placed, as well as any extra spacing you may wish to add between posts.

The widget can be styled in a number of ways. If you’re familiar with iWeb or with EverWeb’s RSS Feed widget, you’ll find that the blog main and archive widgets are styled in the same way. The widget contains the blog post titles, optionally the date, and an extract of the post itself. To change the styling of the post titles, for example, just click on one of the titles in the widget. All the blog post titles in the widget become highlighted. Next, select the font type, size, weight and color you want to use from the Font Panel by clicking on the Fonts button in EverWeb’s Toolbar. The other sections of the widget work in the same way making it quick work to get the look you want.

Apart from the features outlined above, the blog main and archive pages work in the same way as any other pages so you can add Master pages to them or set other defaults using the page settings tab etc.

Adding the blog to the Nav Menu Widget
You can easily add the blog main page to your Navigation Menu widget. To do this, select the blog main page in the WPL, then go to the Inspector window and select the Page Settings Tab. Tick the box ‘include page in navigation menu’ in the Page Details section of to add the blog main page to the Navigation Menu widget.
If you also check the same box for the archive page, it will be included as a drop down menu option below the blog main page in the Navigation Menu. You cannot select only to have the archive pages or to have the posts pages in the Navigation Menu.

Hyperlinking Your Blog
You can add hyperlinks to the blog main, all blog posts and the archive page by hyperlinking using the Hyperlinks Inspector in exactly the same way as you would anywhere else in EverWeb e.g. if you want to link to some text to a blog post, create the text you want and then highlight it. Go to the Hyperlinks Inspector and ‘Enable as Hyperlink’. Make sure ‘Link To:’ is set to ‘One of My Pages’, then in the Page drop down menu, select the blog post you want to link to.

Linking Desktop and Mobile Blogs

Everweb allows you to link your desktop website blog to your mobile website blog if you have created one. You link from desktop to mobile in the same manner as you would do when linking regular desktop pages to mobile pages.

More about Blogging in EverWeb
The EverWeb YouTube channel has recently launched a series of videos on blogging that may be of interest so check out their YouTube Channel. Don’t forget to subscribe if you want to keep up with their latest vids!
For some further hints and tips on blogging checkout our EverWeb Blogging Hints and Tips article.

If you’ve got a question please let us know below, we’ll get back to you as soon as we can!

22 Dec 2016

All About the New Contact Form Advanced!

No Comments EverWeb, Widgets

With all the limelight on EverWeb version 2.0‘s all new blogging environment, you may think that we’ve forgotten about the other new features of new release! Fear not as today we’re going to look at the all new Contact Form Advanced (CFA) widget!

A simple or advanced Contact Form?
The new Contact Form Advanced is an addition to the original Contact Form widget that debuted with EverWeb 1.0. The original widget is very simple and straightforward with few customisation options. It’s great when your requirements are also simple and straightforward.

Contact Form Advanced comes in to it’s own when you need more flexibility e.g. you may want to ask about users about their choices or preferences, you may be conducting a survey, or you may need to give users some extra help when they fill out the form. The screenshot below gives an example of just some of what you can do.

EverWeb Contact Form Advanced

In this example, you can see that a drop down menu has been added for age ranges, checkboxes for fruit choice preferences, extra space added between Form Controls and some font styling.

How Contact Form Advanced Works
As with all of EverWeb’s widgets, just drag and drop the CFA widget on to your page. Go to the Widget Settings tab in the Inspector to customize the form. Some settings will be familiar if you have used the original Contact Form widget e.g. ’email address’, ‘Email Subject’, ‘Email Sent Success Message’ and ‘Submit Caption’.

It’s all about Controls
What’s different with the CFA widget is that it uses Form Controls. These are customizable fields you can add, reorder and delete from your form. Each ‘Control’ has its own attributes e.g. click on the ‘Name’ Control in the list. You will see that its Control Type is ‘Text Box’. You can change this to another Control Type either Text Area, Number, Phone Number Date, Drop Down Menu, Checkbox, Radio Button, URL or email address.

When you select a Control Type, the available options depend on the Control Type you’ve chosen. Any options that are not available are greyed out. For example, the TextBox Control Type has the ‘Add Option’ box greyed out. However, ‘Default value’ text is available which is useful for pre-filling the text box itself. For example you can add instructions for your users e.g. a restaurant may add ‘Let us know if you have any food intolerances or allergies here…’ as a default value to guide the user on how to complete the form.

Adding and Using a Form Control
To add a Form Control:

  1. Click on the ‘Add’ button just under the Form Controls list. Name the new control e.g. ‘Fruit’ and press Enter.
  2. Next select the Control Type you want e.g. Checkbox from the ‘Control Type’ list.
  3. The ‘Add Option’ is available for this Control Type so click on it.
  4. Enter ‘Apple’ as the name and then press Enter.
  5. Repeat this step to create other types of fruit.
  6. As you change the Control Type and Options the CFA will update dynamically so you always see the changes as you make them. At the end of the checkbox list we included ‘Other’ then added another Form Control underneath ‘Fruit’ so that users can enter in their own fruit choice if there selection does not appear in the checkbox list. The Form Control has a default value applied to it.

    Reordering Controls
    If you’ve added in Form Controls but find later that they’re in the wrong order, click and drag the Form Control to where you want it then drop it in place. This feature is also used in EverWeb’s Image Slider and Image Gallery widgets. It’s sometimes a bit tricky to do so try first selecting the CFA widget and immediately clicking and dragging the Form Control you want to the place you want it located. It may take a couple of tries to get used to how it works. If it doesn’t work you’ll find yourself editing the name of the Form Control instead.

    Enhancing Your Form
    One of the great things about CFA is that you can customize Form Controls to produce some great effects. This only takes some very short code snippets that you can add directly into the Control itself. See the screenshot below.

    Form Control Customizations

    The Form Control section of the CFA widget showing the customizations that have been applied.

    Padding Out Form Controls
    Form Controls appear directly one after each other so there may be times when you want to give each control a bit more space. To do this just add

    before the Form Control label to add two carriage returns to give some extra padding.

    Breaking Text
    Using
    in your Form Control label is also a good way to insert a line break if the Form Control label has a lot of text in it. Just insert
    in the text where you want to split the line.

    Text Styling
    To embolden text in a Form Control label, use followed the text you want to embolden, then to return back to normal text weight.
    To use italics, use to start with and to finish.
    You can even combine the two e.g. and to create bold italics text.

    Test Drive Your Contact Form
    Always be careful when you using code in your form! Always test before publishing! For Contact Forms, it’s recommended that you publish a test page to see if the form and any styling (and code) works as expected before you publish a live form. You can use EverWeb’s Preview, but it doesn’t allow you to test ‘send’ and ‘receive’ functionality of the form as both CFA (and the regular Contact Form) use an email address to do this. Therefore, it’s best to publish a test page first.

    Finally, if you have EverWeb version 2.0, remember there’s an upgrade to 2.0.2 which includes some fixes to glitches in the initial release of Contact Form Advanced. And don’t forget that if CFA doesn’t fit the bill for your requirements there’s always the EverWebCodeBox that’s full of third party widgets that may help you out.

    The new CFA expands the capabilities of the original Contact Form and is a great addition to EverWeb. We’re looking forward to more feature adds to CFA in the future!

    In the meantime, if you have a question, comment, or some hints and tips let us know below! Thanks!

11 Dec 2016

EverWeb Blogging Hints and Tips

1 Comment 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!

24 Nov 2016

NEW! iWeb to EverWeb 2.0 Website Conversion Service Launched!

No Comments EverWeb, Software, Web Design

If you’ve developed an iWeb website you may be thinking of converting it to EverWeb, especially now that EverWeb version 2.0 has an all new blogging environment! So now is a great time to switch over, but even though there’s an easy Import facility built in to EverWeb 2.0, you may not want to spend the time and effort redeveloping your website.

RAGE Software, the makers of EverWeb, has the ideal solution for you! The company’s just announced the launch of a new service where they will do all of the work for you! The service will convert your iWeb website to EverWeb using updated features such as Master Pages, SEO features, mobile page optimizations, advanced contact forms, popup window and much more. So you get an updated website with modern day features included!

The EverWeb website has more about the iWeb to EverWeb Conversion service and includes a Contact Form to complete to get a quote for the conversion work.

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!