Rapidweaver for Mac

Stacks Image 14929
Rapidweaver, quite simply, is the best web design software for mac. It makes web design easy and accessible for the amateur, without you having to learn how to code in html. And yet it is powerful enough for use by web design professionals, should you end up making a profession of it.

Nowadays, the ability to build and manage your own website is a life-skill that puts you in the driving seat in so many different ways. Especially if you run your own business, it is a skill that gives you a huge advantage over your competitors, most of whom are dependent on someone else to run their website. Why depend on someone else when Rapidweaver makes it so easy?

No-one is motivated like you are to see your business succeed and grow. If you manage your own website, it will naturally grow and evolve with your business, and will drive your business growth. If you are a business owner, it that your experience? Or is your website a constant source of frustration, like it is for so many business owners? Are you tired of having to nag your web designer every time you want some small change, or of being told you can't do this or you can't do that with your website. If that's the case, instead of your website driving your business growth, it is more likely that it forever lags behind your business and holds it back.

Your website is such an important part of your business. Start learning Rapidweaver today, and get back in the driving seat!
Please note: The information provided on this website is entirely educational and intended to help you learn how to build websites with Rapidweaver and its add ons in the most efficient way possible. I receive no financial benefit from any of the links included on this page.

Realmac Software

Rapidweaver is the creation of Realmac Software, a small software company based in Brighton, England. Founded in 2002 by Dan Counsell, Rapidweaver is their flagship product. Launched over 10 years ago, Rapidweaver is now supported by a worldwide network of third-party developers producing various addons that enhance the Rapidweaver platform. As such, it is a web design platform that is continually evolving and improving. Because you can purchase addons on an item-by-item basis, you can choose those that are most relevant to your specific needs and tailor Rapidweaver in an extremely powerful, yet affordable, way.

The following are links provided by Realmac that you may find useful:

Rapidweaver Knowledge Base, Rapidweaver 7 Manual (PDF), Rapidweaver Newsletter, Weekly Podcast

Rapidweaver Community

Rapidweaver is also supported by the Rapidweaver Community. This is the official place to find Addons, Tutorials, Podcasts, a Gallery of websites built with Rapidweaver, and the Rapidweaver User Forum. The following tutorial videos are freely available without subscription:
Further tutorials videos are available by subscription to the Rapidweaver Community, which costs from $10 per month for Silver membership. You can cancel at any time.

Rapidweaver Forum: If you have a question about a specific topic or problem you are having, why not search the forum and see if it has already been dealt with. If not, ask your own question and create a new thread. There are lots of Rapidweaver enthusiasts out there who are only too eager to help.

Addons

There are 5 different categories of addons for Rapidweaver:

Plugins - these add a new page-type to the list of built-in ones that ship with Rapidweaver

Themes - these change the overall style and look of your website. Rapidweaver includes many built-in themes, but there are many more available from third-party developers

Stacks - the Stacks Plugin from Yourhead.com adds a Stacks page-type to Rapidweaver. This is probably the single biggest enhancement you can buy for Rapidweaver. The building blocks of a Stacks page are stack elements, commonly known as stacks, and these allow you to build your webpages in an incredibly flexible and powerful new way. The plugin comes with Yourhead's own set of stacks, but this plugin has also created a new platform for third party developers to add to. In fact, there are now more Stacks addons available than any other type of addon.

Projects - when you build a Rapidweaver website, it is saved on your mac as a Rapidweaver project file. This is the offline version of your website. When you publish it, it uploads to the online version of your website. Some developers make their project files available. These may be offered as a simple demo of how you might use one of their stacks or themes. But in some cases they sell their project files as a kind of website blueprint, indicating which additional addons are used in it and required. This is more like buying a website on a plate, as it were, and all you have to do is personalise it to your own use.

Snippets - these are blocks of code that you can drag-and-drop into parts of your webpage to perform various functions. Sometimes the function of these is to support another addon, or they can work independently. Nowadays you don't hear so much about snippets as the focus is more on stacks. Snippets are usually free. Check out Henk Vrieselaar's free snippets, as an example.

In all, there are now over 1,000 addons listed on the Rapidweaver Community website.

Addons Developers

It is worth browsing the websites of some of Rapidweaver's top third-party developers. The following is by no means an exhaustive list, but certainly check out these ones.

Plugins:
Yourhead - the Stacks Plugin is their flagship product, but there's more

Foreground - RapidCart is their flagship product for turning your Rapidweaver site into a fully fledged e-commerce site.

Yabdab - creators of Formloom and Dateloom plugins and several high-quality stacks

Chillidog Software - creators of WeaverPix slideshow plugin and several stacks

NimbleHost - creator of the Waterfall plugin that makes updating themes easier
Themes (pre-designed)
SeyDesign - Aptenon, Mirage and many more fantastic themes. SeyDesign is now owned by Will Woodgate, my favourite theme developer, who also owns Themeflood (below).

