Author 诗语

Custom Fonts Not Displaying On Front End

Table Of Contents

Cache IssueHTTP / HTTPS mis-matchCORS Error in ConsoleImporting TemplatesFont Weight Selected Is Not AvailableInvalid Custom CodeNot Including All Font Variations

There are several possible reasons why your custom fonts may not be displaying on the front end.

Cache Issue

The problem may be a cache issue.

If you are using a WordPress cache plugin, clear it. If your host uses server-side caching, clear it as well. You may need to ask your host to help you clear it. Finally, clear your browser』s cache. For more info on WordPress and cache, see https://codex.wordpress.org/I_Make_Changes_and_Nothing_HappensAfter clearing all cache, check again. You may need to use another browser, or a browser in incognito mode if the browser』s cache did not fully clear.  

HTTP / HTTPS mis-match

If you』ve recently migrated from HTTP to HTTPS, your font files may need to be re-uploaded, so they are being served from HTTPS. 

Go to Elementor > Custom Fonts. If the URLs listed do not begin with https, click the DELETE button next to each, and then click UPLOAD buttons to re-upload the files.Go to Elementor > Tools and click the Regenerate CSS buttonThe URLs should now begin with https and your fonts should appear on the front end.

If this is still not working, you may have encountered other issues when you previously migrated to HTTPS.

Go to Elementor > Tools > Replace URLIn the 「Old URL field」 put the site URL with HTTP and in the New URL put the site URL with HTTPS.Click the Replace URL button.Click the Save Changes button.

Finally, go to WordPress』 settings at Settings > General

Ensure both the WordPress Address (URL) and the Site Address (URL) both begin with https

CORS Error in Console

If your custom font is not showing and you receive a CORS error in your browser』s console, you need to contact your host, as they will need to modify the server』s CORS policy. In order to resolve this, changes must be made to your server. Please contact your hosting company to report this issue. Here are useful guides from external sources that you could provide to them.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://htaccessbook.com/increase-security-x-security-headers/

Importing Templates

If you』ve imported a template that included custom fonts, you will need to add the custom fonts manually, because the fonts of these templates won』t be imported automatically.

Font Weight Selected Is Not Available

Custom fonts may not have all available font weights available. If you select a specific font-weight in Typography options, but your custom font does not have that specific weight available, it may not display that font at all. In this case, select a different font weight that is available for your custom font.

Invalid Custom Code

If invalid custom CSS or other code has been added to the site, this can cause many different display problems, including the inability to display custom fonts. Remove or fix the improper code to solve this issue.

Not Including All Font Variations

If custom fonts are not displaying on iOS devices for example, please ensure you have uploaded all font variations, including .ttf .svg .woff .woff2 and .eot

If any variations are missing, in some cases, a default font will be displayed, however, in other cases, the text will be completely gone and invisible on the website.

This can happen because different browsers render fonts differently, so to prevent any inconsistencies, it is important to add all font variations to maintain full browser support.

In order to fix this issue, you can use the Generator tool from Font Squirrel.

From there, you can check options as shown below:

Step 1: 

Step 2: 

Step 3:

You will get the .zip file with all font variations inside. Extract the .zip file and upload all variations to your site』s Custom Fonts section. Learn how.

How to Create a Dropdown Menu in Elementor

Creating menus is a WordPress function. You can use the Elementor Nav Menu Widget (Pro) or your theme to display these where needed. Learn more here. 

Create Your Menu

Navigate to Dashboard > Appearance > Menus. If you have not created a menu, you will need to do so now. Give your menu a name and click the Create Menu Button. You may additionally assign the option to add newly created pages automatically and the display locations.

Adding Pages To The Menu

From the add menu items panel select the pages you wish to insert and click the Add to Menu button.

Creating Submenus

Add your items to the menuDrag and drop an item so that it is placed under the parent item slightly indentedRepeat this process for the other child itemsSave your menu

Adding Custom Links To The Menu

You may add external URLs, anchor links, and placeholder links by using the Custom Links option.

Adding Blog Categories To Your Menu

You may assign blog archive categories from the Categories. For more about WordPress categories, click here.

View Your Menu

