Social Icons Widget

The Social Icons Widget lets you add icon links to all your social media profiles. With Elementor Social Icons Widget you get total control over the appearance of your social icons. 

Content

Social Icons – Click to add a Social network icon. Use the Icon Library to choose the Social Network icon of your choice, and enter a link URL to the social network. You can also use the Dynamic Content selection to choose a link dynamically if you prefer.Shape – Choose an Icon Shape.Columns – Select the number of columns, choosing from either Auto, or 1 through 6.Alignment – Set the Icons Alignment.

Style

Color – Choose between Official Icon』s Color, and Customize, where you can set a Primary and Secondary Colors.Size – Set the size of the icon.Padding – Sets the inner spacing of the icon.Spacing – Sets the spacing between icons.Border Type – Set the Border Type, Border Width and Border Color.Border Radius – Set a Border Radius

Advanced

Set the Advanced options that are applicable to this widget

Table Of Content (Pro)

The Table of Contents widget automatically organizes your page content based on H1 through H6 levels of hierarchy.  Although the process is automatic, you have plenty of control over what gets included and what gets excluded from the display.

Content

Table of Contents

Title: Type the heading text shown above the Table of Contents

HTML Tag: Select the HTML tag to use for the title, from H2 to H6, or div

Include | Exclude

Include

Anchors By Tags: Click to select the page』s H1-H6 tags to be automatically included 

Container: This control confines the Table of Contents to heading elements under a specific container

Exclude

Anchors By Selector: Enter CSS selectors to be excluded, in a comma-separated list

Marker View: Choose to display numbers or bullets next to list items

Icon: (only available if Marker View is set to Bullets). Click the Icon Library to choose an icon or click None to not use any bullet icon.

Additional Options

Word Wrap: Slide to Yes to turn Word Wrap on, to wrap text when column width cannot accommodate long text on one line

Minimize Box: Slide to No to display Table of Contents fully expanded or Yes to force a click to expand a minimized Table of Contents box

Icon: Click the Icon Library to choose an icon from the Icon Library that will display when widget is minimized to indicate user should click to expand the widget. Click None to not display an icon. Click Upload SVG to upload your own SVG icon.

Minimize Icon: Click the Icon Library to choose an icon from the Icon Library that will display when widget is fully expanded to indicate user should click to minimize the widget. Click None to not display an icon. Click Upload SVG to upload your own SVG icon.

Minimized On (only available if Minimize Box is set to Yes): Select to minimize on Mobile, Tablet, or None

Hierarchical View: Slide to Yes to display list items with indention based on Tag hierarchy

Collapse Subitems: (only available if Hierarchical View is set to Yes) The 「Collapse」 option should only be used if the Table of Contents is made sticky. Slide to Yes to collapse nested lists and only show top level items

Style

Box

Background Color: Choose a background color for the entire Table of Contents box

Border Color: Choose a color for the box』s border

Loader Color: Choose a color for the loader spinner

Border Width: Set the width of the box』s border

Border Radius: Set the border radius to control corner roundness

Padding: Change the padding settings of the widget

Min Height: Set the minimum height of the widget

Box Shadow: Set the box shadow options

Header

Background Color: Choose a background color for the header

Text Color: Choose a color for the text of the header

Typography: Change the typography options for the header text

Icon Color: Choose the color of the Expand / Minimize icon

Separator Width: Set the thickness of the widget header』s bottom border

List

Typography: Change the typography options for the text of the anchors

Indent: Set the amount of indentation for the anchors

Normal | Hover | Active

The following options can be set independently for the normal, hover, and active states.

Text Color: Choose a color for the anchor text

Underline: Select Yes to underline the anchor text

Marker

Color: Choose a color for the marker

Size: Change the size of marker if you wish it to be a different size than the text

The Elementor Editor Structure and Layout

Here is a quick tour of the Elementor Editor, where you』ll discover the structure and layout of the Elementor Editor itself, as well as how to create your page』s layout and structure within the editor.

Welcome to Elementor

To start working with Elementor, click the Edit with Elementor button from any WordPress page or post editor. 

Elementor Editor Layout / Structure

The Elementor Editor includes 6 main areas. Match the numbers with the image below. 

1. Panel Header: Go to Global Site Settings using the hamburger menu on the left or Return to Widgets Panel using the dotted icon on the right.

