Aesthetix CRM uses one drag-and-drop page builder to power all of your marketing pages. Whether you are editing a funnel step, a website page, or a standalone landing page, the editor, canvas, settings panels, and styling controls are exactly the same. Learn the builder once and you can design across every surface.
This guide covers opening the editor, working in the canvas, configuring page-level settings such as SEO, tracking, and custom code, styling individual elements, and customizing the page background. For where funnels and websites live and how to create them, see the Funnels guide and the Websites guide.
The page builder opens the same way from any of your marketing surfaces. Funnels, websites, and landing pages all launch into the identical editor.
Step 1: Go to the Marketing tab.
Step 2: Select Funnels (or Websites, depending on what you are building). Landing pages open the same editor as well.
Step 3: Choose the funnel, website, or page you want to work on to open it in the builder.
Welcome to the editor. Here you have every option you need to create and customize your page. The builder is organized around four nested editing levels, each shown with a colored border so you always know what you are editing.
Step 1: Use the Section controls (green border) to edit the outermost building block of the page.
Step 2: Use the Row controls (blue border) to edit a row nested inside a section.
Step 3: Use the Column controls (lilac border) to edit a column nested inside a row.
Step 4: Use the Element controls (orange border) to edit an individual element such as text, an image, or a button.
Selecting any level highlights it with its color so changes you make apply only to that specific section, row, column, or element.
When you select a section, row, column, or element, its settings panel opens so you can style it. There are two ways to reach these settings: click the settings icon on the selected item, or open the settings panel from the editing toolbar. Every setting below applies only to the currently selected editing level.
Step 1: Review the Element Name/Title. This shows the default name of the item you are editing. Leave it as-is or rename it.
Step 2: Set the Background Color for the selected section, row, column, or element by clicking the content you want to modify and choosing a color.
Step 3: Adjust Opacity to control how transparent the selected item appears.
Step 4: Apply a Text Shadow to add depth to your text.
Step 5: Set Letter Spacing to control the space between characters.
Step 6: Choose Text Alignment, the paragraph formatting attribute that determines how text appears across an entire paragraph.
Step 7: Add a Box Shadow to make a border more visible by applying a shadow effect to the box.
Step 8: Customize the Mobile Font Size to control how text scales on phones.
Step 9: Customize the Desktop Font Size to control how text scales on larger screens.
Step 10: Select the Typography Type for the selected text.
Step 11: Select an Icon where the element supports one.
Step 12: Choose Color options for the selected item.
Step 13: Set Padding Left, Right, Top, and Bottom. These four toggle bars move your content within its own space. The settings apply only to the editing level you are currently working on. For example, if you are modifying a specific row (indicated by the blue box), only the content within that row is affected.
Step 14: Set Margin Top and Bottom by toggling their respective bars to adjust the outer spacing above and below your content.
The Advanced tab within an element's settings unlocks border styling, visibility controls, and custom CSS class handling.
Step 1: Click Advanced to open the advanced options.
Step 2: Select a Border type. Decide which type of border you want. Clicking any border type other than "No Border" reveals additional border options.
Step 3: Select a Border Style once you have chosen a border type.
Step 4: Select a Border Width to set the thickness of your border.
Step 5: Select a Border Color by clicking the color swatch to open the color picker, where you can choose a pre-defined color or use the slider to create a custom color.
Step 6: Select a Border Radius to soften sharp corner edges. Adjust the radius to control how curved the corners of your border appear.
Step 7: Select a Radius Edge to choose which side to modify. You can adjust all edges, only the top edge, or only the bottom edge.
Step 8: Set Visibility by clicking to highlight the icon. This lets you choose whether the item is visible on mobile devices only, desktops only, or both.
Step 9: Input a Class Name to apply a custom CSS class. Access the CSS editor and add your class there.
Step 10: Use the CSS Selector reference. To copy the custom CSS code, click the Copy icon located on the right side of the reference code.
Beyond styling individual items, the builder includes page-level settings that apply to the whole page. These are the same across funnels, websites, and landing pages.
Open Preview Custom Codes to review any custom code applied to the page before you continue.
Open SEO Meta Data to control how your page appears in search results and when shared.
Step 1: Add a Title. Give the page a specific, descriptive name. A title is required in order to save your work.
Step 2: Add a Description. Filling out the description box is mandatory. Provide a short, concise summary of what your page is about.
Step 3: Add Keywords. Adding common keywords helps improve visibility and increase organic traffic. Include relevant terms your target audience is likely to search for so your page has a better chance of appearing in their search results. Choose keywords that accurately represent your page content and are frequently searched.
Step 4: Add an Author. Include the name of the owner of the funnel or website.
Step 5: Add an Image. Adding an image or logo helps your page stand out and make a strong first impression when it is shared.
Step 6: Add Custom Meta tags. Click the "+All" button and enter the name and content of the tag in the designated fields.
Step 7: Check the SEO Preview. Scroll down below the SEO Preview button to see a sneak peek of how your page will appear before you publish it.
Click Pop up to add a popup to your page. This provides several options to customize the popup to your preferences. You can also edit it by clicking Open Popup Settings.
Click Background to customize the page background.
Step 1: Select a Background color. Choose from the range of colors available in the editor. If you cannot find the color you want, add a custom color by clicking the drop-down labeled "Didn't find your color? Add custom one!"
Step 2: Select a Background Image to use an image as your page background.
You can also curate reusable background images from the Media library: go to Marketing, open Media, click Open media library, then click Backgrounds to browse the Backgrounds gallery and choose from multiple options.
Click Typography to set page-wide fonts and colors. You can change the text and link color from the default black or blue to any color you choose. Note that you cannot have multiple colors for the text; you can only change the entire text to a single color. You can also customize the font size of your headlines and content to create a unique visual identity.
Step 1: Customize the Headline Font.
Step 2: Customize the Content Font.
Step 3: Customize the Text Color.
Step 4: Customize the Link Color.
Click Custom CSS to add your own CSS rules to style the page.
Click Tracking Code to add tracking scripts to the page.
Step 1: Add your Header Code to place a script in the page header.
Step 2: Add your Footer Code to place a script in the page footer.
The builder gives you panels to navigate pages, manage stacking order, and add new elements.
Step 1: Click Pages to see the list of pages in your funnel or website.
Step 2: Click Layers to see the list of layers on the current page and manage their order.
Step 3: Click to show Elements. Open the Elements panel to browse and drag in the components you can add to the page.
Before publishing, use the responsive views, undo/redo, versions, and preview tools to confirm everything looks right, then save.
Step 1: Switch to Desktop view. To make your page accessible on both mobile and desktop, go to the overview and toggle between the Phone and Desktop icons in the upper left corner so your page can be viewed by a wider audience.
Step 2: Switch to Mobile view using the same Phone and Desktop toggle in the upper left corner to check how the page looks on phones.
Step 3: Use Undo or Redo. Click the Undo and Redo arrows to move backward or forward through your changes.
Step 4: Open Versions. Click the Version button in the upper right corner to see all previous versions of your page and revert to an earlier one if needed.
Step 5: Click Preview. Next to the Version button, click Preview to see how your page will look when published and live on the web, so you can confirm everything works before going live.
Step 6: Click Save. Always save your changes to avoid losing progress. Save frequently so your work stays up to date and protected.
Separate from the page builder, each funnel and website has its own Settings that control the domain, path, tracking, and other publishing options. Open a funnel or website and click Settings to configure them.
Step 1: Set the Name. Enter or rename the funnel in the name field.
Step 2: Select the Domain. The Domain field is crucial for choosing which domain your funnel is associated with. Without a domain, the funnel cannot be activated. If you have not created a domain yet, refer to the Settings → Domain section or reach out to your administrator for assistance.
Step 3: Set the Path. Enter the path in the provided field to establish a default path for your funnel. You can further adjust this in the Step tab by configuring each step's settings.
Step 4: Add a Favicon URL. Paste the favicon URL in the field to apply your .png or .ico favicon image to all pages within your funnel.
Step 5: Add Head Tracking Code by inserting the code in the designated field.
Step 6: Add Body Tracking Code by inserting the code in the designated field.
Step 7: Set the Payment Mode. The payment status of your funnel depends on this setting. Toggle Payment Mode off to test payments and transactions without charging any real cards or bank accounts. Toggle Payment Mode on to take the funnel live and fully functional, with all transactions charged accordingly.
Step 8: Enable Image Optimisation to optimize the images used across your funnel.
Step 9: Set the Chat Widget. Toggle it on to activate the chat widget for your funnel, or off to remove it. The chat widget is especially helpful on lead generation funnels because it lets you track lead conversations in a single channel.
Step 10: Click Save to apply your funnel settings.
Is this the same builder for funnels, websites, and landing pages? Yes. Aesthetix CRM uses one drag-and-drop page builder across all three. The editor, canvas, section/row/column/element controls, page settings, and styling options are identical no matter which surface you are building.
What do the different colored borders mean? Each color represents an editing level: green is a Section, blue is a Row, lilac is a Column, and orange is an individual Element. Selecting a level highlights it in its color so your changes apply only to that item.
Why can't I save my page? An SEO Title and Description are required. Add a title and a description in the SEO Meta Data panel, then save.
How do I make my page look right on mobile? Toggle between the Phone and Desktop icons in the upper left corner of the overview to preview and adjust both layouts. You can also set separate Mobile and Desktop font sizes in an element's settings and use the Visibility option to show or hide items per device.
How do I revert to an earlier version of my page? Click the Version button in the upper right corner to view previous versions and revert to any one of them.
Do my styling changes affect the whole page? Element settings apply only to the currently selected section, row, column, or element. Page-level settings such as Background, Typography, and Custom CSS apply to the entire page.
How do I test payments without charging real cards? Open the funnel Settings and toggle Payment Mode off. All transactions run in test mode with no real charges. Toggle it on when you are ready to go live.
Why can't I activate my funnel? A funnel requires a domain. Select a domain in the funnel Settings. If you have not created one yet, set it up under Settings → Domain or contact your administrator.
