Archive for the 'EverWeb' Category

Scalable Images in Responsive Pages in EverWeb

Thursday, May 27th, 2021

Creating flexible, one page fits all devices, website designs is at the core of Responsive Web Design. EverWeb makes building responsive pages as easy as possible through its built in features, widgets and drag and drop capability. If you have built a fixed width website using a centered page layout, or are just new to web design and want to try out creating a responsive web design, you may find some challenges ahead of you…

A case in point comes when using images in a responsive page layout. As you scale the page, you can allow its images to automatically scale at the same time.

If this is what you want to happen but it doesn’t, what’s going wrong and how do get scalable images? In this post we will explore the background to images in responsive pages and explain how, with a bit of knowledge behind you, you will be easily be making pages with scalable images!

Adding an Image Directly on to a Responsive Page

Images can appear in a number of different ways on a responsive page depending on how and where they are added. For example, if you create a blank responsive page and drag and drop an image on to it in the Editor Window, you will see that the image occupies the full width of the page. Use the selection handles of the image to increase its height. When you preview the image, you should see that it scales as you change the width and height of the browser.

That is fine if you want your image to be full width across the page but often you may have one or more images that you want displayed on the page, but you do not want them full width.

Images in a Responsive Row Widget

Often images are added in to a Responsive Row widget as this widget is a great way to add fixed width objects to your page. And this is exactly what you have to remember… the images you add will be fixed width.

You can try this yourself to see the effect that it has on your page. First delete the image on the page if you added it from the above example so that your page is empty. Next, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

Once the widget is on the page, drag and drop an image inside the Responsive Row widget. Now go to the Metrics Inspector to check the width of the image. If the image is 350px or less wide, increase this to e.g. 600px wide. Make sure when you do so that you have ‘Constrain Proportions’ checked. If you preview the image, you will see that the image remains fixed in size. If you use your browser’s responsive design mode, you will be able to view the page as if it was being displayed on one of a number of different devices. For example, if you use Apple’s Safari Responsive Design Mode you can view the page as if it were being displayed on an iPhone SE, iPhone 8 or 8 Plus and so on. You should see that the image does not scale and also overlaps any device that has a screen width of less than 600 pixels wide.

the moral here of using a Responsive Row widget with images (or any other object for that matter) is that as the objects are fixed width, you may get problems on some devices if the image is too wide to be displayed properly.

Solving the Scaling Problem

So, how do we solve the problem of getting images to scale correctly and the knock on problem of having images always fitting within the width of all devices? The answer: The FlexBox and Text Section widgets!

Using either of these widgets will enable fully scalable images on your page. Choose the widget that best suits your requirements. In this example, we will use the FlexBox widget as it allows you to add more than one image at a time in the widget.

Start by deleting the Responsive Row widget from the page then add the FlexBox widget to the page. In the Embedded Objects section of the widget, click on the Add button below the ‘Embedded Objects’ list. Set the Object Type to Image.

Scroll down to the Image Settings section and click on the ‘Choose…’ button to add your image. Next, You delete the text that you see in the Styled Text Editor further down the page so that you just have the image on the page. Lastly, scroll back up to the Object Sizing Options section of the widget.

The important fields to use in this section are the Minimum and Maximum Width fields. If you set the Maximum Width as zero, the image will take up the width of the screen that is available to it from the Minimum Width value upwards. So you could make the Minimum with 250 (which will likely suit the smallest mobile phone) and leave the Maximum Width at 0. You could also set the Default Width to the same value as the Minimum Width.

Preview the page to see the effect. You should see the page scale correctly at all time. If you use your browser’s responsive design mode, you will also see that the page width will alway fit within the device it is being displayed upon.

Once you have tested your page, try adding a second Embedded Object to the FlexBox widget using the same parameters as above. Alternatively, duplicate the image and experiment with the Minimum and Maximum width values.

When using the Minimum value, it is usually a good idea to use a hard number e.g. 250. In this way you will more than likely accommodate the smallest mobile device. For the Maximum value, you could leave it as zero or even use a percentage value e.g. 95% of the width available to the object.

You can also add margins to the left and right side of the widget using the Margin fields in the Metrics Inspector which will keep the image away from the edges of the browser. There is much you can experiment with here so the advice is to start simple!

With a little bit of widget knowledge, it is easy to create great scalable images in your website that fit within any device they are displayed upon!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Linking to Email in EverWeb

Monday, May 17th, 2021

There are many ways in which you can link to email in EverWeb. There are a variety of ways in which you can either open your email app for your visitor to create a new email or use a predesigned for from within a page of your website.

Here are some ways in which you make linking to email work effectively for you…

Using The Hyperlinks Inspector

The most common way to link to email is by linking a piece of text or an object, such as a shape or an image, to an email app using EverWeb’s Hyperlinks Inspector:

  1. First select the object that you want to link the email app to
  2. Go to the Hyperlinks Inspector and check the ‘Enable as Hyperlink’ box to activate the settings.
  3. Change the Link To: dropdown menu option to ‘An EmailMessage’.
  4. Enter the email address that you want the email to be sent to in the To: field.
  5. Enter the subject of the email in the Subject: field.

That is all that you need to do! When you preview or publish your website, when the visitor clicks on the Hyperlink, their email app will open with the To: and Subject: fields already filled in.

