Mac SEO Blog

One of the most useful features of EverWeb is an incredibly simple one: Directories. They have always been a feature of EverWeb and have many different uses. In this post, we will ta taking a look at how to use directories, and what they can be used for…

What is a Directory?

A directory is essentially a container that can hold pages and directories within it. A directory is sometimes referred to as a folder and rightly so as it functions to collect together similar or related items in one location.

Adding Directories

Adding a directory to your site is easy. Just click on the Directory button in the Toolbar. Alternatively, use the File-> New Directory menu option, or use the shortcut keyboard command Command+Option+N on a Mac, or Control+Alt+N in Windows.

EverWeb has one other way in which to add a directory and that is by converting an existing page in to a directory. You may find that when you are designing a page that you actually want it to be a directory rather than a page. To convert a page, first right, or secondary click on the page you want in the Web Page List. Next, choose ‘Convert to Directory’ from the list of menu options. The Page icon will change to the Directory icon when you take this action. Note that converting a page to a directory is a one way process. You cannot change a directory in to a page. If you have converted a page by mistake, you can undo the action if you do this immediately. In all other instances, you should create a new page, then copy the contents of the directory page in to it.

Once you have added a directory, you will see it listed in the Web Page List which is the left hand column of the EverWeb User Interface. The directory will be displayed with a folder icon. When you add the directory, this folder will be red in color, indicating that it has not been published yet. When you do publish your site, the folder color will change to a grey color indicating that it has been published. If you then edit the folder, or its contents, the folder icon will again change to red indicating that it has been edited since the last publish.

The final color that you may see the folder as it a dark grey color indicating that the folder has been set to ‘Do not publish’.

When you add a directory to the Web Page List, a triangle to the left of the directory name is added. This is an expand/collapse directory toggle. If you have a large website, you will often find it easier to keep most directories collapsed so that you can focus on only those directories that you are working on at the time. So, if you want to expand a directory, just click on the triangle icon. It will change to a down facing triangle when you do so.

Directories and Site Organization

One of the most useful things about Directories is that they let you organize your site and the pages within it. You can add pages to a directory, or remove them, just by drag and dropping them into, or out of, the directory. As you do so, you will see a guideline appear to help you correctly place the page in to, or out of, the directory. In addition to pages, you can put directories within directories.

You can also move directories themselves within the Web Page List by drag and dropping them where you want. In the upcoming Everweb 4.5 release, the Web Page List state will be remembered which means that the next time you open the project file, the Web Page List will be displayed as it was when you last left it.

Deleting a directory is also as you would expect, just click on the directory you want to remove and press the backspace key on your keyboard. You will be asked to confirm the deletion, unless you have specifically disabled this default.

Directories and the Navigation Menus

One of the main areas where directories have an impact is with EverWeb’s Navigation Bar widget. The widget takes the directory structure and translates it in to the navigation. The page and directory structure from top to bottom, translates to the menu bar display from left to right. if you want to exclude any pages or directories from the menu bar, uncheck the ‘Include page in navigation menu’ option in the Page Settings tab of the Inspector Window.

When you use directories, the pages hanging off of the directory will become dropdown menu items. Note that EverWeb’s Navigation Bar widget only allows you one level of dropdown menu. Check out third party widget offerings if you require more than one level of dropdown. Usually one level dropdown is enough ensure easy navigation for your visitors.

When using dropdown menus, you may not want your visitor to access the Directory page itself. This is usually when the Directory page is used as just a heading for the pages within to hang off. In this case, click on the directory page in the Web Page List, then check the box ‘Redirect to first child page’ in the Page Details section of the Page Settings tab in the Inspector Window. When you preview or publish your site, if a visitor clicks on the Directory page, the page that opens will be the first page in the dropdown menu list.

Directories and SEO

When using pages or directories in EverWeb, you should also consider their file names. This is especially important if SEO (Search Engine Optimization) in EverWeb is important to you. You can rename the directory (or page) either by double clicking on the name in the Web Page List, or by using the Filename Option in the Page Settings tab of the Inspector Window. The filename also provides hyperlink names for the Navigation Bar widget so making the name SEO friendly is useful. Whilst it is good to key your file name to be SEO friendly, do not forget that readability should always take preference over SEO. For the Navigation Bar widget, you can use the Navigation Menu Display Name field to present your visitors with easy to read navigation menu items.

EverWeb’s directories are incredibly useful and versatile, whilst being simple to use at the same time!

If you have ever wanted to hyperlink a button, or a piece of text, in your site to a specific point on a page, EverWeb‘s Scroll Position is the feature that you will need to use. Hyperlinking in this way is like a ship dropping an anchor. The ship is always anchored to the anchoring point. The same is true when you use Scroll Position. You use one object on a page as the anchoring point to which other objects, such as a button or piece of text, are tethered to.

Introduced back in EverWeb 2.6, this was a time when EverWeb only supported Fixed Width page layouts. When Responsive Page Layouts were introduced to EverWeb in version 2.8, there was a need to introduce a new form of Scroll Position. This came when Set Shape as Scroll Position was added to EverWeb in EverWeb 3.2 in April 2020.

A Tale of Two Scroll Positions

So you may be wondering, why do we need two different types of Scroll Position? Essentially, we only really need one type of Scroll Position, that being Set Shape As Scroll Position. The reason being that this type of Scroll Position can be used on all page layout types, both Fixed Width and Responsive.

The other Scroll Position type, Insert Fixed Scroll Position, can only be used on a Fixed Width Page Layout but remains so that you if you are created a Fixed Width website using Scroll Position before EverWeb 3.2 then you are are still supported.

Essentially Insert Fixed Scroll Position remains for legacy purposes. It is also visually very distinctive is uses a horizontal line to easily show you where the Scroll Position is located on the page. For those using the Centered Layout page layout type it’s very easy to use.

With all this EverWeb history in mind, let’s look at the two Scroll Position versions in more detail…

Scroll Position For Fixed Width Pages

