EN
Searching...

Button & Links

Using Button & Links, you can add any type of Link (1) to the section. You can add a Button/Text Link/Image link/Icon/Separator.

You can Duplicate (2), Edit (3), or Delete (4) the existing button/link.

In this article:

  1. Add Buttons/Links
  2. Style Buttons/Links

Add Buttons/Links

  • To add any type of link to the section, click on the + Add Button option.

The + Add Button option provides four ways to add a link. Apart from this, you can also add Separators to add space between buttons/links. Following are the options:

Button

Add a button to the list item.

You will be able to update:

  1. Button Label – Set the button label.
  2. Button Link – Specify the link.
  3. Target Window – Choose to open the page in the same or a new window.
  4. Button Style – Choose the button style to be the default (set in the Buttons and Links tab of the Design section), Solid, Outline, or a Text Link.
  5. Choose the button color to be default or invert the color. 

Text Link

Add a text link to the list item.

You will be able to update:

  1. Set the text label.
  2. Specify the text link.
  3. Target Window – Choose to open the page in the same or a new window.

Image

Add an image and link it to any page.

  • Once you have uploaded the image, it shows up this way. Click on the link to edit it.

  • From here, you can:
    1. Upload/Change the image.
    2. Button Link – Specify the link.
    3. Target Window – Choose to open the page in the same or a new window.

Note

Site Title will be used as Alt Text for the button’s Image to enhance searchability.

Social Icon

  • Add a social icon to the list item.

You can manage:

  1. The social icon to be linked.
  2. Specify your relevant social profile path.
  3. Target Window – Choose to open the page in the same or a new window.

Separator

The Separator option lets you insert spacing between buttons or links.

This is useful for creating visual separation between buttons placed in close proximity. You can add a separator from the Button & Links panel just like you add other buttons.

  • The space between buttons is controlled by the Padding – Top setting within the Separator. Adjusting this value increases or decreases the vertical spacing between buttons placed closely together.

 

Note

  • A separator does not link anywhere—it simply creates vertical space.
  • You can move it up or down to adjust the spacing between items as needed.

Style Options for Button & Links

The style options will be present under the Style tab while managing the section.

You will have multiple style options for the Button & Links as follow:

  1. Specify the Space Between Button/Links that have been added.
  2. Specify the Space Above Button/Links.
  3. Choose the Hover Effect for the Button/links.

  1. Choose the size of the Normal Button that you have added in the Button/Links. 
  2. Specify the height of the Image Button if you have added an image link in the Button/Links. 
  3. Specify the size of the Icon Button if you have added a social icon in the Button/Links. 

If you have added a social icon in the Button/Links above, then:

  1. Choose the Social Icon Type/Shape.
  2. Choose the Social Icon Color Style. If you have chosen the Brand Color, then the icon’s brand color will be inherited.
    If you have chosen the Selected Color option above then:
    1. Specify the Social Icon Color.
    2. Specify the Social Icon Background Color.

Example

For suppose, you have added an Amazon social link in the Button/Links, and specified the icon color as Red and the icon background color as Green, then the icon will show up as below:

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us