Themeflood - by Will Woodgate, home of great themes like Volcano and Longitude. Boutique is a fantastic choice for an eCommerce website. This website is made using Themeflood's Paradise theme. Themeflood themes and many SeyDesign themes are built on the Bootstrap framework and provide built-in support for Font Awesome, Free Style banners, and Extra Content. You can also download demos of these themes, together with project files for their live demo sites so that you can try each one out, and explore all the theme style options before you commit to buy. Will Woodgate also has lots of great stacks at Stacks4Stacks and RWExtras.

Elixir Graphics - Their Voyager, Tesla themes come built-in with Rapidweaver 7. Corresponding PRO versions are available for purchase, along with lots of other great themes. I used one of their responsive themes for several years. They have recently released the revolutionary Foundry theme which comes with a complete set of stacks for building your own theme from the ground up.

Joe Workman - creator of several themes, including the revolutionary Foundation theme. Foundation allows you to throw off the constraints of using traditional themes, and to design your own using the power of Stacks. If purchased as a bundle, Foundation comes with a very comprehensive set of stacks, minimising your need to purchase lots of third-party stacks.

Michael David Design - creators of Endeavour, Codex and other popular themes, as well as a number of stacks that give you additional banner options.

Nick Cates Design - creators of Fortress and many other popular themes and stacks, including the Cartloom e-commerce stack

Brandon Lee Theme Design - creators of Allegro, Couture, and many popular themes

Multithemes - creators of Lander and many more

Henk Vrieselaar - creators of the Retract theme and more

Kuler Solutions - creators of Chronicle and more

Weaverthemes - creators of Beam and other popular themes

One Little Designer - creators of Vidrio, Omnicon and other popular themes

Yabdab - creators of the free BootSnap theme, intended for more code-savvy Rapidweaver users

Yuzoolthemes - high quality themes and stacks offered as the Oak Bundle on a pay-what-you-like basis
Themes (build-your-own using stacks)
Once you have gained some confidence in building Rapidweaver websites using pre-designed themes, the next step is to try out one or both or the following. Whereas designing your own theme normally requires considerable coding expertise, these two base-themes each come with an extensive set of stacks that allow you to design your own theme from the ground up using the drag-and-drop simplicity of stacks. Whichever you choose, they give you ultimate control over your web designs, without you needing to code.
Foundry theme and set of stacks by Elixir Graphics. Costing $84.95, this theme is supported by excellent tutorial videos, documentation, and example project files. Also see the 'Responsive Sites with Foundry' course at Rapidweaver Community which is available to subscribers from as little as $10 per month.

Foundation theme and stack packs by Joe Workman. Costing $99.95 for the complete bundle, this theme is also supported by excellent tutorial videos, documentation, and a demo project file. It also integrates seamlessly with Joe's Total CMS solution. See Joe's 6 part video set entitled Getting Started with Foundation and Total CMS. Also see the 'Responsive Sites with Foundation' course at Rapidweaver Community which is available to subscribers from as little as $10 per month.
Stacks
Most of the theme developers above also create stacks that are worth checking out. But there are some developers who really stand out:
Joe Workman - probably Rapidweaver's top addons developer, Joe creates amazing stacks to help you 'Go forth and make your websites great'!

Stacks4Stacks - owned by Will Woodgate, this is home to a wide range of stacks. Many of these stacks are free, and you can download a free demo of those that are not. Also check out Will's other stacks at RWExtras.

Big White Duck - lots of high quality stacks available on a free / donate basis

CosCulture - lots of high quality brilliant stacks

Defligra - lot of stacks, including some free ones

Doobox - you can buy their whole amazing stacks collection as a bundle for just £89. This is a deal you shouldn't miss. For advanced users, they also sell a collection of Mac Apps for anyone wishing to develop their own stacks.

Elixir - best known for their themes, Elixir have also created some really useful stacks. Confusingly, on their website they call these 'plugins'

Chillidog - some of their stacks stand out, like Grid Iron which enables you to display the contents of a Google Spreadsheet in your Rapidweaver site, and FormsPlus which enables you to create more intelligent forms

InStacks Software - creators of the Poster Stack that enables you to build blogs using stacks, the Pulse CMS Stack, the Paddle Stack for integrating the Paddle eCommerce solution in Rapidweaver, and more.

One Little Designer - lots of high quality stacks

Marathia - lots of stacks, many of them available on a pay-what-you-want basis

Michael David Design - has created several stacks for transforming the banner area of your webpage. These complement his and other third-party themes

Maik Barz - over 50 stacks

Nick Cates Design - 8 stacks that can do amazing things to your website

Useful Snippets