Using the Contact Form, or Contact Form Advanced, Widget

EverWeb includes two Contact Form widgets. The Contact Form widget debuted in EverWeb 1.0 and is a very basic form. The Contact Form Advanced widget premiered in EverWeb 2.0 and supersedes the original form. This Advanced form continues to gain new and improved features, whilst the original Contact Form remains to be used for legacy purposes.

We highly recommend that you use the Contact Form Advanced widget as it is a lot more secure than the original Contact Form widget. The advanced form also offers a lot more features and flexibility so that you can design just the form that you want to fit the style of your website!

By default, both contact form widgets include an email address field which should be filled in straight away with a valid email address where the form will be sent to when the visitor hits the ‘Submit’ button. The original contact form only includes four input fields at most whilst the Advanced form allows you to create any number of fields, each of which includes its own form control type. The Advanced form also allow you to send confirmation messages that the email has been sent as well as customizable form error checking messages and reCAPTCHA anti-Spam capability.

Using The Styled Text Editor in Widgets

The Styled Text Editor is included in the FlexBox, Text Section and PayPal widgets. You can add a link to an email app from within the Styled Text Editor using the following method:

  1. Highlight the piece of text that you want to link to email.
  2. Click on the Link button in the Styled Text Editor’s Toolbar.
  3. To add just a ‘Send To’ email address enter
    mailto:emailaddress.com
    in to the URL field. Replace ’emailaddress.com’ with the email address that you want the email to be sent to.
  4. You can also include a default Subject heading by using this line in the URL
    mailto:emailaddress.com?subject=My subject 
    In this instance, replace the email address as described above then change the text ‘My Subject’ to the text that you want to be displayed in the Subject field when the visitor’s email app opens.

Using the Link Field in Blog Posts

As with the Styled Text Editor, you can add email links in to your blog posts in exactly the same way, using the Link button in the Blog Post Editor.

As you probably already know, as well as the Blog Post Editor, there is also a Blog Post Preview window below the Editor window. If you add objects in to this window they will appear in all of your blog posts. Therefore, this is a good place to put objects such as an email link button. In this case,

  1. Click in the location in the Blog Post Preview Window where you want to add your email link button, e.g. in the Footer.
  2. Add an email icon to the Blog Post Preview Window using the Insert-> Button-> Email Me menu option
  3. Use the Hyperlinks Inspector to add the link to your email app to your button.

Using the Built in Link Button in Widgets

The last way in which you can add links to your email app in EverWeb is through the ‘Link’ button in EverWeb’s FlexBox and Text Section widgets. In these instances you can add links to your email app when your visitor clicks on an image or button that you have added to the widget. Use the same method as for linking to the Styled Text Editor, as described above, to add your email link.

Adding a link to email is easy in EverWeb and knowing a couple of tricks along the way can also help take your website design one step further!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Using Animation in Your Responsive EverWeb Website

Thursday, April 29th, 2021

Adding animation to your website can add flair and fun to your site. Animating an object on your page can also serve a practical purpose as a ‘Call To Action’ for your visitors. By drawing a visitor’s attention to a particular object, such as a button, you may help increase the likelihood of the visitor clicking on the button.

About Animation Effects in EverWeb

You can use animation effects in any page layout type in EverWeb, Responsive or Fixed Width, by selecting the object you want to animate, clicking the Animation box in the Shape Options tab, then applying the animation effect that you want. you can apply an animation effect to most objects in EverWeb, the exception being the Image Gallery widget.

EverWeb includes sixteen different styles of animation of which six, Bounce, Fade, Flip, Rotate, Slide and Zoom, can have additional have directional control added to give the effect movement within the page. The movement controls are From Top, From Left, From Right and From Bottom.

Each animation can have a duration set, in intervals from 1/10th of a second up to 60 seconds. The longer the duration, the slower the animation will play out. You can also add a time delay before the animation starts, again from 1/10th of second, this time up to 100 seconds. Delay is useful when you have a number of objects that you want to activate in a timed sequence. Finally, you can set the animation to repeat, from one time only to up to 100 times.

Animation in Fixed Width Sites

When using animation in a Fixed Width (i.e. Centered or Left Aligned) Page Layout style, you can use all of the animation’s directional controls (From Top, Left, Right and Bottom) if using one of the six animations styles mentioned above. For example, you could have animated clouds crossing the page from left to right, or have titles drop in from the top of the page.

In addition, as you can stack objects on top of each other in a fixed width page. you can create ‘reveal’ effects by using the Fade animation style. This is a ‘Fade In’ animation so you can use it to make a fade out by creating a rectangle shape in the same color as the background and have it fade in over the object that you want to disappear. Check out our Animation Effects Part One and Part Two YouTube videos for more information on what you can do with animation!

Animation in Responsive Websites

Animation works in the same way in Responsive Page Layouts as it does for Fixed Width Page Layouts except for a couple of differences. The first thing is that it is not possible to stack objects in a Responsive Page Layout as you can in a Fixed Width layout. However, you can use the Fixed Position setting in the Metrics Inspector to fix a full width shape in place that can fade in over a full width shape placed over it. This will achieve a fade out effect.

