Style Guide
This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
Typography and buttons
This is Heading One
Go to the Style Kit panel, and manage the whole typography on this layout via a number of useful controls. You can also set up your Buttons and Column Gaps.
This is Heading Two
Try experimenting with the Heading sizes, for example if you tweak the Heading 2 value, the heading title above this text must change accordingly.
Keep in mind that individual element styles override the Style Kit values, so for Style Kits to work, the element must not have manually added styles.
This is Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Button Styles
In the Style kits panel you also have controls for the Elementor buttons, and specifically for each of their five sizes. This helps you to consistently manage the styles of your buttons.
Try dropping a new button widget here, and turn it into a different size. You should see that each size can have a completely different size.
A section with dark background class
Feature Heading 3
The title of this icon box is Heading 3, and this description is body text. Try tweaking the H3 value in the Style Kit panel
Feature Heading 3
The title of this icon box is Heading 3, and this description is body text. Try tweaking the H3 value in the Style Kit panel
Feature Heading 3
The title of this icon box is Heading 3, and this description is body text. Try tweaking the H3 value in the Style Kit panel
A section with light background class
Feature Heading 3
The title of this icon box is Heading 3, and this description is body text. Try tweaking the H3 value in the Style Kit panel
Feature Heading 3
The title of this icon box is Heading 3, and this description is body text. Try tweaking the H3 value in the Style Kit panel
Feature Heading 3
The title of this icon box is Heading 3, and this description is body text. Try tweaking the H3 value in the Style Kit panel