{"id":12107,"date":"2016-12-28T13:34:37","date_gmt":"2016-12-28T13:34:37","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=12107"},"modified":"2017-02-15T14:53:39","modified_gmt":"2017-02-15T14:53:39","slug":"social-accounts-module","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/social-accounts-module","title":{"rendered":"Social Accounts Module"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]Let the users find you in social networks. Allows you to display your social profiles on your site with hover animation.<\/p>\n<p>Yoy may check all the styles of the module on <a href=\"http:\/\/nativewptheme.net\/shortcodes\/social-accounts\/\">Social Accounts<\/a> page.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/61zQeWvIldo\" target=\"_blank\">Social Accounts module creation<\/a> for more details.<\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1932 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/general-2.jpg\" width=\"978\" height=\"600\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/general-2.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/general-2-300x184.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/general-2-768x471.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style<\/strong> &#8211; choose between 8\u00a0preset styles. All of them can be found on <a href=\"http:\/\/nativewptheme.net\/shortcodes\/social-accounts\/\">Social Accounts<\/a> page.<\/li>\n<li><strong>Icon alignment<\/strong> &#8211; set the horizontal alignment for the social icons. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Social networks&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Social networks<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1934 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/social-networks.jpg\" width=\"978\" height=\"636\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/social-networks.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/social-networks-300x195.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/social-networks-768x499.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h6>In this section, you can customize the social accounts.<\/h6>\n<h6>By clicking on the\u00a0arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate the social accounts, change\u00a0their order (simply drag-n-drop the blocks) and delete the unnecessary social accounts as well.<\/h6>\n<ul>\n<li><strong>Social network<\/strong> &#8211; select the necessary social network from the available ones in the drop-down list.<\/li>\n<li><strong>URL<\/strong> &#8211; enter the link to the social account.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Styles&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Styles<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1935 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Style-8.jpg\" width=\"978\" height=\"846\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Style-8.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Style-8-300x260.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Style-8-768x664.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Icon size<\/strong> &#8211; enter the size fo the icon. The default icon size is 20px.<\/li>\n<li><strong>Icon color<\/strong> &#8211; choose the color for the icon. The default icon color is #28262b. The default icon color for the style <strong>Animated Cube<\/strong> is #fff.<\/li>\n<li><strong>Icon background color<\/strong> &#8211; set the background color for the icon. The background color is not set by default except the <strong>Animated Cube<\/strong> style, in which the background color depends on the social network.<\/li>\n<li><strong>Border radius<\/strong> &#8211;\u00a0set the border radius for the icon to have rounded corners.<\/li>\n<li><strong>Space between icons<\/strong> &#8211;\u00a0allows you to add the space between the social icons in px.<\/li>\n<li><strong>Border<\/strong> &#8211; switch it to <strong>Enable<\/strong> to add the border for the social icon. The border is displayed around the single social icon.\u00a0For <strong>Sliding icon<\/strong>,\u00a0<strong>Sliding background, Appear out and Fade\u00a0<\/strong>styles only.\n<ul>\n<li><strong>Border width<\/strong> &#8211; enter the border width.<\/li>\n<li><strong>Border color<\/strong> &#8211; set the color for the border. The default border color is #e7e7e7.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Sliding direction<\/strong> &#8211; set the sliding animation direction.\u00a0<strong>Left<\/strong>, <strong>right, top <\/strong>and<strong> bottom\u00a0<\/strong>directions are available. For <strong>Sliding icon<\/strong> and <strong>Sliding background<\/strong> styles only.<\/li>\n<li><strong>Colored icon<\/strong> &#8211; set it to <strong>Enable\u00a0<\/strong>to have<strong>\u00a0<\/strong>the colored social icons. The color of the icon depends on social network&#8217;s\u00a0color.<\/li>\n<li><strong>Customizable hover colors<\/strong> &#8211; set it to <strong>Enable<\/strong> to add\u00a0the settings for the custom hover colors. For <strong>Sliding icon<\/strong>,\u00a0<strong>Sliding background, Appear out, Animated Cube <\/strong>and<strong> Long shadow\u00a0<\/strong>styles only.\n<ul>\n<li><strong>Icon hover color<\/strong> &#8211; choose the icon hover color. The default color is #fff.<\/li>\n<li><strong>Icon background hover color<\/strong> &#8211; set the icon background hover color. The default background color depends on the social network.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Let the users find you in social networks. Allows you to display your social profiles on your site with hover animation.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[25,23,22,30,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12107"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=12107"}],"version-history":[{"count":2,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12107\/revisions"}],"predecessor-version":[{"id":12115,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12107\/revisions\/12115"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=12107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=12107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=12107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}