What's new in Adobe Muse CC - Feature Preview
Adobe is getting ready to release a new version of Muse on June 17, along with all of their new CC apps (Creative Cloud). This is a major update for Muse and with it comes some highly requested features such as client side content management, contact forms that work with any hosting provider, and a layers panel to simplify the design process. Adobe has also implemented Parallax Scrolling in Muse, which can be a great addition to any website when used properly.
Here's an overview of our favorite features from the new release:
1. Content Management
*Note - you need to host your site on Adobe BC in order to use content management features. Although this may seem limiting, consider how quickly Adobe implemented non-BC forms. I suspect it won't be long until Muse CMS functionality is available to any hosting provider.
2. Forms that work on any hosting platform
3. Layers Panel
4. Parallax Scrolling
Embedding a Search Bar in Adobe Muse - Google Custom Search
The ability to add a search bar to your website is not currently available in Muse, which means we need to find a clever workaround. By using third party HTML and embedding it into our site, we can get a basic (but functional!) search feature up and running in Muse very quickly. Powered by Google “Custom Search” this a really easy way to quickly add this functionality.
To see a google site search bar within Muse in action, check out the following site:
Click here to view a sample search bar
Step 1 – Create your search bar
Visit the Google Custom Search homepage at http://www.google.com/cse/ and sign in with your google account. Once logged in, you have the ability to create multiple versions of search bars and embed them on any site.
Click “Add” to start.
Next, enter your website address in the “Sites to Search” bar shown below. You have a variety of options from searching single pages to complete websites. We recommend you search the entire website, so just enter your domain as usual. For our example, we will use the domain www.muse-themes.com. Click create, and let’s start customizing the search bar.
Step 2 – Style the search bar
Once you’ve created the bar, you can customize a variety of options to help it blend seamlessly into your website. Click the “Look and Feel” tab on the left to access the customization options.
Within “Look and Feel”, let’s set the layout of our search engine. For the example provided in this post I’ve used the “Full Width” layout, which provides the results across the full width of the site (or frame). The content placed below the bar in Muse will automatically push down below the results - cool! This feels non-intrusive, and doesn’t require you to drastically redesign your site to integrate it.
Next, let’s click the “Themes” tab within “Look and Feel” and select a color for our search results. As you select different theme options, the search bar preview on the right updates as you go. We will select the minimalist style.
Lastly, you can customize the font, color and border styles of your search bar, as well as the display format of the results. For the sake of this demonstration, we left the results set to their defaults. Be sure to click the blue SAVE button after you make any changes.
Step 3 – Embed the search bar
In order to embed the bar in our site, we need the embed code provided by Google. Click “Save and Get Code” in the blue box shown above. Google will generate embed code for the search bar and display it in the grey box below.
Copy the embed code, jump back into Muse and select Object > Insert HTML
Once the HTML is embedded, Muse will generate a preview of the bar. Scale or size this frame to fill the area you’ve allotted in your design.
When you’re happy with the placement of the bar, publish your site to the web and preview it in action!
Click here to see the finished result!
When we use the search bar, results are displayed directly on the site in within the full column width. If we decided to use the “Overlay” layout option within the search bar settings instead, you DO NOT need to re-embed the code. Simply change the settings within your google account, save it, and your Muse site will automatically reflect the changes.
Don't you just love embedded HTML?
Enjoy,
- Steve Harris
Modifying the "Milo" Navigation Bar - Video Training
Check out our latest video training that explains how you can use "Pinned Elements" to modify and customize the navigation menu for our popular template "Milo". Milo is a beautiful, single page scrolling template that uses a unique layered navigation menu to help users navigate the site. The menu can be tricky to modify for new users - this video explains (in great detail) how to make changes to the scrolling menu system, and why the navigation is built in this way.
Enjoy!
Creating custom contact forms in Adobe Muse (Business Catalyst hosting not required)
Have a look at the blog of UK based designer Karl Nuttall for an extensive post outlining how to build and upload a custom contact form within Adobe Muse. This technique does not require you to host your form with Adobe's Business Catalyst system - however there is some external code work required. Basic familiarity with HTML & CSS is helpful to complete the tutorial. Here's a quick excerpt from the full post:
"I will teach you step-by-step how to get past this ‘glitch’ and use your very own contact forms within Adobe Muse. It does require a bit of external code work, so it would be beneficial if you knew some HTML/CSS coding, but I will talk you through it.
Step 1
Open up your .muse file and select the page you wish to place your contact form on. Then go to the ‘Object’ in the Muse menu and scroll down to ‘Insert HTML’."
Click here to read the full article
While many Muse users will likely stick with third-party form providers like Wufoo or Jotform, this manual form creation technique is definitely worthy of a look!
Cheers,
Steve Harris
Creating a Blog in Adobe Muse - Powered by Nabble
With no true “Blogging” capability built directly into Adobe Muse, users must find an alternative way to mimic this functionality. By using embedded HTML and the free Blog provider Nabble (www.nabble.com) this tutorial will explain how to include a fully featured blog in your website without writing any code.
Here's a sample blog that I built in a few minutes as a demonstration:
http://mtsampleblog.businesscatalyst.com/index.html
Why aren’t blogs available right now in Adobe Muse?
Although services like Tumblr and Wordpress simplify blogs greatly, the truth is they are fairly complex to code from scratch and often require complicated backend systems (servers with databases). Think of all the functionality a typical blog includes - commenting, login systems, archiving, searching - those aren’t features that can be easily achieved with simple HTML / CSS.
While I certainly can’t speak for Adobe, I can say that for a blog “widget” to simply exist in Muse you wouldn’t be able to host a site on any server, with any configuration. The same is true for the “Forms” widget in Muse - for a form to work, you must host with Adobe’s Business Catalyst. This isn’t because Adobe wants to force you to host your site on their servers; it’s because that’s the only place where they can control the backend setup and build a widget that will consistently work every single time.
Remember the days of cross-browser bug fixing (before Muse saved us), well just imagine doing that for every hosting server in the world. But I digress…
Similar to browsers, there are many different types of hosting servers and configurations
Image from: http://www.seo4q.com/2012/02/several-types-of-websites.html
About Nabble
I like Nabble as a blogging solution for a few simple reasons:
1. It’s really easy to use, quite powerful, and best of all... free.
2. Once your site is embedded in Muse, you won’t need to edit your Muse file to make updates. You will simply login to the Nabble website, post updates (and even change the appearance) and your changes will be reflected immediately on your Muse website.
3. You have just enough control over the look & feel to integrate it seamlessly into your website, but without advanced features that might be overwhelming.
4. It contains the core functionality most bloggers look for - searching, archiving, RSS feeds, commenting, etc.
Get Started:
Step 1 – Sign Up
Sign up for a Nabble blog at www.nabble.com. Give your blog a name and brief description (you can change or hide these options later).
Once you have setup the blog, you’ll need to confirm your email address via verification email. Ensure you are actually registered and logged in - the blog “options” menu looks very different for a normal user vs. the administrator who is logged in.
If your name isn't in the top right corner, you are not logged in.
Pictured above: The options menu changes significantly when logged in as an Administrator
Step 2 – Embed it
Click the blog “options” button (pictured above) and select Embedding Options. A window will appear displaying the embed code you will need to use in Muse.
Pictured above: The embed code provided by Nabble
Copy / paste this code, and insert it into your Muse website
by using the “Object > Insert HTML” menu.
Once you've dropped the embed code in, Muse will try and generate a
preview of the site automatically.
Pictured above: After placing the embed code in Muse
You can control the area that the blog takes up by scaling
the frame around the embedded HTML. Drag
it to the appropriate size, and preview your site in the browser (File >
Preview Page in Browser) to see how it looks.
Pictured above: Previewing the embed code in the browser
Step 3 – Style it
Now that the blog is actually embedded in your Muse website, I would suggest you publish the site online as future edits won’t be made in Muse - they will be made right in the Nabble interface.
Jump back to Nabble in your browser, and under the blog “Options” dropdown
select “Change Appearance”. This will
reveal a control bar on the top of the screen and give you the ability to
change fonts, colors, etc.
The appearance toolbar in Nabble is powerful - change colors, fonts, and preferences.
In order to seamlessly integrate Nabble (the blog) into your site, you will likely need to change the background / heading colors of the blog. I’d recommend you choose the same background color for the blog as you use for your website.
Nabble uses Hex Codes to define colors. Muse displays the Hex codes in the swatches
menu as pictured below. This is your key
to styling them as close together as possible - define colors in Muse, and use
the same hex values in Nabble.
Match up your Hex numbers to ensure color consistency between Muse and Nabble
Once you’re done editing the look of your Nabble site, click APPLY and refresh your browser window containg your Muse site preview. The changes should automatically be reflected on your site once you've applied them - no “re-embedding” is required. The code you place in Muse simply tells Muse where to find the blog, but it’s still always hosted and powered on the nabble platform.
Be sure to also check out the “Preference” options available
in the styling toolbar. This area
controls alignment, post structure, and what headings / titles you want to
appear. There are lots of options, so I’d
suggest you experiment as needed.
Explore the Preferences dropdown for additional options
Step 4 – Post!
It’s time to actually add content to your blog by creating a new Post. Select the “New Post” button on your blog home page, and plug in your content as needed. The Post editor window in Nabble provides lots of options for adding images, links, and even embedding additional HTML into your posts (for example a YouTube video).
You can also add polls (user surveys) and control subscription options for the topic, such as receiving an email automatically when someone comments on the post.
Pictured above: The Nabble "New Post" windows gives you plenty of options for creating a beautiful blog post
Limitations
There are two sides to every story, and although Nabble is a great option for blogging in Muse there are downsides to embedding any content in general (mainly related to Search Engine Optimization).
Conventional blogs are great for improving search rankings, since content is being updated regularly and the site is full of quality / searchable keywords. By embedding a third party blog like Nabble or Tumblr, you're unfortunately not going to see the SEO benefits because all of that beautiful content isn't actually hosted on your own website.
Think of embedding content as opening a "window" to another website. A YouTube video that you've embedded into your site isn't actually hosted on your own server, you've just opened up a hole in your site that looks into YouTube. When Google indexes your website, it won't see that content and use it to improve search rankings. Is this a deal breaker? NO.
Nabble is still a great option for blogging in Adobe Muse. Good quality search rankings come from a varity of different factors, and as long as the rest of your website is full of quality content don't be afraid to implement embedded HTML to satisfy your needs.
Best of luck!
Steve Harris
Creating Small Pop-Up Windows in Adobe Muse
Check out the latest video from MuseThemes.com explaining how you can use embedded HTML to control the size of your pop-up windows. By simply embedding a small snippet of code in your website and creating a unique link, you have complete control over the exact pixel dimensions of a link that opens in a new window. We recommend trying it out for contact forms (sign-up boxes), photo galleries or areas of your site that you might need a link containing "more information".
Embed Code:
Hyperlink Code:
Enjoy!
Cheers from MuseThemes.com
Adobe Muse Mobile Websites - Now Available!
1. Adding multiple layouts for tablet & mobile
2. Improved Hyperlink Menu
3. Go To Page Menu
Check out these amazing mobile menu designs by the Adobe Muse team:
All of these menus are made using the existing widgets in Muse (Composition, Lightbox, etc.)
*Warning - may cause brain to explode*
Link: Mobile Menus
Mobile Templates now available on MuseThemes.com
Embedding Juicebox Galleries in Adobe Muse
One of the most beautiful and functional embeddable galleries online today is the Juicebox gallery (www.juicebox.net). It's created using HTML5, works on virtually every device and browser, and is extremely easy to put together in a few minutes. Check out a demo of the juicebox galleries here: http://www.juicebox.net/demos/
After a little bit of experimentation, we've figured out how to implement Juicebox in Muse. Here's how it's done:
BUILDING THE GALLERY
1. Download Juicebox and install the gallery builder
Juicebox offers a free version (called LITE) that you can install and try for free. There are some limitations, but if you need advanced features the paid versions will work well for you. Once you've downloaded Juicebox, install it to your computer and launch the software.
2. Build your Gallery
Building a gallery in Juicebox is very simple. Drag and drop your photos into it's interface, and follow the logical steps along to the "Publish" stage. You can name photos and add titles, as well as modify the background style of your gallery (colors & opacity).
You can control the gallery size directly in Muse by editing its frame (covered later). In order to do this, you will need to build your gallery with the Width & Height set to 100%.
3. Save and upload your gallery
Once you've finished building a gallery, you will need to save a local version and upload it to your website hosting server.
Save your gallery to a folder on your computer
I use Filezilla (http://filezilla-project.org/) to upload files to my server. If you're hosting with Business Catalyst, you can login to your FTP using the following information.
Hostname: yourdomain.com
Username: yourdomain.com/user@yourdomain.com
Password: your password
Upload the gallery to a subfolder on your FTP. Make sure you pay attention to the location of your folder. I'd suggest creating a folder on the root of your FTP called "gallery".
*IMPORTANT - Do not include special characters such as underscores in the path to your gallery. This seems to cause issues with the code you will place in Muse.*
EMBEDDING IN MUSE
Create a new Muse website, and style the background as needed. You may want to select the same background color as you set when building your gallery in Juicebox.
Next, select the embed code that was displayed when you finished building the Juicebox gallery. You will need to make a few small changes to this code in order to link it to the gallery you just built:
1. Place the embed code in Muse
Copy and paste the supplied embed code from the Juicebox builder.
2. Change the link to the "Juicebox.js"
You need to change the link to the javascript file referenced in the Muse embed code. This file is stored in the jbcore folder within your new gallery folder. Your new link may look like this (example below):
3. Add link to Gallery Folder
Next you need to add a line of code to the embedded HTML to point to your gallery folder. The code looks like this:
baseUrl : 'http://www.yoursite.com/gallery/',
Add this line of code directly below the "containerId" code. Here's a complete example - just replace the domain yoursite.com with your own gallery location:
4. Adjust the Muse Frame Size
Adjust the size of the embedded html frame within Muse. This does actually control the size of the gallery when published, as long as you built your gallery with the width and height set to 100%.
Once you've completed all of the steps above, upload or publish your Muse website to your hosting server. Assuming you've pointed all of the links in the code to the right location, your gallery should look something like this:
http://www.visualarms.com/juice/
If you receive an error saying "cannot find XML file", it means your links aren't pointing to the correct location and the gallery can't find essential files it needs to run. Double check your links, and be sure you haven't included any special characters in the link. For more information on embedding Juicebox galleries, have a look at the juicebox support website:
http://www.juicebox.net/support/embedding/
Remember to experiment with the opacity settings and frame size in your Juicebox gallery to ensure seamless integration into your Muse site.
Enjoy & Good Luck!
Steve Harris
Recent Articles
- What's new in Adobe Muse CC - Feature Preview
- Embedding a Search Bar in Adobe Muse - Google Custom Search
- Modifying the "Milo" Navigation Bar - Video Training
- Creating custom contact forms in Adobe Muse (Business Catalyst hosting not required)
- Creating a Blog in Adobe Muse - Powered by Nabble
- Creating Small Pop-Up Windows in Adobe Muse
- Adobe Muse Mobile Websites - Now Available!
- Embedding Juicebox Galleries in Adobe Muse
Tags
- adobe muse (1)
- adobe muse blog (0)
- blogging (1)
- Coming Soon (1)
- custom templates (0)
- ecommerce (0)
- embed (1)
- mobile (2)
- resources (0)
- retina display (0)
- search bar (1)
- seo (1)
- Site Updates (0)
- tips / tricks (8)
- video (2)
