If you are building a website from scratch, we suggest you to apply the following Elementor builder settings (fig. 1):

Such configuration disables native Elementor’s stylesheets for widgets design and applies The7 styles only. You can also choose “Use The7 presets” option, which keeps Elementor’s CSS files, but rewrites its colors and fonts with the ones from The7 theme options.

You may also want to make desktop/mobile Elementor switch points (fig. 2) equal to appropriate values in The7 Theme Options -> Topbar & Header -> Mobile header, etc. But this is not a must – you can leave default values, as well as apply any other values in accordance with needs of your website design.

If some changes don’t get applied, please refer to Elementor -> Tools -> General -> Regenerate CSS.

If you are using pre-made demo web-site, appropriate settings are imported automatically. And you can skip this step.

 

The7 comes with Elementor – live page builder, with no limits of design. It delivers high-end page designs and advanced capabilities, never before seen on WordPress!

You no longer need to work on the backend and guess what the frontend will look like. With Elementor page builder, you edit the page and simultaneously see exactly how it looks like (fig. 1). The whole process of writing and designing is done directly on the page, with no need to press update or go to preview mode.

It has very simple and intuitive interface, but before getting started with building layouts, you may find it useful to get accustomed with Elementor documentation.

The plugin must be installed through The7 -> Plugins. You may also want to get advanced Elementor features: refer to The7 -> Plugins again and install The7 Elements plugin.

By default, the builder is enabled for all post types except Slideshows, Photo Albums and Testimonials. These settings can be overwritten via “WP-admin > Elementor > General > Post types”.

To  start creating new layout click “Edit with Elementor” button (see fig. 2). It will bring you to the editor screen (fig. 1). It is easy to navigate among the widgets using Navigator tool (fig. 3):

You can find available Elementor widgets by clicking on the dotted square icon in the right upper corner (fig. 4). You can also filter theme-based widgets by searching “the7” keyword there:

Their interface is build on same principles as standard Elementor widgets. Therefore, if you’re already familiar with Elementor, working with our shortcodes will be a breeze for you!

Note: Please avoid of using Elementor and WPBakery together. Install and activate only one of these page editors.

• Basics
• Elementor Page Builder Settings
• Page Settings
• Theme Builder

• Widget Settings
• Individual Widget Areas

This section of Theme Options allows to configure appearance of a contact form and pop-up messages for both contact forms and WooCommerce.

Specify input fields size, colors, padding and border (fig. 1):

Then, you can choose whether to display contact form and WooCommerce messages inline or in a pop-up box (fig. 2) and select appropriate color and content of standard messages:

And, finally, specify what email box should receive messages from you contact forms (fig. 3):

If you leave this field empty, messages will arrive to admin email specified in WP Settings -> General. Please note, this setting is valid for built-in DT contact forms only. If you use Contact Form 7 plugin, you can specify appropriate email directly in this plugin settings.

Finally, you can also find “Security token” field there. It is meant to protect admin user from receiving spam. If you suddenly have started to get spam messages, empty the field, click “Save Options” and refresh the page – it will generate new random token.

The7 Design Wizard simplifies the process of theme configuring: choose header layout, upload your logo and set up background, fonts and accent colour. The7 will intelligently calculate the best values for advanced options available in the theme.

Wizard works in two modes: it allows to “Customize Existing Design” (Only if have configured theme options already) or “Start From a Scratch” (fig. 1).

Important: Wizard will always re calculate the best values for advanced options based on your settings. so its better use it only when you start fro scratch and once you have configured basic settings better to use dedicated Theme options section for fine tuning.

In Wizard > General (fig. 1.1) you need to:

• select site layout: boxed or wide;
• set background color and image “under the box”;
• set basic site background color.

As per fig. 2, select:

• font-family and color for content text;
• font-family and color for header text;
• color accent;
• one of 3 predefined button styles: flat, 3D, shadow.

In  Wizard > Top Bar & Header you can:

• select one of seven header layouts (fig. 3);
• fine-tune elements alignment;
• adjust colors of background and fonts.

In the Top bar section (fig. 4), you can specify:

• elements font color;
• background color.

Then you can also configure Floating navigation and Mobile header (fig. 5):

Wizard > Branding

In this section of the page, you can upload logos for different locations at your site, favicon, set up copyright information, etc. (fig. 6):

• Main Logo: Upload logo for ordinary desktop devices and a high resolution logo for retina devices.
• Transparent header: Logo to display on pages using Transparent header.
• Floating navigation: Enable/disable and upload logo in floating menu (menu which appears on the top, when you scroll down the site).
• Mobile: Logo to display on mobile devices.
• Bottom bar: Logo to display in the bottom bar of the site.
• Favicon: Upload favicon, please refer here if you’r not sure about what is a favicon.

• Enter copyright information (fig. 7).
• Enable/disable Dream-Theme credit in your bottom bar.

In Wizard > Sidebar & Footer (fig. 8):

• choose the sidebar style;
• background and text colors of the footer and bottom bar;
• footer layout: number of columns.