HTML Cheat Sheets
Add Built-In banner
Paste this code into the styled text area of the sidebar. Change 1.jpg to the name of the banner you require. In the Alt Tag replace Description with a description of the image (optional). Note, this snippet works for Will Woodgate's themes from Themeflood and SeyDesign that support FreeStyle banners.
Add Banner from Resources
Place banner image in Resources folder, and paste this code into the styled text area of the sidebar. Replace IMAGE with resource(image.jpg) where image.jpg is changed to the name of your banner file. In the Alt Tag replace Description with a description of your image. Note, this snippet only works on themes that support FreeStyle banners.
Add image from Resources
Place image in Resources folder, and paste this code into an html stack where you want it on the page. Replace IMAGE with resource(image.jpg) where image.jpg is changed to the name of your image file. Change the alignment to left, center (American spelling), or right. In the Alt Tag, replace Description with a description of your image.
Alignment
Change the alignment to left, center (American spelling), or right. Replace Content with text or code.
Add Heading with Alignment
Edit 'Heading' text, change the alignment to left, center (American spelling), or right, and replace h3 with size required (h1-h6).
Add a Link
Basic syntax for adding a link. Edit anchor text and URL. URL may be external, e.g. http://www.example.com. For a link to another page on the same website, replace URL with /folder where folder is the location of the page's index.html file.
Add a Link Anchor
In order to link and scroll to a specific position on a long page, paste this into an html stack at the required position and change the name of the 'anchor' if desired. To link to this anchor within the document link to a URL of #anchor. If linking to this page position from an external website add #anchor to the end of the page's URL. It will open the page at the position of this anchor.
Add Heading with Alignment and Link Anchor
Edit 'Heading' text, change the alignment to left, center (American spelling), or right, replace h3 with size required (h1-h6), and change 'anchor' as required. To link to this anchor within the document link to #anchor, or add that to the page's URL if linking to this anchor from another website. It will open your page at the position of your heading with this anchor.
Add Link Anchor to Top of Page
Paste this into a html stack at the top of the page, or open the Page Inspector and paste it at the top of the body code tab window. At the bottom of the page, add text saying 'Back to Top' and give it a URL hyperlink of simply #top
Add an Image with a link
The first URL is the hyperlink you want to attach to the image. The second URL is that of the image file
Extra Content
Paste into the styled text area of the sidebar, or into an html stack. Replace Content with text or code. Change the Extra Content container number according to your choice of container. See Extra Content in Themeflood's Knowledgebase. Alternatively, use the free Extra Content Plus stack.
Font Awesome prefix to Title
Replace Font Awesome icon name and Title text according to your choice. See Themeflood's listing of Font Awesome icon names.
Font Awesome icon x3 with link
Paste into styled text area or html stack. Change fa-home to name of required icon. Adjust size setting (1-5), and edit link. See Themeflood's listing of Font Awesome icon names. For syntax, see Font Awesome Icons in Themeflood's Knowledgebase.
HTML Enclosure Stack
There can be occasions when it is desirable to apply html code to a whole stack, e.g. to change the alignment of all its contents. Use the free HTML Enclosure stack from Joe Workman. This is a drop zone enclosed between html areas above and below. Whatever html formatting is applied before the stack, it needs to be closed off with the appropriate closing code after the stack. For example, to center-align a stack, use the following code, where STACK represents the stack drop zone.

STACK

Navigation Parent Page with Arrow
Use as Page Title in Navigation - has drop down arrow for top level parent page. Replace angle-down with angle-right for next navigation level with further child page.
Add Styled Text Title with Colour & Alignment & Formatting
This code can be useful for creating headings, but gives more flexibility than using 'h3' type heading code. Paste this code into an html stack where you want it on the page. Edit 'Title', change the alignment to left, center (American spelling), or right. Adjust font size (1 to 7). Change colour as required using colour (e.g. green) or hex code. Text shown is formatted bold - use 'i' instead of 'b' (before and after text) for italic, and 'u' for underline.
Add Styled Text Title as above prefixed with Font Awesome icon
This code can be useful for creating headings, but gives more flexibility than using 'h3' type heading code. Paste this code into an html stack where you want it on the page. Edit 'Title', change the alignment to left, center (American spelling), or right. Adjust font size (1 to 7). Change colour as required using colour (e.g. green) or hex code. Text shown is formatted bold - use 'i' instead of 'b' (before and after text) for italic, and 'u' for underline. Change name of font awesome icon name and size (1 to 5) as required, see: Themeflood's listing of Font Awesome icon names.

Social Buttons

Add Profile buttons to an Extra Content container
Copy and paste this code as plain text into the body tab of the Page Inspector for each page, or the body tab of the Site Code Settings for site-wide application of profile buttons:
Edit Code
Change the Extra Content number, currently set at 2, to the number of the container you want to target.
Replace https://www.facebook.com/HamishThePlumber with the URL of your own Facebook page.
Replace https://plus.google.com/+Hamish-the-plumber with the URL of your own Google Plus page.
Replace https://twitter.com/hamisherskine with the URL of your own Twitter page.
The alignment is currently set to center (American spelling). Replace center with left or right if preferred.
Colours inherit settings from the theme style settings for links in the Extra Content Area specified.
Edit fa-2x to size required for each icon (1x to 5x). Add -square to icon names if preferred.
For Vertical Layout

Use the following code instead. Otherwise edit as above:
To add Profile buttons at any location on a page

Add an HTML stack to the location where you want them to appear. Paste the following code into the html stack, then edit as above:
References
1) Themeflood's listing of Font Awesome icon names.
2) Themeflood's Knowledgebase.
Add Sharing buttons to an Extra Content container
(See example of this in the navigation at the top of this page)

