How to add side-by-side buttons in the mobile editor (Tips and tricks)

As you may already know, elements such as buttons and others that appear from left to right on the desktop side will appear from top to bottom on the mobile side of your page design.

While this looks great, there are moments where your design could really use side-by-side buttons when being viewed on a mobile device. This article will show you an easy and fun workaround to make that happen. 

Watch Video: https://www.loom.com/share/e2811b4e51de4e65bcc82e26981a05c1

Video Recap:
Having side-by-side buttons on the mobile side of your design is technically not possible within the page editor, it is possible, however, to have the appearance of multiple buttons and have them function the same way. 

To achieve this, you would need to design an image of two buttons (or more) in an image editor of your choice. We recommend Funnel Images. Once you have created the image you can add it to your design. 

Add a Headline or Sub-Headline Element
Right below the image, you will want to add a headline or sub-headline as seen here: https://d.pr/0J1qjl 



Important: The purpose of this headline is to eventually have it go over the image and have text over each button in the image, so be sure to leave the required space in between the words to cover each button individually. 

Hyperlink text
Once you have added the headline/text you will need to highlight each word and click on the chainlink icon in order to hyperlink it. In this hyperlink field, you will want to either include the URL of the page/destination you want it to redirect to or add a merge tag that will indicate what it needs to do. In this example, one side is set to redirect to a page URL and the other to open the pop-up. See screenshot: https://d.pr/WJHz7u 



Place Text Over Image
Now that you have set the hyperlinks, you will need to bring the headline/text over the image. To do this, click to edit the text, and set the top margin to a negative number. In this example, it is set to -60. See screenshot: https://d.pr/CfNrzW 



Hide The Text
After setting the negative margin to where the text is over the image and in the correct location, you will need to set both the text and hyperlink colors to transparent so they cannot be seen. This can be done by clicking on the color settings and dragging the bar towards the left as shown here in this screenshot: https://d.pr/j9yXXR



Set to Mobile-Only
Finally, be sure to have the image of the buttons and the text set to Mobile-Only as shown here: https://d.pr/V1JVaP




Important: Always be sure to click Save after making any changes in the editor to prevent loss of work.