As mentioned above, EverWeb introduced Scroll Position with EverWeb version 2.6 back in December 2017. At this tine EverWeb was designed for use only with Fixed Width pages in mind, i.e. the Centered layout and Left Aligned layouts. For long time EverWeb users, there was a third page type that existed at the time called Dynamic. In reality the Left Aligned and Dynamic page layout types were not used, so the Centered Layout type was the one we all used.

The addition of the Scroll Position feature also meant that the feature was also added to EverWeb’s Toolbar. It still remains there to this day, but also can be accessed using the Insert-> Insert Fixed Scroll Position menu option.

When you add this type of Scroll Position, it will be added to the page as a blue line across the page. You can drag and drop the line to where you want it placed. Each Scroll Position that you add also has a unique name on the page that it is on. You can easily change the name, just select the Scroll Position then change the name by clicking on the Widget Settings tab in the Inspector Window then editing the Unique Name field. By default, the name given to the Scroll Position is the pixel point on the page that the Scroll Position is initially located at.

To use the Scroll Position, select the text in your button, or piece of text you want to use, then go to the Hyperlinks Inspector. Check the box ‘Enable as Hyperlink’. The Link To field should be set as ‘One of My Pages’. The Page field should either be set to ‘Current’, or the name of the page the Scroll Position is located on. This means that you can link to positions on other pages in your site. Once you have completed these steps, test your page using the Preview button in the Toolbar.

If you want to delete the Scroll Position, simply highlight it, then press the Backspace key.

Scroll Position For Responsive and Fixed Width Pages

Set Shape as Scroll Position debuted in EverWeb 3.2 and as its name implies, you add your Scroll Position to an object on the page. To use this feature, select the object that you want to scroll to. This could be, for example, a shape, TextBox or even a widget such as the FlexBox widget. Remember that you can use this type of Scroll Position on either a Fixed Width or Responsive Page. After selecting the object that you want to use, go to the Scroll Position button in the Toolbar. Select the ‘Set Shape as Scroll Position’ option. You will see that a blue anchor symbol added to the selected object. You will also be asked at the same time to name the Scroll Position with a name that is unique to the page.

You can then use the Scroll Position in the same way as outlined in the section above for Insert Fixed Scroll Position.

If you want to rename the Scroll Position, select the object that uses the Scroll Position. Next, go to the Shape Options tab and open the Scroll Position section if it is not already open. Edit, or enter a new name. If you want to delete the Scroll Position just leave the field completely empty.

Displaying Scroll Position

When using Scroll Position, you will either see a blue horizontal line if you used Insert Fixed Scroll Position, or a blue anchor symbol in the top right hand corner of the object if you used Set Shape as Scroll Position. The Insert Fixed Scroll Position visual indicator will always display. When using Set Shape as Scroll Position the anchor symbol will not display if you have set Window-> Show Layout to ‘Hide Layout’ in which case it will not be visible..

Which Scroll Position To Use?

Our recommendation is to use Set Shape as Scroll Position. The main reason for this is that even if you are currently working in a Fixed Width environment, you may at some stage migrate to a Responsive Page Layout, so you will be working consistently at all times just using one style of Scroll Position. No frustration or relearning needed!

EverWeb Site Shield Addon launched back in July 2017 coinciding with the launch of EverWeb 2.3. Updates to Site Shield came in 2022 and also in 2024, which means that our original Q&A from 2018 is now a bit dated. So let’s fix that with an updated EverWeb Site Shield Addon Q&A 2026 Edition!

Q. What is EverWeb Site Shield Addon?

A. EverWeb Site Shield Addon enables end to end data encryption of your website data, right from your Hosting Server to your website visitor’s browser window.

Q. What version of EverWeb do I need to use Site Shield Addon?

A. We recommend always using the latest version of EverWeb wherever possible. At the time of this Q&A, EverWeb 2.9.1 is the minimum available EverWeb software and EverWeb 4.4.3 is the latest version. If you have a current EverWeb Support and Updates plan, use the EverWeb-> Check for Update… menu on macOS, or Help-> Check for Update… menu in Windows, to update your EverWeb to the latest version. 

If you do not have a current Support and Updates plan, you can purchase this through your EverWeb Client Area.

Q. I’m an EverWeb for Windows user. Is Site Shield available for Windows users as well as Mac users?

Yes, Site Shield Addon can be used on EverWeb for Windows and EverWeb for Mac.

Q. Is Site Shield Addon the same as an SSL Certificate?

Secure websites use HTTPS and this is enabled through an SSL Certificate. SSL stands for Secure Sockets Layer and it creates an encrypted connection that establishes trust in data transfer between web browser and web server. Site Shield Addon is EverWeb’s branding for the SSL Certificate including EverWeb’s exclusive easy HTTPS implementation from directly within the product at just the click of a button.

Q. Do I need an EverWeb+Hosting Account to be able to use Site Shield Addon?

A. You don’t need to have an EverWeb+Hosting account. Site Shield Addon works if you host with your own Hosting Provider or if have an EverWeb+Hosting account.

Q. If I am hosting with my own provider. What do I need to use EverWeb Site Shield Addon?

A. If you host with your own Hosting Provider, you will need to obtain a valid SSL Certificate from them before using Site Shield addon. There are no other requirements.

Q. How do I get Site Shield Addon?

A. If you have an EverWeb+Hosting 2GB account or an EverWeb Standalone account you can purchase Site Shield Addon through your EverWeb Client Area.

If you have a an EverWeb+Hosting 10GB, or higher, account, Site Shield Addon is absolutely free and can be activated through your EverWeb Client Area.

Q. How much does Site Shield Addon Cost?

A. If you have an EverWeb+Hosting 10GB or higher account, Site Shield Addon is absolutely free. For EverWeb+Hosting 2GB accounts, or if you have an EverWeb Standalone license, Site Shield Addon costs $39.95 USD* per year. In both instances there are no additional costs involved in upgrading your website from HTTP to secure HTTPS.

*Prices may be subject to change, so check our website for current pricing details.