Copy and paste this code as plain text into the body tab of the Page Inspector for each page, or the body tab of the Site Code Settings for site-wide application of sharing buttons:
Edit Code
Change the Extra Content number, currently set at 2, to the number of the container you want to target.
Replace each instance of http://www.hamish-the-plumber.com with the URL of your own website.
For Twitter, replace 'Small Plumbing Repairs in Exeter' with your own message, separating each word with %20, and replace exeterplumbers with the hashtag your want.
The alignment is currently set to center (American spelling). Replace center with left or right if preferred.
Colours inherit settings from the theme style settings for links in the Extra Content Area specified.
Edit fa-2x to size required for each icon (1x to 5x). Add -square to icon names if preferred.

How to Customise Shares
The target URL for each share is set in the html code, and for Twitter you also place your message and hashtag there. For Facebook and Google+, the rest of the share, including image, title and description, are grabbed automatically as Facebook and Google look at the page being shared. However, you can customise what they grab by adding Open Graph Metatags to the metatags tab of the Page Inspector, or the metatags tab of the Site Code Settings, as in the following example:
og:title
Hamish the Plumber, 01392 458384
og:description
Small plumbing repairs in Exeter
og:type
website
og:url
http://www.hamish-the-plumber.com
og:image
http://www.hamish-the-plumber.com/share.jpg
For Vertical Layout

Use the following code instead. Otherwise edit as above:
To add Sharing buttons at any location on a page

Add an HTML stack to the location where you want them to appear. Paste the following code into the html stack, then edit as above:
References
1) Themeflood's listing of Font Awesome icon names.
2) Themeflood's Knowledgebase.
3) Simple Share Buttons, for syntax of more types of sharing buttons
4) For full details of Open Graph Protocol, see: http://ogp.me/#types
5) Check what Facebook sees here https://developers.facebook.com/tools/debug/og/object
6) Clear the Facebook cache and force it to recrawl your page here: https://developers.facebook.com/tools/debug/
7) SeoSmarty: http://www.seosmarty.com/how-to-force-facebook-to-grab-the-best-image-from-your-page/
8) For further details about OG and Facebook, see: https://developers.facebook.com/docs/plugins/share-button/
Add Sharing buttons using Sticky Navs Stack
(See examples of this on left hand side of this page)

Purchase and install the Sticky Navs stack from One Little Designer. This is useful for placing sharing buttons, or menu items on a page if an Extra Content container is not available in the desired location. Add the Sticky Navs stack to the page, and within that place 3 Sticky Nav Menu Item stacks.

To create animated sticky nav as per top example:
In the Sticky Nav inspector, check 'Animation On', set the Pop Out Width to 120, and the ..xt Icon Padding to 20.
For each menu item stack, set the Font Awesome field to fa-facebook, fa-google-plus, or fa-twitter. Then add the following code snippets:
To create non-animated sticky nav as per lower example:

In the Sticky Nav inspector, uncheck 'Animation On', set the Pop Out Width to 20, and the ..xt Icon Padding to 0.
For each menu item stack, leave the Font Awesome: field empty. Then add the following code snippets:
In both cases, then change each instance of http://www.hamish-the-plumber.com to your own website URL. For twitter, also change the message to what you want with %20 between each word instead of a space, and change the hashtag from exeterplumbers.

Then configure the settings for the Sticky Navs stack to position and colours as required.

How to Customise Shares
The target URL for each share is set in the html code, and for Twitter you also place your message and hashtag there. For Facebook and Google+, the rest of the share, including image, title and description, are grabbed automatically as Facebook and Google look at the page being shared. However, you can customise what they grab by adding Open Graph Metatags to the metatags tab of the Page Inspector, or the metatags tab of the Site Code Settings, as in the following example:
og:title
Hamish the Plumber, 01392 458384
og:description
Small plumbing repairs in Exeter
og:type
website
og:url
http://www.hamish-the-plumber.com
og:image
http://www.hamish-the-plumber.com/share.jpg
References
1) Themeflood's listing of Font Awesome icon names.
2) Themeflood's Knowledgebase.
3) Simple Share Buttons, for syntax of more types of sharing buttons
4) For full details of Open Graph Protocol, see: http://ogp.me/#types
5) Check what Facebook sees here https://developers.facebook.com/tools/debug/og/object
6) Clear the Facebook cache and force it to recrawl your page here: https://developers.facebook.com/tools/debug/
7) SeoSmarty: http://www.seosmarty.com/how-to-force-facebook-to-grab-the-best-image-from-your-page/
8) For further details about OG and Facebook, see: https://developers.facebook.com/docs/plugins/share-button/
Add Profile buttons using Share It Stack
(See example on this page at the bottom of the sidebar)

Purchase and install the Share It stack by Joe Workman. This is a pair of stacks called 'Share It Circles' and 'Share It Icons'. The 'Share It Circles' stack allows you to place 'Share It Icons' in a neat pop-out arrangement around a circular share button.

Add the Share It Circles stack first, set the number of icons you want to add, configure the colour and other options you want. In the section 'Share It - Icon Styles', I suggest you set the Big Icon to 'Link'. Then add Share It Icons to each icon drop zone.

(Alternatively, for a more basic layout, 'Share It Icons' can be placed in a column stack which in turn can be placed within an Extra Content container if required.)

See Joe Workman's Documentation for the Share It stack if you wish to see full configuration details.

For each Share It Icon stack, open the inspector and then:
In the section 'ShareIt - Icon Setup', select the icon, size, and colours you want.
In the section 'ShareIt - Share Setup', set 'Share Attributes' to 'Link to URL'.

To configure icons as Profile buttons, set the URL for each as in the following examples:

Facebook
Replace https://www.facebook.com/HamishThePlumber with the URL of your own Facebook Profile or Business page.

Google Plus
Replace https://plus.google.com/+Hamish-the-plumber with the URL of your own Google Plus Profile or Business Page

Twitter
Replace https://twitter.com/hamisherskine with the URL of your own Twitter Profile page.


References:
1) Themeflood's listing of Font Awesome icon names.
In the settings for each Share It Icon, in the section 'Share It Icon Setup', you have the option to set the Icon to 'Custom', which allows you to use any Font Awesome icon. For other social sites, choose the appropriate icon, and link it to your profile page for that service.

To configure Share It Icons as Sharing Buttons, see the FAQ below
Add Sharing buttons using Share It Stack
(See example on this page at the bottom of the sidebar)

Purchase and install the Share It stack by Joe Workman. This is a pair of stacks called 'Share It Circles' and 'Share It Icons'. The 'Share It Circles' stack allows you to place 'Share It Icons' in a neat pop-out arrangement around a circular share button.

Add the Share It Circles stack first, set the number of icons you want to add, configure the colour and other options you want. In the section 'Share It - Icon Styles', I suggest you set the Big Icon to 'Share'. Then add Share It Icons to each icon drop zone.

(Alternatively, for a more basic layout, 'Share It Icons' can be placed in a column stack which in turn can be placed within an Extra Content container if required.)

See Joe Workman's Documentation for the Share It stack if you wish to see full configuration details.

For each Share It Icon stack, open the inspector and then:
In the section 'ShareIt - Icon Setup', select the icon, size, and colours you want.
In the section 'ShareIt - Share Setup', set 'Share Attributes' to 'Link to URL'.

To configure icons as Sharing Buttons, set the URL for each as follows:

Facebook
Replace http://www.hamish-the-plumber.com with the URL you want to share.

Google Plus
Replace http://www.hamish-the-plumber.com with the URL you want to share.

Twitter
Replace http://www.hamish-the-plumber.com with the URL you want to share, change 'Small Plumbing Repairs' to the message you want to share using %20 as a space between each word, and replace exeterplumbers with the hashtag you want.

Customising what is shared when visitors click your sharing icons
With Twitter, the customisation is all done within the link, including URL, message, and hashtag.

With Facebook and Google, they look at the URL being shared and then grab content to share from that URL. In order to customise what they grab, the URL being shared needs to have custom Open Graph Metatags, as in the following examples:
og:title
Hamish the Plumber, 01392 458384
og:description
Small plumbing repairs in Exeter
og:type
website
og:url
http://www.hamish-the-plumber.com
og:image
http://www.hamish-the-plumber.com/share.jpg
The above metatags can be added to the metatags tab of the page inspector, or to the metatags tab of the site settings. The image metatag requires the specified image file to be present at the location specified in the URL.

Google and Facebook can take time to recrawl or cache your website, so your Open Graph metatags may not work immediately. To force Facebook to crawl your page, see reference 5 below:

References:
1) Themeflood's listing of Font Awesome icon names.
2) Simple Share Buttons, for syntax of links for more social media sites
3) For full details of Open Graph Protocol, see: http://ogp.me/#types
4) Check what Facebook sees here https://developers.facebook.com/tools/debug/og/object
5) Clear the Facebook cache and force it to recrawl your page here: https://developers.facebook.com/tools/debug/
6) SeoSmarty: http://www.seosmarty.com/how-to-force-facebook-to-grab-the-best-image-from-your-page/
7) For further details about OG and Facebook, see: https://developers.facebook.com/docs/plugins/share-button/

Mobile-Friendly Web Design

According to Google, over 50% of website visits are now made on mobile devices. It is therefore imperative that your website is mobile-friendly. There are several ways of ensuring this with Rapidweaver:
Responsive Web Design - Most newer themes for Rapidweaver are responsive, including those that ship with Rapidweaver. This means that your website resizes and adjusts to the browser width. You can check whether a website is responsive, either by viewing it on different devices, or when viewing on a desktop simply adjust the width of the browser window and see how the site responds. Images and videos scale up or down, columns switch between multiple and single layout, and navigation menus switch between desktop and mobile layouts. Responsive web design enables you to create and manage one website that fits all screen sizes, with a single URL. When buying addons such as themes or stacks, check that they are designed to be responsive. Most newer ones are. Nowadays, responsive web design is the normal method of ensuring your website is mobile-friendly.

