!" #$%&'()*+,&-.(+,/0*%&
'%1.2&),&0&,*(%%3,$.4&.5&0&Light Bricks Workspace"&-%67%&8(.+%3&)4&9.23&)34.&3:;8%(,&039&2)11&<.&
.7%(&%0*$&.3%&)3&9%40)1"&
#$%&'()*+,&-.(+,/0*%&$0,&=&);/.(4034&2.(+&0(%0,>&2)4$&?@A&4$%&#./&'0(&2)4$&B&9),4)3*4&,%*4).3,>&4$%&
C%54&#./&'0(&D%*4).3&E@0F>&4$%&G)991%&#./&'0(&D%*4).3&E@8F>&039&4$%&H)<$4&#./&'0(&D%*4).3&?@IA"&#$%&
C%54&I.1:;3&?JA&$0,&J&9)55%(%34&0//%0(03*%,>&4$%&,40390(9&.3%&K&0,&,$.23&8%1.2&K&2$%3&L.:&./%3&
4$%& 2.(+,/0*%>& 039& 2$%3& 03& %1%;%34& ),& $)<$1)<$4%9& )3& 4$%& ()<$4& *.1:;3& ?D4(:*4:(%& M03%1F& )4& 2)11&
*$03<%&4.&4$%&,/%*)5)*&,%44)3<,&.5&4$04&%1%;%34>&?BA&4$%&I0370,&2)4$&0&5%2&)*.3,&2$%(%&011&4$%&7),:01&
2%8,)4%&8:)19)3<&2)11&40+%&/10*%>&039&10,41L&?=A&4$%&H)<$4&I.1:;3&?D4(:*4:(%&M03%1F>&2$)*$&,$.2,&03&
.7%(7)%2&.5&4$%&,4(:*4:(%&.5&4$%&)39)7)9:01&/.,4>&/0<%>&/.,4&.(&4%;/104%"&
C%4N,&,40(4&2)4$&4$%&4./&80(O&
J
B
@0
@8
@*
=
The workspace in light mode
7.1. The Left Top Bar Section
&
!"@"@" '()*+,&C.<.&
#$%&'()*+,&1.<.&*03&$07%&.3%&.5&5)7%&9)55%(%34&5:3*4).3,&
4.& 8%& /(.<(0;;%9& )3& 4$%& P0,$8.0(9"& Q.:& *03& *$..,%&
8%42%%3& M(%7)%2>& P0,$8.0(9>& R.;%/0<%>& S9)4& )3&
-.(9M(%,,>&.(&3.&1)3+&04&011"&&T1)3+U&
!"@"J" D404%,&?M,%:9.&I10,,%,F&&
R%(%& .3%& *03& 0//1L& 9)55%(%34& ,4L1%,& 4.& 03& %1%;%34&
9%/%39)3<& .3& )4,& ,404%& E,:*$& 0,& .3& ;.:,%V :hoverV.(&
0V:visitedV1)3+F&7)0&/,%:9.K*10,,%,"&
Q.:&*03&01,.&0//1L&9)55%(%34&,4L1%,&4.&,/%*)5)*&/0(4,&.5&03&
%1%;%34& 7)0& /,%:9.K%1%;%34,"& D:*$& 0,& 4$%V ::first-
letterV.(&4$%V::first-line"&
#$),&1)3+&4.&0&7)9%.&.5&W&;)3:4%,&,$.2,&$.2&4.&2.(+&2)4$&/,%:9.K*10,,%,&X&/,%:9.K%1%;%34,&)3&
'()*+,&039&$.2&L.:&*03&099&/,%:9.&+%L2.(9,&L.:(,%15&4.&'()*+,"&
!"@"B" R%1/&
I1)*+)3<&.3&4$%&$%1/&)*.3&2)11&8()3<&L.:&,4(0)<$4&4.&4$%&
.31)3%&'()*+,&Y*09%;L&2$%(%&L.:&*03&*$..,%&5(.;&0&
3:;8%(&.5&9)55%(%34&4./)*,&.(&:,%&4$%&,%0(*$&5)%19"&
!"@"=" M0<%,&
Z(.;& 2)4$)3& L.:(& 7),:01& /0<%&8:)19%(>& L.:& *03& ,2)4*$&
8%42%%3&9)55%(%34&/0<%,&8L&:,)3<&4$),&8:44.3"&Q.:&*03&
*$..,%& 8%42%%3& M.,4,>& M0<%,>& 0,& 2%11& 0,& I:,4.;&
M.,4,"& [4& ;0+%,& 1)5%& %0,)%("& Q.:& *03& 01,.& ,40(4& 0& 3%2&
/0<%"&
!"@"\" R),4.(L]H%7),).3,&
I$..,%& 8%42%%3& R),4.(L& .(& H%7),).3,"& & [5& L.:& 9.364&
2034& 03L& L.:& *03& ,2)4*$& 4$%& 0:4.;04)*& ,07)3<& .55&
$%(%"&
!"@"^" D%44)3<,&
-$%3&L.:&*1)*+&.3&D%44)3<,&04&4$%&,40(4&.5&L.:(&%_/1.(04).3>&4$%(%&0(%&J&*$.)*%,>&Theme Styles&.(&
Page Settings. -$%3&L.:&,40(4&8:)19)3<&.(&./%3)3<&0&Template&4$),&2)11&8%*.;%&03&./4).3&0,&2%11"&[3&
#$%;%& D4L1%,>& L.:& *03& *(%04%& L.:(& .23& 4$%;%& 039& *(%04%& <1.801& ,%44)3<,& .(& );/.(4& 03& %_),4)3<&
4$%;%&5(.;&0&9)55%(%34&,)4%"&
7.1. 6.1 . Theme Styles
Y9`:,4&4$%&9%50:14&,4L1)3<&.5&L.:(&,)4%&10L.:4>&%1%;%34,>&
*.1.(,>&1)3+,>&4L/.<(0/$L>&%4*"&4$(.:<$.:4&L.:(&,)4%&7)0&
#$%;%& D4L1%,& 5.(& 0& *.3,),4%34& 039& %0,LK4.K;0)340)3&
9%,)<3&,L,4%;&5.(&L.:(&%34)(%&,)4%"&
Y**%,,& 4$%& #$%;%& D4L1%,& 8L& *1)*+)3<&
4$%VD%44)3<,VE<%0(F&)*.3&)3&4$%&8:)19%(&4..180("&#$%3&<.&
4.V#$%;%&D4L1%,"&#$%&);0<%&.3&4$%&()<$4&,$.2,&2$04&)4&
1..+,& 1)+%& 2$%3& L.:& *$..,%& #$%;%& D4L1%,"& #.& *(%04%&
L.:(& .23&
#$%;%&
D4L1%>&*1)*+&4$%VI(%04%VE/1:,F&)*.3&039&/(.7)9%&0&30;%"&
Y//1L& 03L& ,4L1)3<& *$03<%,& L.:& 2034& )3& 4$%& *.34(.1&
<(.:/,& 8%1.2& E1)+%& ,%44)3<& L.:(& 5.34,& :39%(&
a#L/.<(0/$Lb>&%4*"F"&D%%&4$%&4081%&)3&I$0/4%(&!"@"W&8%1.2&
4.&5)39&03&.7%(7)%2&.5&011&,%44)3<,"&
Video about Theme Styles
Element Name
Sub Elements
Settings
Screenshot
IcdP[#[cdD&
D%4&*.39)4).3E,F&4.&
0//1L&4$%&,%1%*4%9&
4$%;%&,4L1%&4.&L.:(&
%34)(%&2%8,)4%&.(&
(%,4()*4&)4&4.&*%(40)3&
0(%0,"
Include / exclude
eSdSHYC
LIGHTBOX!
Site layout!
Site background!
Lightbox height!
Lightbox width!
Lightbox background!
Lightbox close color!
Lightbox close size!
I.1.(,
Primary color!
Secondary color!
Light color!
Dark color!
Muted color!
Border color!
Info color!
Success color!
Warning color!
Danger color!
I.34%34
Margin
Element Name
Sub Elements
Settings
Screenshot
C)3+,
Typography!
Background!
Border!
Padding!
Text decoration!
Transition!
Element Name
Sub Elements
Settings
Screenshot
#L/.<(0/$L
HEADING H1!
HEADING H2!
HEADING H3!
HEADING H4!
HEADING H5!
HEADING H6!
MISCELLANEOUS!
BLOCKQUOTE
HTML: font-size!
Body!
All headings!
Typography!
Margin!
Typography!
Margin!
Typography!
Margin!
Typography!
Margin!
Typography!
Margin!
Typography!
Margin!
Hero!
Lead!
Focus outline!
Blockquote margin!
Blockquote padding!
Blockquote border!
Blockquote
typography!
Element Name
Sub Elements
Settings
Screenshot
M./:/
Padding
Close on
Content
Popup Limit
Align main axis
Align cross axis
Z-index
Scroll (body)
Backdrop (Click)
ESC (Key)
None
Padding
Width
Height
Background
Border
Box shadow
Limit how often this
popup appears.
Per page load
Per session
Across sessions
S1%;%34K,%*4).3
Display!
Width!
Min. width!
Max. width!
Margin!
Padding!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K
I.340)3%(
Display!
Width!
Min. width!
Max. width!
Margin!
Padding
S1%;%34K'1.*+
Display!
Width!
Min. width!
Max. width!
Margin!
Padding
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KP)7
Display!
Width!
Min. width!
Max. width!
Margin!
Padding
S1%;%34K
Y**.(9).3
Icon!
Icon expanded!
Title typography!
Subtitle typography!
Content typography!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KY1%(4
INFO!
SUCCESS!
WARNING!
DANGER!
MUTED
Padding!
Typography!
Text color!
Background color!
Border!
Text color!
Background color!
Border!
Text color!
Background color!
Border!
Text color!
Background color!
Border!
Text color!
Background color
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K':44.3
STYLE - DEFAULT!
STYLE - PRIMARY!
STYLE - SECONDARY!
STYLE - LIGHT!
STYLE - DARK!
SIZE - SMALL!
SIZE - MEDIUM!
SIZE - LARGE!
SIZE - EXTRA LARGE
Typography!
Background color!
Border!
Box shadow!
Transition!
Typography!
Background color!
Border!
Box shadow!
Typography!
Background color!
Border!
Box shadow!
Typography!
Background color!
Border!
Box shadow!
Typography!
Background color!
Border!
Box shadow!
Padding!
Typography!
Padding!
Typography!
Padding!
Typography!
Padding!
Typography!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K
I0(.:,%1
ARROWS!
PREV ARROW!
NEXT ARROW!
DOTS
Height!
Width!
Background!
Border!
Typography!
Prev arrow!
Top!
Right!
Bottom!
Left!
Next arrow!
Top!
Right!
Bottom!
Left!
Height!
Width!
Top!
Right!
Bottom!
Left!
Border!
Color!
Active color!
Margin!
S1%;%34KI.9%
I.9%&#$%;%
Github (light)!
Tomorrow (light)!
Tomorrow Night (dark)!
Tranquil Heart (dark)!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K
I.:34%(
Typography
S1%;%34KP)7)9%(
Height!
Color
S1%;%34KZ.(;
FIELDS!
SUBMIT BUTTON
Label typography!
Placeholder
typography!
Field typography!
Field background!
Field border!
Field margin!
Field padding!
Padding!
Typography!
Background color!
Border!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K
R%09)3<
D%/0(04.(
None!
Right!
Left!
Both
S1%;%34K[*.3&
'._
CONTENT
Icon align!
Icon margin!
Icon padding!
Icon size!
Icon height!
Icon width!
Icon color!
Icon background!
Icon border!
Icon box shadow!
Heading typography!
Body typography!
Content background!
Content border!
Content box shadow!
Content margin!
Content padding!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KD.*)01&
[*.3,
Margin!
Padding!
Background color!
Border!
Typography
S1%;%34K[;0<%
Icon!
Icon background color!
Icon border!
Icon box shadow!
Icon height!
Icon width!
Caption!
S1%;%34K[;0<%&
e011%(L
Layout!
Grid!
Image ratio!
Square!
Columns!
Image height!
Spacing!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KC),4
LIST ITEM!
HIGHLIGHT!
CONTENT!
TITLE!
META!
DESCRIPTION!
SEPARATOR
Margin!
Padding!
Odd background!
Even background!
Border!
Auto width!
Block!
Padding!
Background!
Border!
Typography!
Padding!
Background!
Border!
Text color!
Margin!
Typography!
Margin!
Typography!
Typography!
Disable!
Style!
Default!
Width!
Height!
Color!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34Kd07&
G%3:
#cM&CSfSC&GSdg&
Dg'&GSdg&
Margin!
Padding!
Alignment!
Typography!
Active typography!
Active border!
Padding!
Typography!
Active typography!
Background!
Border!
Box shadow!
S1%;%34KM.,4&
I.34%34
Typography
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KM.,4&
G%40
Padding!
Gap!
Background!
Border!
Typography!
S1%;%34KM.,4&
d07)<04).3
Title typography!
Label typography!
Image border!
S1%;%34KH%104%9&
M.,4,
Content background!
Content padding
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KM.,4&
#0_.3.;L
Margin!
Padding!
Background!
Border!
Typography!
S1%;%34KM.,4&
#)41%
Typography
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KM()*)3<&
#081%,
HEADER!
PRICING!
FEATURES!
FOOTER!
BUTTON!
ADDITIONAL INFO!
RIBBON
Table background!
Padding!
Background color!
Border!
Title typography!
Subtitle typography!
Padding!
Background color!
Border!
Price typography!
Meta typography!
Original price!
typography!
Padding!
Icon color!
Background color!
Border!
Features typography!
Padding!
Background color!
Border!
Background color!
Border!
Typography!
Typography!
Text color!
Background color!
S1%;%34K
M(.<(%,,&'0(
Height!
Bar color!
Bar background color!
Bar border!
Label typography!
Percentage
typography!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KD%0(*$
Input background!
Input border!
Icon background!
Icon typography!
Icon width!
S1%;%34KD)9%80(
Widget margin!
Widget title!
Content typography!
Search background
color!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34KD1)9%(
TITLE!
CONTENT!
BUTTON!
BACKGROUND!
ARROWS!
DOTS
Title margin!
Title typography!
Content width!
Content background!
Content margin!
Content padding!
Content align
horizontal!
Content align vertical!
Content text align!
Content typography!
Style!
Size!
Background!
Border!
Box shadow!
Button typography!
CSS Filters!
Top!
Right!
Bottom!
Left!
Show arrows!
Show dots!
S1%;%34KDfe
Height!
Width!
Stroke width!
Stroke color!
Fill!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K#08,
TITLE!
CONTENT!
Padding!
Typography!
Background!
Border!
Active typography!
Active background!
Active border!
Padding!
Text align!
Default!
Text color!
Background color!
Border!
Element Name
Sub Elements
Settings
Screenshot
S1%;%34K#%0;&
;%;8%(,
MEMBER!
IMAGE!
CONTENT!
Gap!
Border!
Box shadow!
Title typography!
Subtitle typography!
Description
typography!
Image border!
Padding!
Text align!
Default!
Background!
S1%;%34K
#%,4);.3)01,
Image align!
Default!
Image size!
Image border!
Testimonial!
Name!
Title!
S1%;%34K#%_4
Typography
Element Name
Sub Elements
Settings
Screenshot
S1%;%34Kf)9%.
Box shadow!
Overlay!
Icon!
Enable custom video
player!
S1%;%34K
-.(9M(%,,
Widget title border!
Widget title
typography!
Content typography!
Post title typography!
Post meta typography!
S1%;%34K
-..I.;;%(*%&
':44.3
Padding!
Background color!
Border!
Typography!
Element Name
Sub Elements
Settings
Screenshot
!"@"@h" M0<%&D%44)3<,&
M0<%& D%44)3<,& 011.2& L.:& 4.& *:,4.;)i%& 4$%& ;0(+:/& 039&
,4L1)3<& .5& 4$%& /0<%& L.:& 0(%& *:((%341L& %9)4)3<"& #$%L& 0(%&
1.*04%9&2)4$)3&4$%&D%44)3<,&/03%1&E<%0(&)*.3&)3&4$%&8:)19%(&
4..180(F"&
g,%&4$%VH%,%4V)*.3&)3&4$%&/03%1&$%09%(&4.&*1%0(&011&/0<%&
,%44)3<,&2)4$&0&,)3<1%&*1)*+"&
#$%(%&0(%&9)55%(%34&+)39,&.5&M0<%&D%44)3<,&.(<03)i%9&)34.&
4$%&5.11.2)3<&<(.:/,&2$)*$&L.:&5)39&)3&4$%&4081%&8%1.2j&
Generalj&P),081%& 4$%& $%09%(& 039&5..4%(&.5& 03& )39)7)9:01&
/0<%"&
One Page Navigationj& D%44)3<,& 4.& *(%04%& 0& .3%K/0<%&
,)4%"&
SEOk&M%(;01)3+>&4)41%>&039&;%409040"&
Social Mediaj& #.& *:,4.;)i%& $.2& 4$),& /0<%& 1..+,& 2$%3&
,$0(%9&.3&,.*)01&;%9)0"&
Custom Codej&I:,4.;&IDD&X&l070D*()/4&5.(&:,%&.3&4$%&*:((%34&/0<%"&
7.1.10.1 . One Page Navigation
If enabled, Bricks adds a vertical dot menu to the right edge of the page in a fixed position
with each dot linking to the root-level element in the page.
Page Settings
Extra
Fields
Screenshot
e%3%(01
LIGHTBOX!
Disable header!
Disable footer!
Site layout!
Site background!
Margin!
Space between header and
footer.!
Lightbox height!
Lightbox width!
Lightbox background!
Lightbox close color!
Lightbox close size!
c3%&M0<%&d07)<04).3
ACTIVE
Show navigation!
Spacing!
Height!
Width!
Color!
Border!
Box shadow!
Height!
Width!
Color!
Border!
Box shadow!
DSc
Permalink!
Title (= Post title)!
Meta description!
Meta keywords!
Meta robots!
D.*)01&G%9)0
#)41%&
P%,*()/4).3&
[;0<%&
P040&?PA&
S_4%(301&gHC
Page Settings
Extra
Fields
Screenshot
7.1.11 . (+) sign = The Elements
I1)*+&.3&4$%&$%09)3<&4.&<.&4.&4$%&*$0/4%(&*.340)3)3<&011&%1%;%34,"&
I:,4.;&I.9%
Custom CSS!
Header scripts!
Body (header) scripts!
Body (footer) scripts!
Page Settings
Extra
Fields
Screenshot
7.2. The Middle Top Bar Section
-$04& 1..+,& <(%04& .3&0& 10(<%& 9%,+4./& ,*(%%3& :,:011L& 3%%9,& ,.;%& (%5)3%;%34& 5.(& ,;011%(& 9%7)*%,"&
#$),& 4L/)*011L& )37.17%,& 0//1L)3<& ,;011%(& 5.34& ,)i%,>& ;0(<)3,>& /099)3<,>& *.1:;3& 2)94$],40*+)3<>& .(&
$)9)3<&*%(40)3&%1%;%34,&.3&,;011%(&9%7)*%,"&#$%(%5.(%>&;.,4&.5&4$%&)*.3,&K&5(.;&P%,+4./&4.&G.8)1%&K&
0(%& :,%9& 5.(& (%,/.3,)7%& %9)4)3<"& I$..,)3<& .3%& );;%9)04%1L& ,$.2,& 4$%& (%/(%,%3404).3& .5& 4$04&
,/%*)5)*&9%7)*%"&f%(L&$039L&2$%3&L.:&2034&4.&*$%*+&039&09`:,4&L.:(&9%,)<3&.3&9)55%(%34&9%7)*%,"&
Reload Canvas: no more need to reload your browser.
Desktop
Table t
Mobile Landscape
Mobile
Width: shows you the actually width you can see
Height
Scale percentage
7. 3 . The Right Top Bar Section
&
Undo / Redo. These two arrows speak for themselves. You can undo or redo
any action you made.
Structure Hide/Show. When you need a bigger workspace use this button to
hide or unhide the complete right structure panel.
Templates. One click on this icon brings you straight to the templates section
to view and/or import one of your own or a public template.
Publish. When a page is not published yet, one click publishes your page
and this button disappears from sight.
Edit in WordPress.
Preview.
Save draft.
7.4 . The Right Column
#$%&()<$4K$039&*.1:;3>&01,.&*011%9&4$%&D4(:*4:(%&
M03%1>&<)7%,&03&.7%(7)%2&.5&011&%1%;%34,&:,%9&.3&
4$%&I0370,]-.(+,/0*%"&
[4& /(.7)9%,& 0& *1%0(& 7)%2& .5& 4$%& .(9%(& 039&
$)%(0(*$L& .5& 4$%& :,%9& %1%;%34,"& c3%& *03& 01,.&
9(0<&039&9(./&%0*$&%1%;%34&4.&0&9)55%(%34&,/.4&)3&
4$%&*.1:;3"&
Y4&4$%&4./&()<$4>&L.:&,%%&4$%&)*.3&5.(&0&4(0,$*03>&
.3%&*1)*+&.3&)4&2)11&0,+&5.(&*.35)(;04).3&aY(%&L.:&
,:(%m&I1)*+)3<&0<0)3&2)11&9%1%4%&011&
%1%;%34,&)3&4$%&/03%1"&&
#$%& )*.3& 2)4$& 4$%& 42.& 0((.2,& /.)34)3<& 04& %0*$&
.4$%(& K& 3%_4& 4.& 4$%& 4(0,$*03& K& 2)11& *.110/,%& 4$%&
2$.1%&,4(:*4:(%>&054%(&2$)*$&4$%&0((.2,&2)11&/.)34&
)3&.//.,)4%&9)(%*4).3,&4.&,$.2&4$04&)4&*03&8%&%_/039%9&0<0)3"&
-$%3&[&$.7%(&.7%(&.3%&.5&4$%&%1%;%34,&42.&3%2&)*.3,&8%*.;%&7),)81%>&4$%&5)(,4&.3%&8%)3<&nP:/1)*04%6&
039&4$%&.4$%(&.3%&0&4(0,$*03"&Q%,>&'()*+,&/(.7)9%&;03L&20L,&4.&<%4&()9&.5&,4:55"&R.2%7%(>&4$),&.3%&
9.%,&3.4&0,+&aY(%&L.:&,:(%mb&Y&*1)*+&.3&4$),&4(0,$*03&;%03,&4$),&%1%;%34&),&<.3%o&
Q.:&*03& 01,.&,%%& 4$04&42.&.5&4$%&%1%;%34,&?I.340)3%(&039& '1.*+&2)4$&4$%& .(03<%&*)(*1%F&$07%&03&
n%4%(3016&,)<3&8%$)39&4$%;"&#$),&,)<3&;%03,&4$04&4$%,%&%1%;%34,&0(%&;0+)3<&:,%&.5&0&1../"&G.(%&.3&
4$04O&&&&&
[ in this link ]