Site.pro
  • Website Builder
    • Website Builder
    • Prices
    • Website Import
    • Online Stores
    • Plugins
    • Collaboration
    • Templates
    • Languages
    • Affiliate Program
    • Examples
    • AI Website Builder
    • For Design Studios
    • We Build for You
  • Domains
  • Email
  • Learn
    • Tutorials
    • Blog
    • FAQ
    • Growth Hacking
    • For Hostings
    • Domainity
    • For Education
  • For Resellers
    • Prices
    • White Label
    • Revenue Share
    • Panels
    • How it Works
    • Mass Import
    • Our Partners
    • Reselling Examples
    • Marketing Materials
    • Documentation
    • Free Websites
  • Website Builder
    • Website BuilderEverybody can easily create a website, landing page, or e-commerce store. Easy-to-use website builder.
    • PricesSite.pro Prices: Templates 200+, Websites, Basic Builder Functions, Online Stores, Get more website builder features.
    • Website ImportTransfer your existing website from anywhere to Site.pro website builder. Website import from different website builders.
    • Online StoresSell your goods or services anywhere on the website
    • PluginsMany functions and plugins depending on geographical preferences. Plugin description.
    • CollaborationCollaborative Website Builder, Create a website with teammates in real-time in one space, Real-Time Collaboration.
    • Templates
    • Languages
    • Affiliate Program
    • Examples
    • AI Website Builder
    • For Design Studios
    • We Build for You
  • Domains
  • Email
  • Learn
    • TutorialsVideos for Beginners. Download video tutorials for free New video tutorial.
    • BlogWebsite Builder Lifehacks: Shared hosting tips. Web Design, Marketing
    • FAQHelp center. Payment Issues. Basic Tutorial. Quick search. Have questions? Enter your question here.
    • Growth HackingBoost your sales. Strategy
    • For HostingsEducation. Generate more website builder sales
    • DomainityDomainity: Domain quantity per 1000 people
    • For EducationFree Website Builder for Online and Offline Classrooms. Collaborate with students in one space or separately.
  • For ResellersWhite Label
    • PricesStart reselling. Pay for live websites. Free Websites. Join reselling program.
    • White LabelThe most popular white label tool is ideal for reselling
    • Revenue ShareWebsite Builder: Provide free website builder and earn 50% commissions
    • PanelsOne product for all platforms. Download plugin for your panel
    • How it WorksCloud or On-Premises. Recommendations for Builder Server. Requirements for builder server (On-premises only) and published websites. Install on as many IP's and servers as you like—it's free of charge.
    • Marketing MaterialsVideo. Mockups. Website Blocks. Marketing Materials.
    • Mass Import
    • Our Partners
    • Reselling Examples
    • Documentation
    • Free Websites
  • Register

    Register

    (Buy Domain, Create email)
    (For Hosting Companies)
    By registering, you accept our Terms of Service
    Number of Customers: 1-100
    Number of Customers: 1-100
  • Log in

    Log in

    New user? Create account
    Forgot password?
  • $
  • English
Please use keywords in English only.
Account & Billing (35)Mixpanel (2)License (24)Managing Website (12)Domains: Purchasing (15)Domains: Connecting (26)Mailboxes (26)Brand: Cloud (5)Brand: On-Premises (14)Installation: Builder (10)Installation: Builder Plugin (5)Hosting/Billing panels: cPanel (9)Hosting/Billing panels: DirectAdmin (7)Hosting/Billing panels: ISPmanager (4)Hosting/Billing panels: Plesk (7)Hosting/Billing panels: Webuzo (2)Hosting/Billing panels: WHMCS (5)Website Builder: Plugins (5)Website Builder: Website creation (52)Website Builder: Pictures (11)Website Builder: Media (15)Website Builder: Additional (8)Website Builder: Text (14)Website Builder: Import (5)Website Builder: SEO (22)Website Builder: Social (13)Website Builder: Commerce (80)Website Builder: Maps (12)Website Builder: Forms (7)Website Builder: Advanced (18)Website Builder: Errors (21)Web Design Studio (3)Affiliate Program (8)Education (8)
Filter
All (510) For Hosting Companies (398) For Website Owners (380)
FAQ
›
Website Builder: Website creation
How to use the "Floating Block" layout?
Website Builder

How to use the "Floating Block" layout?

The “Floating Block” layout type is an excellent choice if you want pixel-perfect precision in your compositions. Here is how to start using one:

  1. Adding a layout:
    • Drag and drop the layout from the main toolbar.
    • Choose the “S1” layout composition.
  2. Changing layout to floating:
    • Select the newly added “Layout” in the “Page Structure” section of the right toolbar.
    • Select “Floating Block” inside the “Layout” section of the right toolbar.
  3. Customizing “Floating Block”:
    • Select “Background”, “Border”, and/or “Shadow” to adjust the visual look of the element.
    • Use “Size” to adjust layout size by changing “Height” and “Width”. Alternatively, use lines on the borders of the element to adjust the layout size.
    • Select an item inside the layout and use the arrow symbol to move it and the items below up or down.
    • Drag any elements from other layouts and drop them precisely where you need them.
    • To change element order, right-click on the element and select desired “Order” option.
NOTE: Keep in mind that while using the “Floating Block” layout type, you need to adjust the composition individually for each screen — “Wide”, “Desktop”, “Tablet”, and “Phone”.

People also found this article using these queries:

  • How do I apply the floating block layout to my design?
  • How can I change layout to floating?
  • Drag and drop layout
  • What are steps to use floating block layout?
  • Floating block
  • What is a "floating block" layout?
  • Do I need to edit each screen manually with floating block?
  • How can I change element order in floating block?
  • How to add the floating block layout?
  • I need to add floating block layout into my website.
  • I want to change my layout to floating block
  • How do I move element inside floating block layout?
  • I want to use floating block layout, how it is done?
  • What are the advantages of using the floating block layout?
  • Why to choose floating block?
  • How to use the floating block layout step by step?
  • Floating block layout
  • How do I change size of floating block layout?
  • Where can I customize floating block?
  • I want to insert floating block layout
  • How can I change element order in layout?
  • Element order
  • How to work with floating block layout?
  • What element composition is in floating block layout?
  • Floating block layout type
© Site.pro 2011. Website Builder. United States.
Contact SalesTerms of Service