2. Widgets/Widget Settings: Select a widget or modify a widget』s settings here 

3. Hide Panel / Preview Tab: Enables you to preview the page. Once clicked, it hides or shows the panel. 

4. Panel Toolbar: Contains several tools including Page Settings, Navigator, History, Responsive View, Preview Changes, Publish/Update

5. Content Area: A blank slate where you can drag and drop widgets, and design your page here. 

6. Add New Section/Template: Choose between creating a new section on your page using the Plus icon or inserting an existing pre-made template that is ready to edit using the Folder icon.

「Add New Section」 Details

It is easy to add a new section to your page. This section will consist of one or more columns. Each column can consist of one or more widgets.

Click the Plus icon to create a new section.Select a structure / layout for your section  (1 column, 2 columns, 3 columns, etc.)Edit the exact width of every column by dragging in the editor or manually entering a value in the panel.

「Add Template」 Details

If you don』t want to start a new section from scratch, you can choose to insert a pre-designed section from the Template Library instead. Click the Folder icon to launch the  Template Library and insert an Elementor pre-designed template, a pre-designed section block, or one of your own saved templates. See image below.

Section / Column / Widget Details

Each section, column, and widget has options that can be modified. Right-click the section handle, column handle, or widget handle to open the options in the panel.

1. Section: You can edit, duplicate or delete a section. You can also save it as a template or add a new section above. Right-click the section handle to modify section options.

2. Column: You can edit, duplicate, add or delete a column. Right-click the column handle to modify column options.

3. Widget: Click the content to edit, duplicate or delete a widget. You can also save it as a Global Widget. Right-click the widget handle to modify widget options.

4. Resize Column: Drag dotted vertical column borders right & left to change the width of your columns. 

5. Add Widget: Drag a widget from the left panel and drop it into a column.

Edit Widgets and Save Changes

Learn how to modify widget options, save changes to your page, and view your live page.

1. To edit a widget, click the Pencil icon, which is the widget』s handle. 

2. On the Panel header, you can choose to edit the widget』s content and style. 

3. Every widget has different settings. Adjust the elements as needed.

4. You can save / update your current changes at any stage. 

5. When you have finished designing, click the hamburger menu in the Panel header and click View Page to see your live page.

Responsive Mode Details

Elementor makes responsive sites easy. View how your page will look in different devices using the Responsive Mode viewer. Adjust specific elements on the page for different devices in Panel options, if the option has a device icon next to it.

1. To view how the page looks like on different devices, click on the Responsive Mode icon, in the Panel toolbar. 

2. Choose between the different devices from the popup menu.

3. Only elements that have a device icon next to them can be modified per device. If you change an element that does not have a device icon next to it, the change will affect all devices (desktop, tablet, and mobile).

How To Create A Blog Website

Hello World

WordPress, by default, is a blog upon installation. It allows you to start creating posts immediately. As a nod to internet history, a default post is created called Hello World. This post is displayed on the initial front page of your website as an Archive. The full Post can be read by clicking the title.

What Is A Post

A post is an article on your website written much like print media such as newspapers or magazines. These provide fresh content for the visitors to engage with and increase the return visits to your website. They also provide organic traffic to your website through search engines. Many visitors will find and enter your website through clicking a post link via search engines and social media rather than the home page.  

What Is An Archive

WordPress uses an Archive to display a list of posts created on the site by the author(s). These lists can be filtered by terms such as categories, tags, authors, and dates. An Archive is different from a Page or Post as it is querying the database to automatically display the content dynamically. You do not need to edit this page directly. The Archive Template can be styled into grids and other layouts by your theme.

What Is A Category

Categories are used to query posts of similar content in the archive template. They can be named, and added to your menu for easy navigation by your visitors. (Example: News, Sports, Lifestyle, Events, Weather)

What Is A Permalink

A permalink or 「slug」 is the permanent URL of your post on your website. These are set up in WordPress. Navigate to Dashboard > Settings > Permalinks. Permalinks can be set up in a variety of ways. A simple common option is to use the post name. When creating your posts, the post title will generate a permalink automatically. These can be edited from the settings. Permalinks should be all lowercase and hyphenated with no spaces. The permalink should not be changed once the post has been indexed on search engines unless you create a redirect to the new location.

 

Creating A Post

In order to create a new post in WordPress you can navigate to Dashboard > Posts > Add New, or by selecting the + New > Post from the top admin bar.

The Primary Post Parts

Post Title: Enter a title for the postPost Content: Create your post using the block editor or write in Google Docs and paste to the editor.Permalink: This will be generated automatically after publishing the post but can be manually edited here.Post Category: Select or create a category for your post. When creating categories, it is important to not give it the same name as a page on your website as this will cause confusion in the permalinksFeatured Image: Select a featured image for your post from the media library or by uploading from your computer. This image will display in the Archive and in social media sharingPublish Post: Publish your post or choose to save it as a draft and preview it.

Writing Posts

With WordPress

WordPress uses the Block Editor or 「Gutenberg」 as the primary way of creating content. You may add headings, paragraphs, lists, images, embedded media and much more by clicking on the black + icon in the content region, or by clicking the blue + button in the top corner to open a block side panel in which you can drag blocks to your content. You may also find it easier to write your long content in Google Docs, and then paste it into the content region.

Note: When pasting images from Google docs, it is important to upload your media to your website and re-link it. While you see all the images in your post, they are still located at the Google URL. If your document is removed from the Google location, the images on your website will become broken.

With Elementor

You may also create your post content with Elementor if you wish. You should still start on the WordPress side by giving your post a title, category, and featured image. Click the publish button (twice) and allow a few seconds to finish. This allows your post and permalink to be properly generated. Next, you may click the Edit with Elementor button and begin creating your content with Elementor widgets. 

Tip: If possible, it is recommended that you create several posts (4-6) before attempting to style your Archives page template. This will allow you to better see the desired end results. If you do not have content ready for your blog but wish to go ahead and style your blog templates, you may use 「Lorem Ipsum」 text and stock featured images to create some sample content.

Post Categories

You may create and assign categories directly from your post or by navigating to Dashboard > Posts > Categories. Here you can create parent and child categories for your blog. These will automatically query the posts assigned to them and display only these in the archive. There is no need to create a new archive for each category.

Creating An Archive Page

By default, WordPress displays your posts on the front page of your website as the Archive. However, most websites will feature another page created called Home. To assign a new page as an Archive to display your blog posts, you will need to first create one by navigating to Dashboard > Pages > Add New or by selecting the + New > Page from the top admin bar.

Create A New Page

Page Name: Give your blog a name (examples: Blog, News, Articles, Publications)Page Content: Do not add any content to the region as it will be populated dynamicallyPublish Page: Click and publish the blog via the button

Assign The Page As The Blog

To assign the role of Archive to this new page, you must navigate to Dashboard > Settings > Reading. From there, select your created page from the dropdown options.

Note: If you have not created a page designated as the Home page yet, you may also select the Sample Page to temporarily be displayed until one is created.  

View Your Blog Archive

You may now visit your page assigned as the Posts Page to see your new Blog Archive. This will show posts from all categories sorted by date last to first.

Creating A Category Menu

To assign categories to your menu, navigate to Dashboard > Appearance > Customize or via the top admin bar. Expand the menu options there. Add your created categories to the menu from the panel accordion. Publish your menu after adding all the desired categories to your menu.

Viewing Your Categories

You may now visit your website. You can navigate to each category by clicking the menu item. The posts will be automatically filtered to show posts in that category.

Take A Pause

Congratulations, you have successfully created a fully functional blog foundation. The next steps will be to style your archive and single post templates.

Styling The Blog

WordPress Themes

The layout of your Archive and Single Post Template is styled by your theme. Each WordPress theme needs to contain an archive.php and single.php, or singular.php. The Customizer of each theme generally provides settings to display your archive in a single or multi-column grid as well as other styling options. It also allows you to style the single post style. There are hundreds of themes located in the WordPress theme repository. Elementor is compatible with most modern themes but some work better than others. Please visit the Elementor Hub Community to search and get feedback on the other members』 favorites.

Hello Theme

Elementor』s flagship theme named Hello provides a barebones customizer and minimal blog styling as it is intended to be used in combination with the Theme Builder of Elementor Pro. 

Using The Theme Builder (Pro) 

The Theme Builder allows you to fully customize your Archive and Single Post Templates. You may also create custom templates for each category if you wish to change colors or layouts for each one. The complete documentation for the Theme Builder can be found here.

