Mac SEO Blog

Responsive Web Design is a great way to build a website in EverWeb that is consistent across all devices. You only need to design one page which will adapt to all device types. You no longer need to develop and maintain separate mobile pages in your website. The trade off, though, is that you have to put more care and attention in to your page design than you might have done before.

When developing your website, it may be easier to think of designing pages for use on desktop computers rather than designing pages for mobile devices. This makes sense, as it may be easier to take objects out of your design as you shrink the page down towards mobile device sizes, rather than adding objects in to the page as you upscale from a mobile page towards a desktop page size.

This design approach is generally fine, but can cause some problems when viewing your page on a mobile device. You may find that the page scrolls horizontally beyond the right hand margin of the mobile device creating a gap to the right of the page.

What Causes The Page to Drift Horizontally?

Ideally, the page should fit the horizontal dimensions of all devices it is displayed upon. The basic problem is that on a mobile device, a desktop page width is being used so the page does not behave in a responsive manner. There are a couple of easy ways to solve this problem which we will come to later, but first, it is important to discuss how the problem is caused in the first place.

Factoring In Minimum Device Width

One important factor to be aware of when designing responsive pages is the width of the smallest device that you are designing for. Typically the smallest device type that your website will be displayed upon will be an iPhone SE. The iPhone SE has a horizontal display width of 320 pixels so when designing your pages consider this value as it will help make your pages fit perfectly on the vast majority of devices, both mobile and desktop.

You usually do not need to consider maximum page width, unless you have objects that are too widely spaced out on the page. Our blog, ‘Using Content Maximum Width‘ delves in to this in more detail as does our video, Content Maximum Width, on YouTube.

When adding full width objects to the page, you do not need to consider minimum device width as such objects automatically scale to the available screen width. However, in some instances, you may need to check that the ‘Full Width’ checkbox is still checked in the Metrics Inspector. The ‘Full Width’ checkbox can become unchecked when using the Responsive Row widget. For example, when adding a full width widget inside the Responsive Row widget (e.g. a Text Section, FlexBox or Navigation Menu widget), be careful to make sure that the ‘Full width’ checkbox is still checked if you still want the object to be full width.

Usually, you do not need to add full width objects in to a Responsive Row widget, but there may be specific instances where you may want to do this.

If the object inside the Responsive Row widget is not at full width, it will actually be a fixed width object instead. So, for example, if you have a FlexBox widget that is 1000 pixels wide, on an iPhone SE you will be able to scroll 1000 pixels horizontally across the page.

To solve this issue, either check the Full Width checkbox in the Metrics Inspector to make the object full width or reduce the width of the FlexBox widget down to 320 pixels or less.

Minimum Design Width For Different Device Types

You may be thinking that objects on your page are now limited to a 320 pixel maximum width. Actually, this is not the case as some widgets will automatically scale content according to the device the page is being viewed upon.

The FlexBox and Text Section widgets are good examples of automatic scaling. For example, in the Widget Settings of the FlexBox widget, set Minimum Width, Default Width and Maximum Width values to ‘100%’ for images. This will scale the image properly on all device types. That is all you need to do!

Using Show On Device For Different Device Types

If you are not using widgets such as those mentioned above, you may need an alternative method to make sure that objects appear at the right size on all device types. This is where ‘Show On Device’ in the Metrics Inspector is very useful. For example, you have an image inside a Responsive Row widget that you want to display properly on all device types. Select the image and make it 300 pixels wide in the Metrics Inspector and check ‘Show on Mobile’ in the ‘Responsive’ section. Uncheck the other three Show on Device options. The image will probably disappear as it is only visible on mobile devices. You can see the image outline by using the Window-> Show Hidden Objects menu. Also, if you reduce the width of the Editor window enough the image will appear.

Add the same image from the Assets List into the Responsive Row widget. This time make it 600 pixels wide. In the ‘Responsive’ section of the Metrics Inspector check ‘Show on Tablet’ and uncheck the other three options. Again the image may disappear but you will see its outline displayed if you have the ‘Show Hidden Objects’ menu option set on.

Finally, add the same image a third time and make it e.g. 775 pixels wide. Check ‘Show on Desktop’ and ‘Show on Wide Desktop’. Uncheck the other two options.