Q. Why do I see a Grey/Black Padlock and not a Green Padlock when I have Upgraded to HTTPS?

A. When using HTTPS, you usually see a padlock displayed to the left of the website URL in the browser search bar. You may have noticed that the padlock on some websites is dark grey or black but on other other websites it is green. For all intents and purposes, there is no difference as both indicate that the website is secure. The difference in color indicates that encryption has been implemented technically in different ways.

Q. What happens if I have HTTP references in my website links in EverWeb? Do I need to change these?

A. It is not necessary to change these references, but it is better to do so as this will ensure data encryption.

Q. I checked the box ‘HTTPS Secure URLs’ and published my website, but don’t see the Padlock displayed.

A. If you do not see the padlock displayed in the browser search bar when viewing your website, check the URL in the search box of your browser. You should see that your URL starts with HTTPS. If not make sure that you publish your entire site using the File-> Publish Entire Site menu option.

If you still do not see the padlock, it  is possible that there is not a secure link to an image, widget, fonts or other object on the page. You may need to remove objects one by one to test to see which object is causing the problem. If you are tech savvy, you can use the ‘Inspect Element’ of Safari’s Developer menu to locate the problem (or your browser’s equivalent of this tool.) If you have inserted any code directly in to the page (using the HTML Snippet widget) or in the Page or Site Settings using the Header/Footer Code sections, this may also be the cause of the problem. Try removing any code you may have inserted and test again.

Q. If I have more than one website can I use Site Shield Addon for all of these as well?

Yes, if you have more than one website under your EverWeb website domain, you can use the HTTPS Secure URLs checkbox in Site Publishing Settings for all of your websites.

Your EverWeb made website will probably combine one or more of the following functions: To inform, communicate, engage with and offer space for community, promote brand identity, and facilitate transactions. If the latter, transactions, if important, you might want to combine with the communication and engagement functions to maximize your site’s earning potential. EverWeb includes widgets such as the PayPal Modern and Stripe widgets, with many other ways to integrate other payment providers. B ut you might want to take the sale of your goods and services a step further by offereing a Membership Site.

Why a Membership Site?

Starting your own membership site can have a number of advantages for your business:

1. Can provide you with recurring income
2. Allows you to offer exclusive content to your members
3. Facilitates better audience engagement
4. Can give you better insights in to your audience
5. You have control over who has access to your content

Whilst the advantages sound good, you should also consider these other factors before starting with your own Membership Site:

1. Keeping Content Ongoing. Members will expect new content on a regular basis
2. Membership Account Management needs to ba factored in, especially as your membership grows
3. Keeping Your Members can also be a challenge due to their expectations and what can be delivered
4. Higher Expectations especially from paying members who expect more exclusive content,

Adding EverWeb Membership Sites

After evaluating whether a Membership Site is right for your business, the next step is to get started. Using EverWeb’s Membership Sites add-on is the easy way to integrate a Membership Site in to your EverWeb site. The links are already in place in EverWeb itself.

You can purchase your EverWeb Membership Sites license from this link. Select Membership Sites from the menu options on the left of the page. Here you will find three different levels of Membership Site that you can choose from:

• Membership Starter – Free Entry Level
• Membership Plus – $10 USD / Month
• Membership Deluxe – $50 USD / Month

If you find that the plan that you have selected is not the right one, you can change this at any time in the future. To do this, login to your EverWeb Client Area. Go to the Services menu option, then choose My Services. Click on the down arrow next to the Spanner icon to the right of your Membership Site product addon. Choose Manage Product. You can then change your Membership Sites plan as required. If you have any problems, EverWeb Support will be able to help.

Getting Your Membership Site Up and Running

After purchasing the plan that meets your needs, you will receive an email with a EverWeb Membership Sites Widgets collection that you will need to use when building your membership site. Instructions are provided on how to install the widgets.

Getting your Membership Site up and running will take some time and effort. There will be work to do at the front end in EverWeb. This will be where you will be building your membership site’s user interface using the widgets pack that you were emailed when you signed up.

For the front end of your membership site, the widgets will allow you to create a Membership Sign Up page, a Member Login page, an Email verification page, a Change Password page, a Membership Profile page, a Membership Payment page, and a button for quickly logging out of the Membership Site.

Using the widgets is just the start as you will also need to make pages for your content. The number of pages you will need for this depends on how much content per membership level you have. You will probably also want to create pages for circumstances where a member has cancelled their account, or where you have had to suspend their account. For more information on building the front end of your EverWeb Membership Site, check out post, Creating Your EverWeb Membership Site Front End.

There’s also the back end of your membership site to create. This is where you manage all of the administration tasks that are associated with your membership. As well as administering your member details and payment methods, you will also use the backend of Membership Sites to set up your membership levels, emailing options, set up and administer discounts and so on. For more information on how to create and manage your Membership Site’s Backend check out our post, Creating Your EverWeb Membership Site’s Backend.

Planning Your EverWeb Membership Site

The most important part of your Membership Site is planning as much of it as you can in advance. We have a complete section on EverWeb Membership Sites in our website to help get you started. We recommend that you follow the steps outlined so you can see what work is involved for your own site, what you may not have thought of (e.g. time and administration considerations), as well as making sure that you have content that adds value for each membership level, both now and in the future. Planning activities that tie in to your Membership Site, such as promotions, discounts, periodic sales (e.g. Black Friday), marketing activities etc., will all help you be as best prepared as possible before you begin.

Planning is also in advance is also helpful so that you can roll out your Membership Site in stages if necessary, and will be less overwhelming as you will not have to do everything all at once.

In the first part of our post on Creating a Navigation Menu using EverWeb’s Containers feature, we designed a button using two rectangle shapes. The button will be used as the basis of our navigation. The two rectangle shapes making up the button were customized and lined up side by side. The rectangle on the left side is used for the chapter number with the right hand rectangle being used for the chapter title.

