The new SmugMug system is here and better than ever! They’ve implemented a breathtaking UI, mobile responsive designs and fantastic customization tools for new and existing members. With that said, there is a bit of a learning curve that comes with the new SmugMug, but in reality, what software doesn’t have one? No need to worry though, we’ve created a quick start guide to assist you in learning some of the basics!
Our initial setup
Before we get into the actual customization of a site, it would be a good idea to setup your site structure beforehand. Items such as text pages, gallery areas, etc. To do this, click the ‘Organize’ button up top. This will put you into the driver’s seat of your site’s file system. Within the organizer, we typically will create a single folder called Portfolio which will house anything gallery related whether that be single galleries or folders for additional levels.
To do this, make sure the top level site name is selected and click the ‘Create’ button > ‘Folder’ and name it ‘Portfolio’ (your choice in naming). You can then drag and drop any folder or gallery into the Portfolio folder. Drag and drop also works to order things within folders. The next step would be to create another few top level folders: A Pages and Other folder. With the Pages folder selected, you’ll want to click ‘Create’ again and ‘Page’. This is where you should add your text pages such as About, Services or any other text page you would like in your site. The Other folder is what we like to use to hold anything that shouldn’t be visible to the public. If you have the Other folder selected, go ahead and create a gallery to house images for the text pages, logo, etc. I would also suggest clicking on the ‘Settings’ button up top to change the security of the Other folder to ‘Unlisted’ so that it isn’t accessible to anyone but you and make sure the size is set to ‘Original’ so that these images show full size. This is especially important for design files such as the logo.
Once you have this structure in place, make sure to add the images you will need to use throughout the site now in that gallery you created earlier in the Other folder. These should include your logo sized appropriately and an image (or more if you like) for each text page including the contact page. We generally also upload a gallery into the Other category specifically for the homepage slideshow. Once you are satisfied with the overall structure, click the ‘Done’ button in the top right hand corner and you’ll be ready to start customizing!
What flavor of design would you like?
The first step in getting started with your SmugMug site, is of course, the design or template! Think of it as the overall look & feel of your new site. SmugMug by default has 24 designs to choose from sure to satisfy (as of this post). In order to pick your new design, click ‘Customize’ > ‘Choose a New Site Design’. We’ll be using the ‘Dina’ design for purposes of this post. After you’ve chosen your design, click ‘Preview’ and then the ‘Choose’ button in the top right corner. This will allow you to publish it immediately or customize it. You’ll want to click ‘Customize’ which will put you into the customization mode.
Logos, menus, & social icons, oh my!
This is where things get a bit trickier as there are a tons of features and functionality available within the SmugMug customizer. We’ll touch pretty high level here, but don’t be afraid to play around with the system a bit, it is quite addicting!
To start, you should still be in customization mode. As we’ll be adding elements that should be everywhere in the site, you’ll want to ensure you have ‘Entire Site’ selected in the top right customization panel. By default, SmugMug will typically add the Logo, Menu and Social Icons Content Modules here. Go ahead and rollover the current logo which will be your site name. Upon rollover, click the little tool icon to see options available to you. You are welcome to use text, which you can edit here, but if you have already uploaded a logo in the earlier steps, click on the ‘Image’ tab. Select the little image icon and choose your logo!
Next up is your menu. Similar to the above, rollover the menu and click the little tool icon. There are a whole slew of options in here so feel free to experiment, but on the ‘Basic’ tab, an important option to have on is the ‘Collapse For Mobile’ option. Click the ‘Links’ tab and feel free to delete the ‘Browse’ and ‘Search’ links. Click the ‘+’ icon and begin adding to your menu! The ‘Link To’ option is important in that when you select the ‘Page I Choose’ option, you can then select the folders and individual pages you created earlier in this guide. Once you have the Menu all set to your liking, click done!
To edit your social icons, just rollover the social icons and click the little tool icon. You will see that you can add each of your social networking links here. They should all follow the http:// url convention. By clicking on the ‘Display’ tab, you can change the style of icon and color. Make sure to select the option to have the links open in a new tab as it will help keep visitors on your site.
The Homepage, your place to shine!
Now, we’ll show you how to wow your visitors with some homepage love. There are a variety of things you can do on your homepage with SmugMug, but the biggest suggestion we can make is to keep it simple, clean and show your best work! Generally, we like a nice slideshow on the homepage and that is what we’ll be showing you.
While in customization mode, make sure to select the ‘Homepage’ in the customization panel on the right hand side. This will ensure whatever you add only shows on the homepage. To start, you may need to remove some content blocks that SmugMug inserts by default. You can either rollover the content area and click the little trash icon or in the customization panel on the right, click the little trash icon next to the ‘Folders, Galleries & Pages’ content block. This should leave an open space in the ‘Center’ area. Now, click ‘Photo’ under ‘Add Content Blocks’ and drag out the ‘Slideshow’ module to the ‘Center’. This will bring up various options you can configure to your liking as well as the option to select a gallery to show on the homepage. Click done when all set and you should have a nice slideshow along with your logo, menu and social icons at this point!
Depending on your style, there are various content blocks you can use on the homepage for a unique look. For example, you may want a video instead of a photo slideshow. Perhaps, some text to introduce the site above a photo slideshow? Or, what about some feature images under a slideshow linking to different parts of the site? The options really are endless, so feel free to play around until you get the homepage looking the way you want it to. Remember, the homepage is your place to shine!
Time to polish it up!
At this point, you should see a pattern in how each section works and can be modulated within this customization system. It is available anywhere so you really do have complete control over every part of your site which is so powerful! We’ll continue the pattern on each site section now really getting into the finer details. To start, go ahead and click ‘Done’ in the top hand corner if you haven’t already so that you are out of customization mode.
Start by clicking ‘Portfolio’ and once on that page, click the ‘Customize’ option up top. Back in customization mode, you will notice the ‘All Folders’ option is selected in the top right customization panel. Whatever you do here will equate to all of your folders just as a heads-up. If you don’t have other folders you shouldn’t really worry about it, but if you do have other folders, maybe under Portfolio, you should probably select the option under it to make the folder custom. This ensures whatever you do here will only apply to the top level Portfolio folder. Anyway, we typically remove the ‘Breadcrumb’ content block as well as the ‘Folders’ title and ‘Galleries’ title. Just gives the page a bit more of a clean look. From here, you can play with the way Galleries or Folders display by clicking on the little tool icon (the Collage Landscape style is sweet!). You can also add content blocks if you like such as some text up top or possibly a title by simply dragging them out and onto the page! When you have the Portfolio page looking the way you want it, go ahead and click done to move on to your text pages.
Upon clicking on one of your text pages (we’ll use our newly created About page), go ahead and enter into customization mode again by clicking on the ‘Customize’ button up top. Once in customization mode, go ahead and delete the existing content module in the page as we won’t be using it – the breadcrumb module. Drag out the ‘Title’ content module from the right hand customization panel. You can center it using the little tool icon as well as change the text if needed. Next up, drag out a ‘Photo’ content module which will bring up an options panel. Within this options panel, you can click the image icon which will bring up a dialog to find the image. Once you’ve selected the image, go ahead and click ‘Done’. Finally, drag out the text module and place it to the right of the photo module you just finished with. This will bring up a dialog box to where you can add text to your heart’s desire! Click done in the top right hand corner when you’re ready to go and continue this process for each text page. Keep in mind, you can use any content module you like, but these are the basics to get a nice clean text page going.
Quick tip: Shift + Return/Enter will give you a single return. By default, a single return keystroke is equal to two returns in SmugMug.
Closing notes
At this point, your site should be fairly well put together! If not, make sure to review all of the above steps to ensure you didn’t miss anything. While in customization mode in the various sections, spacing of elements on each page is always available via a little triangle icon. To really get things clean and consistent, playing around with spacing really helps. Another area to where you can play with the main ‘container’ spacing is the ‘Layout’ tab in the customization panel. The layout tab offers various margins settings that can prove very helpful if things just aren’t lining up the way you would like.
Helpful resources
SmugMug has an immensely helpful support team and knowledge base we highly recommend you visit and often! We’ve covered the basics, but when in doubt, make sure to look through their help section. SmugMug also has a customization forum (dgrin.com) that has a ton of helpful information on customizing SmugMug, tip, tricks and plenty of users to assist if needed. For reference, here are a handful of links for help resources:
SmugMug Help
Contact SmugMug Help
SmugMug Academy
Dgrin.com
What options do I have if I want someone to handle this for me?
The new SmugMug plain and simple, is amazing, but if you find yourself saying, “Ok, this is awesome, but I just don’t want to deal with it or can’t seem to figure it out!” in a frustrated tone, it could be time to call in the pros! For starters, you may be able find assistance for free in the SmugMug customization forum, but you probably won’t find someone to do your entire site for free in there. Dgrin.com is more for the DIY type of photographer looking for helpful tips and tricks or assistance on small tweaks here and there. In terms of professional assistance, SmugMug’s certified customizer list is a great place to start if you’re looking for premium resources. We’ve worked with pretty much all of the current customizers and feel all have a great service to offer, it just depends on what you are looking for.
We, FastLine Media, have been working with SmugMug the better part of a decade now and feel we really have it down to a science while really being able to offer pretty unique work on the new platform. We offer several packages sure to satisfy any type of photographer, amateur to well seasoned pro and anything in between. Our first package has always been a hit – our SmugMug templates. Available at $349, you can’t go wrong if you are looking for something really nice, yet affordable. Next up is our custom template option available at $1299. Our custom template option essentially entails choosing a template for structure and we completely redesign the overall design for that unique look that no other photographer has. Lastly, for a completely unique website experience, we offer a full customization package which is by quote based on a consultation in order to figure out your needs. In addition, we offer logo design services if needed and WordPress blog integrations. We’re here to help you succeed with your photography business so don’t hesitate to contact us for any questions or to get started with any of our services!