When you preview the page, you will notice that as you shrink the size of the browser window, the image in the Responsive Row will be fit properly for all device sizes, i.e. 300 pixels wide on a mobile device, 600 pixels wide on a Tablet and 775 pixels wide on desktop and wide desktop devices.

Testing Your Responsive Pages

When finished, it is recommended that you preview the page in Safari’s Responsive Design Mode. Safari has possibly the best responsive design browser feature. To enable it in Safari, go to the Safari-> Preferences menu. Click on the Advanced button then check the ‘Show Develop menu in menu bar’ box. Close the Preferences dialog box. You will now see the ‘Develop’ menu in Safari’s menu bar. Use the Develop-> Enter Responsive Design Mode menu option to test your website’s pages against different device types.

Responsive Design can be challenging, but with a bit of thought and creativity, problems such as horizontal page drift can be easily resolved.

If you have a comment or question about this blog post, please let us know in the Comments Section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

It’s been a busy first half of 2019 as there is always a lot going on with EverWeb. We thought we would bring you a round up of the latest EverWeb news all in one place!

The Latest News On EverWeb 3.0

The most current version of EverWeb is 2.9.1 was released back in February. Development of EverWeb version 3.0 is well underway and we hope to have a public beta available within the next few weeks, followed by the official EverWeb 3.0 release soon after if all goes to plan with the beta. Why so long between releases? Well, EverWeb 3.0 packs an amazing amount of new and improved features, such as Contact Form Enhanced add-on, improved asset management, reCaptcha in Contact Forms, blog pagination, lots of improvements to widgets as well as the usual maintenance and bug fixes. We hope to preview more new EverWeb 3.0 features soon, so stay up to date by checking the Announcement Section of the EverWeb Discussion Forum!

EverWeb & macOS Catalina

Apple’s World Wide Developers Conference took place in June 2019 with the usual news of the upcoming features for all of Apple’s software platforms. In respect to macOS, the new 10.15 version, Catalina, was announced. This release is now in its developer and public beta testing phase with a scheduled release this fall. One important feature of the upcoming release is that it adds more security to the OS which means that these changes have to be integrated in to apps such as EverWeb. If you are trialling the beta version of MacOS Catalina, the current version of EverWeb, 2.9.1, will not run. The same will also probably be true of EverWeb 3.0 when it released in the next few weeks. [UPDATED] However, when released, EverWeb 3.0 will support MacOS Catalina when the new operating system debuts.

EverWeb Third Party Website Resources

There are some new EverWeb related third party websites live for you to enjoy. The first is everwebgalleries.com which focuses on the needs of photographers. The website is currently offering two new, free widgets which are currently in beta test. The first is the Categories Image Gallery widget which lets you group photos in to categories e.g. you could have gallery containing black and white photos in one category, color photos in another category and and ‘All’ category that contains both black and white and color photos. The second widget is an Image Carousel, which is just that, a carousel of photos that you define. You can add change the speed of the carousel and the number of images you want to scroll at each turn of the carousel. If you have any feedback on these widgets, just use the Contact form in the About menu of the website.

EverWeb PowerUp is a site that focuses on Theme Templates offering a number of free, and for purchase, theme templates. There are also widgets available including a dropdown menu widget, a cookie consent widget and an image compare widget like those you sometimes see on news websites.

For more theme templates, Everything EverWeb has a variety of contemporary themes available to purchase. There’s also a quick guide to blogging in EverWeb which is available through the Apple Book Store.

And last, but not least, Roddy at EverWeb Widgets continues to be the foremost and prolific provider of third party widgets for EverWeb. Roddy’s just released a Toolbar widget to help solve the problem of converting your fixed width website to a responsive layout then wondering what to do with the icons for email, phone and social media links?

Updated YouTube Videos and Udemy Course

We are currently updating some of our older YouTube videos replacing those featuring EverWeb’s user interface from before EverWeb 1.7 with the UI of the current EverWeb release. This also gives us the opportunity of expanding the videos to include EverWeb’s newer or improved features at the same time.

If you have a Udemy account, you can also access our EverWeb Website Builder course absolutely free. The 33 video course is also being updated at the moment to replace older content with contemporary content and improved descriptions. We hope to be adding new courses in the future!

