Behance Feed Widget Tutorial

Intro

Elementor Behance Feed Widget provides lots of options and features to create a compelling portfolio to showcase your skills on your website from your Behance Portfolio Page.

By using Behance Feed Widget, you will be able to customize and extend how you present your Behance Portfolio on your website, whatever your creative works focus on Animation, Photography, Web Design, Graphic Design, Illustration, etc.

Elementor Behance Feed Widget is an easy-to-use widget as there are no coding skills required to create your own Portfolio page. Behance Widget is also considered “The Go-To Website” for showcasing creative work.

In this tutorial, we will dive into the details of Behance Feed Widget’s options and features.

Click here to check Premium Behance Feed Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

Content

• Access Credentials
• Display Options
• Advanced Settings
• Button (If “Load More” Option is Enabled)

Firstly, add a new section, then drag Premium Behance Feed Widget for Elementor into your new section.

1- Access Credentials

In Access Credentials, you can add your Username from Behance to get access to the Behance page.

Username: Use the username on Behance, which is necessary for you to display Behance portfolio on your website.

Reload Cached Data Once Every: Set how often to reload your Facebook Page Feed (to get the latest posts), so you can set it to Reload once every: Hour, Day, Week, Month, or Year. [Week or Month is recommended]

2- Display Options

• Number of Columns: Set the number of columns per row that you’re going to display on your page.
• Hover Image Effect: Select a hover effect for Behance images. You can choose from:
  • None [Defualt]
  • Zoom In
  • Zoom Out
  • Scale
  • Grayscale
  • Blur
  • Bright
  • Sepia
  • Translate
• Image Alignment: Adjust Behance images alignment to Right, Center, or Left.
• Name Alignment: Adjust project’s name alignment to Right, Center, or Left.
• Author Alignment: Adjust author name alignment to Right, Center, or Left.
• Info Alignment: Adjust Behance Info (Icons, Number of Views, and Appreciations) alignment to Right, Center, Left.

3- Advanced Settings

• Show Project Name: Enable/Disable Show Project Name option that will show or hide the Project Name.
• Show Author: Enable/Disable Show Author Name.
• Show Appreciations: Enable/Disable the count of Appreciations on Behance.
• Show Views: Enable/Disable the count of views of the project.
• Lightbox
  • Show Date: Enable/Disable the project’s date.
  • Project URL: Enable/Disable the display of the Project URL.
  • Image Caption: Enable/Disable Image Caption on hover over the images.
  • Description: Enable/Disable Description for Images.
  • Number of Projects: Enable/Disable the display of the number of projects.
  • Load More: Enable/Disable Load More Option, which allows you to have a button that loads more images from Behance to your website with just one click.

4- Button

• Size: Select the size of the button.
  • Small
  • Medium
  • Large
  • Block
• Alignment: Align Load more button to be on Left, Center, or Right.

Style

You can style almost every single part in Behance Feed Widget for Elementor Page Builder.

• Images
• Overlay
• Project
• Name
• Author
• Appreciation
• Views
• Button

1- Images

Styling Elementor Behance Feed Images

• Size: Set images size on Behance Feed Widget.
• Border Type: Set a border type for Behance feed Elementor Widget images. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width: Set border width.
• Color: Choose a color for your border.
• Border Radius: Set Border Radius for Behance Feed Widget Images using pixels, percentage, or em. Higher border-radius means a more circular border.
• Box Shadow: Set Box Shadow Styling for Elementor Behance Feed Images. The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset

• CSS Filters: Set CSS Filters for Elementor Behance Feed images, here are the list options:
  • Blur
  • Brightness
  • Contrast
  • Saturation
  • Hue

• Margin: Creates space around the Behance Feed image, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).

2- Overlay

Styling Overlay over images on Behance Feed Widget for Elementor

• Background Type: Set background for the Behance Feed Images Overlay.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set background using gradient colors.

Overlay Icon

• Color: Set color for the icon on Behance Feed Widget images overlay.
• Size: Set size for the icon on Elementor Behance Feed Widget images overlay.
• Border Type
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove
• Width: Set border width.
• Color: Choose a color for your border.

