Adobe Business Catalyst

sutelostnationInternet and Web Development

Dec 7, 2013 (4 years and 6 months ago)


Adobe Business Catalyst

Adobe Business Catalyst is similar to the Content Management Systems we have been using, but is a
paid solution (rather than open source and free like Joomla, WordPress, and Drupal (though of course
with those you do still have to pay for hosting somewhere unless you have your own server)).
Business Catalyst includes a Content Management System, integrated e-mail marketing, integrated
customer database, an e-commerce module, and reporting and analytics. As a web designer, you have
several ways to use Business Catalyst. Starting out, you can create an account for free.
With the free Partnership account, you are limited on partner resources, and do not have access to all
training videos. You also do not receive commission on client monthly fees, and have other limitations.
A Standard Partnership Account costs $995, and adds access to all videos and resources, and gives you a
20% commission on all client monthly fees, but still has some limitations. A Premium account costs
$1995, and gives access to everything as well as the 20% commission on all client monthly fees. For
more information, see:

For your clients, there are different monthly levels of service that they pay for. For more information,
see here:

Before starting the project, review the Adobe Business Catalyst section of the Adobe site:

When creating sites using Adobe Business Catalyst, you can use their online tools, regular HTML/CSS,
and/or Adobe Dreamweaver. They have a wide variety of existing templates to choose from, or you can
copy an existing site, or start from scratch.
Business Catalyst was designed to give designers a platform to market their own designing business, and
to easily create and manage client sites (and to give clients the ability to manage their own sites if the
designer wants to do so). Once a designer has enough clients on the site, it would be worthwhile to
pay the $995 fee because it would be re-couped through the 20% commission the designer would
receive for the monthly client fees. For example, if the clients were at the $38.88 per month rate, at
20% commission, the designer would receive $7.78 per client per month, or $93.36 per year. At that
rate, the fee of $995 per year would be paid for after the 11
client had been on the system for a year,
and then any clients over that would be profit.
For the Project, you will be exploring and modifying trial sites on Adobe Catalyst. DO NOT do anything
on the site that requires payment; you should be able to complete all of the exercises mentioned below
without paying for anything.
As you go through the different videos, I suggest opening up the video showing you how to complete
the task in one window, and open up your account for Adobe Catalyst in the other. That way you can
watch the video, pause it, and make your changes in the trial Adobe Catalyst account in the other
1. Take a look at the Adobe BC tour at

so that you get an overview of what the site can do.
2. Then go to
and click the “Get Started for Free” button.
3. It will ask you to choose a site template. Pick whichever one appeals to you (flip through the
different options by clicking on the picture or sliding the bar underneath the choices.) I chose
the template called “Forceful”. After you have chosen one, click “Continue”.
4. Put in your name for the Site Name (for example, if your name is Bob Smith, put Bob Smith).
For the site URL, put in your first initial last name (for example, if your name is Bob Smith, put
bsmith). If you do not already have an Adobe account, you will need to create one. If you
already have an Adobe account use it, but if you need to create one, for the email address, put
in one you used for the class website, and for the password, put in the one you used for cpanel.
Make a note of your site address, email address you used, and password you used.
5. There will be a pause while the site is created, and then you will be automatically transferred
and logged into the admin portion of the site.
6. Click on the “Website” tab. This will bring you to a page that looks like this:

7. Note that you can edit any of the existing pages by clicking on edit. Click on a page just to see
how it works, but don’t edit it-we are going to use a different method. After examining what
the edit screen looks like without changing anything, click on the “Site Editor” option on the top
menu bar. This will bring up the InContext Editing, a neat feature that allows you to directly edit
the pages. When it first comes up, you should get a popup box that includes a tutorial on how
InContext editing works. Click on “View Tutorial” to see it. Just in case you need to go back to it
later, here is the link:

8. Once you have viewed the tutorial, go back to the InContext editing page (it should still be open
in another tab) and click the “Start Editing” button. This will bring you to a page that looks
something like the following; of course, yours will look different depending on what template
you chose.

9. Edit a portion of your page by clicking on the area you want to edit and changing the words.
Also insert an image by clicking in the page where you want it inserted, then click the icon up in
the top menu bar that looks like a square with a blue center, changing the media location to
“My Computer”, and selecting an image you would like to upload. It will insert the image, and
you can then resize it as needed. (See example):

10. Click the Save and Publish button to save your changes. TAKE A SCREENSHOT of your altered
page by holding the “Alt” key down and hitting the PrntScr key on your keyboard (usually in
the top row above the Backspace key), then opening up a word processing program such as
Word or WordPad (Notepad won’t work because it can only handle text) and Pasting the
screenshot into the document. Also type the email address you used for your login, and the
password you used, into the document. Save the document as yournameCMWEB130project.
11. Choose one of your other pages to edit by clicking on one of the other page links. Change the
text on that page and insert another image if you would like. Once again, take a screenshot of
the altered page and paste it into the project document.
12. Now click on the “Admin Console” at the top of the page to get back to the Dashboard. You can
add different functionality into your sites using Modules, just like you can with other Content
Management Systems. Click on the “Modules” tab at the top. This should bring you to the
following page:

13. We are going to add a Photo Gallery (though if you would rather add something else, feel free
to do so). Since we are adding a Photo Gallery, we first have to upload some folders. Click on
the Website tab, and if you did not automatically go there, click on the “Web Pages” link so you
are looking at the following page:

Click on the “Use File Manager” under “Related”, then click on the “images” folder. This will
take you into the images folder. Now click on “New Folder” up in the menu bar, type “gallery”
and hit “Save”.
14. Click on the “gallery” folder you just created, then click “Upload Files”. Add at least 3 image
files to your gallery, then click “Upload”.
15. Now click on the “Modules” tab again. Click on Photo Gallery, then click on “Create a new Photo
Gallery” in the “Action Box”.
16. Give it a name (I’m just calling mine “Photo Gallery 1”), and select the folder you just created
(images/gallery) from the dropdown box, then click “Save” (see screenshot)

17. Now click “Add Photo Gallery to a Web Page” in the “Action” box. It will bring up a list of the
pages on your site. Choose one of the pages to add the photo gallery to; I chose the page called
“FAQ”. Click on the spot on the page where you want to add the photo gallery, and then click
“1-Click Insert” and then click “Insert this: Photo Gallery”, then click “Save & Publish”. (See

18. Now close that window and click on the “Website” tab again. Click on “Site Editor”. If the
popup box comes up, click on “Start Editing”, then click on the page that you inserted the Photo
Gallery on (in my case, FAQ). You should see your photo gallery on the page where you inserted
it. TAKE A SCREENSHOT of the page and paste it into your Project document.
19. Click on “Admin Console” (or “Partner Portal”, depending on what screen you are on) to get
back to the main Dashboard page. We have been editing a site template, now let’s see how to
create a new site.
20. If you want to view the Adobe training for this portion of the site, click “Resources” then
“Getting Started” then the “Go to free training section” . Once you are finished with that, go
back to your original browser tab where we have been working, then click on the “My Sites” link.
Note that you already have one trial site listed; this is the one you have been working on. Now
click on the “Create Site” tab at the top.
Note that you have several options-let’s take a look at these:
“Use an Online Business Template” is what we did initially when we created the first site. This
enables you to create more sites using that same template or by choosing a different one.
“Start from scratch” means that you can create your own html and css.
“Replicate on of your existing sites” is an option, but is grayed out and not available unless you
upgrade to a paid account. This allows you to copy one of the other sites you have created in
Business Catalyst and then edit it-a nice option if you are going to make a site with a similar look
or layout and just want to change the content and perhaps make a few layout/color changes.
“Import your current website”-this is a neat option that allows you to import an existing site
that is already out on the internet. If you have time, you may want to try this out on your own
by importing your student site, or just pick a website to duplicate. I would not pick a large site,
though, as it will take a really long time to import (for example, I wouldn’t do the site, or
yahoo, or cnn, or something like that. Pick something smaller).
We are going to try out the “Start from scratch” option. Click the “start from scratch” radio
button, and then click the “Continue” button.

21. On the next page, you have to “Choose a site type”. Choose webCommerce, which offers all
the options. Note that if you activate this site to be live, then it would cost $34.99/mo to
upgrade to the paid site. We do not need to do that to work on it, and there is no need to do
that for this class. Just remember that if you use this for a real client, then they would have to
pay that amount per month to keep the site live. The other options are cheaper, but also do not
have all the different features. After you choose webCommerce, click “Continue”.
22. For Site Details, put “Your Name Class Project” for the site name, and your first initial last name
project for the site URL. So if your name is “Bob Smith”, you will have “Bob Smith Class Project”
for the site name, and bsmithproject for the site URL (your full site will be found at whatever
you named (so in the case of Bob Smith, it will be at Select “United States” for the data center. Make a note
of the site URL, then click “Create Trial Site”.
23. You will get a screen that says Creating trial site, this may take a minute, and then you will
eventually get to a screen that says “Congratulations”. Click on “Manage Site”. If it asks you to
log in, use the original login you created and made a note of when you created your Business
Catalyst site. Once you log in, it should take you to the admin dashboard for the new site.

Note that you could also FTP an existing site up to the server. The settings for the FTP would be
the following:
• Host name – (if you followed the same
naming scheme I described above)
• Protocol - SFTP / SSH File Transfer Protocol
• Port - 22
• User name – (the
same email you used to create your business catalyst account)
• Password - Your admin login password
• FTP mode (if necessary) - Passive
Judging from some of the help forums, people sometimes have trouble with the ftp, so you may
end up having to use the method described above.

24. At the top of the page, click on the “Website” link.
25. There is already one existing “Home” page. Click on “edit” next to it. This will bring you to this

26. Go ahead and add a Page Title of “Your Name Project Home”, and then down in the content
box, delete the “Coming Soon” image by clicking on it and hitting the “delete” key. This will still
leave the table that they had around it. Note that if you look up right at the top of the box in
the middle, there is a small “X” ; click on that to delete the table. At this point you will still have
the CENTER tag left; look down at the bottom of the box and you will see Center listed, as well
as the words “Remove this element”. Click on the “Remove” and that will leave you with a blank
page. Add whatever words you want to the page, and also add an image by using the “image
manager” (menu icon in the editor that looks like a mountain with a sun above it). When you
click it, it will take you to the image manager. Use the upload files link to upload image(s), then
click on the image you want to insert and click the “Insert” button at the bottom.

27. Once you have finished your edits, TAKE A SCREENSHOT for your project and paste it into the
project document. Then click the “Update” button at the bottom.
28. Now click on “Create another Web Page” under “Related” and create another page with content
of your choice. You might want to also experiment with the “Add modules” button and try
another module besides the photo gallery if you’d like, but you don’t have to). Somewhere on
this new page, create a link back to your home page by clicking in the box where you want the
link to show up, then selecting the icon that looks like a world over a chain link (see arrow below)

29. This will take you to the hyperlink manager. Click the icon next to the URL box. This will pop up
another box where you can select the page you want to link to. Click on “Web Pages”, then click
on “Home Page” and click “Update”

30. Type “Home” in the Link Text box, then click “OK” This will insert the link to your home page.
31. Once you have finished creating the page, TAKE A SCREENSHOT for your project and paste it into
the project document. Then click the “Update” button at the bottom.
32. If you want to see what your pages are looking like, click “View all Web Pages” under “Related”,
then click “Preview” next to the page to see what it looks like. Note that you could also enter
the website URL (in my case, into the browser address bar
and go there manually.
Submitting the project
You’re done with the project! Of course, Adobe Catalyst has many more options, and could almost be
a class completely on its own. This gives you a peek at some of its capabilities, however, and if you are
really interested in using it, I recommend viewing and working through the Lynda videos on the topic, as
well as viewing the tutorials provided by Adobe.
If you haven’t already, save your project document as “yournameCMWEB130project”, then upload it
under the project assignment on the class website.

As a double check, your document should contain the following:

1. email address and password you used for your login
2. Screenshot from step 10
3. Screenshot from step 11
4. Screenshot from step 18
5. Screenshot from step 27
6. Screenshot from step 31

Your trial site is good for 30 days, so now that you have your project out of the way, have fun playing!