Author 诗语

How To Fix Elementor Text Color Not Changing

When editing text on your site you may experience text that is not changing color as expected. This can be caused by several factors that we will explain in this document.

Text Is Inheriting The Source Style

This is one of the most common causes for text not changing colors. If you are copy / pasting content from an external source such as another site or from Word documents, the text may be inheriting the styles from the source. To troubleshoot this, click on the text tab of the text editor to see the raw text. If you see unwanted HTML styling such as , this is causing the issue.

Solution

Paste your content into the Text Editor in the text tab to remove all formatting. You may also right click and 「Paste Special」 on a PC, or 「Paste and Match Style」 on a Mac. 

Elementor Default Styles Conflicting With Theme

Elementor has a set of default colors and typography settings. These may be conflicting with your Theme or Theme Builder styles.

Solution

Navigate to Dashboard > Elementor > Settings and tick the checkboxes to disable the Elementor default colors and fonts (shown below)

The Theme Has Default Color Settings

Some themes have advanced customizer settings for controlling the colors and fonts. You may need to reset these settings in order for the Elementor styles to take effect.

Solution

Navigate to the Customizer of your theme in Dashboard > Appearance > Customize or from the WordPress Admin bar. Refer to your themes documentation for the location of these settings.

How To Change The Administration Email Of Your Website

To change the primary email address of your site or, when transferring the ownership of your website, it is necessary to change the Administration Email Address in order to be able to receive emails and updates. This is done in the WP Settings.

Steps

Navigate to Dashboard > Settings > GeneralChange the current Administration Email Address to the new email address designated to be the primary email address.Please verify, or notify the new owner to verify this change from the email they receive. The site will automatically update once this has been verified

Note: The email will often be directed to the new owners junk mail folders and may take several minutes to appear.

How To Create A Contact Form With Elementor

Creating a contact form with Elementor can be achieved by using the Form Widget in Elementor Pro. Simply drag a form widget to your page from the editor panel and use the controls to create a beautiful and responsive form on your website.

Editing Your Form

From the editor panel, you may create and edit all the fields you wish to capture in your forms. The form widget supports most all popular field types such as text, text area, radio buttons, selectors, and more. These fields can also be set to required if desired.

You may style the forms by setting the column width layout to use fields on the same line. 

In our documentation, you will find a complete breakdown of all the available controls and settings for forms. Here is a directory of topics to guide you through the complete process.

Content Controls

Form FieldsSubmit ButtonActions after submitAdditional Options

Style Settings

FormFieldButtonMessages

Advanced

Multi-Step Forms

Admin Top Bar

The Elementor Admin Top Bar allows you to quickly access relevant shortcuts from your Dashboard. It will change display depending on what you are currently working on.

Quickly Access The Finder

You can quickly access the finder to search and locate content on your website by clicking the Finder link in the Admin Bar. 

Quickly Access Your Account

It is now much easier to access your account by using the My Elementor link.

Add New Content

For example, If you are located in the Templates Region of Elementor, you will be able to add or import new Templates from the buttons located in the Admin Top Bar

Activating Or Inactivating This Feature

The Admin Top Bar can be Activated or made Inactive by navigating to Elementor > Settings > Experiments.

Note: The Admin Top Bar will be active on new installations.

Heading Widget

The Heading Widget allows you to create stylish title headings.

Content

Title –  Type your heading text.Link – Link the heading to a URLSize – Change the heading to Small, Medium, Large, XL or XXLHTML Tag – Set the heading』s HTML tag to H1- H6, Div, Span or ParagraphAlignment – Align the heading to the left, right, center, or justified

Style

Text Color – Choose the color of the heading textTypography – Change the typography options for the heading textText Shadow – Add a shadow and blur to the heading textBlend Mode – Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demo

Advanced

Set the Advanced options that are applicable to this widget

Create a custom 404 page Using Elementor』s Theme Builder

Creating a 404 Page Template using the power of Dynamic Content, can help you keep your site』s visitors happy even when they』re lost. You can display your recent posts, a search bar or anything you want.

Go to Templates > Theme Builder > Single > Add NewSelect Single from the Type of Template dropdown, select 404 from the Post Type dropdown, name your template and click Create TemplateDesign your own 404 Page Template or choose a pre-designed templateAfter you』ve finished designing your 404 Page Template, click PublishAdd Conditions to your 404 Page

Note: When naming your template, please do not begin the Template name with 「404「. If the template name begins with 404, the resulting permalink will cause a redirect to the home page, when any non-existing page URL is visited. This happens due to the template library』s permalink. Since the library is private, if you hit any URL of the library, this will occur. If a user creates a 404 single template with the name」404 single」, for example, the permalink becomes http://mysiteurl.com/?elementor_library=404-single . Then, if a page like mysiteurl.com/404 is visited,the system will think it』s looking for that template file and redirect you to homepage. Just avoid naming the template with 「404」 in the beginning of the name, and this problem will not happen.

