Mastering Website Design with JupiterX Layout Builder

Creating a visually stunning and functionally robust website requires not only creativity but also the right tools. With JupiterX’s Layout Builder, you have a comprehensive solution for constructing and customizing your website's structure.

The Layout Builder allows you to oversee and design the essential components of your site. It serves as an intuitive and powerful interface that lets you personalize your headers, footers, page titles, archives, and single-page layouts with ease. For those running WooCommerce, it goes a step further by providing dedicated templates for product archives and single product pages, ensuring brand consistency across your digital storefront.

Understanding WordPress Template Hierarchy

WordPress themes leverage a standard template hierarchy to determine which template file to use for various parts of content. With JupiterX, you can visualize and manage these templates directly from the Layout Builder Main Page and understand at a glance which parts need your creative touch.

Essential site parts for customization typically include:

• Header
• Footer
• Page Title Bar
• Archive
• Single (Single post or page layouts)

And for WooCommerce websites:

• Product Archive
• Single Product

Adding a New Site Template

To enhance your site's individuality:

1. Within the Layout Builder, click "Add New" in the top-left area of the main canvas after selecting a specific site part.
2. Alternatively, import a template using the drag-and-drop feature or by selecting a .JSON or .ZIP file containing the desired template. After the import, it will appear within your Site Parts dashboard.

Note: For a smooth import process, ensure that unfiltered uploads are enabled in Elementor > Settings > Advanced.

Editing Existing Template Designs

Updating the design of an existing site part requires just a few clicks:

1. From the Layout Builder, select the desired site part to open its details dashboard.
2. Click "Edit" to launch the Elementor editor and refine the design to your exact specifications.

Setting and Editing Display Conditions

Defining where your templates find their audience is critical:

1. On publishing a template, you'll be prompted to set up display conditions—this determines the areas of your site where the template will be active.
2. You can also manage display conditions directly from the Layout Builder for each site part by clicking "Edit Conditions."

Note: Visual indicators like a green dot for live site parts or a grey dot for drafts guide you in the Layout Builder. The "Display In" label specifies where the template is currently utilized on your site, with active templates displayed at the top for easy access.

Exporting and Managing Site Parts

Maintaining and sharing your custom designs is hassle-free:

1. Use the three horizontal dots icon to open the site part's menu.
2. Select "Export" to download the template to your computer as a .JSON file for use on other projects or to share with collaborators.

Deleting or Renaming Site Parts

Sometimes, a design overhaul is necessary:

1. To remove a site part, choose "Delete" from the menu and confirm your action in the dialog box that appears.
2. To rename a site part, select "Rename" from the menu, input the new name, and confirm the change.

Summary

Congratulations on taking a significant step in your web design journey. By utilizing JupiterX's Layout Builder, you've unlocked a new level of customization and control, constructing a website that not only meets your functional demands but also expresses your unique brand essence. This sophistication in design, achieved without delving into a single line of code, is the hallmark of a JupiterX WordPress theme.