Mac SEO Blog

When using Apple’s Podcast’s app on iPhone, iPad or on your Mac (or via iTunes depending on your macOS version) you can search, listen and download thousands of podcasts. If you want you can add these such podcasts from the Apple Podcast app in to your own website!

Finding The Podcast You Want

The resource to use to find the podcast you want to use is Apple’s Marketing Tools website. This website contains a number of different marketing resources for a variety of Apple’s services such as News, Apple TV, the App Store and so on.

Click on Apple Podcast Toolbox to access the Podcast Marketing Tools Portal.

To start, enter the name of the podcast that you want to embed in your website. This could be, for example, a specific podcast name or just the name of the podcaster.

In this example, I want to embed a podcast about the iPhone 12 that I recently listened to from the Apple Insider website. In this case, I just enter Apple Insider in the search box and press Enter.

In the results I can see Podcasts and Podcast Episodes. ‘Podcasts’ are like categories. Apple Insider has three categories. Each category will, therefore, contain Podcast Episodes. I can filter the search results by Type of Podcast and by country if I want to but in my example it is not necessary to do so.

As I want to find a podcast episode about Apple’s iPhone 12 I start by clicking on Apple Insider’s general Podcast category. On the next screen is a list of Podcast Episodes. Once I have located the podcast episode that I want, I just double click on its title. If you do not see the podcast you want, expand the section by clicking on ‘Show More Episodes’.

Podcast Embedding Options

You will now be on the Podcast Episode page which contains a number of different sections. For our purposes, we are interested in three sections: Content Link, Podcast Player and Short Link. We will look at each of these options and how to add each of them in to your EverWeb made website project.

Content Link

A Content Link is the hyperlink to the podcast episode you have elected. The link is the full URL All you need to do in the instance is to copy the Content Link to the Clipboard using the ‘Copy Link’ button.

Once you have copied the link, go to the place in your EverWeb Website where you want to add the link. For example, you could attach the link to a piece of text, an image, or a button. In this example, I am going to attach the link to a piece of text in my page. 

Highlight the Text that you want to use, then go to the Hyperlinks Inspector.  Click on the box to the left of text ‘Enable as hyperlink’ to enable the settings. Next, click in the ‘Link To’ field and select ‘An External Page’. If you would like the podcast to open in a new page when your visitor clicks on the link text, select ‘Open in new window’ as the Behavior. The last step is to click in the ‘URL’ field and paste in the link to podcast from the Clipboard.

You can customize the link formatting using the Hyperlink Formatting section. Once you have finished your customizations, use Preview from the Toolbar to test the link.

Short Link

To use a podcast episode Short Link in your website, start by clicking on the ‘Generate Link’ button in the Short Link section of the Podcast Episode page. When the link has been generated, you will see it displayed on screen. Use the ‘Copy Link’ button to copy the Short Link to the Clipboard. 

Next, follow the instructions from the Content Link section above to add the Short Link in to your EverWeb made website project, then test the link using Preview.

Short Link is sometimes used if it is not possible to paste long links in to your site. This is not a limitation in EverWeb so you can use either option. There may in fact be valid situations where you may want to use a Short Link to mask the full address. 

The advantage of using Content Link over Short Link is that the Content Link generally tells you the name of the podcast episode whereas the Short Link is only a randomly generated link name.

Podcast Player

The last option for embedding podcast episodes in to your website is by using the Podcast Player option. Use this option when you want to embed Apple’s Podcast player in to your website. The Podcast Player can be customized to have a light or dark background, and the player can be specifically sized if required. Additionally, the player has a ‘See more’ option so that visitors can explore more podcast episodes from the podcaster.

To use the Podcast Player, simply click on the ‘Copy Embed’ button to copy the embed code to the Clipboard. Next, go to the page in your EverWeb project file where. you want the player to be embedded. 

In this instance you will need to use EverWebs HTML Snippet widget, so go to the Widgets tab and drag and drop the widget on to the page.

Click inside the HTML Code Box and paste in the Embed Code from the Clipboard. Click ‘Apply’ to finish. If you do not click on Apply, the code will not be saved in the Code Box.

You will not see any change in the Editor Window once the code has been applied, so use Preview to test that the embed code works correctly before publishing your site. Using Preview in this instance is also useful as you can see if the Podcast Player is positioned correctly on your page.

Adding podcasts from Apple’s Podcast repository is easy and has the flexibility for you to add them to your website in exactly the way in which you want them displayed. For a video walkthrough of this EverWeb feature, just click on the image at the top of this page!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

EverWeb’s Hyperlink to Current Page feature gives you an easy way to add a ‘Go to Top’ of page function to your Master Page and you can also it with Scroll Position in your Master Pages!

Many websites use a long form page format style. This style of page is particularly useful on mobile devices where it is often preferable to scroll up and down a long page rather than clicking back and forth to different pages. This page style, therefore, makes a ‘Go to Top’ of page feature a good idea to implement. Your visitors can quickly jump back to the top of the page. 

