Search
Back

U

Back to Top

Website Design

Desktop VS Mobile Styles

Changing Between Desktop & Mobile 

The Styles of Each Template: Desktop VS Mobile

Style of the “Top Page Intro Section” Template

Style of the “Intro Text With Divider” Template

Style of the “Benefits Checklist” Template

Style of the “Four Characteristic” Template

Style of the “Image Text Section Break-up” Template

Below we will compare the “Desktop vs Mobile” styles of several saved templates. Additionally, there will be tips on how to convert a webpage to be mobile friendly.

Section 1: Changing Between Desktop & Mobile

Open the webpage in two separate tabs. Keep one tab open in the “View Page” mode and put the other in “Edit with Elementor”. Additionally, open the page on your phone as well. (These aren’t necessary steps, however it helps us see our changes in real time and is a good tip whenever editing a page).

In the bottom left-hand corner of the page, put the webpage in  the “Responsive Mode” Shown in Orange below: 

The Page will look something like this:

You can switch among modes using the icons at the top:

Note in the editor box, anything with the “mobile symbol” as shown below, will change that feature in the mobile settings only. If you change any aspect of the page that DOES NOT have that symbol beside it, it will change that feature in EVERY MODE.

 

Section 2: Changing the Style of The Text

You can edit the style of each heading/text box by navigating through the editor window. Select “Typography” under the “Style” tab to change the colour, size, weight and font of the text. 

*** Notes 

  • For”Heading” widgits, you change their alignment under the “content” tab 
  •  For “Text editor” widgit, you will change the alignment under the “style” tab
  • It’s very important to look at each page view after you’ve finished. Sometimes when you change the formating in mobile view, it changes the desktop view

Below we will discuss each template in detail. 

 

Style of the "Top Page Intro Section" Template:

Part 1:

H1 Heading - Desktop:

  • Colour: White (ffffff)
  • Font: Default
  • Size: 50
  • Weight: 700
  • Alignment :  The Margins under the Advance tab:

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

H1 Heading - Mobile:

  • Colour: White (ffffff)
  • Font: Default
  • Size: 20
  • Weight: 700
  • Alignment : center (under content tab)

**Note: You have to go under the “Advanced” tab and reset the “Margin” & “Padding” before it will work properly!

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

Part 2:

H2 Heading - Desktop:

  • Colour: Frontier Orange (ee5521)
  • Font: Default
  • Size: 50
  • Weight: 700
  • Alignment :  The Margins under the Advance tab:

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

H2 Heading - Mobile:

  • Colour: Frontier Orange (ee5521)
  • Font: Default
  • Size: 20
  • Weight: 700
  • Alignment : center (under content tab)

**Note: You have to go under the “Advanced” tab and reset the “Margin” & “Padding” before it will work properly!

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

Part 3:

Action Item Text & Arrow - Desktop

 
  • Heading Titile
    • Font: Default
    • Size: 25
    • Weight: 500
    • Alignment: Center
    • Colour: White
  •  Arrow
    • Size: 40
    • Alignment: Center
    • Colour: White

Action Item Text & Arrow - Mobile

 
  • Heading Titile
    • Font: Default
    • Size: 15
    • Weight: 500
    • Alignment: Center
    • Colour: White
  •  Arrow
    • Size: 25
    • Alignment: Center
    • Colour: White

**Note: You have to go under the “Advanced” tab and reset the “Margin” & “Padding” before it will work properly!

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

Style of the "Intro Text With Divider" Template:

Part 1:

H2 Heading - Desktop:

  • Colour: Black (232323)
  • Font: Archivo
  • Size: 45
  • Weight: 700
  • Alignment :  Center (Under content tab)

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

H2 Heading - Mobile:

  • Colour:  Black (232323)
  • Font: Archivo
  • Size: 20
  • Weight: 700
  • Alignment : Center (under content tab)

 

Part 2:

Text - Desktop:

  • Colour: Black (232323)
  • Font: Archivo
  • Size: 20
  • Weight: 400
  • Alignment :  Center (under style tab)

* Note because this is a “Text editor” widget and not a “Heading” widget, you will change the alignment under the “Style” tab.

Text - Mobile:

  • Colour: Black (232323)
  • Font: Default
  • Size: 15
  • Weight: 300
  • Alignment : center (under style tab)

Style of the "Benefits Checklist" Template:

Part 1:

H2 Heading Desktop:

  • Colour: Black (232323)
  • Font: Default
  • Size: 45
  • Weight: 700
  • Alignment :  Center (Under content tab)

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

H2 Heading Mobile:

  • Colour:  Black (232323)
  • Font: Default
  • Size: 20
  • Weight: 700
  • Alignment : Center (under content tab)

Part 2:

Benefit Boxes - Desktop:

  • Colour: Black (232323)
  • Alignment : Left
  • H3 Titile
    • Font: Archivo
    • Size: 25
    • Weight: 600
  •  Text Description
    • Font: Default
    • Size: 20
    • Weight: 400
  • Checkmark
    • Alignment: Center
    • Size: 40
    • Colour: Frontier Orange (ee5521)

Benefit Boxes - Mobile:

  • Colour: Black (232323)
  • Alignment : Left
  • H3 Titile
    • Font: Archivo
    • Size: 20
    • Weight: 600
  •  Text Description
    • Font: Default
    • Size: 15
    • Weight: 400
  • Button
    • Alignment: right
    • Size: Extra Small
    • Global Settings*

Shortcut**

You don’t have to manually change each individual part of a section. If there is a style you want throughout the page you can copy that part and “paste style” to another part.

  1. Right click on the blue pencil icon in the top right-hand corner of the part you want to replicate
  2. Select “copy”
  3. in the box below (where you want to make the same changes to the style), right click and select “Paste Style”

Style of the "Four Characteristic" Template:

Part 1:

H2 Heading Desktop:

  • Colour: White (ffffff)
  • Font: Archivo
  • Size: 45
  • Weight: 700
  • Alignment :  Center (Under content tab)

* Note because this is a “Heading” widget and not a “Text editor” widget, you will change the alignment under the “Content tab”

H2 Heading Mobile:

  • Colour:  White (ffffff)
  • Font: Archivo
  • Size: 20
  • Weight: 700
  • Alignment : Center (under content tab)

Part 2:

White Box Desktop:

  • Colour: Black (232323)
  • Alignment : Left
  • H3 Titile
    • Font: Archivo
    • Size: 25
    • Weight: 500
  •  Text Description
    • Font: Default
    • Size: 20
    • Weight: 300
  • Button
    • Alignment: right
    • Size: Small
    • Global Settings*

White Box Mobile:

  • Colour: Black (232323)
  • Alignment : Left
  • H3 Titile
    • Font: Archivo
    • Size: 25
    • Weight: 500
  •  Text Description
    • Font: Default
    • Size: 15
    • Weight: 300
  • Button
    • Alignment: right
    • Size: Extra Small
    • Global Settings*

Shortcut**

You don’t have to manually change each individual part of a section. If there is a style you want throughout the page you can copy that part and “paste style” to another part.

  1. Right click on the blue pencil icon in the top right-hand corner of the part you want to replicate
  2. Select “copy”
  3. in the box below (where you want to make the same changes to the style), right click and select “Paste Style”

Style of the "Image Text Section Break-up" Template:

H2 Heading Desktop:

  • Colour: White (ffffff)
  • Font: Archivo
  • Size: 45
  • Weight: 700
  • Alignment :  Center (Under content tab)

* Note because this is a “Heading” widgit and not a “Text editor” widget, you will change the alignment under the “Content tab”

H2 Heading Mobile:

  • Colour:  White (ffffff)
  • Font: Archivo
  • Size: 20
  • Weight: 700
  • Alignment : Center (under content tab)
Scroll to Top