[Sharing -> Global Template & Style] How to customize the button appearance (style, layout, shape, color) – global or per share buttons’ position

Overview

Easy Social Share Buttons for WordPress offers a flexible sharing buttons’ design. And as a part of this, you can set global design styles but also personalize the styles for each display method individually. This makes it easy to get the best design you need.

The styles are two types:

• Global – those styles are used always on the website.
• Position Based – those are styles you personalize and create for a specific share buttons’ position. They have higher priority and always overwrite the global styles.

Global Styles

The global styles you create are always used when there are no personalizations. It is highly recommended to configure global styles and personalize positions only when needed.

You can access the Global Styles you can do from the Sharing -> Global Template & Styles menu. The styles are split into several groups for easy access:

• Template – contains all design options for your buttons: template, button style, width, space, animations.
• Counters – contains settings you can do to show share counters.
• Width – advanced width customization options.
• Library & Automations – access to automatic styles and the style library.

The options you can choose to customize the styles include:

• Template – that will be the main template used for the entire site. Here you will see all default, add-on, or custom templates. Example list of the default templates you can see here
• Button style – button style determine the shape of the share button (button – showing icon and text, icon only – showing just share network icon, text-only – showing just network text, vertical – showing icon and text on a separate line, icon with hover – showing initially icon and then the text will appear on hover). Example of the button styles
• Button align – determine the alignment of share buttons inside the area where they appear. You can select between Left (default), Center, and Right
• Button Size – unique quick size change controller that can be used with any theme. The size controller uses the design that you select but re-configures the icon size, text size, and spaces to make the button smaller or bigger. Example of button styles
• Without space between buttons – this will remove the empty space between and below share buttons. The option will stick buttons each one to another. Very often it is used with sidebar displays
• Animate the share buttons – a list of 30 button and icon animations that can be used to get a better look at the share buttons. Example of the animations
• Display counters of sharing – this option will determine will share counters appear or not on site
• Single share button counter position – this will be the current single button position. If you wish to hide the button counter and show just the total counter then you need to choose hidden. Example of button counter positions
• Total share button counter position – this will be the total counter placement. In case you wish to have just the button counter selected hidden. Example of total counter styles
• Button width – the width controller with select the individual width of each share button. The default selection is automatic – this means that button will take the space that is required to show the icon and text. Fixed width – all buttons will have a preset width entered by used (this will width will be the same no matter of the resolution or device – example: 100px). Full width – buttons will take place of the entire visible area and they will try to automatically calculate the width (you have the ability to custom set the width of the first two buttons). Fluid – this is almost identical to the full-width option but here you rely on automatic calculations for everything. Columns – the buttons will appear automatically in the number of columns you select. Example of button widths

Automatic Adaptive Position Styles

The automation relies on plugins choosing the best available styles for each of the positions. It’s not a perfect design solution but helps you avoid any customizations required – for example, if you use a sidebar that will apply automatically icon-based button style. 

You can also activate automatic content responsive buttons – the function just hides the network names and changes style to icons when smaller screen size is used.

Position Styles

Each position supports detailed style customizations. Each of the global style options can be also applied to the position. This gives unique flexibility.