All page elements, text elements, etc. have had adjustments to make their spacing more consistent.
The spacing is controlled through five variables, demonstrated below.
Easy to change: the values for each padding unit (i.e. normal padding can be changed from 30px to 20px), blanket adjustment to all values (i.e. all padding can be reduced by 20% on mobile).
Font sizes have been reduced to 10 variables, demonstrated below.
Easy to change: value for each variable (i.e. paragraph font size can be changed from 20px to 16px), blanket adjustment to all values (i.e. all text can be shrunk by 20% on mobile).
Bolded text within headings will have an alternate color.
Links within headings will have an underline when hovered.
Heading 3 will receive an alternate look when placed above Heading 2.
Within lists, bolded text will receive an alternate color.
Easy to change: colors, font family, font size, list bullet radius, list bullet size.
Some paragraph text, bolded. Some paragraph text with an internal link. More paragraph text. Test paragraph text.
Button styles will be automatically applied to button row, form submit buttons, “read more” links, and to any link with the class est-–button.
An arrow-only button can be created by applying the class est-button-–arrow to the button, column, or row.
A button with alternate colors can be created by applying class est-button-–alternate to the button, column, or row. The first button in any button row element will automatically receive the alternate styling.
For rows with dark background color, the class est-text-–on-dark applied to the row will turn all text (including the button) white.
Easy to change: background color, border color, text color, icon to right of text, border radius.
This is a column with dark background and est-text-–on-dark class.
The color is automatically changed to white.
When column height is set to equal height under Row Layout, image height will match content height but with extra padding at top and bottom.
When image is on right, it will by default be placed below the text on mobile screens. To reverse this, Row Screen Options should be set to Reverse.
Image will be automatically cropped, and crop will favor center of image.
Easy to change: image border radius, column ordering (i.e. image on left or right).
Burch Oil & Propane has brought comfort, convenience and peace of mind into the homes and businesses of our community for nearly a century. Through neighborly customer care, comprehensive offerings and technological advancement, we plan to do the same for generations to come. As always, we remain committed to your family’s comfort.
When a row contains a full-width column with centered text, the text will automatically have a narrower content area (i.e. if main content area is 1200 px wide, centered section will be 900 px).
On mobile, text is automatically left aligned.
Burch Oil & Propane has brought comfort, convenience and peace of mind into the homes and businesses of our community for nearly a century. Through neighborly customer care, comprehensive offerings and technological advancement, we plan to do the same for generations to come. As always, we remain committed to your family’s comfort.
Users slider styling. Pulls from Testimonials section and has additional fields for Location, Services Used, and Featured Image. Built in Toolset.
Number of slides visible on screen can be set for each slider within the JavaScript.
Easy to change: border radius, shadow, background color, text colors, order of text (i.e. name can be at top and quote at bottom), border radius of arrow buttons, colors of arrow buttons, position of arrow buttons (right, center, or left).
Users slider styling. Pulls from Logos section.
Number of slides visible on screen can be set for each slider within the JavaScript. Grayscale effect can be turned on or off.
Easy to change: border radius, shadow, colors, grayscale filter, border radius of arrow buttons, colors of arrow buttons, position of arrow buttons (right, center, or left).
Also referred to as separator, horizontal line, or HR.
Does not require row/column wrapper.
Easy to change: color, width of line.
Pulls 2 most recent posts. On mobile view, posts stack (switching to slider requires more time).
Easy to change: number of posts, colors, border radius, shadow, vertical order of elements (i.e. date can be moved below excerpt, but moving date beside button would be more difficult).
“Cards” are static columns (i.e. no hover effect) with special styling. Typically consistent with Blogroll styling.
May also contain an image. Images are automatically cropped to maintain consistent height (crop favors center of image).
Cards can be made equal height through Row Settings.
Easy to change: colors, radius, shadow, equal height or not.
Since the Row Layout is set to Individual Height, this card is a lot longer. If it is set to Equal Height, the cards will be the same height. The image appears to be the same height for both even though the logo image used on the right is much shorter.
Less text means shorter card.
Classes like est-bg-–grey can be used to apply a background color to a row (grey in this case).
If a dark background color is used, the class est-text-–on-dark should be applied to the row so the text turns white and is still visible.
When applying a background image to a background row, it is automatically reduced in opacity and receives a color filter over top that matches the row (i.e. est-bg-–grey row will put a grey filter over the image).
Row spacing is automatically reduced when two same-color rows are used side by side.
Easy to change: additional background colors can be quickly added in the CSS.
Since this row is dark, est-text-–on-dark has been used to turn the text white.
Since a background image was used, it is automatically overlayed with semi-translucent grey.
Grey row followed by black row maintains clear spacing.
This is a separate row from the previous one, but since both rows have no background, they are spaced closer together.
If for some reason you want to override the spacing and make two rows look closer together, the class est-row-–combine-with-next can be added to the top row.
Since this grey row is followed by a black row, they should have distinct spacing. However, the est-row-–combine-with-next class has been used on this row to bring it closer to its neighbor.
This is useful, for example, when the top row has a white-to-blue gradient and the following row has a solid blue background, but you want the content to look like it is part of one row.
By default, tabs are styled to left of content. Images will have consistent height.
Mobile styling will collapse with tabs on top of content, and tabs close together.
Tabs can be repositioned above content instead of at left. Click to show tabs on top / Click to show tabs at left
High-quality, energy-efficient heating oil delivered directly to your home or business.
No matter if it’s your.
No matter if it’s your.
No matter if it’s your.
No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable.
No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable.
No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable. No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable. No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable. No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable. No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable.
No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable.
No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable.
No matter if it’s your first home or your forever home, our fireplaces keep every space warm, stylish and comfortable.
Background color behind swoop rows will automatically change depending on preceding/following row.
This row has est-bg-–grey
This row has est-bg-–blue and est-bg-–swoop
This row has est-bg-–top-sky (gradient from sky to white)
This row has est-bg-–blue and est-bg-–swoop
This row has est-bg-–bottom-sky (gradient from white to sky)
Today’s heating oil is cleaner, safer, and more efficient than ever before. It heats fast, burns hot, and keeps you comfortable no matter how cold it gets. It’s a reliable and smart energy source that offers you unrivaled comfort control, peace of mind and savings to your home and business.
If you have a question or need support, our experienced and friendly team is just a message or phone call away.
Oops! We could not locate your form.
Example Blog 3
An excerpt from a third example blog.
Example Blog 2
This is a second example excerpt.