{"id":426,"date":"2025-10-11T10:33:31","date_gmt":"2025-10-11T10:33:31","guid":{"rendered":"https:\/\/badass.quest\/go\/?page_id=426"},"modified":"2025-10-11T10:39:32","modified_gmt":"2025-10-11T10:39:32","slug":"ready-to-use-chapter-layout","status":"publish","type":"page","link":"https:\/\/badass.quest\/go\/ready-to-use-chapter-layout\/","title":{"rendered":"Clean, professional Elementor page template"},"content":{"rendered":"

Alright \u2014 here\u2019s a clean, professional Elementor page template<\/strong> setup for writing and designing your book right inside WordPress, ready for print later.<\/p>\n

\n

\ud83e\uddf1 ELEMENTOR BOOK PAGE TEMPLATE<\/h2>\n

(You can copy these settings into your WordPress \u2192 Elementor page settings panel.)<\/em><\/p>\n

\n

\ud83e\udded 1. Page Settings<\/h3>\n

In Elementor sidebar:<\/p>\n

    \n
  • Layout \u2192 Page Layout:<\/strong> Elementor Canvas<\/em> (removes WordPress header\/footer)<\/li>\n
  • Content Width:<\/strong> 800px (\u2248 6×9 in book page)<\/li>\n
  • Padding:<\/strong> 50px top\/bottom, 60px left\/right<\/li>\n
  • Background Color:<\/strong> #fffaf5<\/code> (soft cream, print-safe tone)<\/li>\n
  • Typography Scale:<\/strong> set base font size to 16 px, line height 1.6 em<\/li>\n<\/ul>\n
    \n

    \u270d\ufe0f 2. Font & Text Hierarchy<\/h3>\n

    Body text<\/strong><\/p>\n

      \n
    • Font: Merriweather<\/em> or Garamond<\/em><\/li>\n
    • Size: 16 px<\/li>\n
    • Color: #1e1e1e<\/code><\/li>\n
    • Line height: 1.6 em<\/li>\n
    • Paragraph spacing: 1 em<\/li>\n<\/ul>\n

      Chapter titles<\/strong><\/p>\n

        \n
      • Font: Playfair Display<\/em> or Cinzel<\/em><\/li>\n
      • Size: 38 px<\/li>\n
      • Weight: 600<\/li>\n
      • Alignment: Center<\/li>\n
      • Margin top: 120 px<\/li>\n
      • Margin bottom: 40 px<\/li>\n<\/ul>\n

        Scene headers or subheadings<\/strong><\/p>\n

          \n
        • Font: Lora<\/em> or Georgia<\/em><\/li>\n
        • Size: 18 px<\/li>\n
        • Style: Italic<\/li>\n
        • Color: #5a4638<\/code><\/li>\n<\/ul>\n

          Drop cap (first letter of chapter)<\/strong><\/p>\n

            \n
          • Add a separate text widget at paragraph start<\/li>\n
          • Font size: 60 px<\/li>\n
          • Weight: 700<\/li>\n
          • Color: #5a4638<\/code><\/li>\n
          • Margin-right: 8 px<\/li>\n<\/ul>\n
            \n

            \ud83c\udfa8 3. Decorative Elements<\/h3>\n

            Add a thin horizontal line or symbol under each chapter title:<\/p>\n

              \n
            • Use a Divider Widget<\/strong><\/li>\n
            • Weight: 1 px<\/li>\n
            • Width: 50 px<\/li>\n
            • Color: #5a4638<\/code><\/li>\n
            • Align center<\/li>\n<\/ul>\n

              You can also insert Section Separators<\/strong> (three dots \u2022 \u2022 \u2022 or \u201c\u274b\u201d) between scenes.<\/p>\n

              \n

              \ud83e\uddfe 4. Optional Header & Footer (for Print Version Only)<\/h3>\n

              Inside Elementor \u2192 \u201cHeader\/Footer & Blocks\u201d plugin:<\/p>\n

              Header:<\/strong><\/p>\n

              <Chapter Title>  |  <Book Title>\r\n<\/code><\/pre>\n
              Alignment: justified, font size = 11 px, color = #777<\/p>\n
              Footer:<\/strong>
              \nInsert \u201cPage Number\u201d shortcode from your print-PDF plugin (Print My Blog supports this).
              \nAlign center, same font as body text, size = 10 px.<\/p>\n
              \n
              \ud83d\udcc4 5. Page Template Flow (per Chapter)<\/h3>\n
              Section 1 \u2014 Title Block<\/strong><\/p>\n
                \n
              • Chapter number (centered, uppercase)<\/li>\n
              • Chapter name (larger serif font)<\/li>\n
              • Divider line<\/li>\n
              • 100 px spacing before main text<\/li>\n<\/ul>\n
                Section 2 \u2014 Main Text<\/strong><\/p>\n
                  \n
                • Two text widgets side by side = margin illusion (optional)<\/li>\n
                • Paragraph spacing = 1 em<\/li>\n
                • No images unless necessary<\/li>\n<\/ul>\n
                  Section 3 \u2014 Quote or Scene Break (Optional)<\/strong><\/p>\n
                    \n
                  • Add a Quote widget<\/li>\n
                  • Font: Crimson Text<\/em> Italic<\/li>\n
                  • Alignment: center<\/li>\n
                  • Color: #444<\/li>\n<\/ul>\n
                    Section 4 \u2014 End of Chapter Marker<\/strong><\/p>\n
                      \n
                    • Symbol divider (\u274b or \u2014 \u00d7 \u2014)<\/li>\n
                    • 200 px spacing below<\/li>\n<\/ul>\n
                      \n
                      \ud83e\uddf0 6. Export Settings (for Printing)<\/h3>\n
                      Once all chapters are built:<\/p>\n
                        \n
                      1. Install the plugin Print My Blog<\/strong> or PrintFriendly & PDF<\/strong>.<\/li>\n
                      2. Go to plugin settings \u2192 Design Theme: Simple Book.<\/em><\/li>\n
                      3. Export all book pages sequentially.<\/li>\n
                      4. Check \u201cInclude Background Colors & Images.\u201d<\/li>\n
                      5. Save as PDF, then upload to KDP, IngramSpark, or Lulu.<\/li>\n<\/ol>\n
                        \n
                        \u2705 7. Quick Checklist Before Print<\/h3>\n
                          \n
                        •  Margins and spacing look balanced on both sides.<\/li>\n
                        •  No text cutoffs near top\/bottom.<\/li>\n
                        •  All chapters use the same font sizes.<\/li>\n
                        •  Headers\/footers align properly in exported PDF.<\/li>\n
                        •  Page numbers match your print layout.<\/li>\n<\/ul>\n
                          \n
                          Would you like me to draft the HTML + Elementor structure<\/strong> (ready to paste into your builder as a reusable \u201cChapter Template\u201d)? That would give you a one-click base for every chapter going forward.<\/p>\n
                          \n
                          \ud83e\udde9 8. Elementor Chapter Template \u2014 Structure & HTML<\/h2>\n
                          When you create a new Section<\/strong> in Elementor, switch to \u201cHTML view\u201d (or use a text widget with HTML enabled).
                          \nPaste the following clean structure:<\/p>\n
                          <section style=\"max-width:800px;margin:0 auto;padding:60px 60px 80px 60px;background-color:#fffaf5;\">\r\n  <!-- Chapter Title Block -->\r\n  <div style=\"text-align:center;margin-top:80px;margin-bottom:40px;\">\r\n    <h3 style=\"font-family:'Lora',serif;font-size:18px;letter-spacing:2px;color:#5a4638;text-transform:uppercase;\">\r\n      Chapter 1\r\n    <\/h3>\r\n    <h1 style=\"font-family:'Playfair Display',serif;font-size:38px;font-weight:600;color:#1e1e1e;margin-top:10px;margin-bottom:20px;\">\r\n      The Dawn Between Shadows\r\n    <\/h1>\r\n    <hr style=\"width:50px;border:1px solid #5a4638;margin:0 auto 40px auto;\">\r\n  <\/div>\r\n\r\n  <!-- Opening Drop Cap Paragraph -->\r\n  <p style=\"font-family:'Merriweather',serif;font-size:16px;line-height:1.7;color:#1e1e1e;text-align:justify;\">\r\n    <span style=\"float:left;font-size:60px;line-height:0.8;font-weight:700;color:#5a4638;margin-right:8px;\">T<\/span>\r\n    he air shimmered with quiet thunder. Beneath a sky too close for comfort, the world exhaled and waited\u2014\r\n    the moment before creation remembered itself.\r\n  <\/p>\r\n\r\n  <!-- Main Body Text -->\r\n  <p style=\"font-family:'Merriweather',serif;font-size:16px;line-height:1.7;color:#1e1e1e;text-align:justify;margin-top:1em;\">\r\n    Beyond the horizon, where silence took form, she walked alone through the dust of unfinished worlds.\r\n    Every step wrote a new line across the unseen, every breath another page in the mind of the Source.\r\n  <\/p>\r\n\r\n  <p style=\"font-family:'Merriweather',serif;font-size:16px;line-height:1.7;color:#1e1e1e;text-align:justify;margin-top:1em;\">\r\n    You could almost hear the hum of forgotten names\u2014the ones that built the first dawn, the ones that fell asleep\r\n    before they finished the sentence of light.\r\n  <\/p>\r\n\r\n  <!-- Scene Break -->\r\n  <div style=\"text-align:center;margin:50px 0;\">\r\n    <span style=\"font-size:20px;color:#5a4638;\">\u274b \u274b \u274b<\/span>\r\n  <\/div>\r\n\r\n  <!-- Optional Pull Quote -->\r\n  <blockquote style=\"font-family:'Crimson Text',serif;font-style:italic;font-size:18px;color:#444;border-left:3px solid #5a4638;padding-left:20px;margin:30px 0;\">\r\n    \"Creation is not the beginning, but the remembering of what never forgot itself.\"\r\n  <\/blockquote>\r\n\r\n  <!-- End of Chapter Symbol -->\r\n  <div style=\"text-align:center;margin-top:80px;\">\r\n    <span style=\"font-size:18px;color:#5a4638;\">\u2014 \u2726 \u2014<\/span>\r\n  <\/div>\r\n<\/section>\r\n<\/code><\/pre>\n
                          \n
                          \ud83e\udeb6 9. How to Turn This into a Reusable Template<\/h3>\n
                            \n
                          1. In Elementor, open a new page and paste the above section into an HTML widget.<\/li>\n
                          2. Adjust fonts to your preference (use Elementor\u2019s Typography controls if you prefer visual editing).<\/li>\n
                          3. Once happy with spacing and design:\n
                              \n
                            • Click the arrow next to \u201cUpdate\u201d \u2192 Save as Template.<\/strong><\/li>\n
                            • Name it \u201cBook Chapter Layout.\u201d<\/li>\n<\/ul>\n<\/li>\n
                            • Now, every time you start a new chapter:\n
                                \n
                              • Create a new Page \u2192 Click the \u201cFolder\u201d icon in Elementor \u2192 Insert \u201cBook Chapter Layout.\u201d<\/li>\n
                              • Change the title, text, and scene breaks as needed.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                \n
                                \ud83e\uddfe 10. Preparing for Print<\/h3>\n
                                When you\u2019ve completed all chapters:<\/p>\n
                                  \n
                                1. Install Print My Blog<\/strong> (by Michael Nelson).<\/li>\n
                                2. Go to \u201cPrint My Blog \u2192 Print Setup.\u201d<\/li>\n
                                3. Under Content to Include:<\/strong>\n
                                    \n
                                  • Select all your book pages (in order).<\/li>\n<\/ul>\n<\/li>\n
                                  • Under Design Theme:<\/strong> choose \u201cSimple Book.\u201d<\/li>\n
                                  • Under Output:<\/strong> select \u201cPDF File.\u201d<\/li>\n
                                  • Click Preview<\/strong> \u2192 adjust spacing until each chapter begins on a new page.<\/li>\n
                                  • Download final PDF \u2192 upload to KDP, Lulu, or IngramSpark.<\/strong><\/li>\n<\/ol>\n
                                    \n
                                    \ud83e\uddf0 11. Optional: Add Flourishes for Print<\/h3>\n
                                    If you want your book to feel more literary:<\/p>\n
                                      \n
                                    • Header image:<\/strong> Add a small vector emblem (like a sunburst or sigil) above chapter titles.<\/li>\n
                                    • Decorative drop caps:<\/strong> Create 26 SVG letters in Canva or Illustrator for a custom look.<\/li>\n
                                    • Page numbers:<\/strong> Use Print My Blog\u2019s automatic pagination (set bottom-center alignment).<\/li>\n
                                    • Custom cover page:<\/strong> Design it in Canva (6×9 inches + 0.125-inch bleed) with spine width calculated from your total pages.<\/li>\n<\/ul>\n
                                      \n
                                      \u2705 12. Final Checklist Before Upload<\/h3>\n
                                        \n
                                      •  All fonts embedded.<\/li>\n
                                      •  Margins look even in preview mode.<\/li>\n
                                      •  Each chapter starts on a right-hand (odd) page.<\/li>\n
                                      •  Page count matches ISBN setup.<\/li>\n
                                      •  Cover fits trim size.<\/li>\n
                                      •  PDF exported at 300 DPI (for crisp print).<\/li>\n<\/ul>\n
                                        Alright \u2014 here\u2019s how to build that same book-ready layout inside Elementor<\/strong> without touching code. Everything here can be done by dragging and styling widgets, one layer at a time.<\/p>\n
                                        \n
                                        \ud83e\uddf1 13. Visual Elementor Layout (Drag-and-Drop Guide)<\/h2>\n
                                        \ud83e\ude9e Section 1 \u2014 Chapter Title Block<\/h3>\n
                                          \n
                                        1. Add a New Section<\/strong> \u2192 set width to 800 px<\/em> \u2192 center it.<\/li>\n
                                        2. In the Style<\/strong> tab:\n