{"id":599,"date":"2024-10-23T06:03:41","date_gmt":"2024-10-23T06:03:41","guid":{"rendered":"https:\/\/cozythemesdemos.com\/modestra-sections\/?page_id=599"},"modified":"2024-10-23T11:27:21","modified_gmt":"2024-10-23T11:27:21","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/cozythemesdemos.com\/modestra-sections\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"\n
\n

Style Guide<\/h1>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero’s De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:<\/p>\n\n\n\n

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.<\/p>\n\n\n\n

The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it’s seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum.<\/p>\n<\/div>\n\n\n\n

\n

Blockquote Style Variations:<\/h2>\n\n\n\n
\n

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.<\/p>\n<\/blockquote>\n\n\n\n

\n

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.<\/p>\n<\/blockquote>\n\n\n\n

\n

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.<\/p>\n<\/blockquote>\n\n\n\n

\n

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.<\/p>\n<\/blockquote>\n\n\n\n

\n

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.<\/p>\n<\/blockquote>\n<\/div>\n\n\n\n

\n

H1: Heading One <\/h1>\n\n\n\n

H2: Heading Two <\/h2>\n\n\n\n

H3: Heading Three <\/h3>\n\n\n\n

H4: Heading Four <\/h4>\n\n\n\n

H5: Heading Five <\/h5>\n\n\n\n
H6: Heading Six <\/h6>\n<\/div>\n\n\n\n
\n

Button Style Variations:<\/h2>\n\n\n\n
\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n\n\n\n
Sample Button<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

List Style Variations:<\/h2>\n\n\n\n
\n
\n

Bullet<\/h4>\n\n\n\n
    \n
  • List Item 1<\/li>\n\n\n\n
  • List Item 2<\/li>\n\n\n\n
  • List Item 3<\/li>\n\n\n\n
  • List Item 4<\/li>\n\n\n\n
  • List Item 5<\/li>\n<\/ul>\n<\/div>\n\n\n\n
    \n

    Number<\/h4>\n\n\n\n
      \n
    1. List Item 1<\/li>\n\n\n\n
    2. List Item 2<\/li>\n\n\n\n
    3. List Item 3<\/li>\n\n\n\n
    4. List Item 4<\/li>\n\n\n\n
    5. List Item 5<\/li>\n<\/ol>\n<\/div>\n\n\n\n
      \n

      Hide bullet<\/h4>\n\n\n\n
        \n
      1. List Item 1<\/li>\n\n\n\n
      2. List Item 2<\/li>\n\n\n\n
      3. List Item 3<\/li>\n\n\n\n
      4. List Item 4<\/li>\n\n\n\n
      5. List Item 5<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n
        \n
        \n

        Circle Check Style<\/h4>\n\n\n\n
          \n
        • List Item 1<\/li>\n\n\n\n
        • List Item 2<\/li>\n\n\n\n
        • List Item 3<\/li>\n\n\n\n
        • List Item 4<\/li>\n\n\n\n
        • List Item 5<\/li>\n<\/ul>\n<\/div>\n\n\n\n
          \n

          Circle Check Primary Shade<\/h4>\n\n\n\n
            \n
          • List Item 1<\/li>\n\n\n\n
          • List Item 2<\/li>\n\n\n\n
          • List Item 3<\/li>\n\n\n\n
          • List Item 4<\/li>\n\n\n\n
          • List Item 5<\/li>\n<\/ul>\n<\/div>\n\n\n\n
            \n

            Circle Check White<\/h4>\n\n\n\n
              \n
            • List Item 1<\/li>\n\n\n\n
            • List Item 2<\/li>\n\n\n\n
            • List Item 3<\/li>\n\n\n\n
            • List Item 4<\/li>\n\n\n\n
            • List Item 5<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
              \n

              Image Filter and Duotone Variations:<\/h2>\n\n\n\n
              \n
              \n
              \"\"<\/figure>\n<\/div>\n\n\n\n
              \n
              \"\"<\/figure>\n<\/div>\n\n\n\n
              \n
              \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
              \n
              \n
              \"\"<\/figure>\n<\/div>\n\n\n\n
              \n
              \"\"<\/figure>\n<\/div>\n\n\n\n
              \n
              \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
              \n
              \n
              \"\"<\/figure>\n<\/div>\n\n\n\n
              \n
              \"\"<\/figure>\n<\/div>\n\n\n\n
              \n
              \"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
              \n

              Pre-defined Group Variations:<\/h2>\n\n\n\n
              \n
              \n
              \n

              Group With Gradient Border and “modestra-hover-box” class<\/h4>\n\n\n\n

              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div>\n<\/div>\n\n\n\n

              \n
              \n

              Group With Box Shadow and “modestra-hover-box” class<\/h4>\n\n\n\n

              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

              \n

              Adding On Scroll Animation On Site:<\/h2>\n\n\n\n

              To add animation on scroll effect for any section of block, follow the steps below:<\/p>\n\n\n\n

                \n
              • Go to Admin Dashboard > Appearance > Editor (Or you can access direct from top bar with clicking on \u201cSite Edit\u201d )<\/li>\n\n\n\n
              • Click on any blocks like group, columns or paragraph where you want to add animation effect on scroll.<\/li>\n\n\n\n
              • Click on \u201cAdvanced\u201d at the bottom of the right sidebar panel.<\/li>\n\n\n\n
              • Add the following animation classes on \u201cAdditional CSS Classes field\u201d (type space for multiple class name) <\/li>\n<\/ul>\n\n\n\n
                \n
                \n
                  \n
                • Fade animations:\n
                    \n
                  • modestra-fade<\/li>\n\n\n\n
                  • modestra-fade-up<\/li>\n\n\n\n
                  • modestra-fade-down<\/li>\n\n\n\n
                  • modestra-fade-left<\/li>\n\n\n\n
                  • modestra-fade-right<\/li>\n\n\n\n
                  • modestra-fade-up-right<\/li>\n\n\n\n
                  • modestra-fade-up-left<\/li>\n\n\n\n
                  • modestra-fade-down-right<\/li>\n\n\n\n
                  • modestra-fade-down-left<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • Flip animations:\n
                      \n
                    • modestra-flip-up<\/li>\n\n\n\n
                    • modestra-flip-down<\/li>\n\n\n\n
                    • modestra-flip-left<\/li>\n\n\n\n
                    • modestra-flip-right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • Slide animations:\n
                        \n
                      • modestra-slide-up<\/li>\n\n\n\n
                      • modestra-slide-down<\/li>\n\n\n\n
                      • modestra-slide-left<\/li>\n\n\n\n
                      • modestra-slide-right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                      • Zoom animations:\n
                          \n
                        • modestra-zoom-in<\/li>\n\n\n\n
                        • modestra-zoom-in-up<\/li>\n\n\n\n
                        • modestra-zoom-in-down<\/li>\n\n\n\n
                        • modestra-zoom-in-left<\/li>\n\n\n\n
                        • modestra-zoom-in-right<\/li>\n\n\n\n
                        • modestra-zoom-out<\/li>\n\n\n\n
                        • modestra-zoom-out-up<\/li>\n\n\n\n
                        • modestra-zoom-out-down<\/li>\n\n\n\n
                        • modestra-zoom-out-left<\/li>\n\n\n\n
                        • modestra-zoom-out-right<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                          \n

                          Easing functions:<\/h3>\n\n\n\n
                            \n
                          • modestra-linear<\/li>\n\n\n\n
                          • modestra-ease<\/li>\n\n\n\n
                          • modestra-ease-in<\/li>\n\n\n\n
                          • modestra-ease-out<\/li>\n\n\n\n
                          • modestra-ease-in-out<\/li>\n\n\n\n
                          • modestra-ease-in-back<\/li>\n\n\n\n
                          • modestra-ease-out-back<\/li>\n\n\n\n
                          • modestra-ease-in-out-back<\/li>\n\n\n\n
                          • modestra-ease-in-sine<\/li>\n\n\n\n
                          • modestra-ease-out-sine<\/li>\n\n\n\n
                          • modestra-ease-in-out-sine<\/li>\n\n\n\n
                          • modestra-ease-in-quad<\/li>\n\n\n\n
                          • modestra-ease-out-quad<\/li>\n\n\n\n
                          • modestra-ease-in-out-quad<\/li>\n\n\n\n
                          • modestra-ease-in-cubic<\/li>\n\n\n\n
                          • modestra-ease-out-cubic<\/li>\n\n\n\n
                          • modestra-ease-in-out-cubic<\/li>\n\n\n\n
                          • modestra-ease-in-quart<\/li>\n\n\n\n
                          • modestra-ease-out-quart<\/li>\n\n\n\n
                          • modestra-ease-in-out-quart<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                            Style Guide Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ca_portfolio_gallery_project_year":"","ca_portfolio_gallery_client":"","ca_portfolio_gallery_skills":"","ca_portfolio_gallery_url":"","ca_portfolio_gallery_images":"","footnotes":""},"class_list":["post-599","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/pages\/599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/comments?post=599"}],"version-history":[{"count":0,"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/pages\/599\/revisions"}],"wp:attachment":[{"href":"https:\/\/cozythemesdemos.com\/modestra-sections\/wp-json\/wp\/v2\/media?parent=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}