Category Hero is a great way to draw some attention to your hero. Offering up three categories with interactive CTA's (Calls to Action) and full width images, Category Hero does more than just look pretty.
This Design Series widget is based on the Muse Slideshow, and offers separate layouts perfect for tablet and mobile.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.0: Initial release
This widget can be used in a new or existing site. Placement on the correct breakpoint is important.
PREPARING YOUR SITE
Open your Muse project.
Save a new version of your site, to be cautious.
We will need to use breakpoints of 960 and 1200. If you do not currently have breakpoints in these widths, you will need to create them. Please note that 1200 is the desktop layout, and 960 covers all layouts below 960 (tablet, phone).
If you do not need tablet and mobile layouts, you may ignore the instructions below for the 960 layout. The same goes for desktop and the 1200 layout.
Similar to a theme, assets should be linked up as needed. Open the Assets panel.
Any asset with a red question mark can be relinked. Right-click an asset with the red icon. Select the "Relink" option.
Navigate to the file in the Assets folder and select that file to relink. This action should relink all of the files in your Assets folder.
Note that this process is optional, as you will be using your own images for the Category Hero background images.
PLACEMENT OF THE WIDGET
The Category Hero widget can be found in the "Sliders" area of your library.
With your 1200 open, make room for the widget. If working with an existing site, it is generally easiest to use the vertical move handle to move page elements and extend the page length.
Drop the widget on outer left edge of the page. This step is crucial. If the widget is not dropped on the outer edge, delete it, and repeat. Alignment of the elements within the widget require this placement to avoid misaligned elements.
Confirm that the category elements are aligned properly.
EDITING THE CATEGORY TEXT BOXES (Desktop Layout)
The white boxes in the center of each "category" are text boxes.
Select the first box. Link the box to the page or location of choice, using the Hyperlinks menu.
With the text box still selected, open the states dropdown. This is found in the far left side of the top menu. Select the Active state. Click on Transition. Set the Duration time to 0.5. This allows the transition from the normal state to the active state to take 1/2 a second, and allows the icon animation to be seen.
Repeat the above two steps for the remaining two category text boxes.
You may edit the text within the text boxes as you wish.
The areas under the category text boxes are the slideshow triggers. Hovering over these will reveal a full width background image. The background image is the target. Each category has a trigger area and a target image.
To update a category image, click on it's trigger area to select it. Drag the trigger down and out of the way just a bit, to reveal the image behind.
Click on the image behind the trigger. With the target now selected, click the Fill option in the top menu. Click on the image name to replace it with your own image. Ensure that the Position and Fitting settings are as desired.
With the same trigger area moved out of the way, you can now update the target image for each trigger area. Simply select the trigger, then click on the target image. Repeat the step above for each category.
Refer to this portion of the video for further instruction.
At this point, your category text and images should be updated with your own text and images. Additionally, the magnifying glass icon should animate appropriately when the page is previewed in browser. If you wish to use an icon other than the magnifying glass, this can be done. However, this requires using tools outside of Muse, such as Photoshop or Illustrator. This process is explained in the "Replacing Animated Icon" section.
WORKING WITH THE TABLET AND MOBILE LAYOUTS
Following the instructions above, place the Tablet & Mobile Layout widget in the 960 breakpoint. Note that the widget must be placed in the 960 breakpoint for tablet and mobile layouts to have proper alignment.
Open each breakpoint below 960. The elements should already be aligned properly for those sizes.
In rare cases, we have seen Muse place the Desktop layout in smaller breakpoints in error, even though that layout is already hidden in other breakpoints. If anything is seen in any breakpoint it shouldn't be, simply select all of the elements in that layout, right-click, and select "Hide on this breakpoint".
The tablet and mobile layouts do not use slideshows or animations. The horizontal space in these layouts does not allow for the same arrangement of elements as desktop does, and additionally, touch devices do not allow for mouse hover like desktop. This being the case, editing of slideshows or icon animation is not necessary on tablet or mobile.
To update text within the text boxes, simply select the text and update it. Note that the text boxes are placed within State Buttons. When linking to another page, use the State Button.
On tablet sizes, the three category background images are full width, with white rectangles over half of the image. The rectangles are set to 50% opacity, and help to give the look of a grid. Update the full width images by selecting them individually, then right-clicking, then replacing the image.
Text and images can be udpdated similarly on mobile breakpoints.
REPLACING ANIMATED ICON
The magnifying glass icon is included with the widget, and is animated on the desktop layout. The animation is technically just a transition between the two different placements set in the states menu for the text box. This is a method seen in other MuseThemes widgets, including the Social Sprites widget.
If you wish to use an icon other than the magnifying glass, you can. The process of replacing the icon is fairly quick, though it does require intermediate skills in Photoshop or Illustrator. The points below are tips on this process:
Open the mag_sprite.png file in Photoshop, Illustrator, or other editing application. You will see that there are icons placed on the left and right, one white and one black.
The idea is to replace both icons with new icons in the exact same places. The two icons should have different colors to represent the normal and active states.
Create a new layer, and place the new icons on the new layer.
Position the new icons so that they match the exact placement and size as the old icons. The size can vary somewhat, based on preference, but position is important.
Once the new icons are placed, remove the old icons by erasing, painting over them, or masking them with a layer.
Export the file as a .png.
Back in Muse, select a text box. The text boxes use an image fill as a background. Click "Fill" in the top menu.
Replace the mag_sprite.png image with your new image.
Preview in browser to test, and adjust the new image as needed. The most likely adjustment would be to the position of the icons. The normal and hover state should place the icons in the same place.