• Border Radius: Set Border Radius for Behance Feed Images Overlay Icon using pixels, percentage, or em. Higher border-radius means a more circular border.
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset.
• Margin
• Padding: Creates space around Behance Feed Images Overlay Icon, inside of any defined margins and/or borders. You can set Images Overlay Icon Padding in Pixel (px), Em (em), or Percentage (%) Note* Padding does not accept negative values.

Overlay Tags

• Color
• Typography
• Background Color
• Border Type
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

3- Project

Project Styling Options

• Background Type:
  • Classic Background
  • Gradient Background
• Border Type: Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width (Border Type)
• Color (Border Type)
• Border Radius
• Advanced Border Radius: Apply custom radius values for Elementor behance widget project. Get the radius value from here.
• Border Radius
• Box Shadow:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

4- Name

Name Styling Options

• Text Color: Select Text Color for Behance Project Name.
• Text Hover Color: Select Hover Color for Behance Project Name. (Project Name color will change on hover “Mouseover”)
• Typography: Set font styling for Elementor Behance Feed Widget Project Name.
  • Font Family: Select Font Family for Project Name.
  • Size: Set Font Size for Behance Project Name.
  • Weight: Select Font Weight for Project Name.
  • Transform: Select Font Transform for Project Name.
    • Uppercase
    • Lowercase
    • Capitalize
    • Normal
  • Style: Select Font Style by Choosing from
    • Normal
    • Italic
    • Oblique
  • Decoration: Select Font Decoration:
    • Underline
    • Overline
    • Line Through
    • None
  • Line-Height: Set Font Line-Height.
  • Letter-Spacing: Set Font Letter-Spacing.
• Background: Select a background color for Behance Project Name.
• Border Type: Set Border Type for Behance Widget’s Project Name.
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width (Border Type)
• Color (Border Type)
• Border Radius: Set Border Radius for Behance Feed Widget Project Name background using pixels, percentage, or em. Higher border-radius means more circular border.
• Margin
• Padding

5- Author

Author Label

Author Label Tab, Styling Options

• Text Color
• Typography
  • Family:
  • Size
  • Weight
  • Transform
  • Style
  • Decoration
    • Overline
    • Line Through
    • None
  • Line-Height: Set Font Line-Height.
  • Letter-Spacing: Set Font Letter-Spacing.
• Text Shadow: Set text-shadow styling for Author’s Label.
  • Blur
  • Horizontal
  • Vertical

• Background Color
• Border Type
  • Width (Border Type)
  • Color (Border Type)
• Border Radius
• Margin
• Padding

Author Name

Author Name Tab, Styling Options

• Text Color
• Text Hover Color
• Text Shadow
• Typography
  • Family:
  • Size
  • Weight
  • Transform
  • Style
  • Decoration
    • Overline
    • Line Through
    • None
  • Line-Height: Set Font Line-Height.
  • Letter-Spacing: Set Font Letter-Spacing.
• Background Color
• Border Type
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width (Border Type)
• Color (Border Type)
• Border Radius
• Margin
• Padding

6- Appreciations

Appreciation Styling Options

Appreciations Icon

• Color
• Size
• Background Color
• Border Type
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width (Border Type)
• Color (Border Type)
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

Appreciations Number

• Color
• Typography
• Background Color
• Border Type
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

7- Views

Views Styling Options

Views Icon

• Color
• Size
• Background Color
• Border Type
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width (Appears When You Select a Border Type)
• Color (Appears When You Select a Border Type)
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

Views Number

• Color
• Typography
• Background Color
• Border Type
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width (Border Type)
• Color (Border Type)
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

8- Button

Load More Button Styling Options

Button Normal

• Typography
• Text Color
• Text Shadow
  • Color
  • Blur
  • Horizontal
  • Vertical
• Background Type:
  • Classic Background
  • Gradient Background
• Border Type
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding

Button Hover

• Typography
• Text Hover Color
• Text Shadow
  • Color
  • Blur
  • Horizontal
  • Vertical
• Background Type:
  • Classic Background
  • Gradient Background
• Border Type
• Border Radius
• Box Shadow: The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding