Floating button creation

Creating a floating button

Bybasbuis Design

Floating button

A floating button can be extremely handy. To open a flyout, a popup with an information form, scroll to an accordion, a plan overview or similar. Classic premium themes like GeneratePress, Blocksy, and Kadence have elements or similar for this. For FSE themes it’s a bit different and, in a way easier. Every FSE theme has the site editor and page templates built in, where you can simply place the floating button. This manual is usable in the following situations:

  • Classic theme: create a floating button on a specific page (not template).
  • Full site editing (FSE) theme: create a floating button on a page or post template.
  • Full site editing (FSE) theme: create a floating button on a specific page (not template).

How to create a floating button on a template

  • Here we cover how to create the floating button on an FSE theme template.

1) Open or create a page template

  • This is not a risky endeavor, but to be sure you could make a copy of a template first.

2) Place the button

  • A full site editing (FSE) page template usually has a Group block placed between the header and the footer. That’s for the page content.
  • Place a button in the group (or any other block you wish to use as a button or trigger). Place this above the ‘content’ block. Even a simple button block suffices.
  • If you want the button to be aligned totally to the right (or left) you give the main button block full width.
  • Give the button a name, of if it’s text you use as a trigger type the text to your liking.

3) Necessary CSS

  • The CSS is entered at the button-item, not the main button block.
  • It tells the browser that:
    • The position of the button is fixed (it remains in the same place in the browser window).
    • The distance from the top to the bottom is 280px (you can adjust that to your liking).
    • It aligns to the right side of the space you gave the main button block in the former steps, usually 0px. It can even be a small negative value, like -5px.
    • Z-index has to be high to make sure the button stays on top of all other visual elements on your pages (z-index functions like layers). Most website designers don’t go any higher than 999, so a z-index of 1000 is perfect.

4a) Theme with Additional CSS field

  • If the theme you are using has an additional CSS field in the button-item, that’s where you place this CSS.
  • This is the CSS you place in the additional CSS field:
  position: fixed;
  top: 280px;
  right: 0px;
  z-index: 1000;

4b) Theme without Additional CSS field

  • If the theme you are using doesn’t have an additional CSS field, it is a bit different.
  • Set this class in the Additional CSS class(es) field of the button-item (not the main button block): fixed-button
  • Now you have to tell the same what to do with any block that has the class fixed-button.
  • Go to the location where you typically store your custom CSS. That can be a snippet manager like WPCode or WPASE (pro) or Site Editor / Styles / Elipses / Additional CSS (I know, it’s an awkward position). Save the CSS,
  • This is the CSS you place in the code snippet manager of additional CSS:
  .fixed-button {
  position: fixed;
  top: 280px;
  right: 0px;
  z-index: 1000;
}

5) Target the page you want to show the button on

  • If you made a copy of an existing (or a new) page template, open the page(s) you would like to show the button on, and apply the template: edit, template, change template, select new template, save.
  • A lot easier to manage your FSE templates and assign them to the pages you want: FSE template Assigner.

How to create a floating button on a page

  • Here we cover how to create the floating button on every kind of theme, FSE, or Classic.

Workflow button on a page (FSE theme)

  • The workflow is nearly the same as explained above, with a few minor changes.
  • The button is created directly on a page or post, not a template.
  • The workflow requires only actions 2 to 4.

Workflow button on a page (classic theme)

  • The workflow is nearly the same as explained above, with a few minor changes.
  • The button is created directly on a page or post, not a template.
  • The CSS code is placed in the Additional CSS in the theme customizer or a codesnippet manager like WPCode.
  • The workflow requires only actions 2 to 4.

If you use the floating button to open a popup or flyout

  • Not all popups of flyout plugins offer the possibility to create your own triggers. The ‘good’ ones do, like the Dynamic Popup & Fly-out plugin.
  • After the creation of the floating button, just add the class trigger of the popup or flyout to the Additional CSS class(es) field. If there are already other classes present, make sure there is a space between those and the new class tou enter.

Similar Posts