The next images shows the settings of the home page from the dashboard:

And the next video shows how to use the footer widgets and widgets used on home page on our demo:

The following article will explain the process of applying the new Lovely V1 styling to your site, including the (navigation menu) header type, the slideshows, widgets and the typography options.

Background Color

You will notice that the new styling applied here includes a background color. We use the following color code – #fcf7f4, which can be added in Flothemes > Styling, and “Set Background Color”:

Once added save your styling settings.

Navigation Menu

In Flothemes > Header Settings, we are using a new available option, number 5:

As well as selecting header option 5 you can see we have added header padding, 30px for both top and bottom, you can adjust this according to your own tastes, and remember to save the settings.

Slideshow

With LVY version 3.0 we have now added a new slideshow type, allowing for a combination of Portrait and Landscape images. Previously the slideshow in LVY only worked with Landscape images.

In Flothemes > Slider Settings, under “Select Main Slideshow Type” choose the third option:

We have also added some spacing around the slideshow images of 3px, again this can be adjusted in the settings.

To apply the slideshow to a page (if not already done so) go to your page, and choose the following page settings:

You will notice that we have enabled the Sidebar above the Footer for this page, which leads up to the next section, the widgets being displayed on the page. Also remember to save pages anytime you make changes.

Widgets

To display widgets below the footer area, you can add widgets to the Footer Full Width area in Appearance > Widgets in your WordPress backend.

For our theme we use 2 widget areas shown below:

See the following video on using the widgets below the page:

Custom CSS

To complete the styling, the following custom css should be added in Flothemes > custom css:

.flo-text-widget .widget-title {
text-transform: uppercase;
}

.flo-text-widget .sub-title {
color: #b8adab;
}

.flo-image-block .image-title {
text-transform: uppercase;
}

Typography

The final area, and what may be the most important section for many users, is typography. We do not provide the fonts with the theme as they are commercial fonts, you can purchase the fonts and upload them to the custom fonts section if you require, or alternatively use Free Google font options. The following font sheet explains the type options, however we will go into further depth showing the exact settings used:

You can see the full typography options here:

General Font – Courier Regular

H1-H5 – Bauer Bodoni

Navigation – Bauer Bodoni

Mobile Menu Label – Bauer Bodoni

Header Text – Bauer Bodoni

Meta Data – Bauer Bodoni

Slide Title – Playfair Display Regular

Slide Description – Monsieur La Doulaise

Footer Text – Courier Regular

Site Text – Bauer Bodoni

Flo Images Widget Title – Vanity Light

Flo Images Widget Button – Brandon Grotesque Regular

Flo Text Widget Title – Bauer Bodoni

Flo Text Widget Sub Title – Monsieur La Doulaise

Thumb View Hover Title – Bauer Bodoni

Thumb View Hover Category – Brandon Grotesque Regular

Widget List – Bauer Bodoni

Buttons/Label – Brandon Grotesque Regular

Text Logo – Monsieur La Doulaise

The following article will explain the process of applying the new Lovely V2 styling to your site, including the (navigation menu) header type, the slideshows, widgets and the typography options.

Navigation Menu

In Flothemes > Header Settings, we are using a new available option, number 6:

As well as selecting header option 6 you can see we have added header padding, 0px for top and 30px for the bottom, you can adjust this according to your own tastes, and remember to save the settings.

Slideshow

In Flothemes > Slider Settings, under “Select Main Slideshow Type” choose the first option:

To apply the slideshow to a page (if not already done so) go to your page, and choose the following page settings:

You will notice that we have enabled the Sidebar above the Footer for this page, which leads up to the next section, the widgets being displayed on the page. Also remember to save pages anytime you make changes.

The text below the main slider is added to the page content like a normal page, you can add or remove text here if required, although its recommended to have some good copy on the home page for SEO purposes.

Widgets

To display widgets below the footer area, you can add widgets to the Footer Full Width area in Appearance > Widgets in your WordPress backend.

For our theme we use 2 widget areas shown below:

The first widget area is Footer Full Width Area 2, this area is shown on all pages. If you want to show it only on specific pages, add it to the area below. We use the Lovely Flo Text Widget, with a title and text, this is shown at the bottom of our demo site:

The second Widget area is the Footer Full Width Area for Pages, and we use the Lovely: Flo Images widget, here you can add one, to multiple blocks depending on how many items you wish to show, for the demo we use 3 blocks in this widget. See the video below showing the use of the Lovely: Flo Images widget.

Adding Custom Css

To complete the styling of the widget areas, the following custom css should be added in Flothemes > custom css:

.flo-text-widget .four.columns {
width: 100%;
text-align: center;
}

.flo-text-widget .widget-title, footer#footer-container .flo-text-widget .widget-title {
text-transform: uppercase;
}

Typography

The final area, and what may be the most important section for many users, is typography. We do not provide the fonts with the theme as they are commercial fonts, you can purchase the fonts and upload them to the custom fonts section if you require, or alternatively use Free Google font options. The following font sheet explains the type options, however we will go into further depth showing the exact settings used:

You can see the full typography options here:

General Font – Gotham Medium

H1 – H5 – Bauer Bodoni

Navigation – Gotham Medium

Mobile Menu Label – Gotham Medium

Header Text – Adobe Caslon Italic

Meta Data – Adobe Caslon Italic

Slide Title – Bauer Bodoni

Slide Description – Adobe Caslon Italic

Footer Text – Gotham Light

Site Text – Bauer Bodoni

Flo Images Widget Title – Adobe Caslon Italic

Flo Images Widget Button – Gotham Medium

Flo Text Widget Title – Bauer Bodoni

Flo Text Widget Sub Title – Pinyon Script

Thumb View Hover Title – Adobe Caslon Italic

Thumb View Hover Category – Gotham Medium

Widget List – Adobe Caslon Italic

Buttons/Label – Gotham Medium

Text Logo – Bauer Bodoni