Dynamic Serving - This is where you specify how certain parts of your page content will appear on different devices. This method is usually used in combination with Responsive web design. For example, Stacks 3 now allows you to hide any stack on mobiles, tablets or desktops, so you can choose what content you want on each device. The Foundation theme and stacks by Joe Workman take this to a whole new level, giving you complete control over how each stack on your webpage appears on each type of device.

Separate URLs - before responsive web design became popular, the normal approach was to have separate URLs such as example.com for desktops and example.com/m for mobiles. If you want to, you can still do this with Rapidweaver using the Mobilize stack from SeyDesign. When placed on a web page, it detects whether the visitor is using a desktop, a tablet, or a mobile, and redirects them accordingly. That way, you can choose different themes for desktop and mobile users if you want to, but you then have separate websites to edit and update.

Blogs with Rapidweaver

A blog is like an online diary. Whenever you add a new post, the latest one appears at the top of your blog page and all previous posts automatically shift down. So a blog is a page containing a series of posts ordered chronologically. Adding descriptive tags to each blog posts allows the visitor to filter blog posts by content or subject as well as by chronology. Many internet blogs are standalone, but with Rapidweaver you can integrate a blog into your website. This gives the best of both worlds - the structure afforded by a website, together with the chronology afforded by a blog.

Rapidweaver's Built-In Blog
The built-in blog plugin provides a very simple-to-use blogging solution that is sufficient for many Rapidweaver users who manage their own websites. It's main limitation is that you have to write and publish your blog posts from within Rapidweaver, and it provides few customisable layout options. Enhancements such as social buttons for individual blog posts can be added using the Blog Enhancement Kit - by Themeflood. This kit is compatible with themes from Themeflood, and some I expect from SeyDesign. Check out Themeflood's support article 'Hacking the Rapidweaver Blog'.

Poster Stack by InStacks Software
Poster Stack from InStacks Software is a new solution for building blogs with stacks, and costs €29.95. This adds flexibility to the layout of your blog. However, you still have to write and publish your posts from within Rapidweaver, and it's hard to beat the simplicity of Rapidweaver's built-in blog.


Remote Blogging Solutions
For many bloggers, the most desirable upgrade is to be able to add and publish posts remotely from outside of Rapidweaver. For example, you may wish to blog from your phone or iPad whilst on holiday and not have to take your computer with you. One way of achieving this is to create your blog using a third-party blogging platform such as Blogger or Tumblr and then integrate that into your Rapidweaver using a dedicated stack or plugin. The other way is to add a CMS solution to your Rapidweaver website. CMS stands for Content Management System and enables you to edit parts of your website by logging in to a remote online dashboard or admin page.


Third-Party Blogging Solutions for Rapidweaver
MicroBlog - by Stacks4Stacks, this is a free and simple to use stack for integrating a Tumblr blog into Rapidweaver. See their demo blog page showing it in action. For an improved experience of Tumblr, I recommend adding the New-XKit plugin to your browser which enables you to block Tumblr's annoying suggestions from your Tumblr page. Once setup, you manage your blog posts entirely from your Tumblr dashboard.

RapidBlog - This is a free plugin available from Yourhead Software that allows you to use Google's Blogger service and integrate it into Rapidweaver website. A synchronisation feature of this plugin allows you to add posts either from your Blogger dashboard, or from within Rapidweaver. If you wish to integrate the RapidBlog plugin into a Stacks page in order to increase the layout options for your blog page, that can be achieved using PlusKit by Yourhead, which costs $19.95.

WP-Blog - by Nilrog is a plugin for integrating a self-hosted Wordpress blog into Rapidweaver, and costs $12.95. Your Wordpress blog has to be hosted on the same web server as your Rapidweaver website, and it does NOT work with Wordpress blogs hosted at Wordpress.com. The free software for creating a self-hosted Wordpress blog is available at Wordpress.org for download (and subsequent upload to your webserver).

Warning: Stacks or plugins for integrating third-party services into Rapidweaver can be vulnerable to the third-party service making changes to their API (interface). Previously, Joe Workman provided a Tumblr Stack that achieved a similar result to the MicroBlog stack. Unfortunately in about November 2016, Tumblr made changes to their API which crippled Joe's stack. To provide a solution for his Tumblr stack customers, he created the TotalMove app to facilitate migration of a Tumblr blog over to Total CMS.


CMS Solutions that Support Blogs
Armadillo - created by NimbleHost. This costs a one-off payment of about $40, and may be used on multiple domains. It allows CMS management of stacks pages, including blogs.

Total CMS created by Joe Workman. It now includes blogs and is the most complete CMS solution for Rapidweaver. You pay a licence per domain of $99.95. Check out their Total CMS Blog demo page and video entitled 'Total CMS Blog Overview for RapidWeaver'. Total CMS can be used with any theme, not just the Foundation theme.

Pulse CMS Stack from InStacks Software. This is a free stack for integrating Pulse CMS into Rapidweaver. Pulse CMS is a premium third-party service. One site costs $10 per month, or you get unlimited sites for $16 per month.

SEO for Rapidweaver (search engine optimisation)

RECOMMENDED COURSE: SEO Fundamentals is a series of 16 tutorial videos available to subscribers to the Rapidweaver Community. Subscription costs as little as $10 per month for Siver membership and you can cancel at any time.