Creating An Archive Template

The Theme Builder allows you to create a custom layout for displaying all the posts queried. You may quickly get started by clicking the plus icon on the Archive Site Part. From there, select one of the premade Elementor templates. Don』t worry, you may go back and change the layouts at any time later on. When saving your template, you will be prompted to set the conditions for your archive, if you are unsure of what to select here choose 「All Archives.」

Creating A Single Post Template

You also need to create a Single Post Template to display your content. From the Theme Builder, create a new Single Post Template by clicking the plus icon. Select one of the premade Elementor Templates that give you the best start. The template may be edited at any time later on. Upon publishing, set the display conditions to 「All Posts.」 

Quick Links:

https://elementor.com/help/what-is-the-elementor-theme-builder/https://elementor.com/help/archive-site-part/https://elementor.com/help/single-post-site-part/

Take A Look

Your blog is now all set up. You may further customize the layouts of your Archive and Single Post templates to meet your needs.

Go Back Home

Now that you have created all the needed site parts, and basic content for your blog website, it is now time to create your Home page. You may use the Posts widget to create custom layouts by using the query function. You can query a specific category and choose the number of posts to display.  By using the offset function from the exclude options, you can avoid duplicated content as shown in the example below.

Customizing Form Emails

When you create forms in Elementor it uses shortcodes in the fields to generate the outgoing email it sends to you or your client. By default, the email generated will use the shortcode [all-fields]. While this captures all the field data, the email that gets sent is very plain and may be difficult to read. By using the individual field shortcodes and a small bit of HTML, you can generate much more human readable form submissions.  

Create Your Form

Using the Elementor Form widget, create your form. For more information about forms, click here. 

Enter a label and placeholder text for your fieldToggle the required option (if needed)Set the width of the field (if needed)In the Advanced tab, enter a new ID using only characters and underscores (no spaces)In the shortcode field, copy the generated shortcode (example: [field id=」first_name」])Paste these shortcodes to an application such as notepad, Google docs, or any text editor for use in the next steps.  

Creating An HTML Email Template

Next, you will use these shortcodes along with some basic HTML to generate the email that you wish to receive.  In the example below, we are generating a new wedding planner inquiry email using the kit from the library.

The HTML Part

The following is an example template to use for this form. You will only need to use basic HTML tags to get started in this lesson but can build on this knowledge to create highly customized submissions. If you have no knowledge of HTML or access to any editor applications such as Dreamweaver, you may use the Elementor Text Editor widget to write the email template in the Visual mode, then switch to the Text mode and copy the HTML.

Example HTML

You have a new wedding to plan.

[field id=」first_name」] would like you to contact them about planning their wedding on [field id=」eventdate」] at [field id=」location」].

The couples vision and plans so far are as follows:

[field id=」message」]

Contact Information

• First Name: [field id=」name」]
• Last Name: [field id=」last_name」]
• Email Address: [field id=」email」]
• Phone Number: [field id=」phone」]

Good luck at the event!

Adding The Template To The Form

We can now add this HTML to our form using the Email options in the controls. Paste the HTML into the message field replacing the [all-fields] default. Make sure that the send as HTML option is enabled near the bottom of the controls.

Finishing Up

You may now publish or update your form. Send a test submission to yourself to see how the generated email appears. Use additional HTML and inline CSS to further style the email as needed.

License

A license is provided once you purchase Elementor Pro. The License Settings shows the current license status and enables you to manage the license activation process for your website.

Activate License

Connect & Activate: Click this button to connect to your Elementor account, and activate with the click of the Connect button.

Status Screen

Once your license is activated, the Status screen allows you to switch to a different license or deactivate the current license.

Click the My Account button to go to your account on elementor.comClick the Switch Account button to use a different user』s license for this websiteClick the Disconnect button to deactivate the license on this website

If you are still seeing Go Pro messages after purchasing Elementor Pro:

Please make sure you are using the latest versions of both Elementor and Elementor Pro. Remember that both the free version and the Pro version must be installed and activated. Go to Dashboard > Updates and click the Check Again button to receive notification of any new updates.Confirm that you have activated your license key under Elementor > License in your WordPress dashboard. You can also login to your account at my.elementor.com and click the View Websites button. From there, you can enter a new URL if yours is not listed.Check for a plugin conflict, as this is often the problem. Temporarily deactivate all of your plugins except Elementor and Elementor Pro. If the Go Pro message disappears, then you know one of the disabled plugins is causing the problem. Reactivate each plugin, one at a time, until the problem reappears. The last plugin reactivated is the cause of the problem. Contact the 3rd party plugin』s developers to get help with resolving the conflict, or use a different plugin with similar functionality.