Facebook Comments Widget

Add Facebook Comments to the end of your posts to allow your readers to easily comment using their Facebook account.

Content

Comments Box

Comment Count: Set the number of comments displayed in the pageOrder By: Sort the comments order according to the Facebook Social factor, Time or Reverse TimeTarget URL: Get the Comments of the Current Page, or for a Custom URLURL Format: Select Plain Permalink or Pretty Permalink

Advanced

Set the Advanced options that are applicable to this widget

Note: Set your Facebook App ID in the Elementor Settings > Integrations tab.

Read the full release post about the Facebook Comments widget.

Note: If you are developing for European based sites, users must accept cookies, and be currently logged in to Facebook before the like, share, or comment buttons are displayed on the front end.

Facebook Page Feed (Pro)

Add your Facebook Page Feed (previously named Like box) to your site. 

URL: Type your Facbook Page URLLayout: Choose between Timeline, Events and Messages Small header: Displays a Facebook Header in a narrow viewCover: Show / hide the cover imageProfile photos: Show photos of people who liked your pageCustom CTA button: Choose between the page』s official CTA button, or the default Share ButtonHeight: Set the height of the box (desktop, tablet and mobile)

Advanced

Set the Advanced options that are applicable to this widget

Note: If you are developing for European based sites, users must accept cookies, and be currently logged in to Facebook before the like, share, or comment buttons are displayed on the front end.

Site Settings

What are Elementor Site Settings? 

Each Elementor option which can be applied across your site is a part of the Site Settings which are centrally located within the Elementor Editor. 

How do I access Elementor Site Settings?

Simply 「Edit with Elementor」 any page or post, click the hamburger menu icon in the upper left corner of the Elementor Widget Panel, and click on Site Settings. Here you have options to control the Design System which consists of Global Colors and Global Fonts, Theme Builder which consists of Typography, Buttons, Images, and Form Fields settings, Header and Footer customizations (Hello Theme), and User Preferences, which consists of Site Identity where you can manage your site logo and more, Background, Layout, Lightbox, and Custom CSS settings.

Design System: Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors for use across your site. See Global Colors for full details. Set and edit predefined global typography styles (Primary, Secondary, Text, and Accent) or create new global text styles for use across your site. See Global Fonts for full details. See also: How Elementor』s Theme Style and Global Colors and Typography Work Together To Create The Site』s Design System

Theme Builder: Theme Builder settings are global settings that allow you to set default styling options for various HTML elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields. They are not Elementor-specific, but are as general as possible. This is the baseline setting for the site, that comes into play only as a fallback, if no specific element definitions were set. See Elementor』s Theme Builder for full details.

Site Header And Footer Customization (Hello Theme)

From the site header and footer customization menu you may configure the look of your site header. In addition to choosing the layouts, you can customize the width, background color, menu, appearance and style of each element.

Note: This feature will be active only on a new site. Existing sites need to opt-in to this feature through the Experiments screen. Once activated, there will be two new sections under the Site Settings > Theme Style.

User Preferences: Control your site』s identity, including its Site Name, Site Description, Logo, and Favicon right from Elementor』s Global Settings. Set the site』s background and its mobile background as well. Control global layout settings, such as default generic fonts, site content width, default widget spacing, default page layout template, and more. Manage the Elementor Lightbox options, which opens images, galleries, carousels, and videos in a 100% mobile responsive lightbox popup window. Edit your site』s Custom CSS right from the Elementor settings.

UI Theme: Set UI Theme』s light or dark mode, or use Auto Detect to sync it with your OS setting,Panel Width: Set the width of the widget panel here.Editing Handles: Slide the switch to Enable or Disable Editing Handles when hovering over the element edit buttonEnable Lightbox in Editor: Select Yes or No to enable the Lightbox in the EditorHidden Elements: Toggle the Show / Hide option to enable or disable hidden elements in the editorDefault Device View: Select the default view of the editor between breakpoint widths

Global Layout Settings

Control global layout settings from Elementor』s Global Settings.

From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Layout.

Content Width (px): Set a default width for your content areaWidgets Space (px): Set the space between widgetsPage Title Selector: If you want to hide your page title, enter its CSS selector hereStretched Section Fit To: Choose the parent element to which stretched elements will fitDefault Layout: Set the page layout for new pages, choosing from either Default, Elementor Canvas, or Elementor Full Width

Important: Only pages that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

Breakpoints

Tablet: Set the breakpoint for tablet devices. Below this breakpoint, and above the mobile breakpoint, tablet layout will appear (Default: 1025px)Mobile: Set the breakpoint for mobile devices. Below this breakpoint, mobile layout will appear (Default: 768px)