Hello Theme FAQs, Tips and Tricks

Hello Theme FAQs, Tips and Tricks

Where can I download the Elementor Hello theme?

You can download the theme from either:

WordPress repoDirectly from Elementor

How do I install the Hello theme if I downloaded the zip file?

From your WordPress dashboard, go to Appearance > Themes and click Add New.Click Upload Theme.Click Browse and choose the file you just downloaded, then click Install Now.Once it is installed, click Activate.

Will I be notified of theme updates regardless of where I downloaded the theme?

Yes.  Just like any theme or plugin under Dashboard > Updates.

Do you have a child theme I can download?

Yes. You can download a child theme here: https://github.com/elementor/hello-theme-child

How do I install the child theme?

Download the Hello child theme from https://github.com/elementor/hello-theme-childFrom your WordPress dashboard, go to Appearance > Themes and click Add New.Click Upload Theme.Click Browse and choose the file you just downloaded, then click Install Now.Once it is installed, click Activate.

How do I customize the child theme?

Edit the style.css file via FTP if you would like to change the Theme URI, Author, and Author URI. Editing this is optional. You can choose to leave it as is, if you prefer.

Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready

Add any custom styles after:

/*
Add your custom styles here
*/

So for example, if you wanted to add some Link and Heading styles, you could add something like this:

/* Link Styling */
a, a:active, a:visited {
color: #000080;
}
a:hover {
color: #ffd700;
}

/* Heading H1-H6 Styling */
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
color: #3a3a3a;
line-height: 35px;
font-weight:500;
letter-spacing: 1px;
}
h1 {
font-size: 30px;
line-height: 1.2;
}
h2 {
font-size: 28px;
line-height: 1.3;
}
h3 {
font-size: 26px;
line-height: 1.4;
}
h4 {
font-size: 24px;
line-height: 1.5;
}
h5 {
font-size: 22px;
line-height: 1.6;
}
h6 {
font-size: 20px;
line-height: 1.2;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
margin-bottom: 20px;
}

If you need to change any HTML of any of Hello』s files, make a duplicate of the original Hello file, and place the copy into your child theme』s folder. Edit the child theme』s copied file to make any HTML changes you wish. Read more about this here.

How do I globally prevent all page titles from appearing on any page?

Elementor provides a filter called:

hello_elementor_page_title

You can add code that makes use of this filter to your child theme』s functions.php file. Alternatively you can use a 3rd-party plugin such as Code Snippets to add functions to your theme without needing to use a child theme, and without needing to edit your theme』s functions.php file. The code to add to either your child theme』s functions.php file or to your snippets plugin is:

function ele_disable_page_title( $return ) {
return false;
}
add_filter( 'hello_elementor_page_title', 'ele_disable_page_title' );

I want page titles on most of my pages, but I want to remove them from select pages. How do I do that?

You can choose to hide a page』s title while editing the page with Elementor. Click the Page Settings gear icon in the lower left of the widget panel to access the Hide Page Title option. Read more about this feature

How do I change the 「Search Results for:」 archive title for the Search Results page?

You can add code to your child theme』s  functions.php file. Alternatively you can use a 3rd-party plugin such as Code Snippets to add functions to your theme without needing to use a child theme, and without needing to edit your theme』s functions.php file. The code to add to either your child theme』s functions.php file or to your snippets plugin is:

add_filter( 'elementor/utils/get_the_archive_title','archive_callback' );
function archive_callback( $title ) {
if ( is_search() ) {
return 'Your Custom Message Here: ' . get_search_query() ;
}
return $title;
}

Make sure you change Your Custom Message Here: to whatever you prefer.

How do I add the Widgets menu option?

To enable the Widgets menu item in the WordPress admin menu, use the following code:

if (function_exists("register_sidebar")) {
register_sidebar();
}

You can add this code to your child theme』s functions.php file. Alternatively you can use a 3rd-party plugin such as Code Snippets to add functions to your theme without needing to use a child theme, and without needing to edit the functions.php file. 

Once you have the Widgets menu available to you, you can assign Widgets to the Sidebar as usual in Appearance > Widgets. You can then use this Sidebar anywhere on your Elementor page. Simply add a column in a section and drag the Sidebar widget into the column. 

If you prefer to register new or custom widget areas via code, instead of using the Sidebar widget (for example, if you need a sidebar on a non-Elementor page), you can find sample code in the official WordPress Widgetizing Themes documentation. Your code may differ from the sample code based upon your particular needs. 

Hello Theme Header And Footer Customization

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.

Important: 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.

SiteGround Hosting Compatibility

SiteGround Hosting Compatibility

In some SiteGround server configurations, users may get a 502 error. If you get this error when you try to edit a page, you should first change the loader method:

Go to Elementor > Settings > Advanced, and under 『Editor Loader』, enable 『Switch front-end editor loader method』.

This setting changes the Elementor editor loader method.

You then may need to increase a particular Apache service limit. To do that, add the following lines inside the website』s .htaccess file:

SubstituteMaxLineLength10M

You can edit that file via SSH, FTP, or the File Manager tool in cPanel.

What Is The Optimized DOM?

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.

Form Style

Form Style

Column Gap – Set the space between the columnsRow Gap – Set the space between the rowsLabel – Set the spacing, label color, and typography of the labels.HTML Field – Set the spacing, color, and typography of HTML fields on your form, if any exist.

More Form Options

This page outlines the Form Style > Form Options. For other Form options, click one of the links below:

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages

Connect To Template Library

Connect To Template Library

