Reusable Blocks

Hero

Gutenberg-Editable

The Hero block is used at the top of each page. Consists of the H1, H5, Buttons and a Background image.

How to use

Type /hero and choose Hero. Convert to regular blocks to change content.

The Best Sales Tagline

Some supporting text that tells people what they’re getting at EOL.

Transparent Pod

Gutenberg-Editable

This Block consists of Text, Button and a Background Image

How to use

Type /transparent and choose Transparent Pod. Convert to regular blocks to change content.

Regatta Bay Project

This beautiful regatta bay project has a full range of lighting design options and ideas.

Transparent Pod Pushed Up

Gutenberg-Editable

Place below Block that you want to overlap with Pod. This Block consists of H3,H5 and two columns of Text.

How to use

Type /transparent and choose Transparent Pod Pushed Up. Convert to regular blocks to change content.

The Block above Transparent Pod Pushed Up

Regatta Bay Project

An interesting subheading about the project. This is optional.

This beautiful regatta bay project has a full range of lighting design options and ideas.

Video Pushed Up

Gutenberg-Editable

Place below Block that you want to overlap with Video. This Block consists of an embed video.

How to use

Type /video and choose Video Pushed Up. Convert to regular blocks to change content. After adding video, add CSS classes eol-pushed-up__iframe eol-single-video-embed-large to embed.

The Block above Video Pushed Up

Simple CTA

Gutenberg-Editable

A simple CTA with text and a button.

How to use

Type /cta and choose Simple CTA. Convert to regular blocks to change content.

Let us light up your home.

Image/Video with CTA

Gutenberg-Editable

CTA with header, text, button and Video.

How to use

Type /cta and choose Image/Video with CTA. Convert to regular blocks to change content. After adding video, add CSS class eol-single-video-embed to embed.

Image/Video with CTA

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with.

Project CTA

Gutenberg-Editable

CTA with Images with a link and caption button.

How to use

Type /projects and choose Project CTA. Convert to regular blocks to change content. Click on the Image to add link. Both Images should be the same size. The caption is the “Button” text.

More Projects

Title for a Past
Title for a Past

Image Before and After Full Slider

Gutenberg-Editable

Slider with before and after photos.

How to use

Type /image and choose Image Before and After Full Slider. Convert to regular blocks to change content. Replace img1=”” and img2=”” with the id of the image from Library. Click on photo in library and look in the url for(item=#).

Image Slider Reusable

Gutenberg-Editable

Consist of 4 Images and Displays whichever image is clicked on the navigation bar.

How to use

Type /image and choose Image Slider Reusable. Convert to regular block to change content. Add 4 rows under images. Pick an image for each row. Images should all be same size. 1200×700


Hexagon Row

Gutenberg-Editable

Consist of 4 Images with a link and Title underneath.

How to use

Type /hexagon and choose Hexagon Row. Convert to regular block to change content. Image Size 600×600 square.

Products Used in This Project

Aluminum mini flood

Brass cadet light

Crescent Deck Light

Mandarin Path Light

Elements

Hexagon Stack

Gutenberg-Editable

Hexagons stacked on top of each other. Consists of a Link, Title and Image.

How to use

Type /hexagon and choose Hexagon Stack. Click Switch to Edit. Add 3 rows under Hexagons and 2 rows under Hexagons Second. Fill out the fields in each row.

Core Styling

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

  • List 1
  • List 2
  • List 3

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

instagram default popup image round
Follow Me
502k 100k 3 month ago
Share