The second thing to be aware of is that when using any of the six animation styles that include directional control, you should avoid using ‘From Left’ and ‘From Right’ direction controls. When using these direction controls, the object itself is placed at the left or right starting point of the animation from which it then moves in to the page when the animation begins.

As such, the object will be outside of the page’s left or right margin prior to being animated and so the page width will be greater than the width of the browser it is being displayed in. The result is that the page will drift horizontally to the left or to the right within the browser window instead of being fixed in place.

The third thing to be aware of is that when using a Responsive Row widget, you can add the animation to the widget itself and to the objects inside it. This may help you produce some interesting effects, but testing is vitally important to ensure that your animations work correctly on all device types!

Conclusion

Using animation in EverWeb’s responsive page layout style can provide some great effects to your page. However, it is important to thoroughly test your page to make sure that the animation you want works correctly under all circumstances. The best way to test is to always preview your page. If your browser supports responsive design mode, you should be able to test your page on a variety of different device sizes to see whether it holds up or not. If your browser does not support responsive design mode, it is recommended to use Apple’s Safari browser which does support this feature.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Extend the Power of EverWeb with Our Must Have Add On Products!

Thursday, April 15th, 2021

When using EverWeb you pretty much have everything to hand that you need to build a website but sometimes you may want something extra for your site. Perhaps you want better security, or you want to sharpen your site’s SEO, or you want to use the data gathered from your contact forms. EverWeb’s Addons are here to help you get even more out of EverWeb!

Site Shield Addon

EverWeb’s Site Shield Addon is designed for EverWeb + hosting customers who want a secure to transmit data across the internet to all of the devices your website visitors may be using. The ‘end to end’ data encryption of data is provided through the use of HTTPS (HyperText Transfer Protocol Secure) in place of HTTP.

WhyEverWeb Site Shield Addon Is Important

There are a number of reasons why EverWeb Site Shield Addon might be important to your website:

  1. Your data is end to end encrypted across the Internet protecting you from ‘Man in the Middle’ attacks;
  2. Sensitive data, such as financial data, confidential data, web shopping carts or medical data, is safely and securely transmitted;
  3. Site Shield Addon will help improve your SEO rankings. For example, Google prioritizes HTTPS sites over non-secure HTTP sites;
  4. Using Site Shield Addon also makes Google Analytics more effective as Referrer data is saved which is not the case if you only use HTTP;
  5. Site Shield Addon builds trust with your potential and existing customers. The Padlock symbol that appears beside your URL in a visitor’s browser search box indicates that the site has secure end to end data encryption enabled. This visual symbol is a great way to let your visitors know that you take data security seriously;
  6. Installing EverWeb Site Shield Addon is really easy, you just tick a checkbox in EverWeb’s Site Publishing Settings screen! There is no configuration needed. Just publish your entire site once you have checked the ‘Use HTTPS Secure URLs’ checkbox.

To purchase EverWeb Site Shield Addon, just check the Use HTTPS Secure URLs’ checkbox. A dialog box will appear which will guide you through the purchase process.

Contact Forms Enhanced Addon

EverWeb’s Contact Form Advanced widget debuted in EverWeb 2.0 as a replacement for the original Contact Form widget. Whilst you can still use either widget in your site, the Contact Form Advanced widget is:

  1. More Secure than the Contact Form widget through the use of SMTP Settings in the Widget Settings.
  2. Has 17 different Form Control types so you can control and customize data input in to the form just as you want.
  3. Improved SPAM protection. The use of forms in a website is one way in which SPAMmers can infiltrate your email box with SPAM. EverWeb’s Contact Form Advanced widget uses Google’s reCAPTCHA to help reduce this attack vector.
  4. Enhanced Form Confirmation and Submission Settings are included so that you can highly customize your form. You can even forward your visitor to a different page in your site once they have clicked on the form’s submit button.
  5. Advanced Form Error Validation helps guide visitors if they have not filled out the form correctly and try to send it to you.

The EverWeb Contact Forms Enhanced Addon Advantage

These above features make the Contact Form Advanced widget the perfect tool for form creation in EverWeb. The Contact Forms Enhanced Addon, introduced in EverWeb 3.0, seamlessly integrates with the widget and offers the following advanced features:

  1. Easily manage your Contact Form data from within your EverWeb Client Area.
  2. Reporting on your Contact Form data is also easy and customizable.
  3. Contact Form data can form the basis of mail shot campaigns by exporting the data out in to CSV format.
  4. Contact Form data is securely stored on EverWeb’s Servers.
  5. Use ‘Calendar’ and ‘Select Time’ Form Controls to create your own in-form calendar which can be used as the basis of a booking system.
  6. Your customers can upload files to you from within the form using the ‘File Upload’ Form Control.

To purchase EverWeb Contact Forms Enhanced Addon, add the Contact Forms Advanced widget to your page then click on the ‘Contact Form Enhanced Add-on’ field then click on the ‘Add Contact Form Enhanced Features’ menu option. You will then be guided through the purchase process.

EverWeb SEO Power Up Addon

The most recent addition to EverWeb’s collection of add-ons is SEO Power Up, which debuted in EverWeb 3.4. The new add-on builds upon EverWeb’s existing built in SEO features to giving you more customization options to fine tune and focus your SEO.

EverWeb SEO Power Up lets you add your own keywords to individual pages, set the priority of your pages for SEO purposes and the frequency in which web crawlers crawl your pages. You can even designate pages in your site that you do not want to be included in SEO.

To purchase EverWeb SEO Power Up, just go to our secure online store.

More features will be added to SEO Power Up in the upcoming EverWeb 3.5, as well as a host of new features including site wide search, so check back on our blog or go to the EverWeb Forum for the latest news!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

SEO in EverWeb: Basics for Beginners

Thursday, April 1st, 2021

When you start to build your first website you may or may not, already know about SEO. It may be something that is extremely important to you. It may be something that you have no idea at all about. It may be something that you think might be important to you but it is shrouded in mystery that it seems almost magical or mind bogglingly confusing.

In this post, we are going to demystify SEO and explain what it is and why it can be important for you to implement it in your EverWeb created website.

What Exactly is SEO Anyway?

SEO is an acronym for Search Engine Optimization. SEO is a method by which you tune, or optimize, your website to its best advantage to Search Engines, such as Google, Bing and Alexa. The better you optimize your website, the better the chances are that your site will appear higher up in search engine results rankings.

When you enter a search term in to your browser’s search box, the search engine behind it (e.g. Google) will present you with a set of ranked results based on your search criteria. Simply put, you use SEO to improve your chances of ranking higher up in these such search results. As such, SEO can also be thought of as a process that is applied to your website. SEO is not hardware. SEO is not software. SEO is a methodology that you apply to your website.

Should Everyone Use SEO in Their Website?

Typically, you will want to apply SEO to your website if you run any form of business. Equally, you will probably want to apply SEO to your site if you just want it to be more visible on the Internet. On the other hand, you may not want to apply SEO at all to your site e.g. you may have a site just for personal reasons so it is not important for you to try to reach as many people as possible with your site.

Reasons to Apply SEO to Your Website

  1. Potentially higher rankings in Search Engine Results Pages. When done correctly, SEO will improve your rankings.
  2. Your Audience will be able to find you more easily! SEO is good to use as you can target the words that you think visitors will search on. If done correctly, your (potential) audience will find you more easily!
  3. Customer Reach: SEO can be a great way for potential new customers to find you!
  4. Better Customer Reach translates to more traffic to your site.
  5. SEO Is Free! You do not have to pay anything to apply SEO to your site. You should not have to pay anyone to apply SEO to your site!
  6. Improves Brand Awareness. Even if someone does not click on your website link in a search results set, the fact that you are visible may bring them back later to your site.
  7. The effect of SEO can also be measured from your site’s statistics so you can adjust you SEO to see what works and what does not work.

Investing in SEO in Your Website

Just like building a great looking website, SEO is an Investment – and it should be thought of as a long term investment. As your business grows and develops over time, so your SEO should be in step with your business at the same time.

As part of the SEO process you will use Keywords, or phrases, in your website to help search engines focus on what you think is important. These Keywords may need to change over time as your business changes. It is, therefore, always important to remember that your website is a dynamic tool and your SEO should be too.

SEO As a Dynamic Concept

Your business will probably change over time due to internal and external factors. The same is also true of SEO which is not static concept but a dynamic, evolving concept. Changes in SEO usually relate to changes made by search engines as they adapt to our ever changing browsing habits. For example, a few years ago, Google decided to prioritize searches made on mobile devices over those made on desktop devices. It seems obvious now that the priority for search has changed with the growth in mobile device usage over the last ten years.

EverWeb is always looking out for changes in the way the search engine giants change the dynamic around search. One such change, for example, comes in the upcoming EverWeb 3.5 which will automatically add Open Graph Tags if you have purchased EverWeb SEO Power Up addon.

How to Begin with Your SEO Journey…

SEO in EverWeb has always been baked in to the product which means that you usually do not need to focus on it if you do not want to. If you do want to apply SEO to its best effect in your site, the best way forward is to use our SEO for EverWeb Video Course. This concise course guides you through how to apply SEO to your site’s best advantage.

EverWeb gives you most of the tools that you need to implement SEO but you can go further using our SEO Power Up addon. This addon allows you more customization options than ever so that you can prioritize what you think is important for your site’s SEO. The addon also provides more information to search engines about your site’s pages, their importance and priority. Check out the link above for more details.

Using SEO in your site can be advantageous to your business if used in the right way and if you invest in it for the medium to long term. There is no mystery around SEO either, just some easy knowledge building and experience to find out what works best for your site!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Using EverWeb’s Font Panel & Collections

Monday, March 22nd, 2021

One of the most important aspects of web design is your content. The text that you use tells your visitor a lot about your website, your company and its company culture. The way you present your site’s text itself also acts to visually reinforce these characteristics.

There are many ways in which you can style your text in EverWeb, from the simple TextBox to widgets that use the Styled Text Editor to EverWeb’s own blogging environment. Then there is also the Text Inspector which allows you even more styling options for your text.

Why Use the Fonts Panel?

All of the above features allow you to style text and some of these features offer unique properties, such as indented quotes in blog posts, or Text Direction in the Styled Text Editor. There is, however, always one tool that is always available to you at all times: The Fonts Panel.

