How I can create this simple social network presentation?

Design help Animations & Interactions
1

Hello Webflowers

I’m a beginner and I would like to know how I can create easily the same block present on the picture.
Someone can help me ?

Thanks :slight_smile:

2

Hey @Romgal,

I’m here to help you.

  1. take a DIV, for example, call it a “Social-Link-Wrapper”.

  2. in this wrapper you insert 3 Link-Box Components and call them for example “Social-Link-Box”

  3. get the logos of the social channels you want to use (for example here: https://www.brandsoftheworld.com/) and add them to each “Social-Link-Box”.

  4. give the logos a class like “Social-Link-Logo”

Now it’s time for the styling.

  1. you give the wrapper the following characteristics:
    Display: Flex
    Direction, Align & Justify can be left at the default settings.

  2. you give the link boxes “Social-Link-Box” the following properties:
    Display: Flex
    Align: Center
    Justify: Center
    Padding on each side: 40px
    Border: All
    Border style: Solid
    Border width: 1 or 2 px
    Border-Color: The color you want to have

  3. you give the images with the “Social-Link-Logo” class the following characteristics:
    Width: 40px
    Height: 40px

  4. now you give each link box only the corresponding hyperlink (URL) and that’s it.

Below once again to illustrate the structure in Webflow.

Social-Links-Structure
Social-Links-Structure1280×800 109 KB

I hope it helped you. :slight_smile:

Cheers

Dennis from Vibrand Design

1 Like
3

Perfect, thank you @Dennis_K
Other question… Screenshot by Lightshot

As you can see, the borders of the central block are too thick compared to the other two. How can we modify the parameters of a single element without affecting the global class?

For example, I would like to put borders on the middle block, only below and above … But when I touch the whole class changes. We cannot exclude from the class an element to add certain parameters?

Also, can we copy all the settings of a class, create a new one. And paste all settings ?

1 Like
4

Hey @Romgal,

Very simple solution:

Set a combo class by the box in the middle. You can make changes to this class without affecting the main class. :slight_smile:
You don’t need to create a new main class for this.

Best wishes,

Dennis from Vibrand Design

1 Like