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.

Elementor Behance Feed Widget Video Tutorial

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.

Arrow Points at Premium Behance Feed Widget Icon in Elementor's Control Panel
Premium Behance Feed Widget Icon for Elementor Page Builder

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.

Screenshots Shows Elementor Behance Feed Widget with Required Inputs in Access Credentials: API Key and Username
Elementor Behance Feed Widget Access Credentials [API Key and Username]

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.
Screenshot for Display Options in Behance Feed Widget
Content, Display Options for Behance Feed Widget for Elementor
On The Left, A Screenshot Shows The Display Options of Behance Feed Widget. On The Right, A Screenshot Displays 4 Columns of Elementor Behance Feed Widget.
Elementor Behance Feed Widget Display Options Settings demo

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.
Screenshot Shows The Available Advanced Settings in Elementor Behance Feed Widget
Content, Advanced Settings in Elementor Behance Feed Widget
On The Left Side, A Screenshot Shows The Enabled Advanced Settings in Behance Feed Widget. On The Right Side, A Screenshot Shows The Project Name and Author Name.
Elementor Behance Feed Widget, Advanced Settings demo

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.
Load More Button Options in Elementor Behance Feed Widget
Content, Button (Load More Button) Options
On The Left Side, A Screenshot  Shows the Used Options of The "Load More" Button. On The Right Side, The "Load More" Button Appears on a Black Solid Color and 4 Columns of Behance Projects.
Content, (Load More) Button Options Example

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

Available Image Styling Options in Elementor Behance Feed Widget.
Image Styling Options Behance Feed Widget for Elementor
  • 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
The Available Box Shadow Styling Options in Behance Feed Widget for Elementor
Behance Feed Widget Images Box Shadow Styling Options
  • CSS Filters: Set CSS Filters for Elementor Behance Feed images, here are the list options:
    • Blur
    • Brightness
    • Contrast
    • Saturation
    • Hue
Screenshot Shows CSS Filter Group Controls for Images in Behance Feed Widget for Elementor
Style Elementor Behance Feed Widget Images Using CSS Filters Group Control
On The Left, A Screenshot Shows Popeye Image. On The Right Side, CSS Filter Group Controls Options Used for Popeye Image in Elementor Behance Feed Widget
CSS Filters Styling Behance Feed Widget Images Example
Popeye Image Black and White on The Left, and CSS Filter Group Controls Styling Options Saturation Value is Set to 0
CSS Filters Styling Behance Feed Widget demo (Black and White By Setting Saturation to [0] (Zero)
  • 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.
Screenshot for Overlay [Icon] Tab Styling Options in Behance Feed Widget
Style, Overlay Icon Tab Options in Elementor Behance Feed Widget

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
Overlay [Tags] Tab Styling Options in Elementor Behance Feed Widget
Elementor Behance Feed Widget, Styling Options for Overlay Tags Tab
The Left Screenshots Shows The Used Styling Settings in Elementor Behance Feed Widget to Style The Overlay Icon and Tags in Popeye Image on The Right Side.
Icons and Tags Styling Options in Elementor Behance Feed Widget
Two Screenshots Shows Demos [Left] Japanese Teapot, [Right] Popeye with Overlay Styling  from Elementor Behance Feed Widget
Elementor Behance Feed Widget Overlay Icon Tab demos

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
  • Box Shadow:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset
  • Margin
  • Padding
Screenshot for The Project's Styling Options in Elementor Behance Feed Widget
Style Project Settings, Elementor Behance Feed Widget
Two Screenshots [Left] Behance Feed Widget Project Styling Settings Used, [Right] Images Styled in Behance Project Demo
Elementor Behance Feed Widget, Style, Project Styling demo

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
Screenshot Shows Available Name Styling Options in Elementor Behance Feed Widget
Style Name (Project Name) Settings in Behance Feed Widget for Elementor

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
Behance Feed Widget, Text Shadow Styling Options in Author's Label Tab
Author’s [Label] tab Text Shadow Group Controls in Elementor Behance Feed Widget
  • Background Color
  • Border Type
    • Width (Border Type)
    • Color (Border Type)
  • Border Radius
  • Margin
  • Padding
Available Styling Settings for Author's Label in Elementor Behance Feed Widget
Author’s [Label] tab Styling Options in Behance Feed Widget for Elementor

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
Elementor Behance Feed Widget, Screenshot for Author's Name Styling Options
Behance Feed Widget for Elementor, Author [Name] tab Styling Options

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
Screenshot for Behance Feed Widget Appreciation Icon Styling Settings
Style Options of Appreciations Icon Behance Feed Widget for Elementor Page Builder

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
Available Styling Settings for Appreciations [Number] tab in Elementor Behance Feed Widget
Style Options for Appreciation Number in Behance Feed Widget for Elementor

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
Screenshot of Available Styling Options for Views' Icon in Behance Feed Widget
Views Icon’s tab Styling Options Elementor Behance Feed Widget

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
Available Styling Settings for Views' Number in Elementor Behance Feed Widget
The Available Styling for The Number of Views in Elementor Behance Feed Widget

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
Screenshot for Load More Button Styling Settings in Premium Behance Feed Widget
Load More Button Styling Options in Elementor Behance Feed Widget

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
Screenshot of Available Styling Options for Load More Button on Hover [Mouseover], in Elementor Behance Feed Widget
Elementor Behance Feed Widget Available Styling Options for Button’s [Hover]

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.