In addition to its availability being ubiquitous in EverWeb, the other big advantage of the Fonts Panel is that it has the most amount of text styling features that you can find in one place. That is a valuable asset to your workflow when building your website! Save time and effort by doing most of your Text Styling in one place rather than having to flip from, for example, the Text Inspector to the Shape Options tab to Color Picker

Accessing The Fonts Panel

Accessing the Fonts Panel is easy. Click on the Fonts button in EverWeb’s Toolbar. To make things even easier, though, just press the Font Panel’s Command+T shortcut key instead. This will toggle the Fonts Panel on and of at the touch of a button.

You can access the Fonts Panel at any time. You do not have to have any text selected either, so the Fonts Panel can always be sitting there, ready for when you need it. If there is ever a time where you know you have called up the Fonts Panel but cannot find amongst the windows on your desktop, just go to EverWeb’s Window menu. At the bottom of the menu select ‘Fonts’ from the bottom of the list. The Fonts Panel will come to the foreground.

Working with the Fonts Panel

The Fonts Panel dialog box has most of the options that you will ever need to style your text. Choose your text font from the Font Family column, the font weight from the Typeface column and the font size in the Size column. To get exactly the right font size that you want, overtype the number that is highlighted under the word ‘Size’.

Why Use Collections?

You can also collect fonts in the Fonts Panel together in to a Collection, which you can then access from the column on the left hand side of the Fonts Panel. This is useful if you want to have certain fonts and typefaces easily available for your EverWeb website Project. You may, for example, want to have a specific Font Family and Typeface for your page’s title, subheadings, footnotes and so on. Grouping Fonts Family and Typefaces in one Collection gives you a quick, easy solution that will save you time and effort.

Adding A Collection to the Fonts Panel

To create a Collection

  1. Click on the ‘+’ symbol in the bottom left hand corner of the Fonts Panel.
  2. A new collection called ‘New-xx’ will be created where xx is a sequential number e.g. New-11. Double click on the new Collection name and rename it e.g. with your project file name.
  3. Next click on the ‘AllFonts’ collection which is at the top of the Collections column. All the fonts on your system will now be listed.
  4. Select a Font Family, and Font Typeface that you want to add to your new Collection e.g. Helvetica, Bold. Use the Search box to quickly find the Font Family if you need to.
  5. Your Font Family, Font Typeface should be highlighted in their respective columns.
  6. Next, click on the Settings Cog in the bottom left hand corner of the Fonts Panel.
  7. Choose ‘Add to Collection’ then click on the name of your collection from the list. The font will be added to your collection.
  8. Repeat the process for all the specific fonts styles that you use in your Project file.

You have now added specific Fonts Families and Font Typefaces to your collection. You can now apply these to your text selections. Once you have applied the font family and typeface from the collection, the only thing you will need to do manually is to select the font Size.

Alternatively, you could set up one Collection per Font Family/Typeface to represent your project files page titles, Subheadings etc. For example, you could create a Collection called ‘Title’ that has just a Helvetica Bold font in it. Another Collection, ‘SubTitle’, could have just one item in it e.g. a Helvetica Light Oblique and so on…

Adding a Default Body Text Style

As you may already know, you can set up a default base font family, font style and size in EverWeb so you do not need to add this in to your own Collection.

Use the Format-> Default Styles… menu option. When you click on the Body Text font, the Fonts Panel will appear if it is not already visible on screen, Change the Font Fa mily, Typeface and Size to the new default that you want. If you want to change the font color default, use the specific option ‘Body Text Color’ in the Default Settings dialog box and not the color swatch in the Fonts Panel.

When you have finished, remember to click on ‘Save’ to apply your changes. Any new TextBox, new widget that you add that uses the Styled Text Editor, or new blog post that you create will adopt the new default settings.

Other Uses of the Fonts Panel

One of the useful features of the Fonts Panel and its Collections is that you can immediately see which fonts are web safe. If you have downloaded Google Fonts, you will also immediately which Font Typefaces the font has.

The Fonts Panel is where you can apply other formatting features, such as Strikethrough, to your text. There is also an option for text shadowing so that you do not have to go to the Shape Options tab to achieve the effect that you want. With the Fonts Panel, it is all on one place.

Once you have finished styling your text using the Fonts Panel, just press Command+T to toggle for the dialog box to disappear!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

EverWeb’s Replace Assets Feature Keeps Your Site Always Up To Date!

Thursday, February 18th, 2021

The new Replace Assets feature that debuted in EverWeb 3.4 is a small but incredibly powerful addition to EverWeb‘s feature set.

Why Use Replace Assets?

Replace Assets simply replaces one image asset with another and is beneficial to use for a number of reasons:

  1. The feature replaces all instances of an asset in your site with the new asset that you have chosen. This includes where the asset has been used in widgets e.g. in EverWeb’s Image Gallery widgets, or even the FlexBox and Text Section widgets.
  2. The replacement asset inherits the attributes of the original asset. This is incredibly useful as it means that you do not have to do any reformatting in your website.
  3. The ‘One Stop’ Replacement. You save time and effort as you only need to replace the asset once. This can be an incredible boon if you need to regularly replace an asset in your site with an updated asset.

Caution!

If you replace an asset with another, you cannot undo this action. It is therefore recommended that you have a copy of the original asset stored somewhere in case you make a mistake and need to undo your asset replacement. The good news is that you can always replace a replaced asset with another asset.

