{"title":"Phlox Basic Configurations","id":36710,"link":"https:\/\/env.averta.net\/en\/step\/phlox-basic-configurations\/","parent":[54490,35028],"content":"

Phlox lets you easily change the settings on the customizer<\/a>.?In this article, you can find the basic options to get started with Phlox. These options help you to control different parts of your website, such as navigations, logo, footer and much more. So follow these very first steps to start customizing your website:<\/p>\n

    \n
  1. Go to your WordPress Admin Panel<\/strong><\/li>\n
  2. Click the?Appearance > Customize<\/strong><\/li>\n
  3. Navigate?General?<\/strong>on the customizer<\/li>\n<\/ol>\n
    \n

    \"general-layout-settings\"Step 1 – Set the General Layout<\/h3>\n

    The first thing you can to do is setting up the overall layout of your website in?General Layout<\/strong>.<\/p>\n

    <\/div>\n

    Website Layout<\/h4>\n

    Here you can choose whether to show your website in a boxed area or in a fullwidth layout<\/p>\n

    \n
    \"full-layout\"<\/a>

    Full Layout<\/p><\/div>\n<\/div>

    \n
    \"boxed-layout-2\"<\/a>

    Boxed Layout<\/p><\/div>\n<\/div><\/div>\n

    By choosing the boxed layout, you are able to add a custom background to your website including setting custom color or specifying background image. For more information about the background image options, check this article<\/a>\n

    Site Max Width<\/h4>\n

    This option allows you to choose a maximum width size of your website main wrapper.<\/p>\n

    \n

    Step 2?- Add a?Logo<\/h3>\n

    \"\"<\/a>In this section you can upload your website logo:<\/p>\n

      \n
    1. Go to your WordPress Admin Panel<\/strong><\/li>\n
    2. Click on the Appearance<\/b> on the Dashboard<\/b><\/li>\n
    3. Then?go to the Customize > Site Identity<\/b><\/li>\n
    4. Click?Select Logo<\/strong>?button?to upload your logo<\/li>\n<\/ol>\n

      In addition, you can have another logo that appears on the sticky mode of the header.<\/p>\n

      If you want, there is an option set title and tagline for your logo. Also, you are able to change logo’s dimensions.<\/p>\n

      Besides logo, your site can has an icon which you can see in browser tab, bookmark bar, and in the WordPress mobile apps.<\/p>\n

      Note: <\/strong>It is recommended to upload your logo in a large format size to let Phlox choose the best size relative to screen type.<\/p>\n

       <\/p>\n

      \n

      Step 3?- Customize the Header Layout<\/h3>\n

      To customize your websites’ header section, you are able to choose an appropriate layout from the defined layout variations in this section:<\/p>\n

        \n
      1. Go to your WordPress Admin Panel<\/strong><\/li>\n
      2. Click on the <\/span>Appearance<\/b> on the <\/span>Dashboard<\/b><\/li>\n
      3. Then click on the <\/span>Customize<\/b><\/li>\n
      4. Go to Header > Header Section<\/strong><\/li>\n<\/ol>\n

        Header Layouts<\/h4>\n

        There are six available layouts to choose. All of them contain logo and menu, just the location of them are different.<\/p>\n\n\n\n\n\n\n\n\n\n
        LAYOUT<\/th>\nPREVIEW<\/th>\n<\/tr>\n
        \n

        Logo Left – Menu Right<\/p>\n

        <\/td>\n

        		\"logo-left-menu-right\"<\/td>\n<\/tr>\n
        \n

        Logo Left – Burger Right<\/p>\n

        \"header-layout2\"<\/td>\n

        		\"logo-left-burger-right\"<\/td>\n<\/tr>\n
        \n

        Logo Right – Menu Left<\/p>\n

        \"header-layout3\"<\/td>\n

        		\"logo-right-menu-left\"<\/td>\n<\/tr>\n
        \n

        Logo Right – Burger Left<\/p>\n

        \"header-layout4\"<\/td>\n

        		\"logo-right-burger-left\"<\/td>\n<\/tr>\n
        \n

        Logo and Menu Middle<\/p>\n

        <\/td>\n

        		\"logo-mid-menu-mid\"<\/td>\n<\/tr>\n
        \n

        Logo and Menu Left<\/p>\n

        \"header-layout6\"<\/td>\n

        		\"logo-left-menu-left\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        Note: <\/strong>To see how the other options in function, check out this article<\/a>.<\/p>\n

        \"top-header-bar\"Besides the header, you can add top header bar to your website, it adds a narrow space above the header section, which can contain many useful elements like, secondary menu, website social links, etc.<\/p>\n

        To add top header bar, follow below steps:<\/p>\n

          \n
        1. Go to your WordPress Admin Panel<\/strong><\/span><\/li>\n
        2. Click on the?Appearance<\/b> on the Dashboard<\/b><\/li>\n
        3. Click on the?Customize<\/strong><\/li>\n
        4. Go to the Header > Top Header Bar<\/strong><\/li>\n
        5. Then switch on Display Top Header Bar<\/strong><\/li>\n<\/ol>\n

          After switching on the option, you can choose the layout.<\/p>\n

          Note that some elements in the?top header bar, including secondary menu, socials, shopping?cart and website language button, only appear if they enabled.<\/p>\n

          For more information about top header bar, read this article<\/a>.<\/p>\n

           <\/p>\n

          \n

          \"manage-menu-locations\"Step 4?-?Manage Menu Locations<\/h3>\n

          The menu can be located in different places of your website. Before managing the location, first, you need to have defined a?menu for the website.?

          Recommended: <\/strong>To know how to?create a menu and be familiar with menu structures,?you can find useful information here<\/a>.<\/p>\n

          To?set a location for each menu:<\/p>\n

            \n
          1. Go to your WordPress Admin Panel<\/strong><\/span><\/li>\n
          2. Click on the Appearance<\/b> on the Dashboard<\/b><\/li>\n
          3. Click?on the?Menus<\/b><\/li>\n
          4. Click on the?Manage Locations?<\/strong>next to the?Edit Menus?<\/strong>tab<\/li>\n
          5. Now you can edit your old menus or use new menu<\/li>\n<\/ol>\n

            Menu Locations<\/h4>\n

            There are three different menu locations in Phlox:<\/p>\n