Web design tutorial: Elementor

What is elementor?
Elementor is the best FREE WordPress Website Builder, with over 5 million active installs. You can create beautiful sites and pages using a drag and drop interface.

While elementor has a free version, the premium version is more user friendly and has lots of pre designed template.

Techvila provides free premium version of elementor with unlimited web hosting package. We design most of our clients website with elementor so that user can modify easily when needed.

How to Change Font Size, Color, Family & Style in Elementor Page Builder

Many Elementor Widgets offer the ability to edit text color and typography settings. These design options are located in the widgets’ Style tab.


Text Color: Choose the color of your text

Under the Widget Setting > Style, click the icon to access the typography settings.


  1. Family – Choose your font family
  2. Size – Choose a size for your font
  3. Weight – Choose the weight of the font
  4. Transform – Choose the Transform properties for the font
  5. Style – Choose between Normal, Italic, and Oblique
  6. Decoration – Choose the text Decoration
  7. Line-Height – Use the slider to set your line-height
  8. Letter Spacing – Use the slider to set your letter spacing

Advanced Tab

These are the possible settings available in the Advanced tab of a Section, Column, or Widget. Not all settings are available for every element.



  1. Margin: Set the section Margin
  2. Padding: Set the section Padding
  3. Z-index: Set the Z-Index. Learn more about Z-Index
  4. CSS ID: Set a CSS ID for your section
  5. CSS Classes: Set CSS Classes for your section, separated by spaces

Motion Effects

  1. Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. Learn more about Sticky
  2. Scrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. Learn more about Scrolling Effects
  3. Entrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation


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

  1. Background Type: Choose between Classic or Gradient


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

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border radius to control corner roundness
  3. Box Shadow: Adjust box shadow options


  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed are selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Learn MoreHow To set Absolute Position for An Element


  1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Attributes (Pro only)

  1. Add your own custom attributes. Learn more about Custom Attributes

Custom CSS (Pro only)

  1. Add your own custom CSS

Style & Settings Configuration Menu

A click on the top left hamburger icon in Elementor will open Elementor’s Style & Settings Configuration menu. Here, you can set Elementor’s Default Colors and Default Fonts, and various Editor Preferences. You can also change Global Settings and Navigate to other areas of the site.


  1. Default Colors: Customize the primary, secondary, text and accent colors in Elementor
  2. Default Fonts: Automatically selected fonts for primary and secondary headlines, body text and accent text


  1. Global settings: From the Style tab, choose the editor’s font fallback, the content width, widgets space, stretched section fit to, and page title selector. From the Lightbox tab, select Yes to open all image links in a lightbox popup window. If set to Yes, choose the Lightbox’s global Background Color, UI Color and UI Hover Color
  2. Dashboard setting: A link to the Elementor setting. Described in detail here
  3. About Elementor: A link to Elementor.com


  1. Preferences: Set UI Theme‘s light or dark mode, or use Auto Detect to sync it with your OS setting, Slide the switch to Enable or Disable Editing Handles when hovering over the element edit button, and select Yes or No to enable the Lightbox in the Editor.
  2. Finder: Opens the Finder to quickly find and navigate to another area of your site
  3. View Page: Opens the current page, in live mode in the browser.
  4. Exit to Dashboard: Exits to the WordPress editor of the current page or post.

Document Settings

With Document Settings, you control some basic and useful WordPress settings. 

Click on the gear icon  located at the bottom left of the panel.

Settings tab

General Settings

  1. Title – Change the title
  2. Status – change the status (Draft, Pending, Private, Publish)
  3. Featured image – add a featured image
  4. Hide Title – Slide the switch to hide the title
  5. Page layout – Choose between the different layouts (Default, Elementor Canvas, Elementor Full Width, etc.)

Style tab

Body Style

  1. Body style – choose between color, gradient, or image background
  2. Padding – add padding to the document

Custom CSS

  1. Placeholder for your document’s custom CSS

Leave a Reply

Your email address will not be published. Required fields are marked *