You may have also noticed that our video’s Video Poster Images (i.e. the title card) have either a black or blue background. A black background is used for videos about responsive website design features and tutorials whilst the blue background is used for all other subjects in EverWeb.

We’re really looking forward to bringing you EverWeb 3.0 in the near future and lots of new and exciting features in the second half of the year. If there is anything you would like to see in EverWeb, or if you have any comments, please feel free to let us know in the Comments Section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s Assets List is where your website project file’s image and external files such as audio, video and PDF files are stored and organized. The upcoming EverWeb 3.0 release will give the Assets List even more flexibility as it will introduce folder organisation so you can manage assets just as you want. There will also be faster file importing, saving you time and effort. Whilst we wait for the new EverWeb release to debut in the next couple of months, it is still worth taking a look at the capabilities of an existing Assets List feature: The Preview Eye.

As you may already know, you can quickly preview any image file in the Assets List by dragging it a little bit out of place in the list. This technique will show you a thumbnail of the image. If you do not want to use the image file on your page just let it drop back in to the Assets List, otherwise drag and drop it on your page. When you use the image file on your page, it is still listed in the Assets List so that you can reuse it elsewhere in your project file. This saves you a lot of time and effort as well as keeping the project file itself smaller in file size.

Another way to preview an image file is to click on the Preview Eye icon to the right of the image file name. When you click on the Eye, a Preview window of the image opens. You can resize this window as you want to show a larger or smaller preview. The Preview window has two buttons above the image at the top of the Preview window. An ‘Open with Preview’ button and a ‘Share Sheet’ icon button.

Using Apple’s Preview App

If you click on the ‘Open with Preview’ button, this will launch Apple’s own Preview app. The app opens in its own window and allows you to quickly edit the image file. There are a number of markup tools available so that you can annotate the image, add a signature to the image, draw on the image or even add a sketch.

When you make any changes to the image in Preview, a copy of the file is created so you do not affect the original file so if crop the image Preview will ask tell you that it will make a duplicate for you to work on. In this case you may also want to consider masking the image in EverWeb instead once you have placed it on to the Editor Window.

The Preview App also allows you to change the colors of the image, the size of the image and to rotate the image. You can even duplicate the image file, save it as a different filename or change the file type from one to another if you want e.g. from JPG format to PNG format.

If you have a standard resolution image and want to upscale it to a retina ready image, Apple’s Preview is perfect. Find our more about how to do this in our Retina Ready Images video.

When you make any change to an image file, you will probably want to use your edited document in your EverWeb Project file. To do this, save the edited image file in Preview to e.g. the desktop then drag and drop it in to the Assets List so you can use it later. Alternatively, if you want to replace the original image on the page, drag and drop the edited version of the image file directly on top of the selected, original, image in the Editor Window. When you do this, you will then have both the original file and the edited file in the Assets List.

When you have finished editing the image, close the Apple Preview app.

The Preview Eye and External Files

The other great feature of the Preview Eye is that it allows you to also preview videos and audio files that you may have in your External Files list. When used with a video file, the ‘Open with Preview’ button is replaced with an ‘Open with Quicktime’ button. If you select this option, you will be able to perform some basic editing tasks such as trimming the video, but it is probably best for major edits to use a video editing app such as iMovie or ScreenFlow. For audio, the ‘Open with Preview’ button is replaced with an ‘Open in iTunes’ button so that the file can be added to your iTunes library if required.

Using the Share Sheet Feature

The other key feature of EverWeb’s Preview Eye is that it includes a Share Sheet button. This means that you can share the image file with other apps, such as Mail, Messages, AirDrop and Notes. You can also add the file to the Apple Photos app and other apps that support the Share Sheet functionality. Clicking on the ‘More…’ option allows you to select which apps you want to use in the Share Sheet menu.

The Assets List Preview Eye gives you access to a wider range of features and tools that enables you to perform image editing tasks quickly without having to open fully fledged graphics editing apps in addition to additional video and audio options that make make your workflow just that bit easier!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

Creating a responsive website can be challenging to first time website creators but EverWeb does most of the lifting leaving you free to create the website design you want. EverWeb has may different tools to help you craft your responsive website including the ‘Maximum Width’ option.

About Maximum Width

EverWeb’s Maximum Width option allows you to limit how far objects are to be spread out across the page. You can be find the option in a number of different places within EverWeb, for example in widgets such as the FlexBox, Text Section and Responsive Image Gallery widgets. You will also find Maximum Width as an option in the Metrics Inspector, allowing you to control TextBox, Shapes and full width image widths. And finally, the option is also available in the Responsive Row Widget where it is known as ‘Content Maximum Width’.

Content Maximum Width in the Responsive Row Widget

Using the Maximum width options in EverWeb. can help finesse your website’s that it is perfect on whichever hardware it is viewed upon. The option is especially valuable when using the Responsive Row widget where it is called ‘Content Maximum Width’. As you may already know, the Responsive Row widget is used when you have fixed width objects, such as the PayPal widget, that you want to display properly within a responsive environment.

The Responsive Row widget has a number of different options such as ‘Insert Margin’ to add space between each fixed width object within the Responsive Row widget, top and bottom ‘Padding’ and Vertical and Horizontal ‘Alignment’ options. The Horizontal Alignment option is where we can see how useful the Content Maximum Width option can be. The alignment option allows you to display objects within the Responsive Row widget as either Left, Center, Right, Justify or Center-Justify. In the following example, the Justify-Center option will be used.

Using Content Maximum Width

For this example:

1. Start by adding a Responsive Row widget to the page.
2. Next drag and drop three Text Section widgets into the Responsive Row widget. When dropping the Text Section widget in to the Responsive Row widget, the Responsive Row widget border should become blue indicating that the Text Section is being embedded into the Responsive Row widget.
3. Style the Text Section widgets with an image and some text.
4. When adding an image to the Text Section widget, set the Width value to 180 pixels wide and set the Height to ‘auto’ so that the image retains its proportions.
5. For each Text Section widget set the width of the widget itself in the Metrics Inspector to 200 pixels wide.
6. Next select the Responsive Row widget by clicking in an empty area of the widget. Click on the Widget Settings button if these are not already displayed in the Inspector Window.
7. Add some space between the Text Section widgets by setting the ‘Insert Margin’ value to 30.
8. Finally set the Horizontal Width value in the Alignment section to ‘Justify-Center’.

Now that the Responsive Row has been set up, Preview the page and increase and decrease the width of the browser window to see the effect. What you should see is that the space between each Text Section widget gets larger as you increase the width of the browser window. This will create a lot of white space between the Text Section widgets which does not look good on a laptop or desktop. Your Text Section widgets may also appear to be ungrouped which you might not want either.

To resolve this problem, we will need to set a value for Content Maximum Width in the Responsive Row widget, so first go back to your EverWeb Project file. in the ‘Content Maximum Width’ field, the default value is set at 0 which means the whole width of the Responsive Row widget. Change this value to 800 and Preview again. This time you will notice that the three Text Section widgets remain grouped together. As you increase the browser width, the space between each widget does increase but only by an acceptable amount. You may want to experiment with setting the ‘Content Maximum Width’ value to e.g. 1000 or 1200 to see the effect.

Calculating Content Maximum Width

The value that you use for Content Maximum Width will depend on the width of the objects within the Responsive Row widget plus the Insert Margin value between each of the objects and any left and right margin that you may have set in the Metrics Inspector. So, in this example we have 200+30+200+30+200+30=690. If you set the value of Content Maximum Width at 691 all widgets will display in a row. At 690 you will have two widgets on the top and one below. A value between 800-1000 pixels, therefore, gives a nice spacing at all times.

Conclusion

Content Maximum Width is a very handy tool to use if you find that objects in the Responsive Row widget are spaced too widely apart when viewed on desktop and laptop computers.

Video Walkthrough

You can also follow the above steps in our Content Maximum Width video on YouTube!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are an EverWeb user who has invested in third party widgets, you can get to the point where the number of widgets in the Widgets tab starts to become a frustrating experience of scrolling to find exactly the right widget that you want.

Whilst EverWeb 2.8’s headline feature was the introduction of Responsive Web Design to the product, widget organization also debuted at the same time. The days of scrolling are over as you can organize your third party widgets easily. Widget organization is designed to be used only when you have, or want to install and manage, third party widgets.

Widget Category Settings

When you click on the Widget tab, you will see the Widget Category Settings directly below the tab. The Widget Category List is on the left hand side and by default is set to display ‘All’ of the widgets you have installed. To the right is the Remove Category button, the Widget Category Settings Cog and the Add Category button. These features allow you to organize and manage your widgets. 

The Widget Category List contains two predefined categories that cannot be deleted and any categories you have created yourself. The predefined ‘All’ category displays all of the widgets installed on your computer. You cannot remove EverWeb’s built in default widgets but you can add, delete and categorize any of your third party widgets. The other predefined category, ‘Default’, lists EverWeb’s own preinstalled widgets. This category cannot be changed in any way. If you do not have any third party widgets installed, their categories will have the same widgets as each other.

Adding Third Party Widget To the Widgets Tab 

Adding third party widgets in to the Widgets tab is easy, just drag and drop your downloaded third party widgets on to the widgets list. You can also add widgets to an existing user created category. First select the category you want from the Widget Category List, then drag and drop the widget into the category’s widget list. 

When you add any third party widgets to the Widgets tab, they will also be added automatically added to the ‘All’ category.

Creating a New Widget Category

To create a new widget category:

1. Click on the ‘+’ button in the Widget Category Settings to add a new category.
2. A dropdown will appear asking you to enter in the name of the widget category you want to create.
3. Enter the name you want then click the ‘OK’ button to finish.

Adding Widgets to Your Widget Category

The newly created category will become the currently selected category. If you have newly downloaded widgets you want to add to the category, add them in the same way as described above.

If you have already added third party widgets to the Widgets tab, you can add them in to your new category as well.

1. First, select the ‘All’ from the category list dropdown.
2. Locate the widget that you want to add to your new category and secondary click on it.
3. A submenu appears. Select the widget category that you want the widget added to..
4. The widget will be added to your selected category, but will also still appear in the ‘All’ category.

Adding a Folder of Widgets

Many third party widgets come in packs, so ideally you want to be able to install all of the widgets in the pack at one time. everWeb makes this easy to do. Just drag and drop the widget pack folder on to the widget list. EverWeb will create a new category with the same name as the folder, which will contain all of the widgets within the folder. The category is named after the folder.

Renaming a Widget Category

To rename a user created widget category:

1. Select the category you want to rename from the Widget Category List
2. Next, click on the Category Settings button.
3. A drop down will appear where you can edit name of the Widget category. 
4. Click the ‘OK’ button to finished. 

Deleting Widgets

As you have already seen when adding a widget to a user created widget category, secondary clicking on a widget opens a submenu. This submenu is also where you can ‘Delete’ the currently selected widget. If you delete a widget, you will be asked to confirm your action. When deleted, the widget is placed in your computer’s Trashcan. If you have deleted a widget by mistake, open the Trashcan and drag and drop the widget back on to the widgets list.

It’s always best to back up any third party widgets you may have in case you need to restore them at a later date.

Deleting a Widget Category

If you want to delete one of your user created widget categories:

1. First select the category you want to delete from the Category List dropdown menu.
2. Click on the Remove Category button.
3. A dropdown will appear asking you to confirm your actions. You can either:
   1. Select ‘Delete Widgets’ to delete the category and the widgets it contains or
   2. Select ‘Keep Widgets’ which will delete the category and move the widgets it contains back in to the ‘All’ category. 

Using the Widgets Tab Organizer is a quick and easy way to keep all of your third party widgets properly organized so that they are always quick and easy to hand.

Video Walkthrough

There is also a YouTube video about the Widgets Tab Organizer available on our YouTube channel. Subscribe today for regular videos about everything EverWeb!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

During the month of May, there is always press speculation about what the future holds for Apple’s major operating systems: iOS, watchOS, tvOS and, of course, macOS. This year is no exception, but one thing is sure… support for 32 bit applications in Apple’s macOS operating system will end with the release of Apple’s new 2019 software for desktop and laptop computers.

The end of 32 bit support has been flagged since June 2018. Last year’s Apple World Wide Developer Conference announced that with macOS Mojave (10.14) there would be warnings when launching 32 bit apps they should be converted to 64-Bit ASAP as they would not be supported in Apple’s 2019 macOS release.

One year later and we’re almost at the next WWDC and the next macOS will then be only a few months away.

If you are still using iWeb, this should give you pause for thought especially if you plan to buy a new Mac with a new OS on it in the near future! Now may be the time to switch from iWeb but will it be easy to do so? With EverWeb, we think it’s really easy! Here’s why…

Why Go From iWeb to EverWeb?

• Both iWeb and EverWeb are drag and drop website builders for the Mac.
• iWeb and EverWeb have similar User Interfaces making the learning curve a lot quicker when moving from one to the other. You’ll get up to speed in EverWeb in next to no time.
• Both products support blogging. You can easily import your iWeb blog in to EverWeb with just a few mouse clicks.
• You can host with your own provider or with EverWeb which gives you extra benefits built directly in to the product such as password protection, 404 page not found, 301 page redirects and regular product updates throughout the year
• EverWeb fulfils the promise of iWeb with responsive web design, template pages, 100’s of free themes, in product SEO for better Search Page Results Rankings, animation effects, PayPal e-commerce built in, in product website project backups, fast, one-click publishing and much, much more.
• EverWeb always keeps up to date with technology, so there is always something new to enjoy with every product update which usually happens every couple of months.
• You will no longer have problems with iWeb crashing or other associated issues that hinder you working. EverWeb has been a 64 bit product for over a year and our regular product releases throughout the year always include stability and maintenance fixes.
• EverWeb comes with 7×24 support 365 days a year if you have a valid user licence. There’s also the EverWeb community where you can ask questions, suggest features that you would like added to the product, try out the latest beta test versions of EverWeb and see what’s available from EverWeb’s third party providers.
• Check out EverWeb’s blog (yes you’re here!) and also our YouTube channel that’s packed width videos about every aspect of EverWeb.
• EverWeb is not a subscription service so you alway keep the product that you initially purchased if you do not want to renew after the first year. You keep the product and any website you have built.
• And last but not least, EverWeb is now in its sixth year and we continue to grow and innovate! We’re committed to delivering the best we can offer to our community.

EverWeb Addon Products

EverWeb can be purchased as a standalone product if you have your own hosting provider, or with EverWeb+Hosting Lite and Hosting Pro options to suit all needs. There are also additional products that you can add to your purchase such as Site Shield Addon for HTTPS Secure websites.

Third party widgets and theme template add-ons are also available if you cannot find exactly what you need out of the box!

Making The Switch Even Easier

EverWeb Professional Services are also available so that if you do not want to recreate your iWeb website yourself in EverWeb, we can do it for you! If you want us to design a brand new website for you we can do that as well with a number of flexible options available.

You can find out more about EverWeb directly from the EverWeb website. Why not download EverWeb today? The download is the full product with the only restriction being that you cannot publish your website either locally or to the Internet unless you purchase the product.

If you have any questions relating to iWeb and EverWeb, please let us know in the Comments Section below.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

One of the new widgets to come with the advent of Responsive web page design in EverWeb is the FlexBox widget. Debuting in EverWeb version 2.8, the FlexBox widget allows you to combine text, images, video and buttons in almost countless ways to give your site a completely customized look.

Using The FlexBox Widget

You can take advantage of the FlexBox widget in a number of different ways. Here some tips on how you can get the best out of the widget:

1. The FlexBox widget is ideal for use on a Responsive Page Layout, however it can also be used on a Fixed Width Page Layout as well. Although not officially supported as you cannot take full advantage of the widget’s capabilities, you can still create great web page designs.
2. If you use the FlexBox widget as a full width object on a Responsive Page Layout, you do not have to embed it in a Responsive Row widget.
3. If you are using the  FlexBox widget as a Fixed Width object, then you will need to embed it in a Responsive Row Widget. If using the widget in a Fixed Width Page Layout you do not have to do this.
4. If you want to add a filled background to the widget, such as a color or image fill, you will need to embed the FlexBox widget in a Responsive Row widget first. With the Responsive Row widget selected, use the Fill Options in the Shape Options tab to change the background to a different color or image. In EverWeb 3.0 this will become simpler as you will be able to add background fills directly to the FlexBox widget itself without the need to use a Responsive Row widget to achieve the effect.
5. When used as a Full Width object, you can apply left and right Margin Settings to the widget using the Metrics Inspector.
6. Save time and effort by duplicating Embedded Objects. The FlexBox is ideal for creating a series of embedded objects in a row that all have the same styling and formatting. Create the first Embedded Object by clicking the ‘Add’ button under the Embedded Objects list box. Add an image or video, text content and a button as you require. Next format and style the Embedded Object as required. When you have finished, click on the ‘Duplicate’ button to replicate the Embedded Object. You now only need to change the second Embedded Object’s image or video, text content and button text and links. You do not need to adjust the formatting and styling as it is already set up.
7. If you cannot add an image to an Embedded Object, first select the Embedded Object in the list. Next click on the Object Type dropdown menu and make sure that you select image. The ‘Choose…’ button in the Image Settings section will now become available. The same applies if you cannot add a video URL, but in this instance select ‘Video’ from the Object Type dropdown menu to make the ‘Video URL’ input box available.  

FlexBox Widget Videos on YouTube

The 8th and final tip is to check out our FlexBox widget videos on YouTube! The first video is called ‘The FlexBox Widget‘ and the second is called ‘Using the FlexBox Widget’s Reverse Wrap Feature‘.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are not yet using EverWeb’s Master Pages in your website, you could be missing out in many ways…

Master pages are perfect for setting standard page layout defaults for your website’s pages such as content and footer height and page and browser background colors. Any settings and objects you add to a Master Page will be inherited by any regular page it is attached to. You can also include objects that you want to see on every page of your site such as company logos, navigation menus and copyright text.

If your website is not using EverWeb’s Master Pages, there are many reasons why you’re missing out…

1. Easy to Add: Master Pages are quick and easy to add, just click on the New Master Page button. If you cannot see the button, drag the splitter bar down to reveal the blue area. You can also add a Master Page by using the ‘+’ button in the Page Settings tab or use the File, New Master Page menu option. Adding a Master Page works in the same way as adding a regular page to your site except that the Master Page is added to the blue Master Page area. When adding a Master Page to your site, you can base it on any Theme Template you want or create your own Master Page using the Blank, or Blank Responsive, Theme Template.
2. Easy to Use: You work on a Master Page in the Editor Window in the same as you do when working with a regular page. Adjust settings and add, edit and delete objects in exactly the same way.
3. Easier to Correct Mistakes and Errors: When you add a Master Page to a regular page, the master page objects can only be edited by editing the Master Page itself. Master Page objects are displayed on regular pages with a black page symbol in their top right hand corner. If a Master Page object needs to be moved on the page for example, just edit the Master Page and the change will automatically appear on any regular pages that the Master Page is attached to.
4. Saves Time: As a Master Page acts like a template, it makes setting up and customizing regular pages a lot quicker. Attaching a Master Page to a regular page saves you having to set up the page again and again. You will also save time maintaining and updating your site in the future. For example, if I want to change the page background color of my site at a later date, I just change the page background color in the Master Page and any regular page using the Master Page will automatically be updated with the change.
5. Better Website Design Consistency: You may have noticed some websites where objects that should be in the same place on each page seem to move slightly when you change pages That’s because the objects have not been added to the exact same place on each page. Using a Master Page eliminates this problem as you only need to add such objects once to the Master page. These objects will then appear exactly in the same place on each regular page. Having a consistent website design looks great and adds to your site’s credibility and professionalism.
6. Master Pages can be used in multiple scenarios: You can create Master Pages for different scenarios and purposes such as creating Master Pages for different groups of pages e.g. one Master Page for each department in a business. You can also use Master Pages in different page layouts e.g. in fixed width page layouts you could use one Master Page for desktop devices and one for mobile devices. You can even create a Master Page to give your blog a unique identity! The possibilities are almost endless!

Master Pages are a valuable tool for anyone building their own website, even if it is a relatively small site. Save time and effort both now and in the future maintenance of your site!

If you have any comments about this post, please let us know in the Comments Section below. We will get back to you as soon as possible.

Video Walkthrough…

You can also catch up with using Master Pages in our YouTube video walk through!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 2.9 introduced ‘Show on Device’, a feature that lets you choose on which device types you want an object to be displayed upon.

Using Show on Device is a great way to tailor your page content specifically for use on mobile through wide desktop devices. For example, you have placed four Text Section widgets directly under each other on your page. When viewing on a desktop computer, you want all four widgets, but on a mobile phone you only want to see three of them as you do not want your visitors to have to scroll through too much information.

Show on Device can be used in either fixed or responsive website designs, although it is probably be more useful in the latter.

Using Show on Device: Example #1

To recreate the example above, follow the steps below:

1. Start by adding a new Blank Responsive page to your EverWeb project.
2. Next add a Responsive Row widget to the page and within this add four Text Section widgets.
3. Style each Text Section widget as desired e.g. add an image, some text and button to each.
4. Make the settings for all the Text Section widgets the same as each other for a uniform look.  
5. Next select the Text Section widget that you do not want displayed on  mobile devices.
6. Go to the Metrics Inspector tab and uncheck the ‘Show on Mobile’ option in the ‘Responsive’ section.
7. To see how this work adjust the width of the EverWeb application itself. As you reduce the right hand margin of the app, the page in the Editor Window automatically reorganises itself.
8. Eventually the Text Section widget you chose to hide on mobile devices will become hidden and will be replaced in the top left of the Responsive Row widget by a grey box with an ‘X’ through it, indicating that at this width the Text Section object is hidden.
9. Preview to test that the objects display correctly at all widths before publishing.

Using View Options with Show on Device

Use the Window, Show Hidden Objects menu option to hide or reveal hidden objects.

To select a hidden object, secondary click in the Editor window and go to the Hidden objects menu option. Select the object you want to see.

Using Show on Device: Example #2

In the second example I am going to ‘replace’ one object with another as the browser width narrows.

In this example I have a full width FlexBox widget inside of a Responsive Row widget on my page. The FlexBox widget contains a lot of text. This is fine when viewed on a desktop device, but on a mobile device I want to show less text. The steps below show you how you can achieve this easily:

1. Start by selecting the FlexBox widget and duplicating it.  You can quickly do this by secondary clicking on the FlexBox widget and selecting ‘Duplicate’ from the menu.
2. Next, secondary click on the duplicate FlexBox widget.
3. Use the ‘Embed In’ option to check to make sure that the duplicate widget is embedded in the Responsive Row widget.
4. Add the duplicated widget in to the Responsive Row widget that contains the original FlexBox widget. Select the Responsive Row widget from the ‘Embed In’ menu choices if the widget has not already been automatically added to the Responsive Row widget.
5. In the duplicate widget, I now remove most of the text, as this widget will only be displayed on a mobile device.
6. Now go to the Metrics Inspector and set the object to ‘Full Width’.
7. Unchecking the  ‘Show on tablet, desktop and wide desktop’ option 
8. Select the original FlexBox widget and uncheck only the ‘Show on Mobile’ option. Keep the other three options checked.
9. Preview to see the results. When you reduce the browser width, the original Flex~box widget will be displayed until you reduce to the browser to a width suitable for mobile devices. When this happens, the duplicated FlexBox widget with less text will display instead of the original widget with the full text.

Video Walkthrough

Checkout our YouTube channel for a video walkthrough of how to use ‘Show on Device‘.

 

If you have any questions or comments about this blog post, please let us know and we will do our best to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are a Google+ user, you should already have been notified by Google that its social media platform, Google+, will be shutting down imminently.

If you have any data in Google+ that you want to keep, Google advises that you should download and save it by March 31st, 2019. The shuttering of Google+ will commence as of April 2nd 2019.

Google has already taken steps to wind up its social media service as you can no longer create new Google+ profiles, pages, communities or events. Google+ comments have also been removed. After April 2nd, Google will begin to remove content from Google+ which will take time to complete, so if you have content, it may still be there for a while.

Any sites that use Google+ buttons for login purposes will also cease to function over the coming weeks. In some instances, the Google+ button will be replaced with an ordinary Google button instead.

If your EverWeb created website includes any Google+ widgets, buttons or other links, now is a good time to remove them and republish your website. If you have deeply integrated into Google+, you have probably found alternatives and informed your Google+ community already. EverWeb’s Responsive Image Gallery widget

It is, of course, recommended that you no longer use the Google+ widget or button in your website. Also remember that it is only Google+ that is going away so your regular Google account will not be affected. G Suite users will also have new and updated options.

If you have any comments or questions about this post, please let us know in the Comments Section below.