The first time you insert a template, you will be prompted to connect your free Elementor account to access the Template Library. If you don』t yet have an account, you can register for a free account during this process.

Frequently Asked Questions

Why do I have to connect?

A connection is required to enable us to add smart features to the library in the future including personalization features such as 『favorites』 and 『recently used』 views, as well as other enhancements that will make the Template Library more than just a place to store templates. As a user, you will gain better control over who uses your account and website and get added security. 

I build sites for clients using my Expert license. Will I have to give all my clients access to my account? I don』t want to share my credentials or allow clients to have access to my account in any way.

Don』t worry. Your clients will not access your account at all and you won』t need to share your credentials with them. Each of your clients will create their own individual, free accounts during the initial one-time process of connecting, if they don』t already have an account. In addition, each WordPress user on a website will need their own account if they intend to access the library.

What happens if I decide not to connect?

You will be unable to access the templates that Elementor provides via the Template Library. Your previous work remains intact. The connection only authenticates you as a user and doesn』t have any impact on your saved templates.

If I don』t connect, can I still use my own Saved Templates?

Yes, you』ll always have access to your own saved templates, whether you decide to connect to the Template Library or not.

What happens if an error occurs when I try to connect?

If you receive an error that says 」 An error occurred. The following error(s) occurred while processing the request: Connecting to the Library failed. Please try reloading the page and try again「, please ensure that the Site Address (URL) and WordPress Address (URL) at WP Admin > Settings > General are exactly the same. Also, this URL must correspond to the URL on your web browser』s address bar.

Once this is resolved, please follow these steps to refresh and resync the license:

First, log in to your account at  https://my.elementor.com/Next, go to My Account > Subscriptions and click on the large box showing your account information. This will open up a list of your connected sites. Click the Deactivate Site linkA confirmation popup will appear. Accept the changesFinally, go to your  WordPress dashboard > Elementor > License > Connect and Activate and try again

Text Editor Widget

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.

Form Fields

Form Fields

This section of the Elementor Form widget lets you add and manage each of the form fields that will be included in the form.

Form Name – Name the form.

Form Fields – A list of the fields in your form. You can duplicate, add or delete fields as you please. You can drag and drop to change their order.

Click on a field to view its settings.

Type – Choose the type of field you wantLabel – The name of the field, displayed on the form and on the email you receive from the user.Placeholder – The frontend display name of the field.Required – Switch it on to set the field as a Required field.Column Width – Lets you set the width of the field. If you want a form with two fields in one row – set each field to 50%.

Types of Fields

Text – A simple text field. i.e. NameEmail – An email type. Includes validation for emailText Area – A textarea type. You can set the number of rowsURL – A website URL fieldTel – A telephone number typeRadio –  A radio type. Single choice. You can slide the Inline List for a horizontal style. Click for more optionsSelect – A select type. Dropdown list of options. Can set to multiple selection. Click for more optionsCheckbox – A checkbox type. Check one or more options. You can slide the Inline List for a horizontal style. Click for more optionsAcceptance – Add a terms checkbox for the user to acceptNumber – A number typeDate – Add a date picker fieldTime – Add a time picker fieldFile Upload – Allow your users to upload filesPassword – Add a password fieldHTML – Add an HTML fieldHidden – Add a hidden field. Hidden to the user, but visible to the AdminreCAPTCHA – Add a reCAPTCHA. reCAPTCHA verifies the user is not a robotHoneypot – Adds a Honeypot to your form. A honeypot is a hidden field designed as a decoy for spambots that are filling out forms. Humans won』t see the field, so they won』t fill it out. Because a bot cannot tell that the field is hidden, it will fill it out. If a honeypot field is not empty upon submission, the form is obviously a bot-filled spam submission and will be automatically rejected.

Input Size – Set the height of the fields. Label – Show or hide the labels on the form.

Learn more about the Form Widget (Pro)

Note: All field error messages are controlled by the browser. 

More Form Options

This page outlines the Form Fields options. For other Form options, click one of the links below:

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages

You Have No More Activations Left Or Your License Exceeded The Limitation

You Have No More Activations Left Or Your License Exceeded The Limitation

If you receive this error message, that means that you』ve used up your Elementor Pro plan』s quota of licenses on other websites. If you have any sites that you no longer use, or if you』ve used a license on a test or staging website, you can deactivate the license from it, and use the license for the site you now need it for.

Note: If you don』t have any sites that you can deactivate because you need the licenses for all of them, you will need to upgrade to the next available plan to be able to use the license on more sites.

How to free up a license for use?

This can be solved via your account on my.elementor.com

In your Elementor Pro account, click Subscriptions in the left sidebar. Find the subscription in the list that displays, and click the title of the subscription to see its details. Scroll down to the list of Connected websites. You can also view how many activations are left under your subscription. Deactivate one of the domains that you no longer use. This will free up one license so you will be able to activate your license key on the site you are working on.

From your site』s WordPress dashboard, go to Elementor > License to activate. You can learn more about how to activate a license here.

How To Fix The Package Could Not Be Installed Error

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.

Form Button Style

Form Button Style

You can style the Normal and Hover state for the Submit Button.

Background Color – Set the background colorText Color – Set the color of the textTypography – Set the typography of the textBorder Type – Choose between different border styles.Border Width – Set the width of the field borders, if borders are setBorder Color – Set the border color of the fieldsBorder Radius – Set the radius of the borderText Padding – Set the padding for the text

More Form Options

This page outlines the Form Style > Button Options. For other Form options, click one of the links below:

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages