Mac SEO Blog

If you want to improve your website’s page loading times, EverWeb 4.1 is just for you! Our new release introduces two new features to EverWeb that will dramatically improve the time it takes for your site’s pages to load in a browser: Lazy Loading and WebP format support. We looked at the latter, WebP format, in a previous blog post, so now we turn our attention to the new Lazy Loading feature.

What Is Lazy Loading?

Usually when a web page loads in a browser, all of its content is loaded at that time. This can cause page loading times to become very slow, especially if you have a lot of large images on the page, or if your page uses other media content that takes time and resources to load. Slow loading pages can deter your visitors from remaining on the page until it loads. As such you increase the potential for visitors to click away from your site.

To solve this problem, lazy loading was developed as a way to help improve page loading times. Typically, lazy loading is usually applied to images on the page, but it is possible to apply lazy loading to other resource intensive content as well.

When a page that uses lazy loading is loaded, only the content that is necessary for the user to interact with is displayed. Any other content that is not displayed, or needed at the current time, will be loaded on demand as the visitor scrolls the page.

How To Use Lazy Loading in Your Site

In EverWeb 4.1, or higher, you can apply lazy loading to images on your pages. Simply select the image you want to lazy load, then go to the Shape Options tab and check the ‘Lazy Load Image’ checkbox. That is all that is required, so super easy!

Once you have check marked all of the images in your site’s pages that you want to lazy load, publish your website and see the difference it makes when your site loads in to a browser window.

The Benefits of Lazy Loading Images

There are a number of benefits gained by using lazy loading in your site:

1. Faster Initial Page Load: By deferring the loading of non-essential elements, lazy loading reduces the initial page load time, allowing users to access the core content more quickly.
2. Improved Performance: Lazy loading helps improve overall website performance by minimizing the amount of data transferred and reducing the server’s workload.
3. Bandwidth Savings: Users may not view the entire page, so lazy loading helps save bandwidth by loading only the content that users actually interact with.
4. Better User Experience: Users get a smoother experience as they navigate the page since the browser loads content progressively as needed, rather than waiting for all resources to load before displaying anything.

Lazy loading is especially beneficial for pages with a large amount of media content, such as image-heavy websites or pages with embedded videos. However, it may not be necessary, or suitable, to use it on every page of your site. As always, it is important to first think about the requirements of your website and your site’s visitors.

Other Ways to Improve Your Website’s Page Load Speeds

In addition to Lazy Loading images on your site’s pages, there are a number of other ways in which you can improve your page speed loading times:

1. Use WebP Format when publishing your website. The size of the image will be reduced, but image quality should still be good.
2. Other Image Optimization Techniques: Use image compression software to strip the image file of data that is not needed without losing image quality. You may also find benefit in reducing the image’s dimensions and additionally, you may benefit by changing the image file’s file format from e.g. PNG to JPEG.
3. Minimize HTTP Requests: By reducing the number of elements on your web pages, such as images and any scripts or code you may have you can tweak your page load times.
4. Enable Gzip Compression: If you are using EverWeb Site Shield Addon, Gzip compression is automatically enabled for you on the server side reducing the size of HTML, CSS, and JavaScript files before they are sent over the internet. This reduces bandwidth usage and speeds up loading times.
5. Use less resources on your page. The simpler your page is in structure, the faster it will load.

Using a combination of readily available tools, in EverWeb itself, with EverWeb addons and external tools, you will easily be able to improve your page load speed times.

If you have any questions about page loading times, or about EverWeb in general, please let us know in the Comments Section below. We’re happy to help!

EverWeb’s Blogging feature was introduced in November 2016 when EverWeb 2.0 debuted. In the intervening eight years, there have been lots of improvements and feature additions in EverWeb’s blogging environment to enjoy. Often many of EverWeb’s blogging updates have been more incremental than blockbuster, so in this post we are going to round up the features and updates that have been introduced since our last update on blogging which came with the introduction of EverWeb 3.5.

Paragraph Styles

One of the highlights of our EverWeb 4.0 release was the introduction of Paragraph Styles to the app. You can apply Paragraph Styles anywhere in EverWeb, to text, within the Styled Text Editor in widgets and also within blog posts! All you need to do is highlight the text that you want to apply the Paragraph Style to in the Blog Post Editor, then click on the new Paragraph Styles button in the Blog Post Editor’s Toolbar – the second icon on the left hand side. Select the Paragraph Style that you would like to use from the dropdown list.

The Paragraph Styles are the same as the ones that you find in the Text Inspector, so if you ever want to modify, add or delete a Paragraph Style, you can do so either from the Text Inspector or by using the Format-> Default Styles… menu option.

SEO Key Words and Short Summary Options!

Although introduced in EverWeb 3.5, this is always worth a mention! You can add SEO Keywords and a Short Summary description to your blog post just by selecting your blog post from the Blog Posts List. Next, click on the Settings Cog then choose the Post Options… menu option. Note that ‘Post Options…’ was renamed from ‘Edit…’ as of EverWeb version 3.9 onwards.

Dark Editor Mode

For computers that support this feature, you can now set EverWeb’s Blog Post Editor to Dark Mode. This feature was introduced in EverWeb version 3.9. To access Dark Editor Mode, click on the Settings Cog on the left hand side underneath the Blog Posts List, then choose Dark Editor from the list of options.

Video (and Audio) Embedding Made Easy!

EverWeb made embedding videos in to a blog post a lot easier in EverWeb 3.9.1. Now all you need to do to embed a video in your post is to add the video file to the Assets list, then secondary, or right, click on the file, then select the ‘Copy File Path’ option. Next, go to the place in your blog post where you want to embed the video. Click on the ‘Insert Video’ button in the Blog Post Editor Toolbar then paste in the File Path link. Click on ‘Insert’ to finish.

The great thing about this option is that it also supports Audio file embedding too!

Clearing Text Formatting

In addition to the introduction of Paragraph Styles in EverWeb 4.0, this release also saw the introduction of the ‘Clear Formatting’ button in the Blog Post Editor’s Toolbar. Simply select the text that you want to clear the formatting from, then click on the Clear Formatting button at the far right of the Blog Post Editor Toolbar.

Importing Blog Posts from Other Sources

You used to import blog posts from WordPress or iWeb through the Settings Cog’s Import… menu option. From EverWeb 3.9.1 onwards you can now use the File-> Import menu for importing from these sources instead. If you are using EverWeb 4.0 or later, you can also import image galleries from WordPress, iWeb or Sandvox.

Blog Post Settings Changes

Most of the updates that come to EverWeb’s blogging environment can be seen in the Blog Post Settings when you are editing a blog post.

• Alt Text for the Blog Post Cover Image: This feature debuted in EverWeb 3.6. We recommend that whenever you have the ability to add ALT Text that you do so. Primarily the function of ALT Text is to help vision impaired people. As such, it is important that the text you enter simply describes what the image is about. Nothing more. The second role of ALT Text is to replace an image that cannot be displayed in a browser window. A third possible role also exists for ALT Text in that it might help boost your SEO if you use it. As SEO rankings involve complex algorithms, no one is certain how much of a role ALT Text plays in SEO, if at all. We strongly recommend that you add ALT Text based on its original intended purpose.
• Add Padding To The Blog Post Cover Image: Another nice feature add allows you to add padding around the Blog Post Cover Image, available from EverWeb 3.8 onwards.
• Blog Post Header and Date Fields Alignment: You can now left, center or right align the Blog Post Header and Blog Post Date fields since EverWeb version 3.8.

Improved Blog Editing Performance

Since our last update on blogging, back when EverWeb 3.5 was introduced, we have made improvements to ensure that typing on large blog posts in the Blog Post Editor is smoother with minimal typing delays. We have also improved the scrolling of the Blog Post Settings making the whole blogging experience snappier!

EverWeb’s blogging experience continues to evolve, but if there is anything that you would like to see come to blogging in the future, or in EverWeb in general, please drop us a line in the Comments Section below!

Some of the new features in EverWeb 4.0, which we introduced back in November 2023, may appear to be only minor updates, but they can have a great impact on your website’s design and its workflow. If you are using EverWeb 4.0 or higher, you may have noticed that our Contact Form Advanced widget gained a couple of new Form Controls, whilst some Form Controls garnered new options. In this post, we take a look at these new features and how they can positively impact your contact form design.

About Form Controls and Control Types

EverWeb’s Contact Form Advanced Widget uses Form Controls to create your contact form’s fields and styling elements. Each Form Control has different properties that you can change to create the form that you want. One of the Form Control’s properties is Control Type. There are currently nineteen different Control Types to choose from.

Set the Control Type to match the Form Control’s purpose, for example, if you add a ‘First Name’ Form Control to your contact form, you would probably want to make its Control Type a TextBox Control Type. If you have an ‘Email’ Form Control, then the Control Type should be set to Email.

Control Types not only control data input in to your form but also styling elements such as dropdown menus and headers. Additionally, if you use EverWeb’s Contact Forms Enhanced Addon, you also now have the ability to select which file types your form submitters can upload.

New Divider and Columns Form Controls