In this post, we will next add our completed design in to a Container. Then we will tweak the design so that it looks like the button you see in the image above. We will then work with EverWeb’s Containers feature to get our navigation completed, tested and published!

Hyperlinking The Button

Now that we have the text within each of the our rectangle shapes, we set up a hyperlink to the page we want. In this case it would be to the Welcome! Page in our site. In this example, we are not going to hyperlink the chapter number, just the chapter title text. Highlight the text ‘Welcome!’ in the right hand side button then go to the Hyperlinks Inspector. Click on the ‘Enable as Hyperlink’ checkbox to activate its settings, Next, check that the Link To field is set as ‘One of my pages.’ If it is set to e.g. ‘An external page’ change this to ‘One of my pages.’ Next, go to the Page field and set the page to your Welcome! page. Adjust the Hyperlink Formatting colors and underlines to suit your navigation. In this example, we are going to keep the Normal and Visited colors the same and not have any of the hyperlinked text underlined as this will spoil the look of our button. There is another way in which we can highlight the button when we need to…

Using Shape Options: Fill

We can draw attention to the button when a visitor hovers over it, or clicks on it, by using the Shape Options Fill feature. If the text is still highlighted, click on an area in the Responsive Row instead. The rectangle should become selected, If not, click on the right hand button. Now go to the Shape Options tab in the Inspector. In the Fill section, change the ‘Normal’ menu option to ‘Mouse Over’. In the field below, which is set to ‘None’ by default, change this to Color Fill. Next, choose a color that you want to use for when your visitors mouse over the button. Remember that the text color should remain readable when you do so. Once you have selected your mouse over color, try mousing over the button to see it working.

Adding the Button in to a Container

The button is now complete. We will be using this button as our template for all of the others that we are going to use in our navigation, so make sure you have completed all of the styling that you want before you continue.

As we always want to keep the two parts of the button together, we are going to put them together in their own container. First, select both of the rectangle shapes. Once you have done this, right click over one of the shapes. A pop up menu will appear. Mouse down to the Contain As… menu option, then Choose the ‘Row’ option. The buttons will now be contained inside their own Container!

Styling the Container

The Container will take the full width of the Responsive Row, and you will also see a dashed line inside the container which is the 20 pixel padding which is added by EverWeb when you create a container. To start, we are going to reduce the width of the button container. Go to the Metrics Inspector and uncheck the Full Width checkbox. You will now be able to access the Width setting for the Container. Change the value to 250 pixels. This should give you enough space for the Chapter button text. If not use a value that is appropriate to the longest text that you are going tp use. Sometimes, though, it is better to shorten the button’s title rather than having too long a title. In this instance it is a good idea to think as if you were designing a menu using the Navigation Bar widget.

The second thing to look at is also the height of the button. Make sure that there is enough space so that the text looks comfortable inside the button. Not too squeezed and not too much dead space. In our example, using an 18 point font, we decided that a button height of 58 pixels was good.

As the button is comprised of two parts, we also want to make sure that there is a clear, but small division, between the right hand side of the chapter number rectangle and the left hand side of the chapter title rectangle. We can set how much of a gap we want using EverWeb’s Padding and Margins options.

Setting Button Padding and Margins

To add some spacing between the two rectangles, select the Chapter Title rectangle. Next go to the Metrics Inspector. In the Margins and Padding section, set a left margin (the outer left field) to two. This should be enough to create a nice gap between the two parts of the button.

Now we turn our attention to the Container itself. Here the default padding is set at 20 which for our navigation is too much. To change this, click on the container itself then change the padding from 20 to 10. Finally, select the Responsive Row itself and set its left and right margins to 30 and its top and bottom margins to 20.

Completing the Navigation

The navigation is almost complete. The final step is to select the button Container and duplicate it eleven times so that you have the twelve menu items required in the scenario. Here you can just copy the button container, then paste it 11 times in to the Responsive Row.

Change the chapter numbers and chapter titles as required. Don;’t forget to also update the hyperlinks for each chapter, so that the visitor will go to the correct chapter!

You can see how the finished result looks by either reducing the width of the EverWeb UI, or by using the Preview button in the Toolbar. The 12 menu items should wrap as you alter the width of the EverWeb UI or browser window. If it does not do this, select the Responsive Row and make sure that Wrap is selected in the Behaviour field.

Our navigation is now complete. use preview to test out your design. Remember to also use EverWeb’s Preview QR Code feature so that you can see how the design looks on a mobile device.

The new Container feature that debuted in EverWeb version 4.4 is a great way to realize your design goals as it’s incredibly versatile. In this post, we are going to show you how to create an effective, customized navigation for your home page.

The Scenario

In this scenario, we are going to create a fictitious online usite for the EverWeb User Manual. You can find the EverWeb User Manual from the link in the bottom left hand corner of the Projects Window when you launch EverWeb or from the Help-> EverWeb PDF Manual menu option. In this scenario we are going to create 12 buttons which will take you to each of the first twelve chapters of the online manual.

There are various different ways in which this project can be achieved, such as using a Text Section widget, but in this instance we are going to use Containers as this will enable us to be more creative with our design.

You can see a what we are going to achieve in the cover image at the top of this post. The twelve buttons are styled with rounded corners. Each button is comprised of two half rounded rectangles in a container. The spacing of the buttons is also something which can be controlled as well. These type of features are not achievable with the Text Section or FlexBox widgets.

Prerequisites

The only prerequisite you will need for this tutorial is to have EverWeb 4.4 or higher, for macOS or Windows installed. If you have a version of EverWeb prior to this, click on the EverWeb-Check for Update… menu option on a Mac or use the Help-> Check for Update… if you are using Windows to update your version of EverWeb.

Creating a Container For The Chapter Buttons

The first thing we need to do is to create a container within which we will add all of the chapter buttons in to, as you can see in the image at the top of the post. To do this, click on the Containers button in the Toolbar and select ‘Responsive Row’. Once you have added the Responsive Row to the page, click on the Settings Cog in the Responsive Row’s Toolbar, then click on Name… and rename the Responsive Row as ‘Chapter Row’.