From the Dashboard, you can now view your menu by clicking the Visit Site link

Accessibility Improvements (Experiment)

The Accessibility Improvement experiment aims to improve accessibility of Elementor widgets. 

What is accessibility?

Web accessibility or a11y is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites by people with disabilities. 

Tip: The word 「accessibility」 is often abbreviated as 「a11y」, which represents the first letter of 「accessibility」 (「a」), the last letter of the word(「y」), with 11 letters between the 「a」 and the 「y」. Pronounce a11y as either 「a-one-one-y」 or 「a-eleven-y」, not 「ally」, as those are numerical ones and not the letter L.

How will this experiment affect Elementor widgets?

Some Elementor widgets may need improvements to adhere to accessibility guidelines. For example, the Elementor Tabs widget creates empty anchor tags and missing screen reader states per tab which conflicts with accessibility guidelines. In addition, the empty anchor tags may be a negative search engine ranking factor. In the experiment added to version 3.1.0, we improved the Tabs widget accessibility by removing empty tags, adding selected tab state, and improving keyboard navigation. These changes help improve the ranking and accessibility of user』s sites.

Important: This experiment includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the Experiments stage only, users should test the new, accessible Tabs widget on test sites only to avoid damaging existing sites.

Note: This experiment is automatically active on all NEW sites with a new install of Elementor only.

How To Use This Experiment

Go to Elementor > Settings > Experiments tab.Select Active from the Accessibility Improvements dropdown.Click the Save Changes button.

How To Create An Audio Playlist With Elementor

The audio playlist is a native WordPress feature and can be used in the classic editor, or block editor using the classic block. It uses mp3 files uploaded to the media library and very similar to creating an image gallery. In order to create an audio playlist in Elementor, you will need to use the Text Editor Widget.

Get Started

From the Basic Widget library, drag a Text Editor Widget to your page in the desired locationClick the Add Media button in the Text Editor controlsSelect the Create audio playlist from the options on the leftSelect the files you wish to be included in your playlist and click the 「Create a new playlist」 button in lower cornerSelect the playlist settings you wish to include. The track titles can also be edited at this time. Click the 「Insert audio playlist」 button in the lower cornerYou will now see the playlist in the editor panel. It will not show in the main window but be displayed as the shortcode. This is normal and will only show on the live pagePublish or Update your page and view from the preview icon or in another tab. Your audio playlist should be visible and working

Tip: Video Playlists may be created using the same steps above. 

Note: Since this uses the media library and is stored in the uploads folder, the files can be downloaded by users using the developer tools or inspecting the code. It is recommended to upload clips or lower quality files if important to protect this from occurring.

What Is The Optimized DOM?

The optimized DOM output experiment aims to improve performance by decreasing the number of wrapper elements present in the HTML that is generated by Elementor.

Important: This experiment includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the Experiments stage only, users can test the new optimized DOM output on test sites only to avoid damaging existing sites.

Note: This experiment is automatically active on all NEW sites with a new install of Elementor only.

How To Use This Experiment

Go to Elementor > Settings > Experiments tab.Select Active from the Optimized DOM Output dropdown.

Click the Save Changes button.

More About The Optimized DOM

Starting with Elementor 3.0, some significant DOM improvements have been made to boost the speed and performance of new Elementor websites. The developers addressed a growing concern about the number of HTML wrapper elements that were output by Elementor. In response, we』ve removed some wrappers.

The presence of these wrappers was due to the diverse use of Elementor, the ability to use these selectors in various ways to customize your site, and the omni-purpose of Elementor as a solution for creating advanced websites visually.

Removing wrapper elements from the DOM contributes to more simplified code output, better readability and less complexity. A smaller DOM contributes to increases in speed and performance. This is, however, a potentially breaking change, so by default, Elementor will only use the Optimized DOM Output on new sites. 

Which HTML Wrappers Were Removed in 3.0?

Three (3) HTML wrappers are removed, including:

.elementor-inner.elementor-row.elementor-column-wrap

HTML Wrappers Removed in 3.2

In this version we removed the following two (2) HTML wrappers:

.elementor-image.elementor-text-editor

