How to customize the button appearance (style, layout, shape, color) – global or per share buttons’ position

Article sections

    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.

    Each automatic display position contains advanced styles that you can set and overwrite the global. Some of the positions may contain a limited version of the options – for example: mobile positions. This limitation is due to the specifics of the design.

    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.

    How to customize the button appearance (style, layout, shape, color) - global or per share buttons' position 1

    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
    The customization contains a live preview screen. All changes you do will reflect on the preview but not appear on the website before you save the settings. Note that the final design will appear on your website.

    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. 

    How to customize the button appearance (style, layout, shape, color) - global or per share buttons' position 2

    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.

    Important Note! If you activate the position-based settings then you will need to set up fully the styles you need. This will not transfer the settings you already have made global. A feature change on the styles for that location should also be made in the position settings till the option for personalized settings is active (no global style changes will reflect here)

    How to customize the button appearance (style, layout, shape, color) - global or per share buttons' position 3

    Hint! The change of the styles requires clearing cache and CDN if you are using those on your website. Otherwise, changes you have made may not appear.

    Was this article helpful?
    YesNo
    in GeneralSocial Share Buttons
    Was this article helpful?
    YesNo