In this example, we will add margins around the Responsive Row widget. With the widget selected, go to the Metrics Inspector and set top and bottom margins to 20 and the left and right margins to 30 pixels in the Margins & Padding section. We can now start on the button design.

Creating The Button Design

As you can see from the image at the top of the post, the button is comprised of two rectangle shapes ‘joined’ together. The rectangle on the left contains the chapter number. The side of the button has rounded upper and lower corners on the right hand side. The rectangle on the right contains the chapter title and has rounded corners on the upper and lower right hand side. The two rectangles are ‘joined’ together using a Container Row.

Start creating the button by clicking on the ‘+’ button in the center of the Responsive Row widget. From the menu, select the Shapes option then choose the first shape, which is a rectangle. Note that when you use the regular rectangle shape, you can change the look of any of its corners. If you used the next shape option, the rounded rectangle, you would only be able to change all the corners at once, not individually.

The next step is to style the shape as we want. First, click on the Metrics Inspector button so that we can adjust the size of the button. Set the button width at 30 pixels and the height to 35 pixels. Next, click on the Shape Options button and click on the ‘Custom Border Radius’ checkbox in ‘Borders Options’ to activate its settings. Set the upper and lower right borders to 20 pixels.

Finally, click inside the shape and enter the number ‘1’ for chapter one. Now we need to style the text and position it where we want it within the shape. To do this, select the text then go to the Text Inspector. Adjust the font and font size as you want. In our example, we are using Montserrat 18 point regular. To position the number correctly within the shape, go to the Alignment section and choose Right Aligned and Middle. The number will not look properly aligned as we want it so we need to adjust a couple of settings in the Spacing section. Here, set the After Paragraph value to zero and the Insert Margin setting to 5. Depending on the Fonts you use, you might need to experiment a little with these settings to get the alignment as you desire.

To complete the button, you may need to check that the height of the button is still 35 pixels in the Metrics Inspector. If it is not, then change the value back to 35.

Creating the Second Part of the Button

Now that we have created the left side of the button we need to create the right side of the button. Click on an area inside of the Responsive Row widget, then click on the Shapes button in the Toolbar. As before, click on the first shape which is the rectangle. Size this to be 200 pixels wide (to accommodate the chapter title) and 35 pixels in height.

This time we will round the corners of the rectangle on the right hand side. Again, make sure that the rectangle is selected, then go to the Shape Options tab and click on ‘Custom Border Radius’ in the Border Options section, to activate the settings. Set the right hand side upper and lower corner values to 20.

The final step is to add a Chapter Title in to the button. Click inside the button and enter the text ‘Welcome!’ as the title of our first chapter. Style the text using the Fonts that you used for the first button. Once you have completed the styling, highlight the Welcome! text, In the Text Inspector set the Alignment to Left Aligned. The After Paragraph value should again be zero and this time the Insert Margin value should be set to 10. Remember to also check in the Metrics Inspector that the button height is 35 pixels. Adjust the value back to 35 if needed.

If the second shape is to the left of the first shape, just drag and drop it so that it is to the right instead. You should have what looks like a pill shape button composed of two rounded rectangle shapes.

Next Steps…

Now that our button design is essentially complete, we will next add our design in to a Container, tweak the design a little so it looks like the button you see in the image above, then work with EverWeb’s Containers feature to get our navigation completed, tested and published. All this coming in Part Two!

Last September, EverWeb released EverWeb 4.4 for macOS and Window. This was a big release with a lot of new features. One of those features, Containers, is so important that we added it to the Toolbar!

In this post, we are going look at Containers and the Responsive Row widget, what they do, and why Containers are key to your future website designs.

EverWeb and Responsive Web Design

EverWeb enables you to create websites in one of two ways: The first way is as a fixed width page design. This was the only page layout choice available when EverWeb launched back in 2015. That all changed in 2018 when EverWeb version 2.8 debuted introducing Responsive page design. The challenge was a significant one as we did not want to change the way EverWeb worked, or looked, for our existing users, when adding responsive website design features to the product.

The debut of responsive website design in EverWeb heralded the introduction of the Responsive page layout as well as four dedicated responsive widgets: the Responsive Row, Text Section, FlexBox and Responsive Image Gallery widgets. These widgets were specifically designed to help make working with responsive pages easier. Under the hood improvements in other areas of EverWeb also made for a great responsive experience without affecting the existing user experience. Over the years, both the core features of responsive design in EverWeb, and its associated responsive widgets have evolved.

The Importance of the Responsive Row Widget

Since its inception, the Responsive Row widget has been a cornerstone of responsive page design in EverWeb. The widget is unique in that it allows you to add other widgets and objects, such as TextBoxes, Images, shapes, widgets and media, in to it. This ability helps you to add fixed width and responsive elements more easily to your page design, making developing responsive pages easier and more flexible.

EverWeb Introduces The New Container Feature

EverWeb 4.4 introduced the new Containers feature in September 2025. At first glance, it might appear that Containers and the Responsive Row widget are pretty much the same thing. In many respects they are as both are ‘containers‘ in their own right, offering many of the same capabilities. For this reason, both are included in the new Containers Toolbar button.

The main features and differences you will find between Containers and the Responsive Row widget are”

• The Responsive Row widget allows you to wrap objects that are contained within it.
• Containers allow you to nest other Containers within each other.
• You cannot add a Responsive Row widget inside a Responsive Row widget.
• You can add Containers within Responsive Row widgets.
• Containers let you create row, column and free form designs within them.
• The Responsive Row widget aligns objects horizontally or vertically depending on screen size.
• Containers let you group multiple objects together even in a Responsive Row the layout stays the same.
• A Container does not wrap to a new line to align vertically.

Naturally the question that you might be asking is: Which should I be using in my website, Containers or the Responsive Row widget? At the moment, the answer both! We recommend using whichever feature meets the requirement of your website design best. The Responsive Row widget is a great way to align objects horizontally and/or vertically in a responsive page as well as allowing you to wrap objects. Containers on the other hand, give you new ways to design content by nesting design elements, thereby allowing you to stack elements on top of each other. Additionally you also now have more freedom to design vertically and in free format ways within the responsive space.