In our recent EverWeb 4.0 (and higher) macOS and Windows releases, we added two new Form Controls to the Contact Form Advanced widget: Dividers and Columns. These two new Form Controls are easy to use and add additional design flair to your form. Let’s start by looking at the Divider Form Control. In the examp[le below we have assumed that you have already added the Contact Form Advanced widget to your page and configured the widget for use.

1. Once you have set up your contact form’s basic settings, click on the ‘Add’ button below the Form Controls list to add the new Divider Form Control to your form.
2. Name the Form Control as e.g. ‘Divider’ and set the Control Type property to Divider.
3. You will now see a thin line across the form at the bottom of the form, just above the Submit button.
4. Move this ‘Divider’ Form Control up the Form Controls list to where you want it in order to separate one part of the form from another part.
5. Once you have positioned the Divider Form Control, use the styling properties in the Options List to customize the look of the line.
6. The Style option lets you choose the line style: Solid, Dashed or Dotted. Use the Size option to change the thickness of the line and the Color option to change the color of the line.

The second new Form Control is the Column Form Control. In this example, I have a ‘First Name’ Form Control and a ‘Last Name’ Form Control on my form. At present these Form Controls are on two separate lines on my form. I would like them side by side instead, so I can use the Columns Control Type to make this possible.

1. Add two Form Controls to your page: ‘First Name’ and ‘Last Name’. Both Form Controls should have their Control Type set to TextBox.
2. The ‘First Name’ and ‘Last Name’ Form Controls should be listed one after the other in the Form Controls list.
3. Next, add a new Form Control to the Form Controls list. Name this Control as ‘Two Columns’.
4. Change the Control Type to Columns.
5. In the Options List, you will see that the number of Columns is already set by default to two, which is what is needed. If you want to add more space between the two columns, increase the value of the Spacing field.
6. Now move the ‘Two Columns’ Form Control to immediately above the First Name field. You will now see the ‘First Name’ and ‘Last Name’ Form Control’s side by side.

Notice that the Columns Form Control only affects the Form Controls directly below it. In our examples the Columns Form Control is set to two columns so it only affects the next two Form Controls beneath it, before reverting back to the form’s one column default.

New TextBox and Text Area Form Control Options

In addition to the two new Form Controls introduced with EverWeb 4.0, there are a couple of useful additions to the TextBox and Text Area Form Controls. For the TextBox Form Control three new options: Pattern, Max Length and Max Length have been added to its Options List. The Text Area Form Control gains the Pattern option.

The Pattern option allows you to choose how you want input to be specified. When you click on the Settings button for the Pattern option you will see a list of ten predefined options for phone numbers, IBAN, and alpha-numeric input. You also have an eleventh option where you can create your own custom pattern. If you do not want to specify a pattern at all, choose the None option.

The second option, Max Length limits user input in the Form Control to the length specified. Set the value to zero if you do not want to set a value.

The last option is Read Only. If you check the box for this option, your visitors will not be able to enter any data in to the field. This can be useful for you, if the Form Control is time sensitive, or you want to block visitors temporarily from e.g. adding comments in to the TextBox or Text Area.

New File Upload Options

The last new option for the Contact Form Advanced widget is for those users who also have the Contact Forms Enhanced Addon. The addon allows your to add file uploading to your forms so your visitors can send files to you. In EverWeb 4.0 and higher, you can now specify the type of files that you want to accept for uploading e.g. PDF files, Word documents, images, ZIP files and so on. There are ten different choices available, plus options for you to customize your choice, or to accept any file type.

Contact forms in our latest release of EverWeb bring you greater design control and more Form Controls options than ever before. We hope you like these additions. Please let us know if you have any requests on features to add to the Contact Form Advanced widget in the Comments Section below!

One of the most user requested features comes to EverWeb in our latest 4.1 release – Video Backgrounds! Find out all you need to know below! In addition, there are also some great updates to Image Fill for both Page and Browser Background options to enjoy!

To use the features described below, simply open your EverWeb project file, then go to the Page Settings tab in the Inspector Window.

NEW Video Background Feature Comes To EverWeb

If you are using EverWeb 4.1 or higher, you can now add a video background as a Browser Background. In the Browser Background section of the Page Settings tab, click on the dropdown menu to the right of the words ‘Browser Background’ then select Video if it is not already selected. You will see various options displayed. Start by choosing the video source from the dropdown menu. You have four options to choose from:

External Video URL

The External Video URL option allows you to easily link to videos from other sources such as YouTube or Vimeo. All you need to do is enter the URL of the video that you want to use in the box below the menu option.

Local Video File

If you choose the Local Video File option, you can choose a video for use as a background from your project file. Click on the ‘Choose… button then select the video you want to use from the Assets list.

YouTube Video

To use this option, first go in to YouTube then choose the video you want to use. Click on the video’s ‘Share’ button then click on the ‘Copy’ button which will copy the video’s URL to the Clipboard. In EverWeb, paste in the link in the box below the video type selection dropdown menu.

Note that you can also use the External Video URL menu option as well as it works in the same way.

Vimeo Video

The Vimeo video option also works in the same way as the External Video URL and YouTube options. Just select the video in Vimeo that you want to use, copy its shareable link then paste it in to the box below the video type selection dropdown menu.

Video Background Options

Once you have done this, you can set options to loop the video and fix the video in place on screen if you want. Additional options allow you to set the scrolling speed of the video, and whether the video can be played on tablet or mobile devices. There is also an option to add a thumbnail image to the video which is useful if you know that the video will take time to load prior to playing.

Video Background Q&A

Here are some useful hints and tips that may help you when using EverWeb’s Video Background feature:

• When you set a video background, you will need to Preview, or Publish, your site to see it working. You will not see the video background in your project’s Editor window.
• If you find that your video is obscured when previewed or published, it is probably because the Page Background is set to ‘Color Fill’ or ‘Image Fill’. Set the Page Background to ‘None’ if this is the case.
• Be careful if you decide to use the Local Video File option as the video will be stored in your project file’s Assets List. This may make the project file very large (depending on the size of the video) and you may find it takes longer to publish your project file as well.
• If you are using a large video file, test first before publishing. You may need, or want, to use a video Thumbnail image which can be displayed whilst the large video loads.

Improved Image Fill Features For Page & Browser Backgrounds

In addition to the introduction of Video Backgrounds to Browser Backgrounds, EverWeb 4.1 also sees improvements if you are using Image Fill option for your Browser Background. You can now set the image alignment both horizontally and vertically. Furthermore, you can also fix the image in place so that it does not scroll as you scroll the page.

If you are using the Page Background feature, you will see the same improvements with buttons available for you, to horizontally, or vertically align your image. as well as the ability to fix the position of the image.

Image Fill for Page Background also gains two new options with the introduction of Tile Vertical and Tile Horizontal to the existing Original Size, Stretch, Scale To Fit, Scale To Fill and Tile options. Just set the option you want using the dropdown menu to the right of the image thumbnail. For more flexibility you can also adjust the vertical and horizontal alignment as required.

Find Out More About EverWeb 4.1

The new Video and Page Background features are just two of the new features of EverWeb 4.1. Check out our What’s New in EverWeb 4.1 post to find out more about our new release!

Once you have created the backend features of your membership site with EverWeb Membership Sites, you can then easily create your membership site’s front end features, such as sign up and login pages, using EverWeb itself together with our exclusive Membership Sites widgets. After completing the basic pages that you need to operate your membership site, you will then need to create content pages for all of the membership levels that you created in your EverWeb Client Area.

In this blog post, we will cover Membership Levels, creating your content pages in EverWeb, and how you can restrict access to only those members who have the right access level.

Membership Levels Revisited…

When you set up your membership site’s backend feature you should have already created membership levels. The type of membership levels you can create will depend on the EverWeb Membership Sites plan that you have signed up for. If you signed up for Membership Starter, you will be able to add only paid for Membership Levels. If you signed up for either Membership Plus or Membership Deluxe, you can create free, trial and paid for Membership Levels. Check out our video above, if you have not already set up your Membership Levels.

In addition, remember that if you have created Trial and Free membership levels, you will need to distinguish properly between the two. Consider why would you offer a Trial if you already have a Free level that anyone can access. In this case, for example, you may want to offer a trial membership that allows limited access to some of your paid for content, for a limited period of time.

Creating Your Membership Site’s Content Pages

Once you have created your Membership Levels, you can create your content pages. These will probably mimic the Membership Levels that you have created. In this example, I am going to create content pages for Free, Silver and Gold Membership Levels. It is recommended that you create these pages within your membership site’s folder in EverWeb. If you want, you can create a subdirectory that contains all of your content pages.

Remember to be careful about what you offer at Free Membership Levels. Typically, you will want free content to be perceived as high value to the member, but low value to you. For example, you could offer an e-book on SEO using material you have already created. The only extra work for you then would be to make sure it is properly presented and formatted, then put it in to a PDF format. The resulting e-book, in this example, is something you would (or should) not have spent too much time and effort on, but gives high value to your members.

When creating content pages for each membership level, remember that you may have multiple pages per membership level. In this case, you will need to add hyperlinks on each of these pages so that your visitors can navigate easily between them.

In this example, I am going to create three pages in my website: Free Content, Silver Content and Gold Content.

Password Protecting Your Content Pages

Once you have created your content pages you can now assign membership levels to each of them. Start by selecting one of your content pages. Next, go to the Page Settings tab in the Inspector Window. Scroll down to the Password Protection section, and click on the triangle symbol to the left of the section name, if the Password Protection section is not open. There are two buttons at the top of the section: Memberships and Simple Password.

The Memberships button is used when you have an active EverWeb Membership Sites account. Use the Memberships options to select which membership levels apply to the page you are currently on.

To set the Membership Levels for the page you are currently on, first select the Membership Site that you want to use from the dropdown menu. The default is set to ‘No Selection’.

Once you have selected your Membership Site, you will see its Membership Levels. Click on the box to the left of the name of the Membership Level to toggle the level on or off.

In this example, I have set up three membership levels: Free, Silver and Gold. For the Free Content page I would want all members to be able to access its content, so I would check mark all membership levels.

For my Silver Content page, I would check mark only the Silver and Gold level checkboxes.

Lastly, for my Gold Content page, I would only check the Gold membership level.

Additional Memberships Password Protection Features

The Membership Password Protection section also allows you to see additional details of the Membership Level, just by clicking on the Membership Level name i.e. Set Up Price, Recurring Price, Tax and Schedule.

This section also enables you to edit your membership levels at any time by clicking on the ’Edit Membership Levels…’ button. This button will take you to your EverWeb Client Area where you can make the changes you want.

If you make changes to your membership levels in your EverWeb Client Area, for example adding or removing a Membership Level, you may find that these changes are not reflected in EverWeb. Use the ‘Refresh’ button to the right of your Membership Site selection to refresh the Membership Levels list.

In addition, the Memberships options also allow you to setup, or edit, your Membership Site Settings using the ‘Membership Site Settings…’ button.

Publish and Test

Once you have set up your Membership Levels for all of your pages, publish your site and test! If you have a question about using EverWeb Membership Sites, or about EverWeb in general, why not drop us a message in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter / X

In our latest EverWeb release, version 4.1, we have introduced support for WebP format which has the power to dramatically improve your page load times. In this post we take a deep dive explaining all that you need to know about the format, the advantages of using WebP in EverWeb, and some things that you may want to consider before publishing your site using WebP format…

What Is WebP Format?

WebP is a modern image format developed by Google, who first announced the format in 2010, but only released their first stable version of the format in 2018. The goal of the WebP format was to replace JPEG, PNG and GIF file formats with a new standard that provided better compression without loss of image quality. Using WebP format in your website, therefore, has a number of benefits…

What Are The Advantages of Using WebP Format in EverWeb?

Here are some of the key advantages of using WebP files on your website:

1. Smaller File Sizes: WebP typically offers better compression compared to other image formats such as JPEG and PNG. The result is smaller file sizes which is important for faster page loading times, especially for image based websites, such as photography websites.
2. Faster Loading Times: As WebP files are smaller than other image file formats, so typically downloaded quicker, resulting in faster page loading times. This benefits both the website’s visitor and the website’s Search Engine Optimization (SEO), where page speed is factored in to the website’s search rankings.
3. Better Bandwidth Usage: Smaller file sizes help reduce bandwidth usage for both the server and end-user. This can benefit users with limited data plans or slow internet connections.
4. Lossless and Lossy Compression: WebP supports both lossless and lossy file compression, so images can retain their quality whilst benefitting from smaller file sizes.
5. Alpha Channel Support: WebP supports transparency (alpha channel), similar to PNG, allowing you to create images with a transparent background. This can be useful for overlaying images on different backgrounds without a visible border.
6. Animation Support: WebP supports animated images, making it a suitable replacement for GIFs. Animated WebP files typically have smaller file sizes than equivalent GIFs, again resulting in faster loading times for web animations.
7. Wide Browser Support: Most modern browsers support WebP, including Google Chrome, Firefox, Safari, Microsoft Edge and Opera. Note that older browsers may have limited or no support for WebP format.
8. Google’s Preference: Google actively promotes the use of WebP so using their file format standard may benefit your site’s search engine ranking.

What Should You Be Aware Of When Using WebP Format

While there are clear advantages to using WebP, it is important to consider browser compatibility. Fortunately EverWeb does this for you. If the browser your visitor is using does not support WebP format. an alternative image format will be used instead.

Below is a list of some of the things you might want to consider when thinking about using the WebP format in your website:

1. Limited Browser Support: Although support for WebP has grown, it may not be supported by all browsers, especially older ones.
2. Fallback Requirement: Due to varying browser support, alternative image files (e.g., JPEG or PNG) should be available for browsers that do not support WebP. EverWeb takes care of this requirement for you so you do not have to do anything.
3. Compression Artefacts: WebP’s compression may result in noticeable artefacts, especially in highly detailed images. EverWeb will process and optimizes images to avoid this from happening.

How To Use WebP Format In Your EverWeb Made Website

If you decide to use WebP format in your EverWeb website, it is easy to implement. Simply go to the EverWeb -> Edit Publishing Settings screen if you are using macOS, or the File-> Edit Publishing Settings screen if you are using Windows. Check the box “Export Optimized Images”. This will be in either the EverWeb Location, Folder Location or FTP Server Details section of the screen. Publish your site and WebP support will be included automatically.

WebP Format and Lazy Loading for the Best Page Loading Speeds

WebP format is a great addition to EverWeb. This feature can be also used in conjunction with EverWeb 4.1’s new Lazy Loading feature for even faster page loading speeds. We will be looking at Lazy Loading in a future blog post!

If you have any comments or questions about the new WebP format feature, or about anything else EverWeb related, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter / X

Instagram

In our previous blog post about EverWeb Membership Sites, we covered how to set up all of the backend features that you will need for your own membership site in your EverWeb Client Area. In this post, we turn our attention to how to set up your membership site’s frontend features in EverWeb itself.

Before You Begin…

We are going to assume that you have already done the following:

• You are using EverWeb version 4.0 or Higher for macOS or Windows
• You have already signed up EverWeb Membership Sites, either the free or paid for version
• You have already set up your EverWeb Membership Sites Backend in your EverWeb Client Area

Installing EverWeb Membership Sites Widgets

When you sign up to EverWeb Membership Sites, you will receive an email with a link in it to download a set of widgets specifically for use in your membership site.

1. Use the link to download the set of Membership Sites widgets to your computer, for example to your desktop, or your regular downloads area on your computer.
2. Next launch EverWeb and open the project file that you want to build your membership site in.
3. After opening your project file, click on the Widgets tab in the Inspector Window.
4. Drag and drop the Membership Sites set of widgets from their location on your computer on to the widgets in the Widgets tab.
5. The Membership Sites widgets will be installed.

Creating Your Membership Site’s Structure

When you create your membership site in EverWeb, you have two options as to how to begin

• You can create your membership site within an existing EverWeb Project file which is probably how most users will begin.
• Alternatively, you can create your membership site in a new Project file and link it back to your main website Project file. This may be more suitable if your main website is very large, and it would be more manageable to have the membership site as a separate project.

For most users it is probably better to create your membership site within your existing project file which is what we will be doing in the following scenario.

When creating your membership site, we recommend that you create a directory in which to store your membership site’s page. To do this, simply click on the ‘Add Directory’ button in the Toolbar. Select the Theme Template that you want to use, or select the Blank, or Blank Responsive, Home page if you are creating your membership site’s pages from scratch. 

If you are using a blank page to create your membership site’s pages, you may also want to consider creating and using a Master Page which you can attach to your blank page. This will make creating the pages of your membership site much easier, quicker and consistent.

Name the directory appropriately, so that you will easily know it is your membership site’s directory. Remember to store all of your membership site’s pages within this directory.

If you want to change the name of the folder at a later time, all you need to do is either double click on the folder in the Web Page List then rename the folder, or select the folder in the Web Page List and use the File-> Rename menu option to rename the directory.

Creating Your Membership Site’s Pages

You will probably want to start building your membership site’s pages by first creating pages such as the Sign Up or Login pages. With the directory that you have just created still selected, click on the ‘Add Page’ button. Select the Theme Template that you want to use, then press ‘OK’ to create the new page. You should see this page under, and to the right of, your membership site’s directory. Name the page appropriately e.g. Sign Up Page.

Next, drag and drop the widget that is appropriate for the page on to the Editor Window e.g. click on the Widgets tab. If the Membership Sites widgets you have downloaded are not displayed, click on the Categories menu, then choose your membership sites widget category. In this example, we are going to create a Sign Up page, so drag and drop the Membership Sign Up Form widget on to the page from the Widgets tab. 

Common Widget Features and Settings

Set Your Membership License

Once you have placed the widget on the page, you will first of all need to select your Membership Site license in the Widget Settings, if is not already selected. Most of the Membership Sites widgets require you to do this when you first add the widget to the page. Once you have chosen your membership site from the dropdown, the widget’s Widget Settings will be available for you to use.

Membership Site Settings…

The first setting of note is the Membership Site Settings… button which becomes available once you have set your Membership Sites Licence in the widget. This button appears in a number of different Membership Sites widgets. It is used to link together specific pages within your membership site.

When you click on the button, you will see your Membership Sites Account and nine different labels each with a corresponding dropdown menu. Click on the dropdown menu to select the corresponding page of the label. As you create your membership site’s pages, remember to go back to the Membership Sites Settings to complete these settings. e.g. my ‘Sign Up Page’ corresponds to the Sign Up Page label.

There are nine fields that you can complete, but only the first six are mandatory. If you do not want to fill in the other three fields, EverWeb will create an automatic response for you which you can edit in the Client Area Email Templates section. Once you have finished editing your Membership Site Settings, click on the ‘OK’ button.

Success Pages and Other Membership Site Associated Pages…

Success Pages are also a common feature that you will find in many Membership Sites widgets. Just as the name implies, these are pages you create to tell your member that what they have just done has been successful. In this example, I would create a Success Page telling the member that they have successfully signed up to my membership site. When creating a Success Page, remember to include a button to take the member back to your membership site’s Home page, or another relevant page e.g. for the Sign Up Success page, you probably would want the button to take the member to your membership site’s Login page and not the membership site’s Home page.

Our advice is to work your way through the Widget Settings until you have completed the settings. In this way, you will discover the additional pages that you should, or might want to, create e.g. in the Membership Sign Up Form widget, you can also create a Terms of Service page in addition to a Success Page.

We also recommend that when you find that there are extra pages to create, such as those described above, that you add these pages to your membership site immediately as ‘skeleton’ pages, but continue to work on the page your are on, until it is complete. After completing e.g. my Sign Up page, I would then work next on my Sign Up Success page, then on the Terms of Service page.

The Membership Sign Out Button Widget

The other feature that you generally will want to add to most of your membership sites pages is the ‘Membership Sign Out Button’ widget. This typically will appear on all of your pages except for the Sign Up and Sign Up Success Pages.

Next Steps…

Once you have completed one page, and any additional pages that it may link to, create a new page and add one of the other widgets to it. Use the same process as described above to develop the pages that your membership site will need.

Summary

Creating a Membership Site in EverWeb is easy and actually quite intuitive. Just create a page, add one of the Membership Sites widgets then follow the Widget Settings. Style and add text and images to your pages as appropriate.

In a future blog post, we will look at how to use Password Protection to enforce membership levels in your membership site. In the meantime, if you have any questions about this post, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter / X

We’re excited to announce the release of EverWeb 4.1! Our latest release includes WebP support for images so that your pages load faster than ever in browser windows! Plus new draft mode, lazy loading images, Video backgrounds for your browser background and much more! See below for full details!

Which Version of EverWeb is for You?

EverWeb is available in the following versions:

• If you are running Microsoft Windows 10 or 11, EverWeb 4.1 is available for you.
• If you are running an Intel Mac running macOS High Sierra, Mojave, Catalina, Big Sur, Monterey, Ventura or Sonoma, EverWeb version 4.1 is available for you.
• If you are running an Apple Silicon Mac running macOS Ventura, Monterey, Big Sur or Sonoma, EverWeb version 4.1 is available for you as a Universal Binary. EverWeb will run natively without the need to use Rosetta 2.
• If you are running OS X 10.10 – macOS 10.12 (OS X Yosemite, OS X El Capitan, macOS Sierra) EverWeb 3.4.2 is for you.
• If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 2.9.1 is available for you.

When updating to the latest version of EverWeb, the update process will automatically download the correct version of EverWeb for your operating system.

EverWeb 4.1 Includes…

[NEW] Lazy Loading images – Your images load only when they are actually needed.

[NEW] Video Browser Backgrounds from four different sources, such as YouTube and Vimeo.

[NEW} WebP images supported with automatic image optimization to WebP format with correct resizing

[NEW] Draft Mode. Pages set to draft will not be published.

[NEW] Alt Text is now available for images in the Image Gallery Widget.

[NEW] Alt Text is now available for images in the Responsive Image Gallery Widget.

[NEW} Import images from CSV file to bulk load images in to the Responsive Image Gallery Widget.

[NEW[ Tile Vertically or Tile Horizontally for images used as Page Background.

[NEW] Image Scaling available for images used as Browser Background.

[NEW] Fixed Position for images used as Page and Browser Background.

[NEW] Image alignment options for Page and Browser Background.

[NEW] Check Page updated to include new optimization suggestions.

[IMPROVED] Improved export of high-resolution images without relying on java script.

[IMPROVED] Code optimized for better W3C compliance.

[CHANGE] Updated Twitter widget to become the ‘X’ widget.

[CHANGE] Replaced the Twitter button with an ‘X’ button.

[CHANGE] The Google+ Button has been removed from the Insert-> Button menu.

[FIX] Blank Contact Forms Enhanced Addon field in Contact Form Advanced widget.

[FIX] Simple Passwords not being carried over has been fixed.

[FIX] Color settings issue in the responsive navigation bar fixed.

[FIX] Redefined styles from selection bug fixes.

[FIX] Full-width shapes exporting issue resolved.

[FIX] ‘Microsoft Edge Can’t read and write to directory’ Error for some users on Windows fixed

[FIX] Possible crash when using some widgets on ARM based Macs

[FIX] The URL field is properly changed to HTTPS when pressing the Use Secure HTTPS Urls option

[FIX] Fixed a crash when dragging from the Stock Photos on Windows

[FIX] Fixed ‘500 error’ on Preview

[FIX] Fixed crash when double clicking on a blank row in Manage Cache Window

[FIX] Fixed a potential crash on backup

[FIX] Some minor issues with SEO Check Page Fixed

[FIX] Many Improvements and bug fixes for EverWeb for Windows Users

[FIX] Fixes for the Stripe Payments widget

[FIX] Some Issues with Search fields fixed.

How To Update To EverWeb 4.1 for Windows

You can easily update EverWeb for Windows by either:

1. Launching EverWeb then opening a project file. From the Help menu at the top of the screen select ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

After downloading EverWeb, double click on the EverWebSetup.exe file. Note that the file name may have the version number appended to it and that you may need to initially trust the file to be able to download it.

Follow the instructions in the Installation Wizard until the installation is finished. You can delete the EverWebSetup.exe file afterwards by dragging it to the Recycle Bin.

How To Update To EverWeb 4.1 for macOS

You can easily update EverWeb for macOS by either:

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.

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon.

Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

About Your EverWeb Update

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

The update is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb update period from your EverWeb-> Preferences… window on macOS, from your Edit-> Options menu on Windows, or from your client area.

If you have passed your one year of free EverWeb updates, you can purchase 1 more year of upgrades 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 updates 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.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

• The EverWeb website which has up to the moment information in its blogging section.
• New EverWeb videos on YouTube.
• The EverWeb User Manual in EverWeb’s Help-> User Manual 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.

Adding a membership site to your EverWeb made website can be the perfect way to retain customers and grow your business. In our recent post, 12 Reasons Why You Need an EverWeb Membership Site, we discussed the benefits of having your own membership site. In this post, we take a detailed look at how you can easily set up your EverWeb Membership Site’s backend.

The backend of EverWeb Membership Sites is where you set up all of the features that will be available for the frontend, which you develop in EverWeb itself. For example, you will use the backend for membership account administration, payments setup and administration, administering membership levels, creating coupon codes and so on. In a future post, we will look at setting up your membership site’s frontend in EverWeb itself.

Before We Begin…

To be able to create your own Membership Site with EverWeb, you will need to make sure that you are running EverWeb 4.0 or higher, for Mac or Windows. It does not matter whether you host with EverWeb or have your own hosting provider, you can still build your membership site!

You can also start your own EverWeb Membership Site for free! Just go to the EverWeb Membership Sites Pricing page to sign up for the free plan. There are also paid for Membership Sites plans which you can sign up to, or upgrade to, as your membership site’s need develop.

Membership Sites Overview

If you are new to Membership Sites, our Membership Sites Overview video is the ideal place to start! Check out the video at the top of this post for general orientation information.

6 Steps to Setting Up Your EverWeb Membership Sites Backend

Setting up your EverWeb Membership Sites backend is easy to do. Start by logging in to your EverWeb Client Area. Once logged in, scroll down the page until you see the Membership Sites section on the left hand side of the page. Click on ‘Manage All’. You will be taken to your Membership Sites Summary page. Down the left hand side, under ‘Manage All’ you have the options below. We recommend following each in the order presented below.

Membership Sites Setup

Begin to build your Membership Sites Backend by clicking the Setup button. In this section you will set up the basic administrative requirements for your membership site.

Membership Levels

After completing the basic Setup tasks for your membership site, next move on to setting up your Membership Levels. You can have free and paid for membership levels, although this does depend on whether you have a free or paid for EverWeb Membership Sites plan.

Membership Setup

EverWeb allows you to manually import existing members from external sources, or manually create and administer members. You can also perform various administrative functions such as suspending members, editing membership details (e.g. entering new address details) and you can search your membership on specific fields e.g. if you want to know how many members used a particular coupon code.

Email Templates

EverWeb includes a range of default email templates that are used in membership sites. These templates can be edited so that you can create customized responses to your membership.

Coupon Codes

If you want to offer potential members a discount for joining your membership site, coupons are the perfect way to do this. You can also make your coupons limited time offers only if you want.

Cancellations, Logs and Mail History

The last three Membership Sites menu options are helpful if you need to track cancellations and actions to do with members accessing your Membership Site as well as email correspondence.

Next Steps…

Once you have completed the setup of your membership site backend in your EverWeb Client Area, the next step is to create the pages that you need for your membership site in EverWeb itself. We will be covering this important topic very soon in a follow up blog post.

In the meantime, if you have any questions about purchasing, setting up or using a Membership Site with EverWeb, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter / X

One of the premier features of the new EverWeb 4.0 release is the introduction of Paragraph Styles. You can now easily set up different text styles to suit all your website’s needs. Paragraph Styles can also be modified later on, for example, if you want to update, or refresh, the style of your website.

Setting Up Your Paragraph Styles

When you first create your website in EverWeb, it is an ideal time to create default Paragraph Styles. In this way, all your styling choices will be applied as your create the text for the pages of your site. It also means that you will have less work to do, both now and in the future, if your design needs change later on.

Hopefully you will already have an idea about which fonts you want to use, but if not, here are some recommendations:

• Use two fonts at most. Choose one font style for headlines and titles (e.g. Montserrat Bold) and one for your site’s body text. Checkout Google Fonts, which is great for font pairings and is EverWeb compatible!
• Often websites have the heading font as a Sans Serif font, and the body text font as a Serif font. This is not a hard and fast rule though. The main point is that the fonts you use in your site should be easy on the eye and easy to read.
• When thinking about your Paragraph Styles you will likely need to define styles for headings, sub-headings and maybe even sub sub-headings. For example, your main title heading could be a Montserrat 36 point bold font, your sub-heading a Montserrat 30 point bold font, and your sub sub-heading a Montserrat 24 point bold font. Note that the styles used are based on the main heading font chosen. Again, this method of styling is advisory, not mandatory.
• When defining your Paragraph Styles also remember that the color of the font, the font weight (e.g. bold, light, thin etc.) and the size of the font are also important. Use colors that are easy to read against your page background color. Bear in mind as well, that some people may have some form of color blindness, so be careful when mixing e.g. green and red, or blue and yellow, colors.
• Your text font size should be large enough to be easily read on a screen or mobile phone e.g. 16 point. Use smaller a font size only for ‘small print’ items on your page, such as terms and conditions or for legal information.

Once you have defined the Paragraph Styles that you want to use, you can implement them using the Format-> Default Styles… menu option. There are also other alternative ways in which to set up, and manage, Paragraph Styles which we will cover later on in this post.

Creating and Modifying Paragraph Styles in Default Styles

After accessing the Default Styles dialog box, click on the plus (+) button in the bottom right hand corner of the Paragraph Styles section to create a new Paragraph Style. Enter the name of the new style, then press Enter. You can then add the Paragraph Styles attributes you want using the Fonts section to the right of the Paragraph Styles section. Furthermore, you can also set up a Backup Font in case there are times your main font cannot be displayed in a browser. The font you use for the backup font should be a web safe font.

When you have created your Paragraph Style, click on the ‘Save’ button to finish. The Paragraph Style will now be available to use in the Text Inspector.

Modifying a Paragraph Style works in the same way in the Default Styles dialog box. Just click on the Paragraph Style you want to modify in the list of Paragraph Styles, then use the Fonts section and Back up Fonts sections as required. Click on ‘Save’ when you have completed your changes.

Paragraph Styles In The Redesigned Text Inspector

The second way in which to add, and manage, Paragraph Styles is through the Text Inspector. In EverWeb 4.0 the Text Inspector got a big redesign, so it is now easy to choose fonts for your site rather than having to use the Fonts Panel all the time. When you click on the Text Inspector button, you will immediately see at the top the paragraph style in use if any text is selected.

Applying a Paragraph Style

You can easily apply a Paragraph Style to text within a TextBox. Just select the text you want to apply a Paragraph Style to, then choose the Paragraph Style you want to use from the dropdown list at the top of the Text Inspector. In this example, we have selected the ‘Body’ Paragraph Style for our selected text.

Changing an Existing Paragraph Style

In the above example, we applied the ‘Body’ Paragraph Style to some text in a TextBox. This Paragraph Style is used throughout my site for all body text. Currently, its font size is 12 point which is a bit smal. As my text is already selected an now uses the ‘Body’ Paragraph Style, I can now change the font size on the fly to 16 point in the Text inspector. I can see the text size change in the Editor Window immediately. In the Text Inspector I can now see that next to the ‘Body’ Paragraph Style name, is an ‘Update’ button. If I click on this button, all text that uses this Paragraph Style will be updated to 16 point.

Using this method it is quick and easy to make global changes to your text all at once just with a mouse click! It is a great time saver! If you only wanted to apply the font size change to the selected text and not to the Paragraph Style, do not click on the Update button.

Renaming a Paragraph Style

To rename a Paragraph Style, just open the Paragraph Style list, then highlight the Paragraph Style that you went to change the name of. To the right of the style you will see either a Settings button, or a Down Arrow button depending on your version of EverWeb. Click on this button/arrow and a sub menu will appear. Choose ‘Rename Style’ to rename the Paragraph Style. Press Enter when done.

If you want to change the name of the Paragraph Style in the Default Styles dialog box, just double click on the name of the Paragraph Style that you want to change to be able to edit it. Once you have change the name, press Enter, then click on the Save button to save your changes.

Deleting a Paragraph Style

If you want to delete a Paragraph Style, simply highlight the Paragraph Style that you want to delete from the Paragraph Styles dropdown list, click on the Settings/Down Arrow button and then select Delete Style from the submenu. If the Paragraph Style is in use already in your site, you will be asked to select an exisitng Paragraph Style as a substitute for the one you are deleting.

If you are using the Default Styles dialog box instead, you can delete your Paragraph Style by simply highlighting the style, then pressing the minus (-) button to remove it from your site. Again, you will be asked to substitute a Paragraph Style for the one you are removing.

Paragraph Styles offer you a great way to add easy, consistent text styling to your website. Updating the styles you use in your site is now also quick and simple to do, saving you much time and effort!

If you have any questions on this great new feature, please let us know in the Comments Section below.