How To Create A Read More Toggle In Posts

If you would like to use a Read More Toggle in your post template, to display long content, credits, or other uses, all from the WP Block Editor for users and clients, you may do so using a Custom Field. In this example we will use the free version of Advanced Custom Fields. You may download this from the WP repository,  

Let』s Get Started

Follow along below. For this tutorial we will be leaving the default settings on most options for now. These can be modified later for more advanced customization.

Creating A Custom Field

Create a new custom field group (example: Read More). Create one custom field (example: Read More Content).  Give this a unique Field Label. The Field Name should auto generate. This will be the permalink key. Select the WYSIWYG editor from the Field Type dropdown.Fill in a description and other requirements here. For your first one, it is safe to leave everything below the field type dropdown at the default. These can be modified as needed later.Publish your custom field by clicking the blue button in the grey right column.

Note: If the Label Name or Field Name is edited at a later time, you will need to re-link it as shown in the Single Post steps below.

Create New Post(s)

Create at least one new post in order to populate the custom fields for the next step. You will see your custom field editor at the bottom of the block editor content. You may use this just like the classic editor and insert text, headings and media. Publish or update your post(s).

Create Or Edit Your Single Post Template

In your single post template, insert a Toggle Widget just below the Post Content Widget. Set the description to the dynamic ACF field (example: Read More), by using the small dynamic icon , and in the settings we will choose the key we named in our steps above (example: Read More Content). Publish or Update your Single Post Template with the correct display conditions. For more info about the Single Post Template click here. 

View The New Post(s)

If you have gotten the steps correct you will now see the Read More Toggle in your posts. You may edit the Single Post Template from the admin bar for further styling modifications.

How To Fix: Common Errors With Import / Export Kit Feature

When using the Import / Export kit feature, you may occasionally receive an error message. Here is a list of common causes and possible solutions:

Import Error Causes

Import Error CausesPossible SolutionsInvalid file typeEnsure you are uploading a .zip file extensionCorrupted fileRe-download your file and try againServer is limited by file size (the file is too big to be uploaded)Increase your upload limits on the server or contact your hostUnauthorized user (only Admin can use)Login with Administrator credentialsUser upload the file without the GUI could lead to an errorOnly upload files via the GUIServer cannot handle zip fileInstall PHP zip on your server or contact your hostMemory limit on the server sideIncrease PHP Max Post Size and Upload limits or contact your hostTimeout error – the import process is too longIncrease PHP Max Input Vars or contact your hostAnother plugin caused an errorDisable all plugins and enable one by one to find the one causing the error

Export Error Causes

Export Error CausesPossible SolutionsMemory limit in server sideIncrease your memory limits on the server or contact your hostTimeout error – the import process is too longIncrease PHP Max Input Vars or contact your hostPHP zip extension in the site is not activated (usually it』s activated by default) Install PHP zip on your server or contact your host

Form Error Messages – Form Invalid

When completing a form on your website you may experience the following error message(s): 「an error occurred」 / 「there is something wrong the form is invalid.」

This generally happens when some field(s) ID(s) is/are empty.

Please open the settings for your form, select each of the fields and then switch to the Advanced tab. If you notice that the ID option is blank, please try typing in a value (this needs to be a unique ID value that isn』t used anywhere else inside the form). 

Other potential reasons:

– Two fields have the same ID.

– The integration is not working correctly. To confirm that, you can unset the integration with your email marketing service.

– The field Mapping for integration has not been done properly.

Tip: Always consult the Form Submissions logs to understand any delivery issues.

Form Error Messages – X Error

When completing a form on your website you may experience the following error message: 「x」 error.

This error can appear when some field(s) id(s) are empty

Please open the settings for your form, select each field, and then switch to the Advanced tab. If you notice that the ID option is blank, please try typing in a value (this must be a unique ID value that isn』t used anywhere else inside the form).  

Tip: Always consult the Form Submissions logs to understand any delivery issues.