Welcome to the

Social Media Profile Card Widget

Add a unique hover effect over your images with the Social Media Profile Card Widget from Muse For You.

Using the widget - Initial Steps

01

In the examples below, we have used both left and right widget types. Each Profile Card has different background color, icon color, and text, and thus, a unique instance number.

There are 2 widgets included with the Social Media Profile Card Widget. They are:

  • Social Media Profile Card - Left
  • Social Media Profile Card - Right

Drag any of these widgets from the Library Panel (Window > Library) and place onto your Adobe Muse website. Within widget options, add an image, style the background, icons, and text, and done!

FEATURE #ONE

Add multiple instances on one page

  • In 'Instance' section within widget options, put a unique instance number for each new hover box.
  • If all the hover boxes on a page have same styling, the instance number can be the same.
  • If 'Enable Link' option is enabled or disabled for one hover box, all other hover boxes with same instance number must have the same setting.
  • If you would like to have different colors and settings, add a new hover box, and change the instance number for that hover box. This method works for breakpoints also.

Martin O'Toole

Director, Corporate Communications

In leo nulla, convallis non mi ac, cursus porta risus. Ut fermentum metus vitae porta tempus. Duis gravida, lectus non faucibus dignissim, ligula turpis congue mi, et bibendum purus metus a leo. Curabitur dui eros, vehicula eget urna efficitur, volutpat luctus tortor. Morbi dignissim nunc sit amet est fermentum, non blandit ex tempor

FEATURE #TWO

Add an Image to the Profile Card

  • In 'Image' section within widget options, click on 'Add File', browse, and add an image to the profile card.
  • With the latest update the image no longer needs to be cropped first to be placed into the widget. You can now use the image fitting option to:
    - Scale Image to fill the hover box
    -
    Scale Image to fit the hover box
    -
    Leave image at its original size within the hover box
    If the image is left at its original size you can use the image position options to show a certain part of the image. By changing the 'x' and 'y' values for the image it will re-position the image at a certain location within the hover box.

Kari Mehl

President

In leo nulla, convallis non mi ac, cursus porta risus. Ut fermentum metus vitae porta tempus. Duis gravida, lectus non faucibus dignissim, ligula turpis congue mi, et bibendum purus metus a leo. Curabitur dui eros, vehicula eget urna efficitur, volutpat luctus tortor. Morbi dignissim nunc sit amet est fermentum, non blandit ex tempor

Justin Hall

Vice President

In leo nulla, convallis non mi ac, cursus porta risus. Ut fermentum metus vitae porta tempus. Duis gravida, lectus non faucibus dignissim, ligula turpis congue mi, et bibendum purus metus a leo. Curabitur dui eros, vehicula eget urna efficitur, volutpat luctus tortor. Morbi dignissim nunc sit amet est fermentum, non blandit ex tempor

FEATURE #THREE

Complete Control over Text Customization

  • In 'Text' section within widget options, you can add text for 'Heading', 'Subtitle', and 'Paragraph'. You can change the text color, font size (1em = 16px), font weight, font style (normal, italic, or oblique), text transformation (uppercase, lowercase, or none), letter spacing, and line height.
  • To change the text alignment, go to the 'Background' section within widget options.
  • To change the font type, select the widget and go to the built-in Adobe Muse 'Text' option. From here, you can select any web font.
  • You can change the font size for a specific breakpoint in 'Breakpoint' section within widget options.

FEATURE #FOUR

Add 3 Social Media icons and link them

  • To change the icon, click on the 'Font Awesome Icons' link in 'Icons' section within widget options. From the Font Awesome website copy and paste the icon name into the 'Icon' option. In this section, you can also add a maximum of 3 Font Awesome icons, add a link, change icon color for normal and hover state, its opacity, and icon size. Also, you can choose to open links in a new page by enabling the 'Open Link in New Page' option.
  • Linking Internal Pages - if the page name is 'About Us', the link would be - ./about-us.html
    Home Page is always -
    ./index.html
    Linking Anchor Points - if there's an anchor point called 'our_team' on 'About Us' page, the link would be -
    ./about-us.html#our_team
    Linking External Pages - http://museforyoushop.com

Lindsay Strotman

Talent Acquisition

In leo nulla, convallis non mi ac, cursus porta risus. Ut fermentum metus vitae porta tempus. Duis gravida, lectus non faucibus dignissim, ligula turpis congue mi, et bibendum purus metus a leo. Curabitur dui eros, vehicula eget urna efficitur, volutpat luctus tortor. Morbi dignissim nunc sit amet est fermentum, non blandit ex tempor

FEATURE #FIVE

What's in the 'Background' section

In 'Background' section within hover box widget options, you can:

  • Select background color and border radius of the profile card.
  • Select text alignment - left, right, or center.

Robert Keynton

Executive Director

In leo nulla, convallis non mi ac, cursus porta risus. Ut fermentum metus vitae porta tempus. Duis gravida, lectus non faucibus dignissim, ligula turpis congue mi, et bibendum purus metus a leo. Curabitur dui eros, vehicula eget urna efficitur, volutpat luctus tortor. Morbi dignissim nunc sit amet est fermentum, non blandit ex tempor

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials