Front Page Layout and Content

You can customize the layout and content of the front page header by accessing the Header Settings -> Front Page Header Content section in the Customizer.

Here you can set options related to the header layout, type of media displayed in the header, typography, header buttons, etc.

The section is split in five sets of parameters:

  • Main content - here you can customize the type of media to be displayed, as well as the header layout
  • Subtitle 2 (motto) - this is a subtitle that is displayed above the main title - it can be used as a motto
  • Title - here you can customize the appearance of the main title
  • Subtitle - here you can customize the appearance of the subtitle
  • Header buttons - here you can customize the appearance of the header buttons

Main Content

In this section you can configure what type of media you want to show in the header and you can also configure the header layout.

There are 7 types of layout that you can choose from the content layout menu:

  • text on center
  • text on right
  • text on left
  • text with media on left
  • text with media on right
  • text with media above
  • text with media below

The content spacing parameters control the spacing above and below the header content.

The default values are set in % so they will be proportional to the screen size but you can also set the in pixels (px) if you like.

Clicking the Text box settings button will open a panel where you can customize the text alignment and the width of the text column.

If you choose a layout with media and text, a " Media Type" option will appear. There are 4 types of media available:

  • image - this will show an image
  • video - this will show a video 
  • video popup button - this will show an icon button that will open a video in a lightbox popup
  • overlapped images - this will display multiple images that overlap to obtain a nice visual effect 

The " Media box settings" button will also appear - clicking it will open a panel where you can choose the image / video and customize the media appearance (width, alignment, shadow, etc).

Subtitle 2 (Motto)

Show subtitle 2 - check this checkbox if you want to display the motto text

Subtitle style - this button will open a panel where you can customize the typography and color of the subtitle as well as the top and bottom spacing

Title 

Show title - uncheck this checkbox if you don't want to display the main title

Title style - this button will open a panel where you can customize the typography and color of the main title as well as the top and bottom spacing

Also, in the "title style" panel you can enable and customize the "text animation" option. This can be used to show several words that change periodically using a typewriter effect. To enable this option just check the "Enable text animation" checkbox.

The words that you want to change need to be put between curly braces like in the screenshot below:

The alternative versions of the text need to be places in the "Alternative text" textarea (one per row) like in the screenshot below

So in this example the text "something cool" will alternate with "awesome websites" and "amazing web presences".

Subtitle

Show subtitle  - check this checkbox if you want to display the subtitle text

Subtitle style - this button will open a panel where you can customize the typography and color of the subtitle as well as the top and bottom spacing

Header buttons

In this section you can customize the appearance of the header buttons. There are 4 options available:

  • No buttons - this will show no buttons at all
  • Main buttons - this will show 2 buttons (this is the default)
  • Custom buttons - this options allows you to add more that 2 buttons - basically, you have a list of buttons and you can add as many as you like
  • App store buttons - this will display Apple App Store and Google Play Store buttons

To change the text and links for the buttons you just have to click the button you want to edit and a popup window will open, allowing you to customize the button. There you can also change the button color, text color, icon, etc

Still need help? Contact Us Contact Us