This hero section features a split-screen layout designed to show a featured image alongside your message. With configurable left or right alignment and customizable text elements.
How to Add Hero - Split with Screen
Go to the Landing Page Section in the backend (Menu: “Content” > “Landing Pages”). Find and select the page you want to edit. To add the element to your page, first click on "Add Paragraph." Select the "Hero Section" category from the overview and add the specific element "Hero - Split with Screen" by clicking the "Add this row" button.
How to Configure Content Settings
Once the row has been added, you can customize the content. First, enter your main heading and the Tag Text, which appears directly above it. You can also add a Subtext to be displayed right next to the tag. To provide more detail, include a text element under the heading and a Bottom Text, which can be turned into a link to act as a call-to-action.
Next, you have the option to include a Search Bar. Finally, upload your screenshot or image and provide a suitable alternative text to ensure your content is accessible and professional.
How to Style Hero - Split with Screen
In the next step, you refine the look of your element. You can choose whether your image should be displayed on the left or the right side of the screen. Additionally, you can customize the colors for the Tag Text and the Bottom Text to ensure they align with your brand's identity.
Use the LP Row Margin to set the vertical spacing and create the desired structure on the page. Once you are satisfied with the settings, click "Save" at the top of the page to store your configuration.
Final Outcome
To check your work, simply switch to the "View (Frontend)" tab at the top. Here you will see the live view of your element exactly as it appears to your users on the website.