Now and The Future…

The second question that you are probably asking yourself is, what will happen to Containers and the Responsive Row widget in the future? As a new feature in EverWeb 4.4, the introduction of Containers paves the way to the future. We are working on adding more features and capabilities to Containers in the upcoming EverWeb 4.5 release to further to exploit their potential to the full, giving you unparalleled design capabilities. If you have not tried out Containers yet, we recommend that you do so to become familiar with them. Our Working With Containers video will help you get started.

The Responsive Row widget is not going away though, so your investment in this widget in your website is safe, as always. You can still develop with confidence using its features and capabilities. We recommend thought that you check out Containers, now and when EverWeb 4.5 releases, for exciting new developments and features.

EverWeb’s new Container feature is a powerful design tool, especially when used in the Responsive pages of your site. Introduced in EverWeb 4.4, Containers let you create horizontal, vertical and free format designs easily, with more flexibility than ever before, allowing you to add more features that you want, taking what you conceive into reality on your page!

A Container is an object that contains objects within it. In this post, we will explore one design possibility, other possibilities are down to your imagination!

The Design Concept: Creating a ‘Call To Action’ Container

Our design has two goals to achieve: The first is to explore EverWeb 4.4’s new Container feature, whilst the second goal is to create a ‘Call To Action’ (CTA). The image at the top of the post shows these goals in action. which is to create a Container that contains an item for sale, and a buy button which is our Call To Action. The aim of the CTA is to encourage our visitors to click on the button to purchase the sneaker shown in the image in the Container.

Containers: A Quick Overview

Although you can use Containers in a fixed width environment, we recommend using them in a Responsive Page Layout as this is where their full potential can be realized.

Adding a Container to a page in your site is easy, just click on the Containers button in the Toolbar. Note that there are also other ways of adding Containers to your page.

There are three types of container:

• Container Row – Use this Container type then you want to organize objects horizontally
• Container Column – Use this Container type when you want to organize objects vertically
• Container Free Flow – Use this Container type when you want objects arranged in a free format way

You will also see that the Responsive Row widget is also listed. This widget is included here as it is another form of container that you can add to your Responsive page design.

Additional Container Features

All Containers have a Toolbar positioned either above center or below center, depending on where the Container is on the page. The Toolbar accesses various Container settings. For example, use the Settings Cog to name the Container. You can also set the alignment of objects inside the Container Row or Container Column types. If you find that you want to change the Container type, you can do that as well. Any objects in the Container will automatically adjust.

You will also notice that all containers have a Move icon in their top right hand corners. This compass type icon helps you drag and drop containers without mistakingly moving their contents.

Nesting Containers

Containers are versatile so can be added in to a Responsive Row widget, and can also be nested inside each other, so if you need to you can, for example, have a container within a container with in a container. This will give you a lot more design options. Before starting any design, we recommend that you look at its purpose and how to structure it from a design perspective. For example, you do not want to over design so that you have more nested containers than you need. Keeping your design ‘efficient’ will also mean it will work better, and quicker as it uses less code, when you publish your site later on.

Creating a ‘Call To Action’ Container

In this example, we are going to create a design that will incorporate an image, text and a button which will be our ‘Call To Action’ to encourage our visitors to click on. In. this post, please refer to the image above to see what we are aiming for.

For this design we are using a Responsive page, so either create a new responsive page for your site, or use an existing one.

The next step is to add a Responsive Row widget to the page where you want to add the Call To Action container. Click on the Containers button in the Toolbar, then choose the Responsive Row menu item. Alternatively, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

A Responsive Row will be added to the page. The next step In our example is to add a background color to the widget. To do this, first make sure that the widget is selected on the page. Next, click on the Shape Options tab. If none of the settings are activated, you will need to select the Responsive Row widget to activate them. In the Fill section, click on the dropdown menu which is set currently to ‘None’. In our example we are going to use Color Fill, and choose a light grey color from the color swatch.

Now that we have our full width widget with a light grey background, we can add margins and padding. to the Responsive Row. This will make the Responsive Row and the objects it contains look better on the page, especially when the page is built out to completion. To add top and bottom margins, use the Metrics Inspector.

In the Margins and Padding section, set the top and bottom margins to 40, using the top and bottom outer fields to do so. You will see a grid appear above and below the Responsive Row when you apply the margins.

After adding the margins, we will add some padding to the inside of the Responsive Row. Using the inner box of settings in the Margins and Padding section, add padding of 20 pixels to all of the sides of the Responsive Row.

We can now proceed to add a Container inside the Responsive Row. In this example, we are going to use a Container Column as this suits our design best.

Adding and Styling Objects In The Container

First make sure that the Responsive Row is still selected. Click on the ‘+’ button in the center of the Responsive Row. A menu will appear. Click on the Container Column menu option A Container Column will be added inside the Responsive Row.

This Container will be the ‘background’ on which objects such as TextBoxes, images and shapes will be placed on top of. So we will first color this background Container, in the same way as did for the Responsive Row widget. using the Color Fill option in the Shape Options tab. In this example, we are using a pastel green color.

Next we are going to change the margins of the Container. Make sure the Container is selected, then go to the Metrics Inspector and change the margins from the default setting of 20 to 10.

We are also going to name the Container as it will make it easier to reference it later if we need to. To do this, click on the Settings Cog in the Containers Toolbar then choose the Name option. In our example, the Container will be called ‘Sneaker One’. Click on OK to finish. You will see that the name of the object has changed in the Toolbar.

We want the Container to be wide enough to be displayed on mobile devices. To change the width of the Container, go to the Metrics Inspector, and set the width of the Container to 320 pixels.

You may find that as you add objects in to a Container that its width changes automatically, so check every so often that the Sneaker One container remains at 320 pixels wide. Readjust the Container width as necessary.

