As it was mentioned in section Theme Options > Widget Areas, you can create and assign different widget areas to different posts and pages.

To do so, navigate to page/post back-end. You’ll notice boxes called “Footer options” and “Sidebar options” (fig. 1):

Fig. 1. Assign individual widget areas.

In “Sidebar options” box you can:

• specify the sidebar alignment (left or right or disabled);
• assign a certain widget area to the sidebar on this page;
• decide whether the sidebar should show up on mobile layout.

“Footer options” allows:

• enable/disable the widgetized footer on this page;
• assign a certain widget area to the footer on this page;
• decide whether the footer should show up on mobile layout.

You can create unlimited number of widget areas. By default, there are only two areas: default sidebar and footer.

To add custom widget area, fill in its name and description (optional) fields in the right side of the page (fig. 1, section 1)  and hit the “Add” button. Your new widget will appear in the widget areas list in the left side of the page (fig. 1, section 3).

Widget areas can be ordered by dragging them with your mouse. You can remove custom widget area by clicking the “delete” link inside the correspondent widget area (fig. 1, section 2).

Fig. 1. Widget area management.

When everything is done, don’t forget to hit “Save Options” button!

Changes you are making on this page will affect standard widgets management page “WP-admin > Appearance > Widgets”. You can learn more how to use custom widget areas here.

You can enable social like/share buttons for blog posts, pages, portfolio projects, media albums and WooCommerce products. To do so, simply drag required button(s) to wide filed on the left (fig. 1):

Fig. 1. Adding share buttons.

There is an option of ‘Share buttons appearance’ which allows to change the way people interact with social share buttons at your website. You can make them always visible (see fig. 2).

Fig. 2. ‘Always Visible’ mode for share buttons.

Or make them show up on hover only (fig. 3):

Fig. 3. ‘Show on hover’ mode for share buttons.

Here you can select image hovers styling, background color and opacity. Depending on “Styling” settings, images will look this way:

• None
  

  Fig. 1.1. Image Styling: None.

• Grayscale
  

  Fig. 1.2. Image Styling: Grayscale.

• Grayscale with color hovers
  

  Fig. 1.3. Image Styling: Grayscale with color hovers.

Note: the styling setting may not have effect on some portfolio, photo albums and shortcodes image hovers as they have own settings.

You can also specify:

• hover background color and opacity for ordinary images;
• hover background color and opacity for portfolio & photo albums images.

In Footer options (fig. 1.1), you can set:

Fig. 1.1. Footer settings.

• background style: content-width line, full-width line, background;
• background color and image, decoration line;
• enable slide-out mode;
• text color;
• layout: padding, number of columns (fig. 1.2);

Fig. 1.2. Footer layout settings.

• width to collapse the footer into a single column (fig. 1.2).

In Bottom bar options (fig. 2), you can set:

Fig. 2. Bottom bar settings.

• background style: content-width line, full-width line, background;
• background colour and image;
• bottom bar layout, height, padding;
• text color.

It is also possible to specify screen width which enables responsive layout of the bottom bar and responsive layout of the bottom menu.

Finally, you can insert required text into the bottom bar text area.

Note: you can define which custom menu should be displayed in the bottom bar via “WP-admin > Appearance > Menus” page, “Manage Locations” tab. Please refer to this page for details.

Bottom bar Logo and Copy right text can change from  Theme options > Branding, refer here for details.

Fig. 1. Sidebar settings.

Here you can set:

• sidebar width;
• vertical distance between widgets;
• gap between content area and sidebar.

After selecting sidebar style, you can also specify background color/image/decoration or dividers position (fig. 2).

Fig. 2. Sidebar style and background.

It is also possible to make the sidebar sticky (sidebar floats down upon page scroll) by selecting appropriate check-box.

Finally, you can select text color for headings and ordinary text (fig. 3), as well as specify browser width when the sidebar should go below the content area (“Responsiveness” section).

Fig. 3. Text Color

Layout

There are seven header layouts available in The7  (fig. 1):

Fig. 1. Header layouts.

You can find some examples below (fig. 2.1 – 2.3):

Fig. 2.1. Classic header.

Fig. 2.2. Inline header.

Fig. 2.3. Split header.

Header layout affects number and position of areas where you can place microwidgets (top bar right, top bar left, etc.).

You can also fine-tune elements alignment in this tab (fig. 2.4):

Fig. 2.4. Header paddings and alignment.

Microwidgets

You can enable so called Microwidgets (icons like “Cart”, “Working hours”, “Search”, etc.) and drag and drop them to the topbar and other available location based on the header layout you have selected (fig. 3.1):

Fig. 3.1. Microwidgets.

To edit Microwidget content just click on the “pencil” icon (fig. 3.1). When editing a specific micro widget, you can configure the visibility of a widget for different devices, assign an icon, select colors, etc. (fig. 3.2):

Fig. 3.2. Edit microwidget

The following Microwidget elements are available:

• nine “Multipurpose” widgets with text and icons (for example, address, phone, email);
• five text areas;
• two buttons;
• two menus;
• login;
• social icons;
• search;
• cart (when WooCommerce plugin is activated);
• language switcher (if WPML plugin is active).

You can specify font family, size and color for specific microwidget area (fig. 3.3):

Fig. 3.3. Configure appearance of microwidgets.

Top Bar

In the Top Bar tab (fig. 4), you can specify:

• height and paddings;
• background colour or image;
• background style: content-width line, full-width line, disabled.

Fig. 4. Top bar settings.

Header

It is possible to specify the following settings in Header tab (fig. 5):

Fig. 5. Header settings.

• background color or image;
• header decoration (shadow, line);
• menu background for “Classic” header and other layout-related settings.

Menu

It is possible to specify the following settings in Menu tab (fig. 6.1):

Fig. 6.1. Menu settings.

• main menu font family, font size, colors;
• hover and active menu items style;
• enable/disable next level indicator icons;
• specify menu items margins & paddings;
• enable (fig. 6.2) or disable (fig. 6.3) full height & full width links:
  

  Fig. 6.2. Enabled full-width links.

  

  Fig. 6.3. Disabled full-width links.

• enable or disable dividers between menu items;
• decoration styles for horizontal headers (color outline or background for hovers, animation, border radius, etc.).

Submenu

It is possible to specify the following settings in Submenu tab (fig. 7):

Fig. 7. Submenu settings.

• dropdown menu background color;
• dropdown menu width and padding;
• menu items font family, size, color;
• hover and active menu items style;
• specify menu items margins & paddings;
• select sideways or downwards layout if you use side navigation.

Floating header

Fig. 8. Floating header settings.

In the Floating header tab (fig. 8), you can specify:

• if this header should be enabled;
• floating header height, color and decoration (shadow, line, disabled);
• effect: Fade on scroll, Slide on scroll, Sticky;
• font colors for idle, hover and active states;

It is also possible to enable Floating top bar (include the topbar in the floating header) there.

Mobile header

This tab allows you to specify:

• first header switch point (for tablets) and second header switch point (for phones);
• header height and layout for tablets and phones (fig. 9.1):
  

  Fig. 9.1. Mobile header layouts.

• mobile header background color, icons size and colors;
• enable or disable floating mobile navigation;
• specify font family, size and colors (including hover/active menu items);
• color of website overlay when mobile menu is open;
• mobile menu background and alignment (fig. 9.2):
• “Open” button design (fig. 9.3): icon, position, paddings/margins, border, color.
  

  Fig. 9.3. “Open” button design.

  Mobile menu

It is possible to specify the following settings in Mobile Menu tab:

• mobile menu items font family, size, color;
• menu dividers;
• menu width, paddings, background color, left/right position;
• site overlay (on mobile menu opening) colors;
• “Close” button design (fig. 10.1): icon, position, paddings/margins, border, color.
  

  Fig. 10.1. “Close” button design.

There are three predefined button styles (fig. 1): flat, 3D, shadow.

Fig. 1. Buttons style.

In this Theme Options tab, you can also specify:

• button idle and hover colors for background, text and border (fig. 2);
  

  Fig. 2. Button color settings.

• font family and font size, padding and border radius for 3 button sizes (small, medium and big).

Settings from this page affect buttons in all standard forms (comments, contact form, etc.) and some third-party plugins (WooCommerce, Contact Form 7, etc.).

Note that when you insert a button via WPBakery Page Builder you can further customize it through WPBakery Page Builder interface.

“Content Fonts” Theme Options tab allows to set color of text and specify typography settings for basic site font and headings (H1 – H6 tags), see fig. 1:

Fig. 1. Fonts settings.

On this page various general setting are gathered. Here you can:

• set the content width in “px” or “%” (see fig. 1);
• select site layout: boxed or wide;
• set the box width in “px” or “%” if “boxed” layout is enabled (see fig. 1);
• set background color and image “under the box” (see fig. 1);
  

  Fig. 1. How your site looks if boxed layout is enabled.

• configure content area paddings for desktop and mobiles (fig. 2);
  

  Fig. 2. Content paddings.

• set basic site background color and image;
• define style for so called “content boxes”: DT Accordion, DT Tabs, etc.;
• select the color for dividers;
• set the color accent (see fig. 3);
  

  Fig. 3. Accent color settings.

• configure border radius for the site: it will be used for input fields, sidebar borders etc.;
• define style for beautiful loading and lightbox (see fig. 4);
  

  Fig. 4. Beautiful loading and lightbox settings.