Mac SEO Blog

One of the major goals of EverWeb is to always make building your website as simple and as easy as possible. With this in mind, our latest release, EverWeb 4.2, has added some great new ways of working with the Responsive Row widget that should save you both time and effort!

New UI Tools for The Responsive Row Widget

The Responsive Row widget has been updated to include a Toolbar that runs across the top of the widget. You will see the Responsive Row Toolbar whenever you select the widget. The name of the Responsive Row is now displayed in the middle of the Toolbar, whereas in previous versions of EverWeb it was displayed in the top left hand corner of the widget. There are five icons in the Responsive Row’s Toolbar:

• Up Arrow – Click on the Up Arrow symbol to move the Responsive Row up the page.
• Down Arrow – Click on the Down Arrow symbol to move the Responsive Row down the page.
• Trash Can – This icon deletes all of the embedded objects that are currently in the selected Responsive Row, if there no objects embedded in the Responsive Row, then pressing the Trashcan icon will delete the Responsive Row itself. If you have deleted embedded objects, or the Responsive Row itself by mistake, use the Edit-> Undo (Command-X on Mac, Control+X on Windows) command tp restore the objects.
• Settings Cog – Use this icon to access the Responsive Row’s widget settings without having to mouse over to the Widget Settings tab. This is a great way to help you work more efficiently.
• Move Icon – Click and drag on this three line icon in the right hand side of the Responsive Row Toolbar then drag and drop the widget up or down to where you want it placed.

Additional Ways of Moving the Responsive Row Widget

The new Responsive Row Toolbar lets you move the currently selected widget up or down the page using the up/down arrows or by using the Move icon located on the right hand side of the Toolbar. In addition, you can also just click and hold the cursor on the any empty part of the Toolbar itself and drag it up and down the page as desired. Release the mouse when the widget is positioned where you want it on the page.

Hiding The Responsive Row Toolbar

If you do not want to see the Responsive Row’s Toolbar icons use the Window-> Hide Layout menu option. When you select this option the complete page layout will be hidden as well as all of the in-situ icons. Only the currently selected object will display the ‘in-situ’ icons. to restore the page layout features, just toggle the Window-> Show Layout menu option.

EverWeb 4.2’s new UI features help make designing and customizing objects and widgets, such as the Responsive Row widget, even easier and quicker than ever! We hope you enjoy this new feature and if you have any comments, please let us know below.

The newly released EverWeb version 4.2 for macOS and Windows includes two new features for EverWeb‘s Shape Options tab: Map Fill and Video Fill. These two new options give you more ways than ever in which you can integrate maps and videos in to your website. In this post, we will be looking at Video Fill. We will cover Map Fill in a later blog post.

Adding Video To Your Website’s Pages

EverWeb has a number of different ways in which you can add video to your website’s pages

1. As a Browser Background: Use the Inspector Window’s Page Settings-> Browser Background setting to set a video background for your page’s Browser Window
2. Using a dedicated widget. EverWeb has three dedicated video themed widgets: The Video widget can be used with MP4 files and for legacy video formats such as WebM and OGG files. The YouTube Widget is used with YouTube videos and the Vimeo Widget with Vimeo videos.
3. By embedding a video within the FlexBox Widget. The FlexBox widget is unique in that you can use it to embed a video within it.
4. The last way to add video to your website’s page is available if you are using EverWeb 4.2 or higher is by using Video Fill. You can use this option on most objects on your page. Alternatively, you can drag and drop a video directly from its source location, such as your computer desktop or the Cloud, on to your page. This will also create a Video Fill object.

In this post we will be looking at the last of these options, Video Fill, that was introduced in EverWeb 4.2.

Why Use Video Fill?

The new Video Fill feature can be applied to most objects, for example, a shape or TextBox. When used in this way, the object itself will become a video fill shape instead of its original object type. For example, if you add a shape in the form of a star to your page, then set the star shape to Video Fill using the Shape Options-> Fill option, the original star shape will be replaced with the video fill shape.

In this way, you have now more flexibility when adding video to your page. Also, the Video Fill options offer you a wider range of customization choices than those offered by EverWeb’s default widgets. You, therefore, have more options and choice on how to use video on your pages than ever before.

Using Shape Options’ Video Fill

As mentioned above, to use Video Fill, simply add an object to your page, such as a shape, or TextBox, then go to the Shape Options tab in the Inspector Window. Click on the Fill type dropdown menu and select Video Fill from the available options. The selected object will become a Video Fill object.

Alternatively, you can also drag and drop a video file from your hard disk, or Cloud location, on to your page and it will be automatically converted to a Video Fill object.

Video Fill’s Video Source

If you have added an object to the page, then converted it to a Video Fill object, the first thing you will need to do is to link the object to a video file. To do this, use the Video Source dropdown menu immediately below the Fill dropdown menu, You have four options to choose from:

• External Video URL
• Local Video File (i.e. a video file stored in the project file)
• YouTube Video File
• Vimeo Video File

Once you have chosen the Video source and linked it appropriately, you can then customize the Video Fill.

Customizing Your Video Fill

All of the Video Sources have the options to

• Loop the video,
• Auto Play the video,
• Mute the video,
• Show Video Controls
• Set the default volume level and
• Set the scroll speed of the video.

If you are using the External Video URL, or Local Video File as your Video Source, you have three additional options available. The first option enables you to scale you video to either ‘Scale to Fit’, ‘Scale to Fill’. ‘Stretch’ or use the video at its ‘Original Size’. Choose the option that is most appropriate to your video.

The second option is to add a Thumbnail to your video. This is like having a cover image for the video that the user has to click on in order to view the video. Using a thumbnail image is also useful if your video is large and takes time to load on the page.

The last additional option is ‘Pause other videos on play’ which does exactly what it says. This is a useful option to check when you have more than one video on your page.

EverWeb’s new Video Fill option makes adding videos to your pages easier, with more customizations options available than ever!

We are thrilled to announce the immediate release of EverWeb version 4.2 for macOS and Windows. New in this version are a Toolbar for the Responsive Row widget, in-situ widget settings for all widgets, video and map fill options in the Shape Options tab, and much much more. Check out the full list of new and updated features below as well as the usual maintenance and stability updates.

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.2 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.2 is available for you.
• If you are running an Apple Silicon Mac running macOS Ventura, Monterey, Big Sur or Sonoma, EverWeb version 4.2 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.2 Includes…

• [NEW] Background Video Fill and Map Fill options in the Inspector-> Shape Options-> Fill.
• [NEW] Shape Options-> Video Fill can be from a URL, a selected video file, YouTube link or Vimeo link.
• [NEW] Responsive Rows now include a Toolbar with move up, move down, Settings and Delete buttons.
• [NEW] Responsive Rows can be dragged up or down using the blue Toolbar itself when they are selected.
• [NEW] You can use the 3 line Move symbol on the right hand side of the Responsive Row Toolbar to move the Responsive Row up or down.
• [NEW] All widgets have a Settings Cog icon that lets you adjust their settings instead of having to use the Inspector. 
• [NEW] All Full Width widgets in Responsive pages now include move up and move down arrows.
• [NEW] You can now drag and drop web pages between projects.
• [NEW] You can now drag and drop Master Pages between projects.
• [NEW] You can now copy and paste objects including images between projects.
• [NEW] Dropping a video on to a page will add a Video Fill shape.
• [NEW] Shape Options-> Image Fill now has an Alignment option.
• [NEW] You can now select the jQuery version from Publishing Settings.
• [NEW] Flexbox Video URL can be a Youtube, Vimeo or MP4 link.
• [NEW] New Features Tour is now in all supported languages.
• [IMPROVED] All Help Icon videos in EverWeb now use the latest available videos.
• [CHANGE] For macOS users, the EverWeb-> Preferences… menu option has been renamed to EverWeb-> Settings…
• [FIX] A large number of fixes and improvements for EverWeb on Windows.
• [FIX] SVG files are not exported as WebP files anymore when using the Optimize Images Options.
• [FIX] Captions work again for the Responsive Image Gallery widget.
• [FIX] Fixed an issue with dragging objects between Responsive Row Widgets.
• [FIX] Fixed some issues with importing iWeb image galleries that could crash on Windows.
• [FIX] Fixed some issues with Copy & Paste To Match Style.
• [FIX] Fixed some rotation issues and background colors on Windows.
• [FIX] Fixed some issues with Shape Dividers.
• [FIX] A line spacing issue where TextBoxes seem to be longer and overlapping when published.
• [FIX] Fixed some issues where background images would not display properly when published.
• [FIX] Fixed issue with the blog having to be fully published after making some changes.

