Header 1 In Container
This Container is stretched full-width and has an Inside Container Max Width set to 1110px. This Container also uses two CSS classes (under the Advanced tab on the right side Settings bar) to apply top and bottom spacing to it:
rh-padding-top-xl rh-padding-bottom-md
Header 3
laksdmlaskdmlaksdmlaskmdalskdnaklsndkajs dajs djahsd kasjd alsjd alsdk aksdj aksd askhd aksd aks dkjas dkaj sdkajs dkahsdjahsd ajsd lajs dlajs dalsd
Header 3
akjsd akhsd asg daksjd lasjd lasjd akshd asljd lasd akshd akhsd saj daljsd skh jsf sdnbf dns fndsb fndsf
Header 3
jaks dajh dasjd lasj dkahs daljs dlajs dlajs dksah dlas dlaskd lasjd aksd kasd ajls dakjsd kahsd amns da,ns dmas dajbs dmas dma sdbas d
Header One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu risus nisi. Aliquam ultricies orci ut dictum bibendum. Sed pulvinar euismod metus et pellentesque. Suspendisse finibus ornare eros, non elementum tortor posuere et. Proin interdum eu tellus quis posuere. Fusce diam magna, dignissim pulvinar suscipit congue, malesuada ut lacus. Phasellus sit amet ligula et felis viverra consectetur quis a ex. Cras dignissim massa nisl, eu semper nisl vehicula nec. Vivamus aliquet, mauris non tempus eleifend, nunc velit auctor odio, in efficitur ipsum lacus sed ante.
Header Number Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a posuere erat. Ut hendrerit sapien at nisi ultricies venenatis. Cras vitae sollicitudin magna. Morbi ut euismod arcu. Vivamus erat sem, sagittis et sollicitudin nec, rutrum et est. Maecenas nec bibendum nunc, eu consectetur ante. Nunc eros augue, tincidunt at ex eget, efficitur venenatis ipsum. Fusce iaculis turpis nec viverra ullamcorper. Aliquam sit amet ipsum sed turpis fringilla rhoncus non sit amet dui. Etiam dolor nisi, blandit nec mauris quis, efficitur tincidunt dui. Quisque ac dolor sed nibh bibendum sodales. Mauris nec orci eget felis rhoncus semper. Aenean a turpis arcu. Morbi eu nulla at diam aliquet lacinia sed et nisi. Nam ut vehicula neque.
Suspendisse potenti. Sed cursus ut neque eu dapibus. Nulla at ligula tortor. Morbi venenatis ante sed quam condimentum posuere eget a orci. Morbi fringilla magna quis orci faucibus, sit amet auctor ex consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque molestie ipsum elit, nec ultricies turpis condimentum eu. Quisque porta condimentum nisi, eget auctor eros pulvinar et. Proin vel laoreet erat. Phasellus finibus elementum consequat. Mauris semper lorem vel ligula pharetra, vel porttitor dolor tincidunt. Vestibulum id fermentum ex. Aliquam eu porta lorem, a eleifend diam. In placerat orci non ante cursus iaculis. Curabitur condimentum ante facilisis, fringilla magna a, laoreet leo.
Header Three
ja sodlja sdjas dlkas dlajs dkas d,asmd aks dasjda,sd aljsd masd laskd laksd alsd kajsd aeif wlrejeg ljg er,mgf sd dasidpweif lksjd fmsnd fjahsd kajd askd amnsd aosd balsjd aksjd
ja sodlja sdjas dlkas dlajs dasjd aljsd ka sdkas d,asmd aks dasjd laskd laksd alsd kajsd aeif wlrejeg ljg er,mgf sd dasidpweif lksjd fmsnd fjahsd kajd askd amnsd aosd balsjd aksjd
ja soajs djabs dba sdv vdlja sdjas dlkas dlajs dkas d,asmd aks dasjd laskd laksd alsd kajsd aeif wlrejeg ljg er,mgf sd dasidpweif lksjd fmsnd fjahsd kajd askd amnsd aosd balsjd aksjd
Header Two: Buttons
H2: Image Blocks
Below you will see a Columns block set with three columns. Each column, there is an Image block with the caption filled out below it.
Another Container
This Container is stretched to full-width, has a background image (opacity set to 20%) and a background color set to white. A CSS class has been applied to the Container (rh-padding-lg) to add large padding around all four edges of the Container.
Bolding Headers
By default, the “font weight” of all headers is set to “normal” because the majority of the headers on the website are normal-weighted. However, you can highlight either the whole header (or part of the header) to make a certain segment of it bold.
Header Two
Header Three
Header Four
Recreating the Image Columns
For each of the images, we manually selected the thumbnail size from the image settings panel (right side of Gutenberg once you select the image) to make sure that all the icons are 150px wide). Each of the H3 blocks uses one of the “border-bottom” CSS classes:
- rh-border-bottom-primary
- rh-border-bottom-secondary
- rh-border-bottom-tertiary
Dog Friendly
ajsd ahsd as dlajsd kash dkajls dlaksd lajsd kas djas dmans dajsd lajs dkahsd ja sdasdma sdmah sdjsah d
We Have Wifi
ajsd ahsd as dlajsd kash dkajls dlaksd lajsd kas djas dmans dajsd lajs dkahsd ja sdasdma sdmah sdjsah d
Fantastic Service
ajsd ahsd as dlajsd kash dkajls dlaksd lajsd kas djas dmans dajsd lajs dkahsd ja sdasdma sdmah sdjsah d
Blockquote Styling
There is also some default “quote” styling using the Quote block in Gutenberg. The content of this happens to be relevant to the border-bottom’s in the above segment.
The question you might ask is: why are the underlines above going full-width? In our custom code, every header used two tags (a containing tag and the header tag itself). With this two-tag setup, we can make a unique border color that lined up with the edge of the text. However, in all page building softwares, the goal is to have the cleanest code possible, and therefore only the header tag is output. We can’t make a uniquely-colored underline line up with the edge of the text without using two tags
-> Classic City Team
Header Fonts
By default, the font-family across all headers is your core, thin font. We added a CSS class that can be attached to any header to apply your body copy font to the header.
rh-font-body has been added to each of the header samples below
Header Two
Header Three
Header Four
Image Scrolling Columns
Create a Columns block with as many columns as you’d like. Attached to the Columns block (note: not a single column, but the Columns block), attach the CSS class: rh-home-columns. This CSS class will style each of the below items:
- Ultimate Blocks Image Slider: Colors the arrows blue (and has hover), static height to the Slider container so all sliders appear equal in height no matter the setting
- Header 6: Tiny, all caps, translucent, body font
- Header 2: Large, bold, thin font
- Paragraph: Slightly larger than regular body copy + smaller bottom-margins
- Bolded Paragraph: Slightly larger text than Paragraph and blue
Homeplan
Atlanta
6 Bedrooms
4 Bathrooms
2,598 sq ft
$2,459/mo
Homeplan
Boston
8 Bedrooms
3 Bathrooms
3,498 sq ft
$3,287/mo
Homeplan
Columbia
2 Bedrooms
7 Bathrooms
1,184 sq ft
$850/mo
Homeplan
Concord
9 Bedrooms
1 Bathroom
4,298 sq ft
$3,938/mo
Property Hero Section [WIP]
Create a Container block and stretch it full width. Under the Container options, set the Max Inside Width to 1100px. Upload a background image. Add the CSS class rh-property-hero and you can now use the following blocks inside the container:
- Header 1: This should be the title of your property
- Header 2: This will be the subtext for the property
- Buttons: No stylistic change here, just make sure you add them
