1. Shortcode: Button
[button text="Free intake" color="secondary" icon="icon-clock" icon_pos="left" link="#popup-personal" target="_blank" class="sticky-side-button" visibility="hide-for-small"] [button text="Free intake" color="secondary" expand="true" icon="icon-clock" icon_pos="left" link="#popup-personal" target="_blank" class="sticky-footer-button" visibility="show-for-small"]
2. CSS
/*************** STICKY SIDE BUTTON ***************/ .button:not(.icon).sticky-side-button { right: -65px; /* Negative Margin Right - Change Accordingly */ float: right; position: fixed; top: calc(50% - 47px); transform: rotate(90deg); z-index:1; cursor: pointer; border-radius:0px !important; margin:0px; } .button:not(.icon).sticky-footer-button { position: fixed; left: 0; bottom: 0; z-index: 1; border-radius:0px !important; margin-bottom: 0em; } /*************** POPUP: PERSONAL ***************/ .popup-personal img { border-radius:99px; border: 5px solid #fff; width:120px; height:120px; } .popup-personal .col-inner { margin-top:-80px; } .lightbox-content { border-radius:5px; }
3. Shortcode: Popup
[row label="CSS* Popup Personal" style="collapse" h_align="center" class="popup-personal"] [col padding="20px 0px 10px 0px" align="center" class="popup-column"] [ux_image id="https://www.sebdelaweb.com/wp-content/uploads/guilherme-stecanella-_dH-oQF9w-Y-unsplash.png"] [/col] [/row] [row label="Content"] [col span__sm="12" align="center"]Free video intake
Book a free call with Julietta.
[title style="center" text="Leave your details" margin_bottom="10px" size="70"]Place your favourite form script or shortcode.
[/col] [/row]
4. Lightbox
[lightbox id="popup-personal" padding="30px" width="600px"] [block id="popup-personal"] [/lightbox]
Need professional design help?
Let's take your Flatsome shop to the next level.
Seb's design service💎 Improve your Flatsome design in 30 minutes
Get 22 design tips that every Flatsome site could use.
Flatsome tutorial
What’s New in Flatsome 3.12 Theme Update
Quick video showing you the latest Flatsome theme update features.
Flatsome tutorial
Create a Sticky Bottom Menu for Mobile
Improve your mobile experience with the sticky bottom menu.