Who Does This Change Affect?

By default, this only affects new sites to avoid breaking existing sites that upgrade to 3.0. Using the Optimized DOM Output on existing sites that upgrade from pre-3.0 would potentially cause your website』s appearance and/or functionality to break. For this reason, the Optimized DOM Output is disabled on upgraded sites, and Legacy DOM remains in place. However, if you upgrade to 3.0 and wish to use the Optimized DOM Output, you can enable this feature. Simply go to Elementor > Settings > Advanced and select Enable in the Optimized DOM Output dropdown. 

Important: If you have used any of these wrapper classes in either your custom CSS or custom code, you should refactor your code to use different wrapper classes that aren』t being removed. Otherwise, your custom styles or code will no longer function properly

Note: If unable to edit your text in the main window, and only able to edit text in the editor panel, try disabling the Optimized DOM Output experiment.

See the developers post about this change here.

Text Editor Widget

The Text Editor widget is a TinyMCE WYSIWYG editor that behaves just like the classic WordPress visual editor. You can enter rich text, images, and even WordPress shortcodes.

In addition to the features that normally appear on the TinyMCE editor, this widget also gives you more styling options that let you change settings like font weight, line height, letter spacing, alignment, and more.

Content

Drop Cap: Slide to ON to set the first letter of the text as a Drop Cap, which makes it larger and gives it the ability to be styled independently from the rest of the text.Columns: Select the number of columns to split the text intoColumn Gap: Set the width of the gap between columns

Style

Text Editor

Alignment: Align the text to the left, right, center, or justifiedText Color: Choose the color of the textTypography: Set the typography options for the text

Drop Cap (only visible if Drop Cap was set to On in the Content tab)

View: Select the view style of the drop cap, choosing from Default, Stacked, or FramedPrimary Color: Choose the color of the drop capSpace: Select the exact space between the drop cap and the rest of the textBorder Radius: If Stacked or Framed is chosen as the View, set the border-radius to control corner roundnessTypography: Set the typography options for the drop cap

Advanced

Set the Advanced options that are applicable to this widget

Example of Splitting Text Into Multiple Columns

How to Wrap Text Around Images With the Text Editor Widget

Users sometimes ask how to wrap text around images in Elementor. This is an excellent use of the Text Editor widget. Simply drag-in the widget, click Add Media and upload an image of your choosing to the media library of WordPress. Then click the image, and adjust the alignment settings to wrap the text around the image, with the image to the right or left of the text.

Is The Text Editor Widget Missing The Visual and Text tabs?

The Text Editor widget respects the user』s choice in WordPress settings to enable or disable the Visual Tab. If your tabs are missing, please go to the WordPress Dashboard > Users > Your Profile and uncheck the option to disable the Visual Editor.

Note: The Typography styling, as well as other styling options, of the text within the Text Editor only affects normal paragraph text. If you have changed any of the text within the text editor to a heading (H1, H2, H3, etc.) or any other type of tag besides Paragraph, then the Style options will not affect that text. Text using HTML tags other than

in the Text Editor widget will inherit the typography styling from either your theme or whatever you have set within Elementor』s global Theme Style settings.

Note: If unable to edit your text in the main window, and only able to edit text in the side editor panel, try disabling the Optimized DOM Output experiment by navigating to Elementor > Settings > Experiments.

How To Fix The Package Could Not Be Installed Error

If trying to install Elementor and get the following error 「The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature」 it may be due to limited resources, or a bad Zip file. It may also occur when trying to install from the WP repository. The most likely causes of this error are:

The .zip file you』re trying to install does not use the correct file structure for a WP pluginThe .zip file is extremely large and you』re hitting memory limits while trying to unzip itYou don』t have enough server space left on your web hosting account to install the plugin

The third option is the most likely. To confirm this, try to upload another large file to your site (example: a large image or video file). If you』re not able to upload large files, then storage space is likely the issue. To correct this, log in to your hosting account and check how much unused space you have. If you are at or near your maximum, you』ll either need to delete some files (perhaps you have unused themes or plugins, or old backups or log files that are no longer needed), or upgrade to an account with a larger amount of storage.

Slides Widget (Pro)

The Slides widget allows you to quickly create simple slides that work perfectly, without a fuss. 

Content

Slides

Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide.  When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.

Background

Color: Set the background color for the slideImage: Choose an image from the media library

If an image is chosen as a slide background, additional options appear:

Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay』s color.

Content

Title & Description: Insert the title and description for the slideButton Text: Set the text for the buttonLink: Add a URL the slide or button will link toApply Link On: If a link is set, this option appears. Choose if the link applies to only the button or to the whole slide

Style

Styling for individual tabs is OFF by default, relying on the global styles which are set on the widget』s Style tab. If you wish to override the global slide styles, turn the Custom switch to ON. This will enable you to set custom styles for that individual slide. The custom styles for individual slides are:

Horizontal Position: Position the content horizontally: Left, right or centerVertical Position: Position the content to the top, middle or bottomText Align: Align the text left, center or rightContent Color: Choose the color of the contentHeight: Set the exact height of the slide in either PX, VH, or EM

Slider Options

Navigation: Choose to display arrows, dots, both or nonePause on Hover: Make the slide pause when the mouse hovers over itAutoplay: Get the slides to rotate automatically, according to the speed you setAutoplay Speed: Set the time it takes for the slide to start rotatingInfinite Loop: Have the slides rotate in an infinite loop and without stoppingDirection: Choose a direction for the slider as left or rightTransition: Set the transition of the slides as slide or fadeTransition Speed: Set the time it takes for the slides to rotateContent Animation: Set the animation effect of the content』s display when the slide is shown: None, Down, Up, Right, Left, or Zoom

Style

Slides

Content width: Set the width of the content inside the slidePadding: Set the inner spacing between the edge of the content and the edge of the slideHorizontal Position: Set the position of the content as right, left and centerVertical Position: Set the position of the content as top, middle or bottomText Align: Align the text to the right, left or centerText Shadow: Add a shadow and blur to the text

Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.

  Title

Spacing: Set the spacing between the title and the descriptionText Color: Set the color of the titleTypography: Set the typography of the title

Description

Spacing: Set the spacing between the description and the buttonText Color: Set the color of the descriptionTypography: Set the typography of the description

Button

Size: Set the size of the button, from extra small to extra largeText Color: Set the text color for the buttonTypography: Set the typography of the buttonBorder Width: Set the border width of the buttonBorder Radius: Set the border radius, to control corner roundness

Normal State / Hover State

Text Color – Set the text colorBackground Color – Set the background color of the buttonBorder Color – Set the border color of the button

Navigation

Arrows

Arrows position – Set the position of the arrows inside or outside the sliderArrows size – Set the exact size of the arrowsArrows color – Set the color of the arrows

Dots

Dots Position – Set the position of the dots inside or outside the sliderDots size – Set the exact size of the dotsDots color – Set the color of the dots

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

Advanced

Set the Advanced options that are applicable to this widget

Google Maps Widget

The Google Maps widget is a really simple way to embed Google Maps in your website. This is very useful for contact pages, so your visitors can know where you are located.

Content

Location: Enter the location you wish to displayZoom: Set the zoom level of the mapHeight: Set the height of the map

Style

CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.Transition Duration (only on Hover): Set the amount of time to transition from one filter setting to the other when hovering over the map.

Advanced

Set the Advanced options that are applicable to this widget

Tip: To remove the gap around the Google Maps widget, and have the map span the full width of the page, change the Section width from Boxed to Full Screen, and set the Columns gap of the Section from Default to No Gap.

Important: In order to use the Elementor Maps Widget, you must first create an API key and place it in Elementor > Settings > Integrations. To learn more, see this article.

How to Save a Page as A Template in Elementor

In order to save pages as a template to re-use in your website or kit use the following method:

Click the up arrow located to the right of the Publish / Update Button located at the bottom of the panelChoose Save as TemplateGive a name to your template and save

Your page will now be in your template library and available for use in your project or exporting to another site as a JSON file.

Tip: If you need to clone templates, you can use the above method. Save the template as a new name. Repeat the process as needed. The cloned templates will be in your library for editing. This is similar to 「Save As」 on a computer.