SEO-Rx by Chillidog Software, this analyses your web pages and gives you an SEO score before you even publish your website, along with suggestions of how to improve it. Costing just $29.95, this is a valuable tool.

RapidBot2 by Foreground, this simple plugin helps you tell search engine crawlers whether or not they are allowed to index your website and its various pages, creating the robots.txt file at the root of your online domain. Costs €4.95

Peek Stack by Yuzoolthemes, this tests over 40 aspects of your website, including your competition, for SEO, social, accessibility, speed, mobile, performance and more. Powered by Peek app, Yuzoolthemes promise that the Peek stack will cover all areas of your sites and get you ahead of the competition. Purchase as part of the Oak Bundle of over 60 stacks, all available for a minimum contribution of $40.

CMS for Rapidweaver

CMS stands for Content Management System. With CMS, web designers can give their clients a login and the ability to edit their own webpages, or parts of them, through their web browser. So the web designer creates the structure and style of the website, but is able to hand over the everyday editing and management of the content to the client. Or even if you create and manage your own website, there may be parts of it that you want to be able to edit on-the-fly with your mobile phone or iPad when you are away from your computer.

Several different CMS solutions exist for Rapidweaver, including:
Easy CMS - created by Joe Workman, this allows basic CMS editing of text and images on your web pages. For a one-off payment of $49.95, you can use this on as many websites as you like. Watch the video 'Getting Started with Easy and Total CMS for Rapidweaver'.

Total CMS - this is Joe Workman's complete CMS solution. It includes the simplicity of Easy CMS but also supports galleries, file downloads, video, password protection and news feeds. Now includes blogs. You pay a licence per domain of $99.95. Watch Joe's Total CMS Implementation videos on YouTube.

Armadillo - created by NimbleHost, this allows editing of the parts of the page that you choose. It also supports blogs, all for about $40. Watch the tutorial videos.

Sentry CMS - created by SeyDesign, this is incredibly easy to set up. It allows you to remotely toggle stacks on / off, or to remotely edit the content and formatting of a text stack. Costs $24.95.

EditsPRO - created by Kuler Solutions, this simple stack CMS solution allows several users to login with different levels of access, cost about $25

Pulse CMS - one site for $10 per month, or unlimited sites for $16 per month. Integrate it into Rapidweaver using the free Pulse CMS Stack from InStacks Software. Online Editing with Pulse CMS is a 5-part video course available to Rapidweaver Community subscribers.

e-Commerce for Rapidweaver

There are several solutions for turning your Rapidweaver site into a fully-fledged online store:
RECOMMENDED COURSE: Start Selling Online is a series of 15 tutorial videos available to subscribers to the Rapidweaver Community. Subscription costs as little as $10 per month for Siver membership and you can cancel at any time.

Cartloom - created by Nick Cates Design, this is the solution used by most of the big names in Rapidweaver development. Three different pricing plans are available, including a free option, Plus at $19 per month, and Pro at $29 per month

RapidCart Pro - created by Foreground, this is a one-off payment of about 40 euros for the Starter edition, and about 60 euros for the advanced edition. The advanced edition offers stock management, digital downloads, CSV import/export, and more. Themes that are ideally optimised for integration of RapidCart Pro include Boutique and Volcano by Themeflood

Paddle eCommerce solution can be integrated into Rapidweaver. Check out the Paddle Stack by InStacks Software, and the free PaddleBoard stack by Stacks4Stacks. Paddle is the eCommerce solution used by Themeflood and SeyDesign.

Paypal can be integrated into Rapidweaver in several ways including:
- Paysnap by Yabdab, a simple suite of seven Stack elements that allow you to sell your products and take payment using PayPal, one-off payment of about $30
- Pay and Cart stacks by Yuzoolthemes. This is sold as part of their incredible Oak Bundle, a collection of 60 stacks all for a minimum contribution of $39

Stripe and Stripe Checkout stacks by Yuzoolthemes. See a demo here. These are sold as part of their incredible Oak Bundle, a collection of 60 stacks all for a minimum contribution of $39

E-Junkie can be integrated into Rapidweaver using the free JunkieCart stack by Stacks4Stacks.

Advanced Topics

RECOMMENDED COURSE: Advanced Topics is a series of tutorial videos available to subscribers to the Rapidweaver Community. Subscription costs as little as $10 per month for Siver membership and you can cancel at any time.

Rapidweaver Classroom hosts an extensive collection of tutorial videos by Ryan Smith that you might find helpful. Five free sample videos provide an initial taster experience. A free 5-day trial sign-up gives full access to Undergrad level tutorials, after which you pay $14.97 per month. The first 30 days of Graduate level is available for $19.97, after which you pay $29.97 per month. 6 and 12 month terms are available at a discount. You can cancel your monthly subscription at any time.

Creating Membership Sites with User Logins

Sitelock Stacks - created by Joe Workman, these allow you to easily integrate Sitelok by Vibralogix into your RapidWeaver projects. Its never been easier to build memebership sites or a full feature user login system. With these stacks, you no longer have to worry about adding PHP code snippets to get Sitelok integrated. Simply add these stacks to your page and they do all of the work for you. Check out Joe's promo video.

