Two of EverWeb 4.5‘s new features, On Click Actions and Popup Windows can be easily and effectively combined to make it easy to trigger actions based on user interaction in the pages of your EverWeb site.
On-Click Actions allow you to trigger actions when a visitor clicks on an object on the page, such as a button. You can even daisy-chain use On Click Actions to trigger a sequence of actions if you need to .
In this post, we are going to look at how to combine On Click Actions with another new EverWeb 4.5 feature, Popup Window. We are going to create a Video Popup Window that will display in the bottom left hand corner of the screen when a button is clicked on in the page.
Exploring The Popup Window’s Close Button
To start, let’s add a Popup Window to the page. Select the page you want the Popup Window to appear on, then click on the Popup Windows button in EverWeb’s Toolbar. Select the option ‘New Popup Window’. A new Popup Window will be added to the page.
Name the Popup Window ‘On Click Video by clicking in the Popup Window’s Object Label, which by default is ‘Popup Window’. Rename the Popup Window then press Enter to finish.
The next thing we want to do is to click on the Close button in the top right-hand corner of the Window. This is where we will see On Click Actions at work, but that for later on… in the meantime, click on the Metrics Inspector. Notice that the Close button has its proportions constrained so that it keeps its length and height in proportion if you resize it. The next thing to note is that ‘Allow Free Dragging’ is set on. This means that you can move the button around the Popup Window and pin it to whichever sides you want. Use the ‘Pin Settings’ button for this purpose if you need to. The last thing of note here is that the icon has ‘Always on Top’ set on so that it always floats above other objects within the Popup Window.
In this example, let’s change the color of the Close button. Click on the Shape Options tab then change the Fill Color to something else. In this example, I am going to use green. I can also change the button used if I want to as well. To do this, go to the Background Mask section. You will see the Close button in the Background Mask’s preview window. Note that it is an SVG file, so will not lose resolution at scale.
Click on the preview image on the left-hand side of the Background Mask section. Click on the User Interface selection and choose a different Close button. In this example, I am going to use a filled in circle with a cross in the middle of it. After changing the icon, you will notice that the button uses the color we chose earlier.
Next, position the Close button so that it sits in the top right corner of the Popup Window. You should not need to adjust the Pin Settings as they are already set to pin the button to the top and right-hand edges of the Popup Window.
The Close Button’s On Click Action
Now that the Close button has been styled and positioned as we want, let’s look at its On Click Action. Click on the Hyperlinks tab in the Inspector Window. You will see that the On Click Action section is open and that there is one item in the On Click Action list. This shows that when the button is clicked, the parent container, i.e. the Popup Window, will close.
Creating The Video Popup Window
Now let’s create our video popup. Click on the Add button in the middle of the Popup Window. Choose ‘Video’. This will add a Video Fill to the Popup Window. Click on the Shape Options tab if it is not already selected. Choose the video that you want to play in the Fill section. Usually it is best to link to a video rather than to embed a video in to your project. In this example, I am going to change External Video URL to YouTube. I can then easily add in my YouTube video link in the field below. Choose the appropriate options. Remember that it is important that ‘Show Controls’ is checked so that the user can play the video. The one option you should not check is ‘Auto Play’. If you checked this, the video will automatically play when the page loads, which is not what we want, so do not check this option!
The next step is to match up the Video Fill and the Popup Window so that the latter appears like a frame around the video. In my example, I need to widen the video and reduce the dimensions of the Popup Window until the Video Fill is framed how I want it.
When adjusting the Popup Window, you will notice that the video sits at the top of it. To change this, first make sure that the Popup Window is selected. Next, go to the Widget Settings and set Object Alignment, Vertical to ‘Middle’. Reframe the video within the Popup as desired. Whilst we have the Widget Settings open, let’s also position the Popup Window into the bottom right-hand corner, using the Position dropdown menu option. The last thing we need to do is to set how the Popup Window will be triggered. Change the ‘Popup Trigger’ to ‘Manual’.
We are almost done with the Popup Window. The last thing I want to do is to change the background color of the Popup Window. As it is still selected, we can go back to the Shape Options tab and change the Color Fill to the color we want. Make sure that the frame contrasts with the color of the Close icon.
Creating an On-Click Action Button
The final task is to create a button that when clicked upon, causes the Popup Window to appear. Add a rectangle shape to the page and add a button text to it, for example ‘Press Me!’ With the button still selected, go to the Hyperlinks Inspector.
Now we need to set up our On Click Action. In the Action field, set the menu option as ‘Show’. Next click in the Element field. Choose ‘On Click Video’ from the list of objects. The last step is to click on the Add button so that the On Click Action is added to the list of actions.
Testing and Publishing
Click on Preview to test. To fully test, publishing may be better as you will then see the YouTube video in action.
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
For macOS users, macOS 27 Golden Gate is going live now around the world as Apple has just started its global rollout! We have tested EverWeb 4.5 against the new OS whilst it was in beta and fortunately we found no issues!
When you decide to update your macOS to the latest version, please remember to back up anything critical on your computer before you install the new software, including your EverWeb project files. You can also get EverWeb to back up your project files on a regular basis. Check out how you can do this our post about Backing Up Your EverWeb Project Files.
We also recommend always using the latest version of EverWeb at all times so before you start to back up your computer, check to see if there is a more up to date EverWeb version you can install. Use the EverWeb-> Check for Update… menu to find out.
We are already testing the next release of EverWeb, version 4.6 against macOS Golden Gate to ensure that it is also fully compatible with Apple’s latest OS release.
If you encounter any problems, please touch base with EverWeb Support.
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
The new EverWeb 4.5 release, for macOS and Windows, brings a whole host of new features such as Object Pinning, the Carousel Widget, Overlay Effects and Background Masks. In addition to these new EverWeb features we also introduced On Click Actions. This new feature gives you the ability to control what happens when a visitor to your site clicks on an object. Use On Click Actions when you want to add one, or more, step by step actions that are activated on the click of a mouse. On Click Actions help you control where you want your visitor to go in your site, or activate Call To Actions.
The following is an example of an On Click Action that is used to facilitate a video playback button for a video fill on the page,. During this process we will explain how the On Click Action is used.
Start by adding a Video Fill to the page. This will contain the video that our video playback button will play when it is pressed. To add a Video Fill click on the Shapes button in the Toolbar, then click on the first shape in the list – the rectangle shape. We sometimes also refer to this button as ‘referred to as the ‘default shape’.
Next, click on the Shape Options button in the Inspector Window on the right hand side of the screen. In the Fill section, change the Fill Type for the rectangle shape from ‘Color Fill’ to ‘Video Fill’.
You now have some choices about where the video you want to use is located. From the dropdown menu, choose the option that fits where your video is located which will be either External Video URL, Local Video File (if your video is stored in the project’s Assets List), YouTube Video, or Vimeo Video.
After the Video Fill has been added to the page, name the Video Fill. This will make it easy to locate when the On Click Action is created later on. To change the name of the Video Fill, double-click on the ‘Video Fill’ name label that is displayed at the top of the Video Fill. In this example I have renamed the Video Fill as ‘My Video’.
The next step is to add a Video Playback button to the page. In this example, I am going to use a Triangle shape. Click on the Shapes button in the Toolbar again. This time choose the Triangle shape.
Position the triangle where you want it on the page. To rotate the triangle so that it looks like a play button, go to the Metrics Inspector. In the Rotation section, set the angle to 270 degrees. This will result in rotating the triangle so that it looks like a Play button. You can style the triangle if you want, by adding a shadow to it.
If you prefer, you can use a Background Mask as the Playback button instead of a triangle. In this case, add a default shape or rectangle shape to the page, then check the box to activate Background Mask in the Shape Options tab. Click on the SVG button then select, for example, an arrow shape. Once added, the SVG file will retain its sharpness at any resolution. You can add effects to it as well such as color and Overly Effects if you want.
After adding your Playback button, keep it selected, then click on the Hyperlinks Inspector button in the Inspector Window. If the On Click Actions section is not open, click on the triangle to the left of ‘On Click Actions’. The section will open.
Click on ‘Select an Option’ in the ‘Action’ field. Choose the ‘Play’ option.
The Element field will now become active, and this is where we add the Video Fill to be played. Click in the Element field and select ‘My Video’.
The ‘Add’ button is now activated, so click on it to add the new On Click Action to the On Click Action list. A dashed line will appear, connecting the Play button to the ‘My Video’ Video Fill.
We have now finished our Video Playback button.
Click on the Preview button in the Toolbar to preview and test out the On Click Action. Click on the Play button that you created and you should see the video play.
What Next? Exploring On-Click Actions
In our example, the next step would probably be to create other buttons in the same way, such as pause, stop and toggle playback, and mute and un-mute. You can even daisy-chain actions together to make a sequence of events. You may find when running a series of On Click Actions one after the other that in that the Delay feature comes in handy. And don’t forget that On-Click Actions are great to trigger Popup Windows for example, as well as hiding objects once their actions have been completed.
We have only explored one example of the uses of On-Click Actions. The rest is down to your imagination!
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
If you’re designing your responsive website in EverWeb, its new object pinning feature, which debuted in EverWeb 4.5, is a must have feature addition! What object pinning allows you to do is to attach objects that are inside a Container to its edge, or to the edge of the page. Pinning objects to a Container, or page edge, allows you to design with more freedom when using a responsive page whilst still conforming to responsive web design principles. In essence, you can now design your responsive page in a way that is more akin to fixed width page design principles than ever before.
Allow Free Dragging
To be able to use object pinning, first select the object you want to pin, then go to the Metrics Inspector. In the Position section, check the box to set ‘Allow Free Dragging’ on. Doing this in itself will allow the object to be moved around the Editor Window freely as if it were an object on a fixed width page. You can even drag the selected object across boundaries such as between the Content and Footer sections. Checking the ‘Allow Free Dragging’ checkbox is a requirement for activatint the Pin Settings button which you will see is now visible.
Pinning Objects with Pin Settings
The Pin Settings button allows you to control how the selected object is pinned on the page or container. Click on the Pin Settings button to view and modify the selected object’s Pin Settings. In the window that pops up, you can set object pinning to the horizontal edge of the container, the vertical edge of the container, or both. For vertical pinning, you can choose to either pin the object to the Top, Middle or Bottom of the Container by clicking on the appropriate button. For horizontal pinning, click on either the Left, Center or Right buttons.
If you prefer, you can pin the object to the horizontal and/or vertical edge(s) of the page by checking the horizontal and/or vertical ‘Constrain to edge’ checkbox(es). In addition, you can also use either a pixel value or a percentage value for the pinning. If you use pixel value, the pinning will be fixed, i.e. always at the same pixel value, as you increase or decrease the width of the browser. So if you place the object your are pinning 50 pixels away from the edge of the Container or page, it will always be 50 pixels away from the pinned edge no matter what the browser width is. If you use Percentage on the other hand, this becomes relative so if the object you are pinning is 10% away from the browser edge, it will always be at 10% as you adjust the browser width.
The great thing about object pinning is that you can mix and match the pinning to suit your requirements. Sometimes you may just need horizontal pinning and not vertical pinning for example. You can test out your pinning just by changing the width of the EverWeb app. You will see what happens to the pinned object immediately so can adjust your pinning until you are happy with the results.
Object Pinning Visual Feedback
When you use Pin Settings on an object, you will see the settings translated visually in the Editor Window. Pinning guides will display on the edges that you have selected to pin. You will also see Pixel or Percentage values as well alongside the pinning guide lines. This information will help you to pin objects with accuracy.
Freeing Objects in Container Row and Container Column
As well as Object Pinning in general, EverWeb 4.5 goes one step further in that you can use pinning in Container Rows and Container Columns. This is a boon when you want to keep the structure of the Container but need to position e.g. a single object inside the Container, in a ‘Container Free Flow way’. You could use a Container Free Flow Container perhaps, but free-flow is just that so it will be more difficult to keep objects aligned in the way that a Column or Row Container can. So, the solution is easy. Create your Container Row or Column, then populate it. Click on the object you want to “free” from the Container structure, then hit Allow Free Dragging. Move the freed object to where you want within the Container (or page) and use the Pin Settings as you want. Easy. Either change the width of the EverWeb app, or use Preview to see how the pinning works in practice.
EverWeb’s Object Pinning feature is a great addition to its feature set, freeing your design whilst still following responsive web design rules!
Check out our video at the top of the page for a run through of Pin Settings!
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
Our latest EverWeb release, version 4.5 for macOS and Windows, brings a whole host of new features to help you manipulate images and other object types to get exactly the look you want in your site.
EverWeb 4.5 includes three new tools to help with this: Background Masks and Overlay Effects are great for using with images and other object types whilst Smart Target Cropping gives you the power to ‘focus in’ on an area of an image. In this post, we are going to look at the first of these new features, Background Masks.
Background Masks and Mask Types
A Background Mask is like a layer that you put an object usually to conceal, or reveal part of the object in some way, in order to get the effect that you want to see. The new Background Mask feature gives you two different types of mask: Gradient Mask and SVG mask. Typically you will apply a background mask to an image, but you can also add a background mask to other types of object that support this feature such as certain fill types, shapes and TextBoxes that use a background.
You can easily see if an object supports Background Masks just by selecting it, then looking to see if ‘Background Mask is available for use in the Shape Options tab. Note that background masks are context sensitive so may or may not be available depending on the context in which the object is being used e.g. TextBoxes that do not have a background cannot use a Background Mask, but can if they use a background fill or image.
Applying a Background Mask
To apply a Background Mask to an object, first select the object that you want to use, for example an Image Fill. Next, go to the Shape Options tab in the Inspector Window and tick the Background Mask Checkbox. This will activate the Background Mask settings. If the Background Mask section is greyed out, the object will not be able to the feature, but remember that this may be due to the context in which you are trying to use the feature, such as filled or unfilled TextBoxes, as mentioned earlier in this post.
Now that we have activated the Background Mask feature for our Image Fill, let’s look at the first mask type: Gradient Mask.
Using Gradient Mask
Gradient Mask is the default Background Mask option that is immediately applied to the selected object when you activate the Background Mask settings. If you want to use an SVG Mask instead, click on the SVG button.
In our example, an opacity has been immediately applied to the selected image. The opacity will display vertically from the center to the left hand edge of the image. Use the double headed, Start Opacity – End Opacity, slider to change where the opacity starts on the image, and where it ends.
You can also choose how much gradient is applied to the object using the Gradient Amount slider which is immediately below the Start Opacity – End Opacity Slider. As you move the Gradient Amount slider, you will see its effect immediately on the object in the Editor Window. Usually adjusting these two sliders will get the result that you want.
If you want to change the angle of the opacity, just use the controls in the bottom right hand corner of the section, for example, to set the opacity to be horizontal, set the angle at 90. The opacity will begin at the top. Use an angle of 270 to start the opacity from the bottom.
The last feature of Gradient Mask is that you can choose to have the opacity appear symmetrical. Check the ‘Symmetrical’ box to activate this setting.
Gradient Mask, TextBoxes, and Shapes
If you are using TextBoxes, you can use Gradient Mask with them, but only when the TextBox uses a background fill. For example, if the TextBox uses a Color Fill, or Image Fill, you can use Gradient Mask. When using Color Fill, the TextBox effectively becomes a rectangle shape with text within it.
Adding a Gradient Mask to the TextBox will let more of the background color through depending on your Gradient Mask settings. Imagine that you have a TextBox with a blue background embedded inside a Container which has an orange background. When you apply Gradient Mask to the blue backgrounded TextBox, the Container’s orange background will become visible within the TextBox. This is a different effect than using Gradient Fill instead of Color Fill in the Fill section of the Shape Options tab for the TextBox. Using the Gradient Fill option will not give you the transparency that the Gradient Fill does. To achieve this effect, use both a Gradient Fill and a Background Mark. You can even add Overlay Effects to further enhance the look of the object!
Gradient Mask can be used with the default or rectangle shape, but not with other shape types. If you want to add a gradient fill to e.g. an oval or triangle shape, use Gradient Fill instead of Color Fill instead. If you are using the default or rectangle shape, you can use EverWeb’s Border Options to make ir in to a rounded rectangle that you can use with a gradient mask. Note that if you use the Rounded Rectangle shape, you will not be able to use Gradient Mask with it. Gradient Fill will still work though.
SVG Mask for Customized Fill Backgrounds
The second type of Background Mask is the SVG Mask. Click on the SVG button to view the SVG Settings. SVG stands for Scalable Vector Graphics, and it is a file format in its own right. SVG Masks are great for when you want cookie cutter type shapes for your backgrounds e.g. you may want tn image displayed within a speech bubble or star shape. EverWeb’s SVG Masks make this super easy to achieve.
Start by selecting the object that you want to apply the SVG Mask such as an image or TextBox with a Color Fill background. In our example, we are again going to an Image. Click on the Select SVG button. If you had already applied a Gradient Mask to the shape, these will now be disabled and you will see the object in its original display format.
Click on the ‘Select SVG’ text in the display box on the left hand side of the settings. If an SVG file is already in use, you will see this displayed in the display box instead. Just click on the image to change the file being used.
A dialog box will appear showing the SVG Image Library. Choose the Background SVG Mask that you want to use, for example, a speech bubble. Double click on the SVG file that you want to apply to the image. You will see that the image has been masked to only show what can be displayed inside the speech bubble. To set the angle of the SVG mask use the angle control field or the angle control dial. Don;t forget that you can also apply Overlay Effects to enhance the image if desired!
Summary
EverWeb’s Background Mask feature is a great way to enhance your images, TextBoxes, shapes and other objects adding flair to your website. Combining the mask with other Fill Options and Overlay Effects lets you easily achieve the look that you want without the need to use any external editing tools.
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
There’s a lot to discover with EverWeb’s all new Popup Window feature that debuted in EverWeb 4.5 for macOS and Windows. Check out our essential guide to EverWeb’s Popup Windows below!
What Is a Popup Window?
A popup window displays a window on the page on top of the page’s other content. This ‘window’ can appear when your visitor either accesses the page, interacts with the page, when leaving the page or site, or when the window is triggered by E erWeb’s On Click Action feature. When triggered, the Popup Window has to be dismissed by the visitor before they can access the underlying content of the page.
Why Use Popup Windows?
EverWeb’s Popup Windows feature is highly customizable giving them many potential uses. A Popup Window is like a Call To Action and is ideal for focusing your visitor on what you want them to focus on. Action is also required by the visitor – either to interact with, or dismiss, the Popup Window.
You can use a Popup Window in either fixed width or Responsive pages. They can also be used in Master pages as well as in regular pages. Additionally, you can add multiple Popup Windows to a page if you want. it is recommended not to overload your page with Popup Windows, though, as this will discourage your visitor from using your site.
Here are some examples as to what you can use a popup window for:
Capturing leads, offering discounts, or newsletter signup before the visitor leaves. Exit-intent popups specifically target users about to abandon the page.
Announcements, promoting sales, new features, or important notices without needing a dedicated page.
Age or region verification, gating content that requires confirmation before access.
Cookie consent and legal notices, meeting GDPR/privacy compliance requirements.
Login and signup forms, letting users authenticate without navigating away from the current page.
Confirmation dialogs, verifying actions like deletions or purchases before they happen.
Upsells and cross-sells, showing related products or upgrade offers, common in e-commerce carts.
Feedback and surveys, collecting user opinions at a relevant moment in their session.
Media display, showing images, videos, or galleries in a larger view without a page reload.
Onboarding and tutorials, walking new users through features step by step.
Check out our other videos on Popup Windows in the EverWeb website or on YouTube for real world examples of creating Popup Windows.
Old Style Popup Windows, New Style Popup Windows…
If you are a long time EverWeb user, you may already know that EverWeb includes a Popup Windows feature in the Hyperlinks Inspector – Hyperlinking to a Popup Window. This feature remains in place as this type of popup window has specific cases uses as well as remaining for legacy purposes. Generally, though, the new EverWeb 4.5 Popup Windows will give you more flexibility and versatility going forward and we will be focusing on this type of Popup Window in the rest of this post.
Adding a Popup Window
To add a new Popup Window to the page, first go to the page that you want to add the Popup Window in to, then click on the Popup Window button in the Toolbar. Choose ‘the ‘New Popup Window’ from the menu option to add a new Popup Window, or select one that you have already created if you want to edit an existing Popup Window. Alternatively, use the Insert, Popup Window menu option. The newly Popup window will appear in the Editor Window.
Editing Basics
Popup Windows use the Column layout by default when you added to the page. To change the layout type, use the Layout option in the Popup Window’s Settings, then select either Row or Free Flow.
There are twelve different Popup Windows positions to choose from. Use the Position dropdown menu option in the Popup Window settings to select the style you want.
Adding and editing a Popup Window works in the same way as you would expect anywhere else in EverWeb. Simply drag and dropping objects into Popup Windows, or use the Add button. If you are moving an object within a Column or Row style Popup Window, you may see dashed guidelines to help you with object placement. when doing so.
When editing a PopUp Window the page background will be greyed out. This mimics how the Popup Window will work when activated in real life. You can change the background color and its opacity using the Background Browser Settings in the Popup WIndow’s settings.
If you click outside of the Popup Window, the editing session will end and you will be returned to the page again. To re-edit the Popup Window, click on the Popup Windows icon again and choose the Popup Window you want to edit.
Popup Window Object Label Toolbar
Many of the features of the new Popup Window feature are common to most object types in EverWeb, as they are all based upon EverWeb’s Container technology. Below are some good to know
The Object Label Toolbar usually present, but may appear either at the top of bottom pf the Popup Window, the Toolbar depending on the style of popup you are using. If you are using a full height Popup Window, the Object Label Toolbar will not be available. You will need to use the Widget Settings tab in the Inspector Window instead.
The Add button in the Object Label Toolbar lets you add objects in to the Popup Window, whilst the Settings Cog access the Popup Window’s settings. The Trashcan icon will delete the Popup Window.
If you have more than one Popup Window in the page, it may be a good idea to name them. To do this, double click on the Popup Window’s name in the Object Label Toolbar. Alternatively, use the Name menu option in the Settings Cog or the Name field in the Widget Settings.
The Close Window Icon
When you add a new Popup Window to the page, you will see a Close Popup Window icon In the top right hand corner of the Popup Window. This icon is used to close the popup window and you can position it where you want within the Popup Window. Just drag and drop it to its new location. The icon uses Pin Settings to set its location in relation to the edge of the Popup Window. You can change the Pin Settings in the Position section of the Metrics Inspector. Click on the Pin Settings button to make the changes you want. You will see the guide lines relative to the edges of the Popup Window change as you do change the Pin Settings.
In addition to changing the location of the Close icon, you can also change its color using the Fill section of the Shape Options tab. Don’t forget to change the icon’s mouse over and mouse down colors too if you want. Click on ‘Normal’ menu option in the Fill section, then select ‘Mouse Over’ or ‘Mouse Down’ then set the Color Fill as you want.
You can also change the icon to a different one if you want, Look further down the Shape Options tab and you will see the icon in the Background Mask section. Click on the icon in the preview window and choose a different one from the selection.
Triggering The Popup Window
One important aspect of Popup Windows is when they should be triggered. Use the Popup Trigger section in the Settings to set the option that you want: Immediately, Delay, Scroll, On Page Exit Intent or Manual. Use the ‘On Page Exit Intent’ to capture the visitor when they try to exit the page. Use the Manual option when triggering the Popup Window in conjunction with an On Click Action.
In addition to the type of action that makes the Popup Window appear, you should also consider the frequency of when it appears. In most instances you will not want the Popup Window to be triggered every time your visitor interacts with a page. This would probably dissuade your visitor from returning if the Popup Window displays every time they interact with the page. Fortunately, there is an easy solution: The Cookie section in the Popup Window’s Settings.
To use this feature, first, create a Cookie Name, then set the Cookie Expiration (days) field, to the number of days to delay before re-showing the Popup Window.
EverWeb’s Popup Windows are a great new feature, that help you generate leads, focus the user and provide versatile Call-To-Action scenarios when you need them!
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
The new EverWeb 4.5 version has recently been released to the public and is packed with lots of exciting new and updated features! One of the headline features is the all new Carousel Widget!
We think that the Carousel widget is a truly amazing, highly customizable, multi-media slider widget, built around EverWeb’s Container technology. In this post we will explain why we think this is a next level widget and how you can get acquainted with it! There’s also a video at the top of this post with a detailed, step by step guide to the widget for those of you who may be new to EverWeb or its Container technology.
A Truly Versatile Multi-Media Widget
The key feature of the Carousel widget is that it lets you combine disparate object elements together: Images, videos, widgets, maps, Containers and text, all within your slide show. Six different animation styles let you show off your mixed media slides in the best way possible. As you would expect, you also get the standard slide show features such as autoplay and loop. There are also options to adjust the slider speed and to pause the slide show on mouse over.
In addition to being able to mix media as you want, you can also add in EverWeb 4.5’s new features such as Background Masks, Overlay Effects, On Click Actions, Margins and Padding and Containers, to give the slide show the look and abilities that you require of it.
What You Can Use The Carousel Widget For…
The ability to use mixed media in your slide show makes this widget ideal for an almost unlimited range of tasks. Here are some suggestions:
Educational Subjects: Step by Step guides
Information Sharing: e.g. resource guides, general company info guides
Directions: e.g. you could provide step by step directions to a location – real or virtual
Instructional slide shows, e.g. cooking recipes.
How To Do Instructions: e.g. DIY instructions
Business Case or Course Outlines
Product or Services Sales
Customizable Click-Through Options
In addition to selecting the slide show animation, you can also change the slide show background and the spacing between slides. The Previous/Next buttons can also be customised. You can move these buttons independently to your desired location within the widget. Additionally, you can also change the icons and/or the icon colorsl.
Getting Started with The Carousel Widget
To see the Carousel widget in action, just drag and drop it from the Widgets tab on to the page. In this example, we will add it as a full width object in a Responsive page. Once you have added the widget to the page, just drag and drop the media that you want in to the widget e.g. you could use EverWeb’s Free Stock Media library to add images to the slide show. You can also, for example, add a shape to the widget then use the Shape Options: Fill options to change the shape to a video or map fill.
Customizing The Carousel Widget
In our example, the Carousel Widget uses the full width of the page, as indicated by the Full Width info box displayed just outside of the bottom left hand corner of the widget. The widget is populated with TextBoxes, images and video fills. After adding in your media, the next thing to do is to set the type of slide animation that you want. There are six options to choose from in the Slide Animation drop down menu in the Widget Settings: Slide, Fade, Cube, Coverflow, Flip and Cards. For some Slide Animations, such as Cube, you will need to preview and use the Previous/Next buttons to see the animation effect in action.
After selecting your slider animation you might want to re-order some of the objects in the slide show. To do this just drag and drop the objects you want to move left or right to their new locations. A vertical blue dashed line will help you with placement of the object. If you need to, you may have to use the Previous/Next buttons to scroll the slideshow along when placing objects.
Once you have placed objects where you want them, you might want to change the spacing between them. You can do this globally through the Widget Settings’ Slide Spacing option. If you want to space objects individually, select the object you want then use the Margins & Padding options.
Setting the Slide Show Background
Now that the objects in the slide show are where you want them, you now might want to set the background of the slide show. Click on the Carousel widget itself. You should see the Widget Settings displayed in the Inspector Window. Next, go to the shape Options tab and use the Fill section to set the background that you want. This could be a different color, a gradient fill, or an image. Note that some options such as Slide Show, Video, and Map Fill are not available for use.
In addition to setting the slide show background, you can further customize it with Border Options to give it rounded corners. You could also apply a line stroke option to it to highlight it on your page if you want. This can produce an interesting effect; for example, if you set the stroke to 150, you will see the background is now smaller than the images on top of it.
Customizing The Previous/Next Buttons
You can further customize the look of the widget by changing the appearance of the Previous/Next buttons. You can start by moving the button around the widget to place them where you want. You can use EverWeb 4.5’s new Pin Settings feature here to pin the buttons to the top, bottom, left, and right sides of the widget. Use the info boxes from the vertical and horizontal guides to help you line up the buttons equally from each edge if required.
We recommend that you do not uncheck the Always on Top setting. If you do, it may make if difficult to re-locate the buttons later on. If you cannot find the buttons, you may have to remake the slide show.
You can also change the color of the buttons using Fill options in the Shape Options tab. if you want, you can also change the type of button that you are using as well. Again, in the Shape Options tab, take a look at the Background Mask section. You will see that the image used for the button is shown in the SVG section. You can rotate the button if you want, or replace it with another button image simply by clicking on the existing image displayed in the square. When you do this, you will be presented with a library of different SVG images that you can use. For Previous/Next buttons, we recommend using images from the Arrow section of the SVG library. As the images are SVG files, you can also scale them without loss of resolution which is handy to know.
EverWeb’s new Carousel widget expands the capabilities of what a slide show can do. Also, there’s a wealth of customization options available for the slide show itself as well as the media used in it, via options such as Border Options, Background Masks, Padding & Margins and Overlay Effects.
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
We are thrilled to announce the immediate release of EverWeb version 4.5 for macOS and Windows. Our latest update is one of our biggest releases yet! On-Click Mouse Actions, Popup Windows, Object Pinning, Background Masks, Overlay Effects and the all NEW Carousel Widget are just some of the brand new features that we’ve added to this release. Check out the full list below!
We’ve also added lots of improvements based on your feedback as well as the usual fixes. See below for the full list of what’s new, updated and fixed our latest EverWeb release.
Which Version of EverWeb is for You?
EverWeb 4.5 is available to you on the following Operating Systems:
If you are running Microsoft Windows 10 or 11.
If you are running an Intel Mac running macOS High Sierra, Mojave, Catalina, Big Sur, Monterey, Ventura, Sonoma or Sequoia.
If you are running an Apple Silicon Mac running macOS Ventura, Monterey, Big Sur, Sonoma, or Tahoe, EverWeb will run natively without the need to use Rosetta 2.
Older Operating Systems can run the following versions of EverWeb:
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.
EverWeb 4.5 Includes…
[NEW] Customizable Popup Windows: Create visitor-facing popup windows with full design control. • Show a popup immediately, after a delay, at a scroll position, on exit intent, when an object is clicked, or anchored beside another object. • Display popups in the center, corners, edges, fullscreen, full-height panels, or push-content layouts. • Customize overlay color and transparency. • Prevent a popup from appearing again using browser cookies with configurable expiration. • Allow visitors to close the popup by clicking outside it. • Lock page scrolling while a popup is open. • Manage popup windows from the new Popup Windows menu and toolbar.
[NEW] Mouse On-Click Actions: Add interactive On-Click Actions to any object on your page. • Show, hide, or toggle other objects. • Open popup windows or popup windows anchored to the clicked object. • Control videos including play, pause, stop, mute, unmute, and volume controls. • Control Carousel widgets. • Move or resize objects when clicked. • Scroll objects into view. • Display alert messages. • Chain multiple actions together with optional delays. • Supports keyboard accessibility using Tab, Enter, and Space.
[NEW] Carousel Widget: Create responsive carousels containing text, images, videos, widgets, containers, and other page content. • Auto-play slides with configurable timing. • Pause playback when the mouse hovers over the carousel. • Swipe, arrow, and pagination navigation. • Slide, fade, flip, and card transitions. • Looping, centered slides, spacing controls, and multi-slide layouts. • Custom navigation buttons.
[NEW] Containers can now use either Auto Height or Fixed Height. • Auto Height automatically adjusts to fit content. • Fixed Height maintains a specific height. • Auto Height supports minimum and maximum height limits.
[NEW] Objects inside row and column containers can now be positioned freely without affecting the layout of other objects. • Free-positioned objects can be pinned to container edges. • Other objects continue to use the container’s layout settings.
[NEW] Pin Objects to Containers or Browser Edges: Keep objects fixed relative to a container or the browser window as the page resizes. • Pin objects to the top, bottom, left, right, or center. • Use pixel or percentage offsets. • Constrain objects to opposite edges so they always stay within the page bounds
[NEW] Every object can now be assigned a custom name. • Rename objects from the Inspector, the right-click menu, or directly on the design canvas. • Hidden objects are easier to locate from the right-click menu.
[NEW] Apply SVG masks and gradients to shapes and popup windows. • Includes a built-in SVG mask library. • Rotate masks directly from the mask picker. • Works with shadows and border radius settings.
[NEW] Apply visual effects directly to any object on your page • Blur • Brightness • Contrast • Saturation • Hue • Sepia • Invert • Grayscale
[NEW] Image Focus Area Controls: Choose the most important part of an image when using Scale to Fill. • Images remain focused on the selected area at all responsive breakpoints. • Includes a dedicated Focus Area editor. • Supports clearing and editing focus areas at any time.
[NEW] EverWeb can now export multiple image sizes for responsive websites, reducing download sizes on smaller devices.
[NEW] HTML Code widgets can now run inside an isolated iframe so that custom code doesn’t affect other objects • Prevents custom code from affecting the rest of the page. • Automatically enables iframe mode when needed. • Supports automatic height adjustment.
[NEW] Projects now remember your workspace layout. • Window size and position. • Open folders. • Selected page. • Horizontal and Vertical Splitter positions.
[NEW] Set minimum and maximum width and height values for shapes, including minimum widths for full-width objects.
[NEW] Set a maximum content width for Containers
[NEW] New Align and Distribute controls have been added to the Metrics Inspector.
[NEW] Validate Footer Code directly from Site Publishing Settings.
[NEW] Hide responsive sections at specific breakpoints.
[NEW] Widgets now support shadows, borders, and picture frame styles.
[NEW] You can now set a Show On Device value for Ultra Wide desktop screens
[NEW] You can set now a Desktop Breakpoint value to separate Desktop and Ultra Wide Desktop screens
[NEW] If you are having publishing issues, you can now generate a Publishing Diagnostics report to help troubleshoot the issue from the Help-> Publishing Connection Diagnostics menu option.
[IMPROVED] Faster Container and Responsive Row resizing. [IMPROVED] Better layout update performance throughout the design canvas. [IMPROVED] Older projects now default Containers to Fixed Height mode for compatibility. [IMPROVED] Improved drag-and-drop feedback when working with Containers and Carousels. [IMPROVED] Improved support for nested Containers and deeply nested child objects. [IMPROVED] Improved handling of free-flow objects inside Containers. [IMPROVED] Improved support for wrapped Container layouts. [IMPROVED] Improved support for always-on-top child objects inside Containers. [IMPROVED] Faster object loading when opening pages. [IMPROVED] Faster page switching in large projects. [IMPROVED] Improved .htaccess generation for redirects and publishing settings. [IMPROVED] Improved sitemap generation when page extensions are removed. [IMPROVED] 404 pages now return proper HTTP 404 status codes. [IMPROVED] Improved image optimization for responsive websites. [IMPROVED] Improved image export accuracy across responsive breakpoints. [IMPROVED] Improved handling of rotated images on Windows. [IMPROVED] Improved publishing accuracy for Master Page objects from older projects. [IMPROVED] Improved Google Font generation when fonts are not installed locally. [IMPROVED] Improved Global Styles font handling in non-English operating systems. [IMPROVED] Improved browser preview performance for pages containing large videos and files. [IMPROVED] Faster image drawing on the design canvas. [IMPROVED] Improved Retina image size handling. [IMPROVED] Improved display of hidden objects on the design canvas. [IMPROVED] Improved rendering of long text objects. [IMPROVED] Optimized project saving performance. [IMPROVED] Widgets in the Insert menu are now listed alphabetically. [IMPROVED] Contact Forms now include basic spam filtering. [IMPROVED] Required Contact Form fields now work correctly across multiple columns. [IMPROVED] Additional web crawlers are now blocked automatically through .htaccess rules. [IMPROVED] Improved error handling when EverWeb cannot write to the Application Support folder. [IMPROVED] Additional interface text has been localized and translated. [IMPROVED] Improved widget previews on Windows.
[FIX] Fixed a crash on Windows when using widgets containing Styled Text controls. [FIX] Fixed a crash that could occur when using certain bold fonts. [FIX] Fixed potential crashes involving FTC text fields. [FIX] Fixed duplicate document windows appearing in the Window menu on macOS. [FIX] Fixed publishing failures that could occur while writing final website files. [FIX] Fixed membership pages not being protected when sign-out or profile buttons were not present. [FIX] Fixed Responsive Rows not collecting all child objects in built applications. [FIX] Fixed blog index and archive positioning issues on fixed-width pages with footers. [FIX] Fixed blog pagination issues. [FIX] Fixed Blog Archive and Blog Posts margin settings not being respected. [FIX] Fixed Blog Archive spacing settings not being respected. [FIX] Fixed opacity rendering issues with line shapes. [FIX] Fixed rotated objects on Master Pages publishing at incorrect positions. [FIX] Fixed container drawing issues on fixed-width pages. [FIX] Fixed containers with borders drawing incorrectly when no fill color was applied. [FIX] Fixed rotated objects inside Container Rows publishing at incorrect positions. [FIX] Fixed vertical text movement issues inside Containers. [FIX] Fixed pinned lines drawing incorrectly when resizing the canvas. [FIX] Fixed pinned offset calculations conflicting with shape backgrounds. [FIX] Fixed Containers changing position when using Bring to Front or Send to Back. [FIX] Fixed object labels not refreshing correctly after selection changes. [FIX] Fixed the right-click menu not always showing Container child objects correctly. [FIX] Fixed the Inspector changing tabs unexpectedly when renaming pages. [FIX] Fixed Inspector updates when changing settings from canvas cog menus. [FIX] Fixed website renaming issues in the Projects window. [FIX] Fixed nested directory renaming not saving correctly. [FIX] Fixed cmd-click asset duplication renaming the original asset. [FIX] Fixed asset selection labels sometimes displaying incorrect information. [FIX] Fixed full-width objects overflowing outside Container Rows. [FIX] Fixed full-width Containers with image fills overflowing horizontally. [FIX] Fixed Scale to Fill objects not centering correctly inside Containers. [FIX] Fixed free-flow Container layout issues when containers changed height. [FIX] Fixed drag-and-drop indicators occasionally remaining visible after a drag operation. [FIX] Fixed issues when pasting objects into projects containing non-Latin characters. [FIX] Fixed Text Section widget form field padding issues. [FIX] Removed default 250-character alt text from the FlexBox widget. [FIX] Improved YouTube video handling in the FlexBox widget. [FIX] Fixed duplicate image support in Image Gallery widgets. [FIX] Fixed Responsive Image Galleries occasionally losing their height. [FIX] Fixed animation settings causing scroll position issues. [FIX] Fixed preview page reloads reverting unsaved text changes. [FIX] Fixed the QR scanner and added a copyable URL field. [FIX] Removed the unused country list from PayPal Modern. [FIX] Fixed Container move indicators alignment issues while scrolling.
How To Update EverWeb for Windows
You can easily update EverWeb for Windows by either:
Launching EverWeb then opening a project file. From the Help menu at the top of the screen select ‘Check for Update’ or by
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 EverWeb for macOS
You can easily update EverWeb for macOS by either:
Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
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.
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.
Nobody plans for their site’s visitors to hit a dead end, but it can and does happen. A link to a page goes stale, a page gets renamed, or someone simply mistypes a URL when looking for a particular page. With a custom made 404 page in your EverWeb project, your visitors will no longer get a generic browser error has no navigation, no brand, or no way back into your site. Stop your visitors leaving your site when they don’t need to with a custom 404 Page Not Found page.
EverWeb makes it easy to create a custom 404 page that keeps visitors inside your website, points them somewhere useful, and turns an awkward moment into a positive brand impression. Simply design the 404 page you want yourself, just like any other page in your EverWeb project, then assign it in either EverWeb’s Site Publishing Settings, or if you use your own hosting provide, in cPanel.
In this post, we will look at what causes the 404 Page Not Found error in the first place, then we will look at how you can design your own 404 page.
What Causes a 404 Error?
The three most common causes of a 404 Page Not Found page appearing are:
An outdated link on your website pointing to a page that no longer exists
A renamed or deleted page after a site update
A mistyped URL entered directly into the browser by a visitor
All three are common, and all three are things you can’t fully prevent. What you can control is what your visitor sees when it happens.
Step 1: Design Your 404 Page in EverWeb
Start your 404 page by adding a new page to your EverWeb project. You can use a theme template page if you want. The important point to remember though is that the finished page should feel like part of your site, not an afterthought.
What to put on your 404 page
A good 404 page does three things: it acknowledges the problem, reassures the visitor, and gives them somewhere to go. At minimum, include:
A clear, friendly message — something like “Oops, we can’t find that page” works better than the cold technical phrase “404 Not Found”
A link back to your home page — this is the single most important element to include
Navigation links — include your site’s navigation to the page so visitors can find what they were actually looking for
A search box (optional) — useful for larger sites with lots of content
Your branding — logo, colours, and fonts should all match the rest of your site
Keep the tone light if it suits your brand. A little humour or personality can go a long way on an error page. What you want to avoid is leaving your visitor with no options and no clue what to do next.
Responsive vs. Fixed Width Page Layouts
How many 404 pages you need to create depends on the page layout type you’re using:
Responsive Page Layout: You only need one 404 page. Because a responsive page automatically scales to fit any screen size, a single page handles desktop, tablet, and mobile visitors alike.
Fixed Width Page Layout (e.g. Centered Layout): You’ll need to create two separate pages — one designed for desktop and one for mobile. See the section below on linking them together.
Step 2: Assign Your 404 Page in Publishing Settings
Once your 404 page is designed, you need to tell EverWeb (or your hosting provider) to serve it whenever a visitor hits a missing page. How you do this depends on where your site is hosted.
EverWeb+Hosting Users
This is the simplest path. EverWeb handles the 404 redirect for you directly from within the app, there’s not need to go anywhere else.
Go to File ? Edit Publishing Settings (or click your website’s name in the Web Page List)
In the Site Publishing Settings screen, locate the 404 Not Found Page option
Use the dropdown menu to select the 404 page you created from your list of project pages
Publish your site
That’s it. EverWeb will automatically serve your custom page whenever a visitor hits a URL that doesn’t exist on your site.
EverWeb + Third-Party Hosting Provider Users
If you use your own Host Provider to publish your EverWeb made site, the process has one extra step. As EverWeb does not control your server’s error handling, you’ll need to point to your 404 page manually through your hosting provider’s control panel (typically cPanel).
First, publish your site through EverWeb as normal, including your 404 page. Once published, your 404 page will have its own live URL.
Log in to cPanel (or your hosting provider’s control panel)
Find the Error Pages section and select the 404 error type
Enter the full URL of your published 404 page
Save your settings
Your hosting provider will now redirect all 404 errors on your domain to the page you designed in EverWeb. Check with your Hosting Provider for more information if needed.
Step 3 Fixed Width Websites Only: Linking Your Desktop and Mobile 404 Pages
If you are using a fixed width page layout, you will have created separate desktop and mobile versions of your 404 page. After creating these pages, you need to link them together so that EverWeb knows to show the right one on the right device.
In the Web Page List, select your desktop 404 page
Open the Page Settings tab in the Inspector window
Scroll down to the Mobile Settings section
In the Mobile Page dropdown, select One of My Pages
In the Page dropdown that appears, select your mobile 404 page
Once linked, EverWeb will automatically serve the desktop version to desktop visitors and the mobile version to visitors on a phone — no extra work required after publishing.
So What Makes a Great 404 Page?
You can make a basic 404 Page that will get the job done, but with a little extra thought you can make your 404 page genuinely useful. Here are some tips…
Use Your Brand: Use the same header, footer, colors, and fonts as the rest of your site. A jarring, un-styled error page feels like a bug. A well-designed one feels intentional.
Add The Human Touch: Generic error language (“The requested URL was not found on this server”) is cold and confusing for non-technical visitors. Write like a person: “Sorry, we can’t find that page — it may have moved or been removed.”
Present a Clear Next Step: A button back to your homepage should be prominent. If your site has a search feature, include it. The goal is to keep the visitor engaged, not send them back to Google.
Keep It Simple: A 404 page isn’t a Home or landing page. Keep it simple, focused, and fast to scan. One strong call to action is better than five competing ones.
Why This Matters for SEO
A custom 404 page doesn’t directly improve your search rankings, but it does prevent something that can quietly hurt them: visitor bounce. When someone hits a dead-end error page and immediately leaves your site, that’s a negative signal. A well-designed 404 page that redirects visitors back into your content can meaningfully reduce that drop-off.
It’s also worth auditing your site periodically for broken internal links — the most common cause of 404s you can actually fix. Tools like Broken Link Checker (a free web-based tool) can crawl your site and surface any internal links pointing to pages that no longer exist.
Summary
Creating a custom 404 page in EverWeb is a quick win that makes your site feel more polished and keeps visitors from hitting a dead end. Remember:
Design your 404 page in EverWeb like any other page
Assign it — via the dropdown in Site Publishing Settings (EverWeb+Hosting Users) or via cPanel (Third-party Hosting Providers)
Link desktop and mobile versions of your 404 page if you’re using a fixed width (Centered) layout
If you haven’t set up a custom 404 page yet, it’s one of those small things that only takes twenty minutes and makes a real difference to your visitors’ experience.
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
When developing your website, you will be adding and moving objects around the page so that all your text, images, and media are correctly placed and spaced. For fixed width page designs in EverWeb this is straightforward, you just drag and drop. If you are working with Responsive pages, you may find that you have to work in a more constrained way due to the nature of Responsive Web Design.
Moving Objects Around Responsive Pages
EverWeb helps you with object placement in responsive pages in a number of ways. In this post, we will be referring to the features found in EverWeb 4.4. If you are using an earlier version of EverWeb, some of the features described below may not be present, or may work in a different way than described below.
When you add a full-width object, for example a shape, to the page, you will see that its Object Label Toolbar includes up and down arrow icons so you can move the object up and down the page. You can also just drag and drop the shape up or down the page, no problem, and use the up/down icons only when you need to be sure of object placement, for example in a complex page design.
If you are using a full-width widget, such as the FlexBox or Responsive Row widget, or a Container, you will also notice that there is a Move icon in the top right-hand corner of the object. In a Responsive page, this can be used to move the object up and down the page. So far, so good, but what happens when you want to move objects that have been placed within other objects?
Moving Objects Contained Within Other Objects
When you use a Container or the Responsive Row widget in a Responsive page layout, you will be using such objects for a reason – to place other objects inside them. When you do this, there may be times where you want to move one or more objects to a different location within the Container or Responsive Row. Easily done, just drag and drop the object to its new location. As you do so, you will see a vertical or horizontal dashed line appear between the object being moved and the objects that are not being moved. Again, this is to help make object placement easier visually.
Moving objects between Responsive Rows and/or Containers is also a drag and drop operation and again, you may see a dashed guideline to hope you with placement when you do this.
When using a Container Free Flow, you will see the Move icon again if you have other Containers within the Container Free Flow. In this case, you can move the inner Container in any direction around the Container Free Flow.
Embedding Objects
Drag and drop is usually the easiest way to move an object from A to B, but in some instances you may prefer a different approach. This may be the case when you have a complex page layout, or when you want to move an object from the top of the page to the bottom of the page. In such cases, you don’t want to accidentally drop the object in the wrong place, as this can disrupt your page layout. The simple option in this scenario is to use the Embed In option. All you need to do to use this feature is right-click, or secondary-click, on the object you want to move. You will see a menu of options. Scroll down to Embed In. Off of this menu, you will see a list of objects that you can embed the selected object into. Select the object you want to embed the selected object into.
Naming Objects
If you have a complicated page design, you may want to name some or all of the objects that you use on your page. This makes referencing them easier later on. In our example above, the list of objects to embed in to might have been, for example, ‘Container 1′, Container 2’, ‘Container 3’. If these objects had been named it would probably have made it easier to choose which object to embed the selected object into e.g. ‘Header Container’, ‘PayPal Container’, ‘Footer Container’.
In EverWeb 4.4 you can easily rename many object types using the Widget Settings in the Inspector Window or by clicking on the Settings Cog in the Object Label Toolbar of the object you want to rename. As of EverWeb 4.5, you will be able to just double click on the object’s name in the Object Label Toolbar to be able to rename it.
Removing Objects From a Container or Responsive Row
The easiest way to take an object out of another object is to drag it outside of the object then drop it to where you want. If, however, you want the object to be independent of any other object, then right click, or secondary-click on the object you want to remove. From the menu options, choose Remove from Container, or Remove from Responsive Row. In both cases, the object that is removed will become a full width object. You can then decide what you want to do with the object in question.
Remember Pick Layer!
If you have any difficulties selecting the object that you want to move, for example, you may have objects on top of each other, then right click on top of the object then use Pick Layer. This menu option will show you the list of objects that are stacked on top of each other so that you can select the correct one to move or manipulate.
Using EverWeb’s Embed In, Remove from and Pick Layer options make it easy for you to choose the object you want and move it to where you want it hassle free!
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
Twitter
Facebook
Youtube
Blog RSS