Configure & Change Share Buttons’ Style

Article sections

    Inside Easy Social Share Buttons for WordPress you have several locations you can setup button styles – global for site, for a selected position, post type, mobile device, plugin integration. All those settings are loaded in provided order. For example if you setup a specific styles for entire site inside global settings and choose a different style for the top content position you will always see the top content position share buttons. That option is made to provide a maximum flexibility when setting up the share buttons on site.

    Setting Global Share Buttons’ Style for Entire Site

    The global share buttons’ styles are those that will always appear if you do not have a personalized settings. Those buttons you can set in Social Sharing -> Template & Style.

    Configure & Change Share Buttons' Style 1

    • 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 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 lines, icon with hover – showing initially icon and than 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-configure the icon size, text size and spaces to make 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 of 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 than 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 button counter select 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 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 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

    Setting Share Buttons’ Style for Display Position

    As we mention above Easy Social Share Buttons for WordPress has an option to setup custom styles that will be used on site for a selected position. To do such change you need to visit Where to Display -> Position Settings -> <Position You Wish To Personalize>. To make possible of that change you need to activate at first that you wish to have a personalized position settings.

    Configure & Change Share Buttons' Style 2

    Important Note! If you activate the position based settings than you will need to setup fully the styles you need. This will not transfer the settings you already have made in general. 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)

    Setting Social Buttons’ Style for Mobile Devices

    In case you need to personalize the button style for mobile devices (usually the width control or button type may be needed to change). If so than you can do this in Where to Display -> Mobile. In the mobile menu you can access style settings when viewing on mobile devices and such for the specific mobile display positions. The global mobile style setup will apply on any display position on site (except shortcodes) when mobile device is met (and the server side detection works).

    Tip. To ensure proper mobile styling we recommend for mobile optimized display methods to use the mobile position settings. That will ensure that even if you are using the legacy responsive mode the options will always apply.

    Using Ready Made Styles

    The ready made styles is a collection from pre-configured designs. Those designs you can apply to the location they are suitable with a one click. The access of ready made styles you can do from Ready Made Styles menu.

    Configure & Change Share Buttons' Style 3

    Learn how to use Ready Made Styles here →

    Important Note! If you applied ready made styles than you will have automatically set position based styles. To change the ready made style once applied you need to take a look at the position based settings

    Tips & Troubleshooting for Styles Usage

    • If you are using a shortcode to show the share buttons on your site than it is possible to avoid sending any style parameters. In this situation share buttons will take the global styles you set from Social Sharing Menu
    • If you the styles you change are not reflecting on site than you may need to do check one of those: 1. You change the global styles but you have personalized position or device styles – in this case you should do the change in the position/device settings; 2. Check in Advanced Settings -> Settings by Post if you have set to Yes. If that is so than no any global or position settings will reflect on site – the post type settings will be always taken. You can deactivate the post type setup if that is not required
    • For content buttons, when they are few we can recommend to use the fluid flexible width to get a easy optimization for any device. That width mode is made to adjust to any device width. If your content share buttons are more than typical (4-5 buttons) than you may consider the usage of icon mode or column display
    Important Note! If you are using a cache, optimization plugin or CDN on your site it is highly recommended when you do a style change to clear the used plugin/service. That will ensure that styles you set will be fully loaded.
    Was this article helpful?
    in GeneralSocial Share Buttons
    Was this article helpful?