MARKETING: PART 2.3 - STYLE HEADING TEXT AND RESPONSIVE SETTINGS IN ELEMENTOR

Step-by-Step:

Step 1: Select the heading to style:
In the Elementor editor, click on the heading you want to style. The left sidebar will show the Heading widget settings.

Step 2: Open the Style tab:
In the left sidebar, click the Style tab to access the visual styling options for the heading.

Step 3: Change the text color:
Under the Style tab, find the Text Color option and click the color box. Choose a color from the palette or enter a specific hex code (for example, #003366) to set the heading color.

Step 4: Adjust typography settings:
Under Typography, click the pencil icon to open detailed font controls. Here you can choose the font family, set the font size, adjust the weight (how bold the text is), set text transform (uppercase, lowercase, capitalize), style (normal or italic), decoration (underline, overline, line-through), line height (space between lines), and letter spacing.

Step 5: Set heading alignment:
In the Style tab (or Content tab, depending on your setup), find the Alignment options. Choose to align the heading left, center, or right within its column or section.

Step 6: Open responsive mode:
At the bottom left of the Elementor panel, click the Responsive Mode icon (the monitor and phone icon). This lets you switch between Desktop, Tablet, and Mobile views.

Step 7: Adjust heading style for each device:
In Responsive Mode, select Desktop, Tablet, or Mobile. For each device, go back to Style > Typography and adjust font size, line height, and alignment so the heading looks good on that device.

Step 8: Save and preview on all devices:
When you are finished styling, click the green Update button at the bottom left to save your changes. Use the eye (Preview) icon and switch between Desktop, Tablet, and Mobile views in the preview to confirm the heading looks correct everywhere.