How To Update To EverWeb 4.2 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.2 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 Window,s 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.

Creating your first website is an exciting experience but it can also be a daunting one for the inexperienced. EverWeb makes designing and building your website as easy as possible, with drag and drop capabilities meaning that you do not have to code to be able to create the site that you want.

Website building is full of choices, and perhaps the most crucial one coming before you begin building your site’s first page. What type of website should you be building? This may seem a strange question if you are completely new to website building. In EverWeb, there are two types of website that you can build. We use the terms ‘fixed width’ and ‘responsive’ to describe these two types of websites.

A Fixed Width type website is a free form type of website where you can drag and drop objects such as images, text, shapes etc. anywhere on your work canvas. You can freely move objects around the page to wherever you want. It is a great way to start if you have never built a website before. The downside to this type of website is that because the pages are ‘fixed width’ you will have to design pages for desktop devices and corresponding pages for mobile devices. So you double your page count and will have to maintain two sets of pages.

The second type of website is ‘Responsive’. The difference between this type of website and a fixed width one is that a responsive site’s design is more structured, rather than free form. Responsive websites also automatically respond to the type of browser their pages are being displayed upon, so you only need one page design and not two. As a result, there should be less maintenance of your site’s pages to do in future, but the design process itself can be more challenging than if you were designing a fixed width site.

Learning Using EverWeb’s Theme Templates

Some EverWeb users start by building a fixed width website then later on redesign their website as a responsive one. This makes sense if you have no website building experience and also if you are new to EverWeb. It also means that you get your site up and running quickly and get more experience with EverWeb at the same time.

When it comes to creating a responsive website, you can use the skills that you have already acquired to create your responsive website. To get familiar with how a responsive website works, you could download one of the responsive theme templates that comes with EverWeb and look at how the theme template has been designed. For example, create a new project from the Projects Window in EverWeb then add the Home page of the Advisor template to the new project. When the page is added to the new project, click and drag the right hand side of the EverWeb app to the left and right. You will see the page change in the Editor Window as you do so. Objects move and change to conform automatically to the width of the page. Notice also that these objects are contained within bands across the page.

Let’s start with the band at the top of the page. This is named ‘Header’. Inside the ‘Header’ are two objects’: A TextBox that contains the word ‘Advisor’ and a Navigation Menu widget. The ‘band’ in which these objects are located within is a Responsive Row widget. As you narrow the width of the EverWeb app, you will notice that the Navigation Menu widget changes from a standard menu structure to a Hamburger menu. Double click on the Navigation Menu widget then scroll down its Widget Settings. You will notice in the Responsive Options section that ‘Responsive Navigation Bar’ has been checked and that it is set to ‘Appear at Width’ of 700 pixels or less.

