Taufik Hidayat

Make section in elementor floating used for floating bar or floating navbar or floating menu

Floating Section Elementor

Make Elementor section floating, used for floating bar.

thinkerwebdesign

<h4>Features:</h4>
<ul>
<li>Customized floating Google language translator.</li>
<li>Customized Google language translator below the footer.</li>
<li>Customized Google language translator in specific locations via shortcode: <code>[thinker_translator]</code></li>
<li>Interactive or inline display.</li>
<li>Display flags only, flags and text, or text only.</li>
<li>Optional customized icon to display the language translator on mouse click or hover.</li>
</ul>
<h4>How to Use:</h4>
Simple Setup
<ul>
<li>Inline Display: Use Inline Display or not. (Inline Display disables all Icon Method Settings)</li>
<li>Use Icon Method: Use Hover/Click Icon Method or not.</li>
<li>Icon Container: Use Icon Container or not.</li>
<li>Locations: Most important is to select the desired Locations.</li>
<li>Optionally display the translator in posts or pages using this shortcode: <code>[thinker_translator]</code></li>
<li>Optionally customize any features by changing the default settings on any other fields or not. (See the Customize Steps below)</li>
</ul>
Customize Step 1 – Basic Settings
<ul>
<li>Main Color: Choose a custom main color or use the default. (Default: #3C3B6E)</li>
<li>Languages: Choose the languages to offer for translation or use the default list. (Default: English, Spanish, French, Russian, Japanese, Chinese)</li>
<li>Flags, Text or Both: Choose whether to display languages using Flags Only, Text Only, or Both Flags and Text. (Default: Flags Only)</li>
<li>More Languages Button: Choose whether to display a More Languages option that displays all languages supported by Google. Choose to use only a Plus Sign, only the word <code>More</code>, a Plus Sign and the word <code>More</code>, or Disable More Languages. (Default: Plus Sign Only)</li>
<li>Wide More Button: Optionally make the More Languages button span the entire width of the display. (Excludes Inline Display)</li>
<li>Inline Display: Optionally use a simple Inline Display. (Disables all Hover/Click Icon settings)</li>
<li>Cache Output: Optionally cache the HTML output for best performance. (Recommended)</li>
<li>PNG Images Only: Optionally use PNG images instead of SVG images. (Not recommended)</li>
<li>HTML Links Method: Optionally use outbound HTML links instead of JavaScript. This sends users to a translation of the website at: https://translate.google.com/ (Not recommended)</li>
</ul>
Customize Step 2 – Hover/Click Icon
Icon Method
<ul>
<li>Use Icon Method: Optionally use a customized icon to display translator options on mouse click or hover.</li>
<li>Icon Size: Choose the size of the icon in pixels. (Default: 30)</li>
<li>Icon Type: Choose to use the Font Awesome Translator icon, A custom image, or none. (Default: Font Awesome)</li>
<li>Icon Image URL: Choose a custom image to use as an icon or background behind the Font Awesome Icon. (Example: http://ex.com/ex.png)</li>
<li>Icon BG Color: Choose a background color behind the icon. (Default: #fff)</li>
</ul>
Icon Container
<ul>
<li>Icon Container: Optionally display the icon inside a customized container.</li>
<li>Height: Choose the height of the icon container in pixels. (Default: 30)</li>
<li>Width: Choose the width of the icon container in pixels. (Default: 50)</li>
<li>Border Radius: Choose a border radius for the icon container using CSS Rules. (Default: 50%)</li>
<li>Nation Flag BG: Choose a National Flag image for the icon container. (Default: United States)</li>
<li>BG Image: Choose a custom image for the icon container. (Example: http://ex.com/ex.png)</li>
<li>BG Color: Choose a background color for the icon container.</li>
</ul>
Customize Step 3 – Locations
Shortcode
<ul>
<li>Shortcode Padding: Choose a padding for the shortcode container using CSS Rules. (Default: 5px)</li>
<li>Display the translator in desired content using this shortcode: <code>[thinker_translator]</code></li>
</ul>
Floating
<ul>
<li>Floating Translator: Optionally display a customized Floating translator.</li>
<li>Padding: Choose a padding for the Floating translator using CSS Rules. (Default: 0)</li>
<li>Top Alignment: Choose a top alignment for the Floating translator using CSS Rules. (Default: 50px)</li>
<li>Bottom Alignment: Choose a bottom alignment for the Floating translator using CSS Rules. (Default: auto)</li>
<li>Left Alignment: Choose a left alignment for the Floating translator using CSS Rules. (Default: 50px)</li>
<li>Right Alignment: Choose a right alignment for the Floating translator using CSS Rules. (Default: auto)</li>
</ul>
Footer
<ul>
<li>Below Footer Translator: Optionally display a customized translator below the footer.</li>
<li>Footer Padding: Choose a padding for the Footer translator using CSS Rules. (Default: 5px)</li>
<li>Footer Align: Align the Footer translator: Center, Left, Right, Inherit. (Default: Center)</li>
<li>Footer BG Color: Choose a background color for the Footer translator.</li>
<li>Footer BG Style: Choose a background CSS style for the Footer translator. This is great to match the website. (Example: url(/ex.png) center top / cover) (Important: Do NOT use quotes for URL)</li>
</ul>
General Notes
<ul>
<li>The translator Preview on the settings page excludes all Locations settings.</li>
<li>The Remove Changes button will remove any unsaved changes and reload the page.</li>
<li>The Clear All Fields button will reset all the settings to default values.</li>
<li>For shortcode display, use: <code>[thinker_translator]</code></li>
<li>The Hover/Click Icon method and the Floating display both have nearly unlimited possibilities. Refer to below CSS Help section to learn more.</li>
<li>Inline Display disables the Hover/Click Icon settings.</li>
<li>If multiple translators are used on the same page, the More Languages Button is only used on the first translator. Order of priority: Floating, Footer, Shortcode.</li>
<li>HTML Links Method is not recommended but does not use JavaScript. If HTML Links Method and Cache Output are both enabled, all translation links will point to your home page.</li>
</ul>
CSS Help Notes
<ul>
<li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp" rel="nofollow ugc">Border Radius</a></li>
<li><a href="https://www.w3schools.com/cssref/pr_padding.asp" rel="nofollow ugc">Padding</a></li>
<li><a href="https://www.w3schools.com/cssref/css3_pr_background.asp" rel="nofollow ugc">Background</a> (Important: Do NOT use quotes for URL)</li>
<li><a href="https://www.w3schools.com/cssref/pr_pos_top.asp" rel="nofollow ugc">Top</a></li>
<li><a href="https://www.w3schools.com/cssref/pr_pos_bottom.asp" rel="nofollow ugc">Bottom</a></li>
<li><a href="https://www.w3schools.com/cssref/pr_pos_left.asp" rel="nofollow ugc">Left</a></li>
<li><a href="https://www.w3schools.com/cssref/pr_pos_right.asp" rel="nofollow ugc">Right</a></li>
</ul>
<h4>Demo:</h4>
<a href="http://www.thinkerwebdesign.com/thinker-language-translator-plugin/" rel="nofollow ugc">Visit Plugin URI</a>

Language Translator

Add a highly customizable language translator to your website.

Floating Section Elementor vs Language Translator