You can add a Go To Top of page feature on a page by page basis which is what you have to do if you are using any version of EverWeb up to version 3.3. EverWeb version 3,4 adds the new Hyperlink to Current page feature which means that you can now add a Go to Top feature within your Master Pages which will save you lots of time and effort.

Adding a Go To Top of Page Feature

1. First go to your Master Page and add your ‘Go to Top’ of page icon, image or TextBox. In this example, the Master Page has a responsive page layout. It is, therefore, a good idea to place the Go to Top TextBox in a Responsive Row widget within the Footer area. If you are using a Centered Page Layout, add the TextBox button directly in to the Footer area.
2. Once you have added your own Go to Top object, keep it selected and go to the Hyperlinks Inspector. Click on the checkbox to ‘Enable as Hyperlink’. This will make all of the Hyperlink options available to the object.
3. Set ‘Link to’ as ‘One of my pages’, set ‘Behaviour’ to ‘Default’ and set the ‘Page’ field to ‘Current’.
4. You have now finished the set up of the Go to Top featue.

Attach the Master Page to a regular page, if you have not done so already, then preview or publish your site to test. Any page that uses the Master Page will now include the Go to Top of page button.

Using Scroll Position with Hyperlink to Current Page

As mentioned above, you can also use Hyperlink to Current Page with Scroll Position in a Master Page.

1. If you have not done so already, create a Master Page. In this example, the Master Page will have a Responsive Page Layout.
2. Remove any unwanted objects from the Master Page. In my example, my Theme Template contains a Full Width Navigation which I will keep and place at the top of the page.
3. Next, add a Responsive Row widget to the page, below the Navigation Menu widget.
4. With the Responsive Row widget still selected, add a TextBox button to the Responsive Row. In my example I have added the text ‘Contact’ to the button. When the ‘Contact’ button is pressed, the page will scroll down to the Contact section of the page.
5. Add a Contact Section to the Footer area of the page containing information that is to appear on all of the pages of my site.
6. The page structure is now complete. The Contact button in its responsive row and the full width Navigation Menu widget form the ‘header’ of the Master Page.
7. There is nothing below the ‘header’ until the Footer area. This area will be where content is inserted when the Master Page is attached to a regular page.
8. Set the Minimum Content Height of the Master Page to 500 pixels.
9. The ‘header’ and Footer area sections are now adjacent to each other. This is not a problem because when you add content to your regular page (with the Master Page attached), a gap will open up between these sections to allow for content to be added. Remember that the Content Height setting is a minimum setting and expands as you add content as needed.
10. To create a hyperlink to my Contact section of the Master Page, go to the Contact section of the page. This is where we are going to create a Scroll Position.
11. Click in the Contact section to select it, then click on Scroll Position in the Toolbar and choose the ‘Set Shape As Scroll Position’ option. Name the Scroll Position ‘Contact’ then click OK to finish.
12. Now go to the Contact button at the top of the page to attach the hyperlink. Double click on the word ‘Contact’ to select the text.
13. Go to the Hyperlinks Inspector and click on the checkbox to ‘Enable as Hyperlink’. In this example, set ‘Link To’ as ‘One of My Pages’, the ‘Page’ field to ‘Current’ and set ‘Position’ to ‘Contact’. The Position field is used for Scroll Position names on the page.
14. The set up is now complete.

Now create a blank page, or use an already existing page, and attach the Master Page to it.

In this example, the page appears to have no content in it. If you drop a Responsive Row widget on to the page, for example, the widget will be placed between the ‘header’ section (i.e. the Navigation Menu widget and the button responsive row) and the Footer area.

One the content that you want has been added, preview the page to test the Contact button.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

The last 12 months since EverWeb’s 6th anniversary have been incredibly busy as usual! We’ve packed a lot in to four point releases this year giving EverWeb even more great features, great enhancements to existing features, lots of optimizations and even a new product addon!

As we celebrated our sixth anniversary last November, EverWeb 3.0 had just been released. We celebrate our seventh anniversary with the recently released EverWeb 3.4!

Here are just some of the highlights from the world of EverWeb this past year…

Welcome Dark Mode!

One of the most dramatic additions to EverWeb over the last year was the introduction of Dark Mode which came to the product last December. This feature is available to any macOS version that supports dark mode and we think EverWeb looks absolutely gorgeous in the dark!

Parallax Scrolling and Color Overlays

One of the most visually stunning features to come to EverWeb in recent months is the new Parallax Scrolling feature which gives you a great sense of motion when used on full width images in your site. There is no set up needed, you just add your full width image then apply the Parallax Scrolling feature to it from the Shape Options tab!

There’s also a new color overlay option so that you can add a filter to your image. This is a great feature when you want to bring objects in the foreground to the front but need to subdue the background image a bit to do so!

Set Shape As Scroll Position

Scroll Position is a great way to add anchors to your pages in EverWeb. The feature was introduced before we added the Responsive Page Layout to the product, so Scroll Position would not work very well in a responsive website. Not anymore though, as we added a new Set Shape as Scroll Position feature to Scroll Position. Now it is super easy to add an anchor directly to almost any object, in any page layout type, Fixed or Responsive!

SEO Power Up Addon: Talking Your SEO To The Next Level!

EverWeb’s new SEO Power Up Addon takes your SEO to the next level. EverWeb SEO Power Up replaces our old Sitemap Automator product with new and updated features built directly in to EverWeb.

You can now add your own SEO Keywords directly into any page you want. You can also set the importance of your pages using the Priority field and the Change Frequency field tells crawlers how often you expect your pages to be updated. These tools let web crawlers know more about the pages of your site that are important to you.

EverWeb SEO Power Up also creates your website’s XML Sitemap file when you publish your site, and its robots.txt file which helps web crawlers know which pages they can, and cannot, crawl.

The addon is available to all EverWeb customers. If you host with us, you get the extra bonus of built in GZip compression which will make your pages load faster in your client’s browser window. If you have an EverWeb+Hosting 10GB or higher account, EverWeb SEO Power Up is totally free of charge!

To purchase EverWeb SEO Power Up just click on the ‘Optimize & Submit Website to Search Engines checkbox in your website’s Site Publishing Settings. A dialog box will appear to guide you through the purchasing process.

New Additions to Contact Form Advanced Widget

As always the Contact Form Advanced widget gets special attention and this last year was no exception. We added customizable Form Validation so that you can enter your own message if your visitor fails to enter required information in to the form.

In addition, you can now also forward your visitor to a specific page after they have submitted their contact form to you. There is also a new Transparency style available for your contact form,

New Additions for Contact Forms Enhanced Addon!

EverWeb’s popular Contact Forms Enhanced Addon debuted in EverWeb 3.0 creating a super easy way for you to retain contact form data when visitors to your site use its contact forms.

We had a lot of great feedback about this addon and this helped us to make the feature even better than ever. We added totally customizable confirmation emails, the ability to remove branding from submitted emails and most recently in EverWeb 3.4 new Calendar and Set Time Controls to give you more control, and style, over your contact forms.

More Ways to Find Things in Your Project File!

In the last twelve months EverWeb has added more ways for you to find almost anything in your EverWeb Project File. You can now use search to find the web page you want in your project, the asset you want to locate, the widget you want to use and the theme template you want to add. Just use the built in dedicated search boxes!

More Speed, More Optimizations!

As always we have spent a lot of time and effort to make working with EverWeb as fast and easy as possible, even if you have large website projects. We have optimized the performance of our built in widgets dramatically over the last few months as well as making the UI performance slicker than ever!

Publishing added a new ‘auto continue publishing’ feature so that if your website’s publish stalls, the process will automatically try again after a few minutes.

As always we are always optimizing the code that EverWeb generates to create your site so that it is the most efficient as it can be!

These are just some of the highlights of the last year for EverWeb. As usual, your input is always appreciated to help make EverWeb even better. So please tell us what you would like us to add to EverWeb, or improve upon, in the coming twelve months in the Comments Section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

We’re excited to introduce EverWeb 3.4 which brings a new parallax scrolling feature, image overlays, a new replace asset feature, calendar and time controls for the Contact Forms Enhanced Addon and the all new EverWeb SEO Power Up Addon which takes SEO Optimization to the Next Level!

You can also check out EverWeb’s new features in our ‘What’s New in EverWeb 3.4‘ video.

Which Version of EverWeb is For You?

EverWeb is available in the following versions:

• If you are running OS X 10.10 or macOS Yosemite, El Capitan, Sierra, High Sierra, Mojave or Catalina, EverWeb version 3.4 is available for you.
• If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 3.1 is available for you.
• If you are running OS X 10.6 EverWeb version 2.5.2 is available for you.

When updating to the latest version of EverWeb, the update process will automatically download the correct version of EverWeb for your operating system.

EverWeb 3.4 Includes…

[NEW] A new Replace Assets feature. Right click on the assets to replace them and they will maintain the same name. You can do it for multiple assets and a new window will open up. If you try to replace the assets with a file from the Finder with the same name in that window, it will automatically match the existing asset with the new file

[NEW] SEO PowerUp Addon.

[NEW] New Fill options for shapes and responsive rows. You can scale images set to tile and original size. You can put an overlay color with a specified transparency.

[NEW] Parallax scrolling for image fill options set to tile or Scale to Fill

[NEW] You can drag and drop colors from the color selector control or right click to copy and paste colors in between controls

[NEW] You can now Hyperlink to the current page

[NEW] New Calendar and Select Time picker controls for the Contact Form Advanced widget

[NEW] Search Engine Optimization section in Page Settings tab of the Inspector Window.

[NEW] A new File-> Open Recent… menu option has been added so you can quickly access recently used project files.

[NEW] You can now access recently opened project files from the EverWeb icon in your macOS Dock.

[NEW] You can now access recently opened project files directly from the EverWeb icon in your macOS Dock.

[IMPROVED] You can now drag and drop images directly on to the Responsive Image Gallery widget in the Editor Window.

[IMPROVED] The Web Page Description field and Social Media Icon setting are now located in the Search Engine Optimization section of the Page Settings tab.

[IMPROVED] The default font size for text when creating a new project is now 16 point.

[IMPROVED] When selecting a default font using Format-> Default Styles… The Fonts Panel is now used to select the font, font size and font style.

[FIX] FlexBox video width bug fixed

[FIX] Fixes an issue with the Responsive Image Gallery Widget which could cause a crash.

[FIX] Fixes with the Font Panel

[FIX] Fixes with some widgets removing the focus from the design canvas after you select them

[FIX] Fixes with copying and pasting options between responsive rows

FIX] Contact Form Advanced form fields can be more easily re-arranged

[FIX] Non english characters in the MENU label for responsive navigation menus can now be used

[FIX] Pages that will never be added to a navigation bar won’t mark all pages as need to publish if they are modified

[FIX] Fixed issues with copying and pasting objects from in Responsive Row to another

[FIX] Fixed styling issue with PayPal styled Buy Now buttons in mobile devices

[FIX] Animation slider will update the preview as you adjust the settings

[FIX] Font Panel size field is updated properly

[FIX] Editing some widgets would remove the focus from the design canvas

[FIX] Fixed an issue with video sizes in FlexBox widgets

[FIX] Improved error reporting for FTP publishing

[FIX] Using the mousewheel scroll in the Inspector no longer freezes while the mouse is over a text entry field 

[FIX] Fixes issues with full width shapes that have borders

[FIX] Fixes issues for shapes that have different fill colors

How To Update To EverWeb 3.4

You can easily update EverWeb by either:

1. Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon. Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

Remember, you won’t lose any previous data when updating as your website project files are stored elsewhere on your computer.

The update is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free update period from EverWeb’s Preferences window or from your client area.

If you have passed your one year of free EverWeb updates, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of updates and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

• The EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The EverWeb User Manual in EverWeb’s Help-> User Manual menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

As you may know already, EverWeb Garden is a new third party provider of EverWeb widgets. To launch their site, EverWeb Garden offered EverWeb users their initial batch of over 60 widgets for free. This offer has now been extended for a limited time! If you missed out the first time round, you now have another chance to get an assortment of dynamic, professionally designed third party widgets absolutely free.

One type of widget that is always in demand is website navigation widgets, so in this post we will be reviewing six EverWeb Garden navigation widgets. All the widgets reviewed below can be used on either fixed width (centered or left aligned) page layouts or in a responsive page layout unless otherwise stated.

Fading Navigation Bar Widget

The Fading Navigation Bar widget is a simple widget that can change its colors as you scroll down the page. This adds an interesting way to keep the navigation menu prominent when your visitor scrolls the page. The effect can be applied to both simple and hamburger style navigation menus. When using the Hamburger menu option, the dropdown menu items are displayed in the center of the page with an ‘X’ to close the navigation in the top right hand corner. It is a nice, clean look for your navigation.

In addition, you can add your own logo to the navigation as well as a button which has the option to change its own color as you scroll the page. The button can be used in both simple and hamburger style navigation menus. A button can be useful as a ‘Call To Action’ highlighting e.g. special offers or limited time online sales etc. to your site’s visitors.

Fading Navigation Bar Pro Widget

The second widget in this review is the ‘Pro’ version of the Fading Navigation Bar widget. As with the regular version of the widget, simply add the pages that you want to the navigation using the ‘Add’ button. In the Pro version of the widget you can add dropdown menu items to the navigation. You can add any page in your site to any dropdown menu. The Dropdown menu feature also has its own styling options so that you can create exactly the look that you want to match with your website’s design.

Slide Out Navigation Widget

The Slide Out Navigation widget is a popular style of navigation seen in many websites as it offers a clear and simple menu style that slides out only when activated. This feature helps keeps your page design clean and simple in appearance.

The widget works in a simple way. Just drag and drop it on to the page and you will see a ‘Hamburger’ icon displayed. You can change the color of the hamburger itself, its background and the font size and style that the navigation uses. The width of the navigation can also be adjusted as desired.

You can add your own logo to the top of the slide out menu and adjust its sizes required. The navigation can slide out from either the left or right side of the screen and the navigation’s text can be left, right or center aligned. The smooth fly out animation effect adds a nice quality element to the widget.

In addition to the above mentioned options, you can add a button to the bottom of the slide out menu. This is great for when you want to highlight, for example, links to ‘terms and conditions’ pages, sales pages and so on. As you would expect, the button itself is fully customizable so you can match it up perfectly to your site’s own design style.

Mobile Menu Widget

The Mobile Menu widget is a variation on the Slide Out Navigation widget, however, this widget allows you to link to pages within your project file, to external pages and even to file types such as PDF files. The Hamburger icon can be customized including its size which can be adjusted just by dragging the icon’s grab handles or by using the Metrics Inspector.

This Mobile Menu Widget has many options available to it such as how you want the navigation to be displayed: as a dropdown, slide overlay, slide push or as a popup. You can even add a search field to you navigation menu!

Navigation Bar with Icons Widget

The Navigation Bar with Icons widget give you a really nice way to create menus that look like, for example, EverWeb’s Toolbar. The widget includes eight built in icons or you can use icons from Font Awesome which has plenty of free to use icons to choose from! You can customize the widget’s text fonts, set top and bottom margins and even the maximum width of the navigation. The Navigation Bar with Icons Widget is a simple, but really effective navigation combining text and icons!

Hidden Navigation Bar Widget

The final widget in this review is the Hidden Navigation Bar Widget. This is a fixed widget that hides itself once you scroll down to a predefined location on the page. As with some of the aforementioned widgets, you can also add a button to the navigation menu and there is full customization available for the navigation as you would expect.

EverWeb Garden’s navigation menu widgets provide a great way to add modern styles and variety to your website’s navigation. The full range of third party EverWeb Garden widgets is still available for free for a limited time only on their website. If you have any questions about these, or any other widget provided by EverWeb Garden, please contact them directly via their website.

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

The Image Gallery Widget is one of the EverWeb’s original set of widgets included in the product when it debuted back in November 2013. The widget is designed to show off your images in an organised manner and at first it only included four basic options. Seven years later, the addition of many new and enhanced features, the widget gives you an easy yet flexible way to display your images to their best effect.

The Image Gallery Widget 2020

The Image Gallery Widget has come along way for sure, but one of its enduring features is that you can still drag and drop your images on to the widget in the Editor Window. Images can be drag and dropped from either the Assets List or from another source such as the desktop or from a Finder Window. Reordering images within the widget also remains the same, just drag and drop the image you want to move from its original location to its new location within the widget. All wonderfully easy!

What the current version of the widget has over the original version is an Assets List in the Widget Settings tab so that you can easily see the file names of your images. The Assets List also provides an alternative method of adding, moving and deleting images from the widget.

Moving the Image Gallery Widget

Whilst dragging and dropping images on to the Image Gallery widget is consentient, moving the widget itself around the page could in the past cause some issues. In EverWeb 1.0, you had to make sure that you grabbed the widget in exactly the right spot to be able to move it around the page, otherwise you could be grabbing one of the images within it instead! Later versions of EverWeb added a small ‘+’ symbol in the widget’s top right hand corner which you could click and drag to move the widget around the page. In the latest version of EverWeb you get a more prominent coloured directional indicator in the top right hand corner of the widget to make moving it around super easy.

An Improved Appearance

The original widget only allowed you to change the size of the image thumbnail and the spacing between images, whilst the most recent version of the widget gives you a wide range of options to control the appearance of your image gallery. You can now have up to six columns in the gallery and you can set how many images per page you want. The Image Gallery can display its images in Portrait, Landscape, Fill, Fit or Default gallery sizes. There is also an option to caption your images as well.

An Improved Slideshow

The Slideshow feature of the widget in version 1.0 was again very basic as you could only change the slideshow time and whether to autoplay the slideshow or not. Things have come a long way as you can now control the image size (Larger images and slower download times, or smaller images and faster download times). There are also options within the slideshow to show Social Media buttons, a Zoom button, Full Screen button and Download button. All these options have also recently debuted in a new slick, updated, responsive slideshow bringing the feature nicely in to 2020!

Improved Image Gallery Pagination

The most recent update to the Image Gallery Widget added a new Pagination feature to the widget. If you are familiar with Blog Post Pagination you will notice the similarity. Pagination helps your visitors easily move between gallery pages when you have more than one page of images to display. Whilst there has been pagination in the Image Gallery Widget for a long time, the feature was not easy to stylize until EverWeb version 3.2. Now you can have pagination buttons at the top, bottom or top and bottom of the gallery. The pagination buttons can be customized to include the background, mouse over, selected and deselected background colors that you want for your site. You also have control over the corner radius of your buttons and how far the buttons are spaced apart.

If you want to change the font and size of the pagination numbers, just click inside the pagination area, then press Command+T to call up the Fonts Panel. Select the Font and Font Size that you want from there! If you want to change the color of the pagination numbers, go to the Hyperlinks Inspector. Remember that the pagination buttons are links! Set the colors and underlines of these links using the Normal Rollover and Visited options.

EverWeb’s Image Gallery has come a long way since its debut. If you want a quick, easy and flexible way to display images in your website, check it out!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Creating the design theme for your website is one of the most important decisions you will make when building your EverWeb created website. Your website’s theme defines who, and what, you are on the Internet so taking the time to get it right first time is important. But what of your blog? Should you adopt the theme of your website or should you do something a little different? Many website designers and bloggers choose the latter option, creating their different theme to that used for the main site.

There are good reasons for creating a distinct look for your blog. The first is exactly that – it is distinct – telling your visitors that they are in a part of your site that is different to the rest of it. A blog is where you create more in-depth content, or content that is more immediate to communicate, or where opinions and discussions are invited and so forth. As such, it is often a good idea to give the blog its own design identity. Something similar, but different, to the main site design is usually the best approach. In this way you maintain the site’s aesthetic whilst signalling visitors that they are in a specifically different area of the site.

When designing the theme to your blog, bear in mind that you will probably want to create one design for the blog main/archive pages and one for the blog posts page. Here we look specifically at the blog posts page as there are design options only available to this page type.

Creating a Blog Post Theme Template

There are three ways in which you can create a blog post theme template:

EverWeb’s Master Pages Feature

The Master Page feature can be used on any page in your website, and the blog main/archive pages and the blog posts page are no exception. Click on the posts page in the Web Page List, then go to the Page Settings tab of the Inspector Window to the right of the Editor Window. The first section of the Page Settings tab is where you attach your Master Page. Use the dropdown to select the Master Page that you want to apply to the blog posts page. When you have selected the Master Page, it will be applied to all of the blog posts.

The Live Blog Post Preview Window

In the Blog Posts page, you have the Blog Posts Editor Window where you add your post’s text and images. The window below the Blog Posts Editor Window is the Blog Posts Preview Window. This is where you see a live, real time preview of how the post will look when it is published. This is typical for blogging, where the editor window is used just to input text and images, whilst the preview window deals with the formatting tasks.

If you add objects in to the Blog Posts Preview Window, they will appear on all of your blog posts. This sometimes catches people out so be aware of it when you start adding objects!

To set up the fonts of the blog post’s Title and Date fields, go to the Widget Settings and use the ‘Title Style’, ‘Date Format’ and ‘Date Style’ fields. The font of the post itself is controlled in the Blog Post Editor Window so that you can have different fonts for different blog post entries if you want.

Most of the other features in the Blog Post Preview Window are also controlled using the Widget Settings e.g. Navigation Links and Blog Post Cover Image settings. Other general page settings work in the same way as for regular pages in EverWeb, for example, Page and Browser Background colors and page dimensions are set from the Page Settings tab.

Combining a Master Page with the Blog Post Preview Window

The third option available to you is to combine the above two options. This is useful when you want to keep some elements of your blog post page design fixed and some elements flexible. For example, you may want to keep the header and footer areas of your post fixed. In this case you may want to place such objects in a blog post Master Page. In the Blog Post Preview Window you would see these objects with the black page symbol displayed in their top right hand cornets indicating that they can only be edited by editing the Master Page itself.

For objects that may change over time (e.g. you may have a special offer banner that is time limited) you could use the live Blog Posts Preview Window for these types of object. In this way you retain the overall blog post design whilst having the flexibility you need when you want it!

Which Approach Is Best For Your Blog Posts?

The approach that you choose is really dependent on the requirement of your website. Knowing the ways in which you can create template pages for blog posts is the key as to the method that you will use when it comes to creating your own blog post theme template.

If you have a comment about this blog post, please do let us know in the Comments Section below. We’re happy to help!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter

Instagram

Responsive Web Design is the website paradigm of today. Creating websites using scaleable pages was for a long time the holy grail of website design. And with good reason too, as if done correctly, pages created in this way look and work fantastically on all devices that they are displayed upon.

The problem with this concept though, are the words ‘if done correctly‘. Responsive Web Design is, in itself, a more complex design paradigm to get your head around than fixed width page designs. There’s also the matter of design freedom Many website designers prefer using fixed width page layouts, such as the centered page layout in EverWeb, as such layouts allow text, images and other media to be placed freely on the page. Responsive Website Design is often seen as more restrictive in this respect.

There are many pros and cons in both responsive and fixed width design strategies and there is no definitive answer as to which approach is better. However, it is usually best to build your website in the way that suits your website’s goals and requirements. From this starting point, the choice over which page layout style to use should be easier.

What is certain, though, is that Responsive Website Design is here to stay. If you have EverWeb 2.8 or higher, the responsive page layout is built in to the product.

For a full deep dive in to Responsive Web Design in EverWeb, check out our YouTube videos and the EverWeb User Manual which includes a dedicated chapter on Responsive Web Design. In addition to these resources, here are some EverWeb responsive page design tips to help you along the way.

1. Update EverWeb to the latest version. Since the introduction of the responsive page layout in EverWeb 2.8, there have been many additions and enhancements to the tools that you can use to create responsive web pages. For example, the Metrics Inspector has added maximum content width, show on device and breakpoints. There is also responsive ‘Set shape as scroll position‘ which enables robust object hyperlinking in a responsive environment. The Shape Options tab has added full width background fill capabilities for full width widgets. The Responsive Row, FlexBox, Text Section and Responsive Image Gallery widgets have all been upgraded and most other widgets have gained full width capability.
2. The FlexBox Widget Is Your Go To Solution! Designing a website means making lots of choices. In responsive page layouts, the FlexBox widget will probably be your widget of choice to make your page design the best it can be. When combining objects together, such as text and images or images, video and text, or when you need to add a button in to the mix, the FlexBox widget has the most options and flexibility. The widget can even be a great solution when you are using only type of object on your page. If you cannot decide which widget is best to use to solve your design issues, try the FlexBox widget first!
3. Responsive Row Widget Overuse. Often the Responsive Row widget is used for everything even when it is not needed. Whilst the widget is a ‘jack of all trades’, using it when you do not need to complicates your design and adds unnecessary code to your page. Check out our ‘Responsive Row: To Use or Not To Use‘ blog for more hints and tips on when, and when not, to use the Responsive Row widget.
4. Check Out Show on Device! Even though Responsive Web Design is the one page solution for all device types, you may find that sometimes you need a particular design solution for one, or more, device types. This is especially so when viewing pages on mobile devices where horizontal space is limited and you do not want a page height that has your visitor scrolling seemingly forever. EverWeb’s Show on Device feature lets you control when you see objects that are inside a Responsive Row widget. For example, your Responsive Row widget contains two images and a TextBox. The TextBox has a large amount of text within it. This is fine when viewed on a desktop or tablet computer. On a mobile device, however, you may want just a summary of the text instead. To do this, duplicate the TextBox in the Responsive Row widget. Edit the text of the duplicate to produce your summary text. Then go the Metrics Inspector and uncheck all of the Show on Device options except ‘Mobile’. For the original full text TextBox, uncheck Show on Device only for ‘Mobile’. In this way you will get the full text on all devices except mobile, and you will get the summary text only on mobile devices.
5. Margins. Setting left and right page margins really comes in to play when your page is displayed on mobile devices where you do not want your content up against the left and right edges of the screen. Usually, setting a margin of about 30 pixels from the Metrics Inspector will give you enough left and right margin space. If you are setting margins for a Responsive Row widget, remember to make sure that the objects within still fit properly. Use Preview to test and reduce the width of any fixed width objects inside the Responsive Row widget if you need to.
6. Maximum Content Width. As you increase the width of your browser, you may find that objects on your page get too spaced apart from each other. Using Maximum Content Width you can fix the width of the selected full width object to a specific maximum value. The objects inside the full width object will not stretch out beyond the value you set.
7. Look for Simple Solutions. One of the things you should never forget when designing is that often we overlook simple solutions to design problems. For example, you may be tempted to add a full width TextBox in to a Responsive Row widget in order to get extra top and bottom padding. However, you do not actually need to do this as you can use the Insert Margin, Before Paragraph and After Paragraph controls in the Text Inspector to do just this. Remembering simple solutions will make your site easier to manage and maintain in the long run.

If you have your own tip on how to make a better responsive page in EverWeb, why not share it with the community in the Comments Section below. We would love to hear from you!

Gumroad is a website that brings ‘super simple commerce to creators’. Creatives specialising in films, courses, music, books, comics and other genres use Gumroad to easily sell their products on line.

Gumroad includes a simple set up, a heavily optimized purchase experience and backend tools to analyse your sales data, manage your customers and build your audience.

Integrating Gumroad with EverWeb

Integrating Gumroad with your EverWeb website is easy as there are a number of ways in which you to do this. Such flexibility means that you can sell your products in whichever way is best for your existing and potential online audience. If you want, you can also sell physical goods as well.

When you begin using Gumroad, you will first add a product to your profile. When you add your first product, you will eventually come to the Share Your Product screen…

If you have previously added a product, go to the Products menu, then select the product that you have already added, then select the Share menu option.

There are three ways in which you can link to Gumroad from within your EverWeb website.

Using a URL Link

The first method is by adding a URL link in to your site. Use the ‘Copy URL’ button in the ‘Share your product’ screen to copy your product link to the Clipboard. 

Next go to your page in EverWeb where you want to place the link. You can use a EverWeb’s Hyperlink Inspector to link the Gumroad URL to a piece of text or an image, or you can add the link to a link button in, for example, the FlexBox Widget.

When using the FlexBox widget, select the Embedded Object that you want to attach the link to in the Widget Settings. Next, scroll down to the Link button in the Button Settings section of the widget. Click on the ‘Link’ button and paste the Gumroad URL in to the URL field. Click OK to finish then preview, or Publish, your page to test the button.

Using Gumroad’s Overlay Widget

The second option is to use Gumroad’s Overlay widget. Using the Overlay widget allow your website to have inline purchases without having to leave your site. You can customize the widget’s button text and there are also options to automatically trigger a payment form and to allow single product purchases.

Once you have set your text and options, click on the ‘Copy’ button to copy the generated code to the clipboard 

Next go to the page in EverWeb where you want to add your product. If you are using a Responsive Page Layout, you will first need to have a Responsive Row widget on your page. If you do not have this widget on your page, drag and drop it on to the page and position it where you want it.

With the Responsive Row widget in place, go back to the Widgets tab and drag and drop the HTML Snippet widget on to the page. In the HTML Code box of the widget, paste in the code from the clipboard. Click on the ‘Apply’ button when done. The Editor Window will update. Preview or publish your site to test.

Using the Gumroad’s Embed Widget

The last option is the Embed widget which lets you embed your products in to your website. This is also a useful option if you do not have an HTTPS website. 

Select the Embed widget option and, as before, use the ‘Copy’ button to copy the code to the clipboard.

As with the Overlay widget option above, you will again need to drag and drop an HTML Snippet widget in to a Responsive Row widget on your page. In the HTML Code box, paste the code from the clipboard and press ‘Apply’ to finish. The Editor Window will update. Preview or publish your site to test. 

If you are using a Centered or Left Aligned page layout, you can add the HTML Snippet widget anywhere on your page. The Responsive Row widget is only needed for the HTML Snippet widget when using a Responsive Page Layout.

Watch The Video

Check out the link below for a video walkthrough that shows you how to link your Gumroad products in EverWeb.

When most people hear the words ‘website maintenance’ the response will typically be along the lines of “Tomorrow”, “I’m too busy”, “I’ll do it later” or something similar! Yes, it can be a dry subject, but it can be a very positive experience for both you and your website visitors. Here are some tips to help inspire you to do a bit of maintenance on your EverWeb created website from time to time!

1. Update EverWeb To the Latest Version. The first action to take when talking about website maintenance is to download the latest version of EverWeb. Apart from new and updated features, there are always bug fixes and optimizations included in each release.
2. Republish Your Website. In every release of EverWeb we look at getting code even more efficient! This applies to both the EverWeb app itself, and to the code that gets generated when you publish your website. For example, in EverWeb 3.3 the app itself should run faster and be more responsive. If you publish your entire site using the File-> Publish Entire Site menu option, you should also find that your web pages load quicker and are more responsive in use. In a Google Page Analysis, you should see page load speeds improve by 50% from EverWeb 3.2 to 3.3.
3. Reduce the Size of Your Project File I. If your website has assets that are not used, and that you are never going to use, in your Project File, why not delete them? Deleting unused asset will reduce the size of the Project File so that it will be quicker to load when opened, and also faster to work with when opened. Click on the Settings Cog in the Assets tab and choose ‘Find Unused Assets’ from the contextual menu and follow the instructions.
4. Reduce the Size of Your Project File II. Whist the Assets tab is open, why not check to see if you have any unnecessarily large image file assets in your Project. Large image files will drag down page load speeds and that is not good for your visitor experience. You should replace any large files with more web friendly versions e.g. if you have a large .PNG file, you could replace it with a JPG file which takes up less space. Reducing the size of large image files will improve your page load times in browsers, and will also reduce the size of your Project File.
5. Use EverWeb’s BackUp Feature. Backing up your project file is something that you should always do. Sometimes this will be included in your computer’s backup (if you don’t back up your computer, please try to on a regular basis!) The EverWeb Backup process will allow you to backup your project files on a daily, weekly or monthly basis. EverWeb can also keep either 1. 5, 10, 20 or 100 backup copies. To setup your Backup, go to the EverWeb-> Preferences menu and select the BackUp option.
6. Reclaim Some Disk Space. Like many apps, EverWeb generates cache files whilst you are using the app which are deleted when you quit. There are some instances such as when publishing or previewing, that these cache files are kept in order to help speed and performance. You can delete these cache files if you want e.g. if you have old, or abandoned Projects that are no longer on your computer, you can remove the cache files. You can also delete any unwanted Backup files that you may have. To delete these files, go to the EverWeb-> Preferences menu and choose the Backup tab. Click on the Manage Cache Files button and follow the instructions to remove the files that you no longer need.
7. Out with the Old… EverWeb is constantly adding new and improved features to make your website development easier and quicker. This may mean that over time some of the features in your website may benefit from being replaced by such new or updated features. A good example of this is the PayPal widget. Before EverWeb 2.8, you would have to insert your product image, product description and PayPal widget as separate objects then align them. This is now no longer necessary as from EverWeb 2.8 there are now product image and description fields built directly in to the PayPal widget.
8. Check your SEO. Over time you may find that the direction of your business changes. If this happens, you may want to double check that your website’s SEO is not outdated. It is easy to update the contents of your page, but often it is easy to overlook its SEO. If you need an SEO refresher, checkout the SEO for EverWeb Video Course.
9. Update Your Website’s Content. Updating your website’s content should be something that is done on a regular basis. It is a good way to show existing and potential customers that you are still in business. Websites that are not regularly updated, or are not updated at all, give the impression that they are not invested in their visitors and so potential and existing clients have a greater tendency to click away from such sites. Updating your website’s home page and blog on a regular basis may help retain and even grow your business.
10. Do Your Documentation! The last way to maintain your website is to document it. Even if it is bare-bones documentation, something is better than nothing. Think about the essentials that you need to document e.g. the style of your website (fonts, colors etc), your website links, the STMP Settings details of your Contact Form Advanced widget and so on. You may find that even noting down the very basics may one day pay off, saving you time, effort and frustration!

If you are goal oriented about website maintenance, you may find that you can maintain and grow your existing business. A little effort can reap rewards!

If you have a website maintenance tip of your own, please let us know in the Comments section below!