General (Theme Settings)

The General area of Theme Settings holds everything that applies to your whole website: how wide it is, what colours and fonts it uses, and the site-wide elements such as the preloader, the cookie notice or the mobile bottom bar.

Open it from Rey → Settings → General. The sections below appear in the same order as in the sidebar.

Note: Not every section is always present. Sections such as Cookie Notice, Age Restriction, Scroll to Top or Mobile Bottom Bar belong to Rey modules. Disable the module and its section disappears from here.

Layout

How wide your content is and how much air surrounds it. This is the first thing to set on a new site, because most other spacing is relative to it.

• Containers Width: the maximum width of your content. Choose a preset, or switch to a custom width and set it either in vw (a percentage of the screen, so it scales with the monitor) or in px (a fixed width, so it stops growing on large screens).
• Containers Horizontal Spacing: the gap between your content and the screen edges. Responsive: set it separately for desktop, tablet and mobile.
• Site-Container Vertical Spacing and Site Padding: space above and below the content, and a frame around the entire site.
• Elementor Section Gaps: whether Elementor’s own column gaps apply, or Rey’s. This is a common source of confusion; see Elementor Section Gaps: Rey Overrides vs Elementor Default.
• Site Wrapper Overflow: change this only if an element that should stick out of the page (a sticky sidebar, an overflowing animation) is being clipped.
• Hide Button Focus: removes the outline browsers draw around a focused button. Leave it on for accessibility unless it clashes with your design.

Style

Your site’s colour system, plus the page background.

• Background: a background colour and, optionally, an image with the usual repeat / attachment / size / position controls.
• Text & Links: the default body text colour, and link colours in their normal and hover states.
• Accent Colors: the colour Rey uses for buttons, active states and highlights, with its hover variant and the text colour placed on top of it. Changing the accent colour is the fastest way to rebrand a demo.
• Neutral Colors: Rey generates its greys from a single hue, so you can warm or cool every border, placeholder and muted text at once. Neutral Colors Theme switches the set between light and dark. Learn more about neutral colors.
• Custom Colors: define your own named colours; they then appear in Rey’s colour pickers throughout the theme.

Tip: Open the live preview before touching colours. Rey applies colour changes to the preview instantly, so you can compare options without saving.

Site Identity

WordPress’s own Site Title, Tagline and Site Icon (the favicon), surfaced here so you do not have to go looking for them.

Your logo is not here. It is in Header → Logo, because Rey supports a different logo per header. See Site Logo – how to change it globally, per page or per header global section.

Typography

Rey works with two named fonts, a Primary and a Secondary, which every other typography option can then reference. Set those two first; the rest of the site follows.

Underneath, you can set size, weight, line height, letter spacing and transform for:

• Site typography: the base body text.
• Heading 1 to Heading 6: each heading level.
• Page Titles: the title shown at the top of a page.

All of these are responsive, so you can shrink headings on mobile without adding CSS. Inherit Typography from Elementor Site Settings hands typography over to Elementor instead. Use it if your site is already configured there, so you are not maintaining two sources of truth.

The fonts available in these pickers come from the Fonts section further down.

Preloader

Shows a loading screen while the page is still rendering. Enable it, pick a colour, and choose a style. The available styles come from the Preloaders module. See Preloaders Pack.

Global Sections

Assign the Elementor-built sections that appear across your site (popups, off-canvas panels and other reusable blocks), and choose the conditions under which each one shows.

The headers, footers and page covers are assigned in their own areas. To build a global section in the first place, see Global Sections.

Sticky Sections

Two bars that stick to the top and the bottom of the screen: announcement bars, promo strips, cookie-style notices. Each one takes a global section plus its own behaviour:

• Activation Offset: how far the visitor must scroll before the bar appears.
• Show only when scrolling upwards: the bar hides while reading down and returns on scroll up.
• Add close button: lets visitors dismiss it.
• Select visibility: which devices it appears on. The bottom bar can also be set to Always visible.

Homepage

WordPress’s own homepage setting: show your latest posts, or a static page. When you choose a static page, you also pick which page holds your blog posts.

Blog Page and Single Post

The blog listing and the single-post layout: columns, sidebar, which meta is shown, typography, the author box, social sharing, and more. These two sections are large enough to have their own article: Theme Settings › Blog.

Search Page

Choose the page cover shown on search results, its header position and colour.

On WooCommerce stores this section also gains the Product Search options: Include taxonomies in search (search categories, brands and attributes as well as product titles) and Search Product SKU. Adding taxonomies makes the search more forgiving but also slower and noisier, so add them one at a time and check the results.

How the search box itself looks and behaves, including its style, placeholder and suggestions dropdown, is in Header → Search instead.

404 Page

Point Rey at a global section to use as your “page not found” screen, and optionally stretch it to full width. Building one is covered in Creating a 404 page with Elementor.

Sticky Social Icons

A fixed strip of social links pinned to the side of the screen. You add the icons and links, then control the layout (horizontal or vertical), which side it sits on, its distance from the top and edge, its visibility per device, and its colours.

Difference Color (Invert) makes the icons flip colour against whatever is behind them, which is useful when the strip crosses both light and dark sections.

Scroll to Top

The “back to top” button. Pick a style (or a custom icon), its text and colour, which corner it sits in, how far down the page it appears (Entrance point), and which devices show it.

Mobile Bottom Bar

A fixed app-style bar at the bottom of the screen on mobile, holding shortcuts such as shop, search, wishlist, cart and account. You choose the layout, build the list of elements, decide whether labels are shown, and set the colours, including the cart count and badge.

Hide when scrolling down gets the bar out of the way while browsing. Full details in Mobile bottom bar.

Cookie Notice

A simple cookie consent bar: style, text, button label and colours. See Cookie Notice.

Note: This is a notice, not a consent manager. If you need to actually block scripts until consent is given, use a dedicated GDPR plugin.

Age Restriction

An age gate shown over the site until the visitor confirms their age. You set the minimum age, the wording, what happens to under-age visitors (a message or a redirect), how long a confirmation is remembered, and the overlay’s blur, tint and colours.

Full details in Age Restriction.

Fonts

This section decides which fonts are available everywhere else: in the Typography section above, and in Elementor.

• Self-host Google Fonts: downloads the Google fonts you use and serves them from your own server. Faster, and no requests to Google from your visitors’ browsers.
• Load font weights: which weights to load. Every extra weight is another file, so keep this to the weights you actually use.
• Load font subsets: which character sets to load (Latin, Cyrillic, Greek…). Only add what your content needs.
• Adobe Fonts project ID: paste your Adobe Fonts (formerly Typekit) web project ID and its fonts join the typography lists. You need a Creative Cloud subscription for this.
• Custom fonts: upload your own font files (WOFF2, WOFF, TTF, OTF), give each a name and weight, and set its font-display. They then appear alongside the Google and Adobe fonts.

Performance

Options that trim what your pages load.

• Disable WordPress Block Styles: drops the stylesheet WordPress ships for its blocks. Most Rey sites build with Elementor and never need it. Keep in blog posts makes an exception for posts written in the block editor.
• Lazy-load Background images: background images load as the visitor scrolls to them.
• Disable Emoji Scripts: removes WordPress’s emoji script. Safe on virtually every site.
• Preload Assets: tell the browser to fetch specific files early. Use it for the fonts your first screen depends on.
• Exclude Styles / Exclude Scripts: stop named stylesheets or scripts from loading. Powerful and easy to overdo: remove one at a time and check the site after each.

See also Optimising your website’s speed.