Now we are going to add a second layer to the Container. Click on the ‘+’ button in the Sneaker One Container. From the menu, choose Container Column. Again, we are going to change the color of this Container. This time use the Color Fill menu in the Shape Options tab to set the color to a pastel orange. Name the Container ‘CTA Background’.

Adding Text, an Image and a Button To The Container

We now have the background style for the Container Sneaker One set up, we can now add an image in to the CTA Background container. This will be an image of the product that we are selling, in this example, a sneaker.

Again, click on the ‘+’ button inside the Container, then choose ‘Image’ from the menu. Alternatively, click on the ‘+’ button in the Container’s Toolbar. A placeholder image box will appear inside the Container. To add the image of the sneaker that we want to the Container, go to the Shape Options tab in the Inspector Window and click on the Choose button in the Fill section. Select the sneaker image that you want to use. Resize the image within the Container if you want to.

As we are going to be adding more objects in to the ‘CTA Background’ Container, we will take the time now to add a bottom margin of 10 to the image. Use the Metrics Inspector to do this in the same way as we did earlier.

After adding the Image to the Container, we can add a text title above the image. To do this, we will add a TextBox in to the CTA Background Container. First, we will make sure that the CTA Background Container is selected.

Click on the CTA Background Container’s + button in its Toolbar. Choose TextBox. A TextBox will appear. Replace the default text ‘Enter Text’ with the title text that you want, then style the text as desired, preferably using a Paragraph Style. Make sure that you resize the TextBox itself so that it fits properly within the Container. Drag and drop the TextBox so that it sits above the image if required. To finish, set the bottom margin of the TextBox of 10 so there is enough space between the TextBox and the Image beneath it.

Adding a CTA Button

The last objects to add to the Container are a text description below the image, and a Call To Action button.

Click on the CTA Background Container to select it. Next, click on the + button in its Toolbar and choose Shape, then the Rectangle shape. This will be added to the objects inside the CTA Background Container. If the shape is not under the image, drag and drop it so that it is. Next, change the color of the shape’s background. In our example, we made this yellow, and we also rounded the corners of the shape using the Borders settings in the Shape Options tab.

Set the width of the rectangle shape so that it is the same width as the image.

Within the rectangle shape, we are going to add a some text. Click inside the yellow rectangle shape and type in a description of the sneaker. Remember that shapes can always include text inside them. When finished style the text as desired, preferably using a Paragraph Style to do so.

The last step we need to take is to add the CTA button to the CTA Background Container. Select the CTA Background Container if it is not already selected. Use the + button in its Toolbar to add a rectangle shape, which will be used for the button. Style as rectangle shape as desired so that it looks like a button. Add a hyperlink to the button text which will take the visitor to a payment page, or a more information about the sneaker page.

Remember to add a top margin to the button (or a bottom margin to the text description shape) one you have to finished styling the button.

Check to make sure that the outermost container, Sneaker One, is still 320 pixels wide.

The design is now complete. Preview, before publishing, to test.

As we closeout 2025 and enter 2026, all of us here at #TeamEverWeb wish all of our customers a very happy and prosperous 2026! Here’s a look ahead at what you can expect from EverWeb and website trends in 2026!

More Big EverWeb Releases in 2026!

EverWeb 4.5 is coming soon and we’re super excited! It’s going to be another big release like EverWeb 4.4 for macOS and Windows was. We are currently testing out new features and expanding on some existing features before we’re ready to release a public beta. We are very excited about this release, and we have lots of other plans for future 2026 releases and beyond!

Check out @everwebapp on X which is where we will be teasing out some of the new EverWeb 4.5 features such as fully customizable popup windows!

Stay tuned on this blog too as we will be updating you as to when the EverWeb 4.5 Public Beta will be available for you to try out before the official public release comes out.

EverWeb’s Perfect For 2026’s Website Design Trends

EverWeb 4.3 and 4.4 features marry up to design trends 2026, which pundits predict, will be focused on more human-centric design. This means a more organic approach to site design rather than the structured approach we have seen over the last few years. In reality we are talking about irregular layouts flowing sections, layered gradients and soft masks.

EverWeb 4.4’s new Containers feature is ideal for creating such layouts as you can create row, column or free-flow designs suitable for responsive environments. You can add a gradient fill type to your Containers as well to create the look that you want. To give your page a softer look, you may also find EverWeb’s Borders useful to soften sharp edges!

Check out our posts early in 2026 for exciting EverWeb 4.5 features that will also have a big impact on this 2026 design trend!

Oversized Typography

Oversized typography in your site will also be a key trend for 2026, with highly oversized headlines creating high contrast with the regular sized body text of your pages. EverWeb’s revamped Text Inspector that came in EverWeb 4.0, makes this a breeze to achieve, especially if you have set up Paragraph Styles, which will make supersizing your Headlines just a one click operation!

Tactile Design

Also flagged for 2026 is a more tactile approach to website design. Take for example, the humble Call to action buttons that are found in most websites. Why not animate these types of buttons when your visitors mouse over them? Or change the color of the button? Find out more about Mouse Actions and Transitions from EverWeb’s Shape Options tab.

It does not stop there though, as you can also use EverWeb’s Scrolling Effects to pin CTA buttons and shapes to where you want them on the page. Keep what is important front and center for your visitors at all times with this easy to use feature.

Retro Design Is Back…

Retro design styling is back as is brutalist design. Even anti-AI design style that employs non-perfect, rough textured designs will be a 2026 design trend. Designs though will also need to focus on accessibility as well as part of the mix, for example, designs that help reduce eye strain will gain traction.

Videos Are In For 2026

Adding video backgrounds to your pages, or objects on your page, will be a trend in 2026. EverWeb already makes it easy to add a video background to your page using the Video Fill option in the Browser Background section of the Page Settings tab. To add video fill to objects on the page, use the Video Fill options in the Shape Options tab instead.

Website Speed and Performance Remain Crucial

Whatever approach you take to your site’s design in 2026, you should always test your site out to make sure that its speed of page loading and the performance of each page is good. Over the last year, EverWeb’s continued to optimize these aspects of its code generator so that when you publish your website it will be as best optimized as it can be. However, when creating your page designs, you should make sure that performance draining objects, such as large image files and large videos, are avoided, especially when your site is viewed on a mobile phone.

For image files there are some quick wins here, for example, instead of using .png format image files, use .jpg format files where possible. This will save you a lot of time when the page loads. You can also use fewer images on the page which, again, is an easy solution. Another option is to use EverWeb’s Lazy Load Image option in the Shape Options tab which will only load the selected image when it is required, so avoiding having to load it at page loading time.

For video files, it is often best to use a service like YouTube or Vimeo which your site will link to, rather than having a video directly embedded in your site. This will save you bandwidth and will help speed page and video loading times. If you do need to use a video directly from your site, you may want to consider using a Poster Image which is displayed whilst the video loads in the background. You will find this feature in EverWeb’s Video Widget.

2026 will be an exciting, groundbreaking year for website design and EverWeb in 2026 will give you need design tools and features to make it even easier, and more fun than ever, to create just the site you have always wanted. Now and in the future!

Stay tuned as we will soon be covering the upcoming EverWeb 4.5 early in the new year!

Tucked away in the new EverWeb 4.4 release is a new option which lets you add an image as a shadow to an object in your website. In this post we will look at how to best use shadows in the pages of your EverWeb made website.

When To Use Shadows in Your Site…

Website trends over the last few years have favored a more ‘flat’ design approach, rather than using the previous skeuomorphic or realistic/rich design approach. Over the years, the flat design style has also changed by becoming softer, incorporating elements previously only found in skeuomorphic design. As such, elements such as using shadowing to your website’s design are coming back in to web design.

Adding shadows in your website can help to add some depth and texture to its design when used wisely – i.e. sparingly. Use shadows to draw your visitors to where you want them to look on the page. If you overuse shadows, you will fail to lead your visitors to where you want them to look. You may also give your visitors the impression that your site was designed years ago when skeuomorphic was in vogue. Again, not a good idea.

Guiding your visitors to so called ‘Call To Action’ items such as buttons, or important text, are areas where shadows can be usefully applied. In addition, you can use shadows to soften your site’s flat design so that it is more appealing and engaging. In this way you will give the impression that your site is modern but also warm and a little more 3D than 2D. When softening your site, the shadows should be subtle and not overt.

It is also important to remember to make sure that your design is accessible to those who are sight impaired. When contrast is reduced between elements on the page, this may make elements on the page more difficult to see. In these instances it may be better to use clear borders instead.

… and When Not To

Using shadows sparingly in your site can be advantageous to your visitors as we have just outlined above. However if you overuse shadows, you may find that your site’s performance is impacted as rendering these elements will take more time, especially on mobile devices.

The second concern is, as we mentioned above, accessibility. Make sure that your site’s as free of visual ‘obstacles’ as possible, poor use of shadowing being one such example. Poor color choices, such as green/red combinations or poor font choices are further examples that may limit your visitors access to your site if not used wisely.

Applying Shadows In Your EverWeb Site

To add a shadow to an object on page in EverWeb, such as a shape, image, button, or container start by selecting it. Then go to the Shape Options tab and check the box in next to the word ‘Shadow’ in the Shadow section to activate its settings. Tip! You can also click on the word ‘Shadow’ which will also activate the settings.

There are two type of shadow that you can choose from: Color and Image Shadow. The default is set to Color, as you can see in the dropdown menu to the right of the ‘Shadow’ section title. If you are using a Color shadow you will have the following options to choose from.

• Offset: The shadow offset from the object by 6 pixels
• Blur: The shadow is blurred with value of 6. You can set a value from 0 (No blur) to 99 (maximum blur). Blur is used to diffuse the shadow.
• Opacity: The default is set at 75% to create the default shadow. Opacity sets the transparency of the shadow. At 100% the shadow will be opaque. At zero it will appear transparent.
• Shadow Color: You can change the color of the shadow using the Color Swatch or Color Wheel.
• Rotation: The rotation wheel adjusts the angle of the shadow relative to the object. It is set at zero by default. Either use the dial or enter a value between 0 and 360 to change the angle of the shadow.

Adjust the values for each setting as desired to achieve the shadow effect that you require. If you are using an Image Shadow, you can use these options as well, plus additional options that are described in detail below.

Applying Shadows to Text

So far, we have discussed adding shadows to objects, but you can also add a shadow to text as well. Simply select the text that you want to add the shadow to, then use the same procedure as described above to add, and customize the shadow to your liking. In addition, you can also add shadow effects using the Fonts Panel in EverWeb’s Toolbar to your selected text if you prefer. The buttons in the Fonts Panel work in the same way as those in the Shadows section of the Shape Options tab.

Adding Image Shadows

If you want to apply an image shadow to your selected object, first change the type of shadow from ‘Color’ to ‘Image’ using the dropdown menu to the right of the ‘Shadow’ section title.

When using an image shadow, you may find that .png files are the best type of image to use as they eliminate the background color of the image being used. For example, if you have an image of a car in a .png file format, you can use the car as the main image and also its background creating a pseudo-3D effect.  

First select the image you want to add the image shadow to. Activate the Shadow settings as described above. You will see the settings shown are the same as for the Color shadow, except that the Color Swatch/Color Wheel has been replaced by a ‘Choose…’ button. Use this button to select the image that you want to use as a shadow. In our car example, the image being used as the shadow will be the same as the main image itself.

Change the Shadow settings as desired. In addition to the settings described above, when using an image as your shadow you have three additional options: Height, Width and Scale. Use the first to options to size the shadow as desire, and use the Scale option to if you want the image shadow displayed as Default (scale), Scale to Fit, Scale to Fill, or Stretch.

When you add a shadow to your page, you will see any changes you make immediately as you alter the Shadow settings. However, it’s always best to preview your page before you publish.