{"id":1622341,"date":"2020-05-13T14:16:30","date_gmt":"2020-05-13T14:16:30","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1622341"},"modified":"2021-05-07T09:30:40","modified_gmt":"2021-05-07T09:30:40","slug":"creating-a-hero-section","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/creating-a-hero-section\/","title":{"rendered":"Creating a Hero Section"},"content":{"rendered":"\n

What to Know Before Getting Started<\/h2>\n\n\n\n

Designing a Hero Section requires some planning. Here are some guidelines to keep in mind. <\/p>\n\n\n\n

Align the text to the background<\/h3>\n\n\n\n

Make sure that you\u2019re aligning text with the background image in mind. This means checking that your text is still visible and readable if your image has various colors. Please note that what might look good on desktop might not fit on mobile screens, so always check before publishing. <\/p>\n\n\n\n

In the left example below, the text \u201cC&B Properties – Real Estate Site\u201d  is hardly visible because of the house in the background image. In the correct example, it looks much better and more professional. <\/p>\n\n\n\n

\n
\n

A Hero Section with text and content aligned in the center<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

A Hero Section with text and content aligned on the left<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Maintain useful contrast<\/h3>\n\n\n\n

Maintain good contrast between your text and background. If your background image is light, then use dark text and vice versa. <\/p>\n\n\n\n

In the example below, the correct example is easy to read and stands apart from the background image. <\/p>\n\n\n\n

\n
\n

A Hero Section with hardly visible text<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

A Hero Section with white text<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Consider using an Overlay Color<\/h3>\n\n\n\n

You should use an overlay if you can\u2019t create a good enough contrast from your text and background. This applies also if your background image is complex or \u201cbusy\u201d.  You can apply an Overlay Color by selecting your Container and expanding the Background panel on the right sidebar. When picking the color, make sure it complements your site palette.<\/p>\n\n\n\n

\n
\n

A Hero Section with difficult-to-read text<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

A Hero Section with a dark overlay and bright text<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Remember to use appropriate spacing<\/h3>\n\n\n\n

You must use white space (negative space) properly. Always apply a reasonable amount of space between content blocks so that they are easy to read and look professional. In the examples below, you can see that on the right image the text is easier to understand than on the left.<\/p>\n\n\n\n

\n
\n

A Hero Section with minimal spacing between content elements<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

A Hero Section with appropriate spacing between content elements<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Style Call-To-Action buttons appropriately<\/h3>\n\n\n\n

If your hero section has two or more CTA buttons, make sure their style is different according to priority. Simply make the less important button\u2019s background a less noticeable color or even transparent such as in the example below.<\/p>\n\n\n\n

\n
\n

An example of a Hero Section with buttons using the same design<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

An example of a Hero Section with buttons using different designs<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

With this information all in mind, you\u2019re ready to get started with creating and styling a Hero Section. <\/p>\n\n\n\n

Creating and Styling a Hero Section<\/h2>\n\n\n\n

Before creating your Hero Section, you should disable the Page Title and, if you have, your sidebar as well. If you are not sure where to do this, check your theme documentation or contact them.<\/p>\n\n\n\n

Once you are done, follow the examples below to learn how to design an appealing Hero Section.<\/p>\n\n\n\n

Add a Full width Section<\/h3>\n\n\n\n
  1. Insert the Container <\/strong>block.<\/li>
  2. In the right sidebar, expand the Background <\/strong>section and set the Type <\/strong>option to Image<\/strong>. Set the image you want to use here. <\/li>
  3. Expand the Advanced<\/strong> panel at the bottom of the right sidebar. Under Block Alignment<\/strong>, select the option Full width<\/strong>. <\/li>
  4. Expand the Inner Content<\/strong> panel and set the Max-Width<\/strong> to 900 px<\/strong> or less. This prevents the text from becoming too wide, which decreases readability. <\/li>
  5. After this, expand the Additional Styles<\/strong> panel and enable the Margin \/ Padding<\/strong> option. Set the top and bottom padding<\/strong> to 80px<\/strong> or more.<\/li><\/ol>\n\n\n\n

    The Background panel provides plenty of customization options, such as being able to add an Overlay Color<\/strong> or enable the Fixed Position<\/strong> option for a parallax effect. <\/p>\n\n\n

    \n
    \"\"<\/a>
    Setting the Overlay Color to semi-transparent black for the Hero Section<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    Add the Main Message<\/h3>\n\n\n\n
    1. Insert the Toolset Heading<\/strong> block inside the Container to display the main message.<\/li>
    2. Select the Heading<\/strong> block from block navigation. In the right sidebar, expand the Typography<\/strong> section and adjust the font styles for your heading.<\/li><\/ol>\n\n\n\n

      The Font Size must be big enough that users understand it immediately. Don\u2019t forget that the contrast between the text and background image must also be good enough that your text does not disappear into the image.<\/p>\n\n\n\n

      Add the Hero Section text<\/h3>\n\n\n\n
      1. Insert the Toolset Fields and Text <\/strong>block to insert the main text.<\/li>
      2. In the right sidebar, expand the Typography<\/strong> section for the text to adjust the font styles.<\/li><\/ol>\n\n\n\n

        It\u2019s best that you use a normal or medium Font Size for your Hero Section text, around 16 to 20. Like the Header text, make sure the font color doesn\u2019t clash with the background. <\/p>\n\n\n\n

        Add a Call to Action button<\/h3>\n\n\n\n
        1. Insert the Toolset Button<\/strong> block to add a call to action.<\/li>
        2. Edit the Button text and link by clicking on the Button<\/strong> block in block navigation.<\/li>
        3. In the right sidebar, expand the Typography<\/strong> section to adjust the font styles for the text. Make sure the Button font size is between 16 and 20, and remember to make sure your text color is visible enough. <\/li>
        4. Expand the Style Settings<\/strong> section to adjust the Border Radius, Colors, Hover, and other options. Make sure to use the same style as you do for all other site buttons. <\/li><\/ol>\n\n\n\n

          Sometimes the button color can be different, but it depends on where you place it. Otherwise, your button color should be the same as your site\u2019s accent color for consistency. <\/p>\n\n\n\n

          After setting up the Button, we add in a Hover state. This applies whenever a cursor hovers over the button, showing users that it is clickable. Since our button is an off-white color, we use our accent color green as the hover color. <\/p>\n\n\n

          \n
          \"\"<\/figure>\n<\/div>","protected":false},"author":84277,"featured_media":1706241,"template":"","related-lesson":[8417],"class_list":["post-1622341","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-designing"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1622341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/84277"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1622341\/revisions"}],"predecessor-version":[{"id":2047601,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1622341\/revisions\/2047601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/1706241"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=1622341"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=1622341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}