Next let’s take a look at the third row of the page. This is a TextBox containing the page title (“I’m a Business Advisor” and some subheading text. Note here that the text goes right across the width of the page. When you reduce the width of the page, the text automatically repositions itself so that it always fits the width of the page. Click on this TextBox, then go to the Metrics Inspector. You will see that the ‘Full Width’ box has been checked.

Next let’s move on to the fourth row of the page. In this row you will see a TextBox with ‘Contact Me’ as its text, together with a hyperlink embedded within a Responsive Row widget. Compare this to the full width TextBox above it. In the ‘Contact Me’ row, we do not want the TextBox to be full width. Click on the TextBox then click on the Metrics Inspector. You will see that the TextBox is just 157 pixels wide. This is wide enough to be displayed properly in any browser window on any device. This also gives us our first example of a fixed width object on a responsive page. When designing your own pages, be careful if you have fixed width objects within a Responsive Row widget. The width of the fixed width object should not be too large that it causes the page to scroll to the left and right. As a guide, make fixed width objects only have a maximum width of about 350-400 pixels.

The next row of interest is the Responsive Row containing the image. Click on the image to select it then go to the Shape Options tab. Here you can see that the image has been set up as Scale to Fill. When adding images to your own responsive page, you may need to experiment to see which type of image fill is best to use, as the best option to choose usually depends on the image itself.

Next click on the Metrics Inspector. You will notice that the image is set as a full width object. Also note, though, that the maximum width of the image has been set to 900 pixels wide. In this way, the image will not become too large if you increase the width of the page.

The other interesting point to note about this Responsive Row is that its background colors are blue and white. To see how this has been created, click on the blue-white area to select the Responsive Row itself, then go to the Shape Options tab again. You will see now that the fill is an Advanced Gradient Fill with blue occupying one side of the fill and white on the other.

Under the image, is another Responsive Row widget, this time containing a TextBox on the left hand side, with two Text Section widgets to the right of the TextBox. The TextBox has a width of 375 pixels and each Text Section widget a width of 280 pixels. In this row, the Text Section widget combines text and an image to create an effective display. Note also how all three objects change as you change the width of the page.

The final row we are going to look at is the one directly below the Life Coach Training full width TextBox. This row is in fact a FlexBox widget that contains three Embedded objects. FlexBoxes, like Text Section widgets are very useful tools to use in Responsive page design! Take a look at the FlexBox’s Widget Settings. Note that each text/image embedded object combination has a maximum width of 335 pixels. Again, this means that the object will not be too wide for a mobile phone’s browser which typically is about 400-450 pixels wide.

Conclusion

Using a Theme Template is a great practical way to see how a responsive page has been created. If you create a test website as we did above, you can create safe environment where you can try out using a responsive theme template without any risks. This also give you the freedom to experiment to see what works and what does not work and to get familiar with designing responsive pages before tackling your own website.

Don’t forget to also check out the EverWeb User Manual and our videos on YouTube. If you have a question, you are always welcome to ask us here on this blog, or on the EverWeb User Forum.

EverWeb Membership Sites was introduced in EverWeb 4.0 for macOS and Windows giving you the freedom to create your own membership, or subscription service, that seamlessly integrates in to your EverWeb made website.

When you create the pages for your membership site in EverWeb you may suddenly find that you have more pages than you thought would be necessary! So, in this blog post, we are going to look at the essential pages that you need to create for your membership site, and any additional pages that may prove to be useful to you.

Creating Your Membership Sites Directory Structure

The first thing that we recommend you do is to create a folder in your EverWeb Project file in which you place all of your membership site’s pages. In this way you keep everything neat, tidy and together! It is also easy to collapse the folder down when you are working elsewhere in your project.

To create a new folder, simply click on the Add Directory button in the Toolbar. Choose either the Home page of the Blank, or Blank Responsive, Theme Template. Click on ‘Select’ to finish. Next give your newly created directory folder a meaningful name by double clicking on the ‘Home’ directory page that you have just created in the Web Page List on the left hand side of your project. Overtype ‘Home’ with your own name e.g. ‘Membership Site’, then press Enter to finish.

Creating a Membership Sites Master Page

When creating your membership site, you may want to begin by creating a Master page for its pages, or use one of your site’s existing Master pages. This will save you time and effort in designing your membership site’s pages, and will make it easier to update all of your membership site’s pages later on if needed.

The first membership site page that you will probably want to create is a welcome, or ‘home’, page, to direct your members, and potential members, to the appropriate pages in your membership site. For example, if you someone wants to sign up, you could create a sign up button, or hyperlink, that they can click on to go to your membership site’s sign up page. You may also have buttons to take users to their membership content level page via your membership site’s login page.

When you create this landing page, you may want to come back to it later to update hyperlinks after you have created other pages in your membership site.

Adding EverWeb Membership Sites Widgets

When you sign up to EverWeb Membership Sites, you will receive a zip file containing seven specially created widgets to be used exclusively in membership sites. When you receive the widgets pack, copy it to your desktop. Next, go in to EverWeb and click on the Widgets tab in the Inspector Window. Drag and drop the Membership Sites widgets pack on top of the widgets in the Widgets tab. The Membership Sites widgets will be installed. After installation, you can then access the widgets by selecting the folder they have been installed in by using the dropdown menu at the top of the Widgets tab.

Creating the Necessary Pages of Your Membership Site

When creating your membership site’s pages, you will be guided by the special Membership Sites widgets that you received when signing up for an EverWeb Membership Sites plan. The Membership Sites widgets will be described below as we create new membership site pages.

Creating Your Membership Site’s Sign Up Page

After creating your membership site’s landing page, the next page to create is your Sign Up page so that potential members can sign up to your membership site. To do this,

1. Add a new page to your membership sites folder.
2. Attach your Master page to the Sign Up page if you have created one already for your membership site.
3. Use the Master Page field in the Page Settings tab of the Inspector Window to attach your Master page to your Sign Up page.
4. Style the Sign Up page as desired.
5. Drag and drop the Membership Sign Up Form widget from the Widgets tab on to the page. If you cannot find this widget in the widgets tab, use the Widget Tab’s Search function to locate it.

After drag and dropping the widget on to the page, notice that the widget in the Editor Window has two instructions included. The first instruction asks you to select your Membership License from the Inspector, the second instruction is to create an additional page for your membership site – a Sign Up Successful page. For the first instruction, click in the ‘Membership Sites’ dropdown menu in the Inspector Window and select your Membership Sites Licence. For the second instruction, create your Sign Up Successful page by using the Add Page button.

Once you have created your Sign Up Successful page, name it e.g. ‘Sign Up Success’, then go back to the Sign Up page. Click on the Sign Up Form widget, then go to the ‘Successful Sign Up’ field in the Widget Settings. Select your Successful Sign Up page from the dropdown list.

Continue to design your Sign Up page in the Editor Window and use the Sign Up Form’s Widget Settings as desired to customize the widget to match your website’s style.

Note that the Widget Settings also allow you to create an additional ‘Terms of Service’ page. Create this page in the same way as you did for the Sign Up Success page.

After completing your Sign Up page, proceed with completing your Sign Up Success and Terms of Service pages.

Creating Your Membership Login Page

After creating your first four membership site pages, the next page that we recommend you create is the Login page for your membership site. Again, create a new page in your membership site’s folder, and style as desired. Once you have completed this, add the Membership Login Form widget to the page. As with the Membership Sign Up Form widget, you will see two red banners across the widget in the Editor Window that tell you the fields that you are obligated to complete. i.e. the link to your membership site license and the creation of Login Success page linked to your Membership Login Form widget’s Login Success field in your Login page.

Membership Profile, Change Password & Payment Forms

After creating your Sign Up and Login pages, you should now have six pages in total. The next three pages, the Membership Profile Form, Change Password Form and Payment Form all require additional Success Pages to be included as well. After creating these six pages in the same way as you did for the Sign Up and Login pages, you will have twelve pages completed.

Using The Membership Sign Out Button

The Membership Sign Out Button should be added to most of your membership site’s pages, with the exception of the Sign Up, Sign Up Success and Login pages. As such, you will probably want to add it to your Master Page so that it is automatically included on your membership site’s pages. When you do this, remember that you will need a second Master page that does not include the button. This second Master page will be used for pages such as the Sign Up, Sign up Success and Login pages.

The Sign Out Button also has a ‘Sign Out Link’ field which you can link to a Sign Out Success page. This, therefore, means that you will need to create an additional ‘Sign Out Success’ page for your membership site.

Additional Required Membership Site Pages

Before launching, or testing your membership site, click on the Membership Sites Settings… button which you can find in most Membership Sites widget’s Widget Settings. This will show you a list of pages that EverWeb Membership Sites requires you to create, and some additional optional pages that you can either create yourself, or let EverWeb manage.

Some of the pages you have already created. These are automatically linked to their corresponding fields in the Membership Sites Settings… dialog box. The page on the required list that you probably have not created is usually Email Verification.

Create the email verification page in the same way that you have for other membership site pages. Once you have created the page, drag and drop the membership Email Verification Button widget on to the page. Once the button is on the page, it will link automatically to the Membership Sites Settings… dialog box.

The other three pages in the dialog box are for Account Suspension, Account Cancellation and Access Denied pages. These are optional pages that you can create if you want to, or you can leave EverWeb to generate default responses.

Creating Your Membership Site’s Content Pages

The last task that you will need to complete is to create your content pages. Each content page should be associated with its relevant Membership Level e.g. if you have free, bronze, silver and gold membership levels, you should create specific pages in your site for each of these membership levels.

In total, you will probably have at least 14 pages in our membership site. This may sound like a daunting task, but the process to create these pages is fairly straightforward and the Membership Sites widgets will help guide you almost intuitively as to what to do next.

Once finished, publish and test your new membership site!

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