Streaming live at 10am (PST)

How I can create this simple social network presentation?

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:

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.

I hope it helped you. :slight_smile:

Cheers

Dennis from Vibrand Design

1 Like

Perfect, thank you @Dennis_K
Other question… https://prnt.sc/qrenis

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

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