It is also recommended that you backup your EverWeb site before you use Replace Assets. You can set regular project file backups in EverWeb-> Preferences which is recommended anyway. You can also instantly backup your project file at any time by clicking on the up/down arrows to the right of the project file name in the Projects window, then selecting ‘Male Backup…’ from the dropdown menu. Follow the instructions given in the dialog boxes to complete the backup.

How to Use Replace Assets

The replace Assets feature is super easy to use.

  1. First go to the Assets tab in the Inspector Window in EverWeb.
  2. Secondary click on the asset that you want to replace.
  3. If you are not sure that you have selected the right asset, either click and drag the asset a little bit out of the Assets tab, or use the Preview Eye to see what the asset is.
  4. Once you have secondary clicked on the asset, select ‘Replace Asset…”
  5. Locate the asset that you want as the replacement then click ‘Open’ to finish.
  6. The asset will be replaced.

Usage Cases for Replace Assets

There are many different ways in which you can effectively use Replace Assets to help save you time and effort, now and in the future!

  1. Rebranding: If you have updated your company branding, Replace Assets is the ideal one hit solution to updating your brand. For example, just replace your old company logo with the new one in the Assets List and the logo will be updated throughout your website.
  2. Change of location: If you have images of your business location in your site that need updating after an office
  3. Frequently Updated Images: Some websites have a fast turnaround of their content. If you are using image based content that needs replacing e.g. daily, weekly or perhaps monthly, then using Replace Assets could make this task easier.
  4. Making Text Importing Easier. If you import text in to your site on a regular basis, it may be easier to save this as a PDF file in the source app then use Replace Assets to replace the old PDF text with the new in your page in EverWeb. This will save you time formatting the text every time you import it in to EverWeb.
  5. Multi-lingual Websites. Sometimes you may have two websites that are essentially the same, for example you have a multilingual website. The pages for all languages are essentially the same in terms of layout and images, widgets used, social media icons etc. The only difference is the language the content is written in. If you need to update your images across each language site, Replace Assets will make this process a lot easier. Especially if all the pages for each language are in the one project file.
  6. In a similar vein as multi-lingual websites, you may find that you update two similar project files with the same images e.g. you may have online help pages for an app that is available for Windows and for the Mac. As there are some differences between the two operating systems you may have started by developing one website project file for the Mac app. After completing the project file, you may have duplicated the project file for the Window version of the product, as this is quicker and easier that building it from scratch. Replacing the images in the Windows project file is easy, just use replace assets to replace the Mac images with Windows ones!

Tips on Using Replace Assets

Here are a couple of tips on using Replace Assets:

  1. As mentioned above, make sure you have made a backup copy of your project file in case you need to rollback your changes.
  2. Always have copies of the original images that you are going to replace at hand in case you make a mistake and replace the wrong asset.
  3. Take care in naming your assets. Make sure to name your assets so that you can easily recognise each asset. This will make the replacement process easier, especially if you will be replacing assets on a regular basis. It will also reduce the risk of replacing the wrong asset by mistake. Usually it is best to follow the naming practices as outlined in our SEO for EverWeb video course, so that you better your SEO and have user friendly file names!

EverWeb’s new Replace Assets feature, is a small addition to the product that will save you time and effort, both now and in the future!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Contact Forms Enhanced Addon’s New Calendar and Select Time Form Controls

Thursday, February 4th, 2021

If you use EverWeb’s Contact Form Advanced widget with its companion Contact Forms Enhanced Addon, you now have two new form controls to take advantage of with the release of EverWeb 3.4.

The Calendar and Select Time form controls help make it easier for your visitors to select date and/or time options directly from the contact form. The new controls are highly visual and fully customizable making it less likely that those filling in your contact form will make a mistake when choosing date/time combinations.

Better Control of Your Diary

Setting up calendar and/or a time slot lists in your Contact Form gives you more control of your own diary. EverWeb’s customization options give you control over your availability as you can block out days of the week when you’re not available, e.g. Sundays, and you can set your own working day availability for appointments and bookings.

Your contact form can now more easily be used as the front end to backend booking and reservation systems.

Visual Appeal for Your Visitors

For your visitors, the new form controls are easy on the eye and easy to interact with. When selecting the date and time for bookings and appointments your visitors will have a better overview of your availability.

You can format both controls to have exactly the right date and time formatting that you want, no matter where in the world you are, as there are seven different date formats included and four different time formats to choose form.

The Contact Forms Enhanced Addon

As you may already know, the Contact Forms Enhanced Addon is a supplemental product for use with EverWeb’s Contact Form Advanced widget . The Contact Forms Enhanced Addon can be purchased just by clicking on the Contact Forms Enhanced Add-On dropdown box in the Contact Form Advanced widget. Choose ‘Add Contact Form Enhanced Features…’ from the dropdown menu You will then be guided through your purchase.

After completing your purchase, click again in the Contact Form Enhanced Add-on field. In the dropdown menu, your purchase will be shown as, for example, ‘Contact Forms Enhanced 1GB (12345)’. Click on your purchase so that you can use all of Contact Forms Enhanced features.

Setting Up Calendar and Select Time Form Controls

If you are familiar with the Contact Form Advanced widget’s Form Controls, adding the new ones in to your form is just the same. In the Form Control section of the Widget Settings, click on the Add button under the Form Controls list. After naming the new Control, click in the Control Type dropdown menu below the Add button. From the list choose either ‘Calendar’ or ‘Select Time’. The Option List below the Control Type field will display all of the customization options available to use.

Customizing the Calendar Control

There are seven different date display formats available for you to choose from. There is also the option that when the visitor submits their form to you, the date format in the submitted email can be different to the display format. For example, your market may be in the US but you are based in Europe. You may, therefore, want your visitors to see the date in MM/DD/YY format, but you prefer to receive their submitted form in DD/MM/YY format as it is more compatible with your European backend systems.

The display of the calendar in the form is also highly customizable. Start by choosing how many years you want the calendar to display. For example, if you set the number of ‘Years to Show’ to 5, when you click in the Year field in the form you will see the five year range, 2019 – 2023 with the current year, 2021, in the middle. If you use the back arrow key to scroll the calendar backwards you can access dates before 2019. For example, if you choose May 31, 2017 and click in the year dropdown box, you would see 2015 – 2019, i.e. 5 years with 2017 in the middle . The same concept would apply if you scrolled the calendar a year in the future.

The Calendar Control’s options allow you to set the start and end point of the calendar. For example, I may want to limit the calendar to the five year period used in the above scenario. In this case, I would set the ‘Earliest Date’ field value to be January 1, 2019 and the ‘Latest Date’ to be December 31, 2023.

As mentioned earlier the Calendar Control allows you to block out specific days of the week. This is useful if you e.g. never work on a Sunday, or you always use Wednesday’s for admin and never have appointments. To set the blocked out date, just check the box next to the days you want to exclude from the calendar. Blocked out days appear greyed out in the Calendar display.

Customizing the Select Time Control

Use the Select Time control to schedule appointments. You can specify how long each appointment slot lasts as well as how long the working day is.

Once you have selected ‘Select Time’ from the Control Type dropdown menu, you can use its options from the Options List. In the same manner as for the Calendar control, you can choose to have your Display Time and Submit Time options set differently to each other. For example, if your customers are in North America, you may set the Display Time as 2:30 p.m. style, but if your business is based in Europe, you may want the Submit Time option to be 14:30 i.e. using the 24 hour clock which is more commonly used in Europe. The same is true for the List View option which is used to show the list of available time slots when your visitor clicks on the Select Time option in the form.

You have four different time styles to choose from for these three options.

Use the Interval option interval to set how long each appointment slot will be. The default is set to 30 minutes. Enter the amount of minutes that you want for your appointments e.g. 60, 90, 120 and so one. The list will automatically calculate the times of the appointment slots for you.

Last but not least, set the length of your working day using the Start Time and End Time fields.


EverWeb’s new Control Types will help you easily create visitor friendly booking and appointment contact forms as well as enabling integration with back end systems.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

EverWeb, macOS Big Sur and Apple Silicon [UPDATED]

Thursday, January 21st, 2021

[UPDATE] Good News EverWebers! Our next release, EverWeb 3.5, will be a universal binary so will run natively on both Apple Silicon and Intel Mac’s. EverWeb 3.5 is currently in beta test, so we hope to have the public release version in the near future for you!

For Apple, 2020 was the year that the company broke with chip provider Intel with the introduction of Apple Silicon and the new M1 microprocessor chip in the 13″ MacBook Air, 13″MacBook Pro and the Mac Mini.

What impact does the move to Apple Silicon, and the introduction of macOS Big Sur, have on EverWeb? Find out below…

It’s Not The First Time…

This is not the first time that Apple has changed microchip providers for its hardware. It is actually the third time that Apple has changed the Central Processing Unit (CPU) architecture of its hardware. In 2005, Apple announced it was transitioning its hardware from PowerPC to Intel and before that, in 1996, it transitioned from the Motorola 68000 platform to the PowerPC platform.

Any change in the microprocessor architecture means that the Operating System software, and the applications that the OS runs, will also need to be reconfigured in order to be compatible with the new, underlying, hardware.

Why the Need for Change?

For Apple the reasons for transitioning to the new Apple Silicon architecture are clear. Its laptop, desktop and server offerings can leverage from the the same basic architecture that is found in iPhones and iPads. This makes integration and synergy between iOS an macOS a lot easier and seamless. The second reason is that Apple now has more end to end control, making both hardware and software more efficient in the process. We can already see this in the computational and speed improvements in the new M1 chip which takes CPU architecture to the next level of development. There is also the benefit of cost savings for Apple due to economies of scale as now its hardware uses the same basic CPUs in all its products. Lastly, the delay of new processors from Intel over the last few years has caused product delays for Apple, and Intel now lags behind its more agile competitors in the market.

Intel, Apple Silicon and macOS Big Sur

Apple has set itself the goal for the transition from Intel to Apple Silicon to be within two years. This is the same time frame as the switch from PowerPC to Intel. It is reassuring to know that this transition is achievable and should be relatively painless given Apple’s past experience of doing this.

The stage for the hardware transition has already been set with the introduction three Apple Silicon computers and the introduction of macOS Big Sur which runs on both Intel and on Apple Silicon architectures. In addition, macOS Big Sur now starts to take design cues from iOS and iPadOS again, helping Apple to further integrate their product ecosystem.