FTP Clients

I publish my websites using Rapidweaver's built-in publisher. I also use an FTP client to manage files in my online web space, such as when adding warehoused images, or when deleting published files or folders that are no longer needed. FTP clients for Mac include:
Transmit - by Panic Software, this is the one I normally use and I think it's the best, but costs $34

CyberDuck - This is donationware, so you can download and use it for free, but are encouraged to make a donation. Or you can buy it on the App Store for £22.99

FileZilla - a Free open-source FTP client

Photos and Graphics

Photos and Video
High quality images help to set a website apart. When building websites, a good camera plus photography skills are a great bonus. If that's not you, hiring a professional photographer to take some quality photographs of you and your business is likely to be a worthwhile investment. Similarly, having a short but professionally-made video on your home page is a really good idea and is likely to increase your conversion rate.

Stock Photos (premium sites)
Additionally, it may be worth buying some royalty-free stock photos or videos from sites like:

Shutterstock.com, BigStockPhoto.com

Stock Photos (free)
You don't have as much choice on these compared to the premium sites, but check out the following:

Unsplash, Pixabay, PicJumbo, Gratisography, New Old Stock, Wikimedia Commons

GRAPHIC APPS
Graphic Converter - by Lemke Software, costing $39.95. I find this extremely useful for managing photos. Makes cropping, resizing, changing resolution or file format easy. Can also do batch conversions.

Pixelmator - costing $29.99, this is a full featured Photo Editor for Mac. It allows you to work with multiple layers and is a great solution for combining or annotating images. It also includes a plugin for Mac's Photos app. It is a cheap alternative to Adobe Photoshop.

MacPhun Creative Kit - This collection of 6 apps allows you to do amazing things with photos to make them look really great for your website. These apps can be purchased individually, but you make a saving if you buy them as a kit. The Starter kit includes Snapheal, FX Photo Studio and Intensify for £79.99. The Complete Kit also includes Focus, Noiseless and Tonality, costing $149. Snapheal is an amazing tool for removing unwanted objects from your photos. Intensify applies various filters to really enhance the look and colours in your photos. MacPhun also sell Aurora HDR for editing of HDR photographs, sold separately for £78. They recently released Luminar, sold separately for £52, which is a powerful photo editing app.

Rapid Icons - by Gary Simpson, costing $4.99 This app makes it extremely simple to generate your Web Clip and Favicon files. Drag an image onto this app's icon and it generates both files, ready for you to drag into the Web Clip and Favicon dropzones in the General tab of Rapidweaver's Site Settings.

Squash 2 - created by Realmac Software (the creators of Rapidweaver) and costing £14.99, this dramatically reduces image file sizes. This is probably the most important single step you can take to ensure your web pages load quickly. Page loading speed is a very important consideration, both for SEO and for website conversion.

Screenshots - taking screenshots on your Mac can be useful at times, as long as you don't steal copyrighted content. Use shortcuts Command+Shift+3 for a whole page, or Command+Shift+4 and drag for a select area. By default, screenshots on a Mac are saved in PNG format, but I find it more convenient to change the default to JPG. See 'How to change the screenshot file format on your Mac'. If you open an image file in the Finder, by default in opens in the Preview app. I prefer to change the default app to Graphic Converter. Click an image file in the finder, use Command+i to bring up the inspector, scroll down to 'Open with:', select Graphic Converter, and click 'Change All'. Graphic Converter makes it easy to crop screenshots and resize them if desired.

Video

Having a short professionally-made video on your home page can significantly increase your conversion rate. Think about paying a professional videographer to make one for you, if your budget allows. Or if you create your own, make sure to use a good photo as the video thumbnail. That helps create a positive first impression in the first few seconds after they land on your page, even if the video quality isn't perfect.

VIDEO EDITING APPS
iMovie - this is a good starting app, and comes free with every Mac. Search on YouTube or Udemy for 'iMovie Getting Started'.

Filmora - Check this out. Their slogan is 'Video Editing Simplified'.

Final Cut Pro X - This is like the big brother of iMovie and is really worth paying for if you're serious about video. It has lots of great features. Ones I find really helpful include easy syncing of audio from your video camera with the audio recorded on a higher quality mic, and also removal of noise or hum from your audio.

Adobe Premiere - this is the Adobe rival to Final Cut Pro.

Screenflow or Camtasia are great for creating video screencasts of what you do on your computer. My preference is Screenflow - it is very intuitive and easy to use.


VIDEO SERVICES
Wistia - Sign up to receive their emails, and browse their website. Wistia is a great place to get inspired and learn about all things video.

Animoto - And easy way to create short videos from images and video clips

Reel Effect - this is a service that creates animated marketing videos for business.

My Social Pages

Share this Page

Build a Website with Rapidweaver for Mac

40 Lessons
9 hours of instructional videos

Full Price $50

Discounted Codes
25 of each available

Hamish Erskine Marketing, 14 Juniper Close, Exeter, EX4 9JT
© 2017 Hamish Erskine, h@hcom