The two year product transition gives Apple time to update all its hardware to use Apple Silicon and gives software vendors time to repurpose their apps to be Apple Silicon compatible.

EverWeb 3.4 is fully compatible with macOS Big Sur on Intel machines. So what about compatibility with Apple Silicon? To understand how EverWeb works under Apple Silicon, let’s start with a bit of transition history…

Enter Rosetta and Rosetta 2

When Apple transitioned from PowerPC to Intel chips, it introduced a program called Rosetta. This program acted as a ‘Compatibility Box’ enabling apps designed for the old PowerPC architecture to run on the new Intel architecture.

Rosetta was very much a success for Apple, so it has leveraged this success and experience for the transition from Intel to Apple Silicon with the introduction of Rosetta 2. If you use EverWeb on an Apple Silicon computer, it will work through Rosetta 2 which will automatically ‘translate’ EverWeb from Intel to Apple Silicon. You probably will not even notice any difference using EverWeb under Apple Silicon as Apple years of experience in optimizing Rosetta make it work smoothly for most apps that need translating.

After installing EverWeb on your Apple Silicon based computer, when you first run the app, you may be asked to install Rosetta in order for EverWeb to run. If you have previously installed Rosetta on your computer, you will not see this message and EverWeb should launch as usual.

EverWeb as a Universal App

In summary:

  • EverWeb 3.4 and higher is fully compatible with Mac OS X 10.10 Yosemite thru to macOS 11 Big Sur.
  • EverWeb 3.4 and higher will run on Apple Silicon computers through Rosetta 2* running on macOS 11 Big Sur.
  • EverWeb 3.1 is available if you are running Mac OS X 10.7 – 10.9.
  • EverWeb 2.5.2 is available if you are running Mac OS X 10.6.

* In the future we will be releasing EverWeb as a Universal app. This means that EverWeb will support both Apple Silicon and Intel processors, using Apple Silicon as the default. As such, EverWeb will then run natively on Apple Silicon without the need to use Rosetta.

We will, of course, keep the EverWeb community reprised as to our progress in making EverWeb a Universal App.

If you have any questions about this article, please let us know in the Comments Section below. We’re here to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Parallax Scrolling and Image Overlays in EverWeb

Thursday, January 7th, 2021

EverWeb 3.4 introduced the exciting new Parallax Scrolling effect. When you apply parallax scrolling as you scroll the page up and down, the foreground object moves and background image also moves, but at a slower speed. This gives the visual impression of motion and is a great effect to use in your website!

Prerequisites For Use Parallax Scrolling

To use Parallax Scrolling in your website you will need EverWeb 3.4 or higher. The effect can be used in any page layout type – Centered, Left Aligned or Responsive. The only other thing you will need is an appropriate image to use as a full width background image.

Choosing a Great Background Image

Perhaps the most important thing to consider when using Parallax Scrolling is the image itself. There are no specific rules in this respect but there are some useful hints that are good to remember:

  1. A simple page design will bring out the best in the Parallax Scrolling effect as the visual will be front and center and so more attention grabbing for anyone visiting the page.
  2. Use the most visually interesting images towards the top of the page if possible. This is a good way to hook visitors so that they continue to scroll down the page.
  3. Any ‘Call to Actions’, such as buttons on the page, should also be more towards the top of the page if possible.
  4. An image is a great way to tell a story so make sure that you use images that effectively do this. Using Parallax Scrolling at various points in your page is a perfect way to tell stories. Check out any news websites to see how they use this technique for in-depth stories on people or events.
  5. Check how the effect looks on different devices as Parallax Scrolling will look different on a mobile phone than on a desktop screen!

Setting Up Parallax Scrolling

Once you have found your image(s), you can drag and drop them in to the Assets List of your EverWeb project file. Alternatively, you can add these files in to your project when creating the Parallax Scrolling effect.

You can apply a Parallax Scrolling effect to any full width object has a background image. Begin by selecting the full width object that you want to add a background image to. This could be e.g. a full width TextBox, Shape or widget such as a Responsive Row widget.

After selecting the object that you want, go to the Shape Options tab in the Inspector Window. In the Fill section, click on the dropdown menu below the word ‘Fill’. By default, this dropdown menu is set to ‘None’. Change the option to ‘Image Fill’.

Use the Fill ‘Type’ dropdown menu to select the type of fill that you want. For Parallax Scrolling to be available, you must use either the ‘Scale to Fill’, ‘Stretch’ or ‘Tile’ option. When you select one of these options, the Parallax Scrolling section becomes available. By default, Parallax Scrolling is enabled.

Note that when you have Parallax Scrolling selected, you will not see the effect. To see the effect in action, Preview or Publish your site.

Image Overlays

The introduction of Parallax Scrolling to EverWeb, was accompanied by the introduction of a second feature useful image manipulation feature: image overlays. An image overlay is a color that is placed on top of the image. The opacity of the overlaid color can be altered to achieve the effect that you want.

This effect is often used when the background image needs ‘toning down’ so that the objects in the foreground become more visible. Previously in EverWeb you would have had to have covered the image with a rectangle shape and change the shape’s opacity to achieve the same effect.

EverWeb’s new Parallax Scrolling and Image Overlay features give you two new ways to create an even better website effortlessly!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram