ParagraphPro

Paragraph Pro

Settings

Main Stack Settings

Structured Data

  • Enable: (button) Enable Structured Data Schemas
    • Default: [false]
  • Schema Property: (input) The name of the schema property
    • Enable: When Enable is set to true
    • Default: description

Paragraph Pro - Edit Mode

  • Hide Child Stacks: (button-2) Turn this off to add or edit an effect. It is ON by DEFAULT to save space in the edit mode window.
    • Default: [true, false]
  • Info: Select SHOW to add or edit child effect stacks. It is off be default to save space.

Paragraph Pro - Styles

  • Style: (select) Choose to use theme text colors, custom colors or Foundation Site Styles Swatches
    • Default: Default (Theme or Foundation Site Styles)
    • Possible Values:
      • Default (Theme or Foundation Site Styles)
      • Custom
      • Custom Links Only
      • Alternate (Foundation Only)
      • Swatch 1 (Foundation Only)
      • Swatch 2 (Foundation Only)
      • Swatch 3 (Foundation Only)
      • Swatch 4 (Foundation Only)
      • Swatch 5 (Foundation Only)
      • Swatch 6 (Foundation Only)
  • Text: (color) The color of the text
    • Enable: When Style is set to custom
    • Allows Opacity: true
  • Links: (color-2) The color of the links
    • Enable: When Style is set to custom
    • Allows Opacity: true
  • Links: (color-2) The color of the links
    • Enable: When Style is set to customLinks
    • Allows Opacity: true
  • Align: (select) Text alignment
    • Default: Left
    • Possible Values:
      • Left
      • Right
      • Center
      • Justify
  • Remove Bottom Margin?: (checkbox) Remove the bottom margin that is added to paragraphs by many themes
    • Default: false
  • Align Center on Mobile?: (checkbox) When selected it will center the text for mobile
    • Default: false

Paragraph Pro - Type Setting

  • Sizing: (select) Adjust he size and spacing of the characters
    • Default: Default (Theme)
    • Possible Values:
      • Default (Theme)
      • Custom - Basic Responsive
      • Custom - Advanced Responsive
      • Typeset Vault 1
      • Typeset Vault 2
      • Typeset Vault 3
      • Typeset Vault 4
      • Typeset Vault 5
      • Typeset Vault 6
  • Size: (number-2) Set custom font size to be used on desktop and small screens (less than 640px wide).
    • Enable: When Sizing is set to custom
    • Default: [1, 0.95]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • Font Size: (number-4) Responsive breakpoint controlled font sizing
    • Enable: When Sizing is set to custom advanced
    • Default: [0.9, 1, 1, 1]
    • Min Value: 0
    • Max Value: 6
  • Font Size Units: (select) The units of measurement for the font size
    • Enable: When Sizing is set to custom advanced
    • Default: rem
    • Possible Values:
      • Pixels - px: Font size specified in pixels
      • rem: Font size specified in rem's
      • em: Font size specified in em's
      • %: Font size specified as a percentage of the root font size.
  • Breakpoints: (number-2) The minimum sizes at which the medium and large font sizes are used.
    • Enable: When Sizing is set to custom-adv
    • Default: [480, 640]
    • Min Value: 300
    • Max Value: 9000
  • XL Breakpoint: (number) The minimum width at which XL sized text is displayed
    • Enable: When Sizing is set to custom-adv
    • Default: 2000
    • Min Value: 900
    • Max Value: 9000
  • Breakpoint Units: (select) The units of measurement for the font size breakpoints
    • Enable: When Sizing is set to custom-adv
    • Default: Pixels - px
    • Possible Values:
      • Pixels - px: Breakpoints in pixels
      • Rem: Breakpoints in rem
  • Custom Spacing: (button-3) Apply custom spacing to the line height, letters and words.
    • Default: [false, false, false]
  • Line Height: (number) The line height of the text
    • Enable: When Custom Line Height is set to true
    • Default: 1.6
    • Min Value: 0
    • Max Value: 3
  • Letter Spacing: (slider) Fine tune the spacing between letters.
    • Enable: When Custom Letter Spacing is set to true
    • Default: 0px
    • Min Value: -2px
    • Max Value: 4px
  • Word Spacing: (slider) Fine tune the spacing between words
    • Enable: When Custom Word Spacing is set to true
    • Default: 0px
    • Min Value: -4px
    • Max Value: 6px

Paragraph Pro - Font

  • Show Fonts in Edit?: (checkbox) Shows custom and google fonts in edit mode. !!WARNING!! DOING THIS MAY CAUSE PAGE JUMPS IN EDIT MODE. THIS IS NORMAL AND THIS SETTING SHOULD ONLY BE USED AS A QUICK PREVIEW. DO NOT REPORT THIS AS A BUG TO EITHER YOURHEAD OR BWD. Use this setting with responsibility or you will loose it totally
    • Default: false
  • Font: (select) The font scheme for the Paragraph Pro
    • Default: Theme Default
    • Possible Values:
      • Theme Default
      • Google Font
      • Web Font
      • Font Vault 1
      • Font Vault 2
      • Font Vault 3
      • Font Vault 4
      • Font Vault 5
      • Font Vault 6
      • Font Vault 7
      • Font Vault 8
  • Fallback Font: (select) Use a serif or sans-serif font face if google fornts are not available online.
    • Enable: When Font is set to custom-font g-font
    • Default:
    • Possible Values:
      • Serif
      • Sans-Serif
  • Font Name: (input) Ensure you type the name exactly is it appears on the Google Fonts website including spaces and numbers. Press Enter when done.
    • Enable: When Font is set to custom-font g-font
    • Default:
  • Italic: (checkbox) Font italics faces are not available in all Google Fonts.
    • Enable: When Font is set to custom-font g-font
    • Default: false
  • Font Weight: (select) Font Weight: see Google Fonts Website for weights available for each font.
    • Enable: When Font is set to custom-font g-font
    • Default: 400 (Normal)
    • Possible Values:
      • 200 (Light)
      • 300 (Book)
      • 400 (Normal)
      • 500 (Medium)
      • 600 (Semi Bold)
      • 700 (Bold)
      • 800 (Extra Bold)
  • Load new?: (button-2) Load a new font that has not been used previously on this page? If you have already loaded it elsewhere you should select Existing and only enter the family name that you gave it when you loaded it.
    • Enable: When Font is set to custom-font web-font
    • Default: [true, false]
  • Fallback Font: (select) This is the font that will be used if the selected font cannot be downloaded from the server or is unavailable for any reason
    • Enable: When Font is set to custom-font web-font
    • Default: Sans Serif
    • Possible Values:
      • Sans Serif
      • Serif
  • Base URL: (link) Enter a a base url and file name without an extention. For example http://fonts.myServer.com/muso Paragraph Pro will then add aappropriate extensions as per the file types you select.
    • Enable: When Font is set to custom-font web-font
    • Default:
  • Load Files: (checkbox-4) Select the font file types that will be used
    • Enable: When Font is set to custom-font web-font
    • Default: [true, true, true, false]
  • ****: (checkbox-2) Select the font file types that will be used
    • Enable: When Font is set to custom-font web-font
    • Default: [true, false]
  • font-family Name: (input) You can enter a unique font family name for this font face. This will be the font name that people see if they inspect your site. If you already have loaded a font with Paragraph Pro, Font Styles or Font Pro and know its font-family name, enter it here and select EXISTING in the load new setting. You only ever need to load a font once per page.
    • Enable: When Font is set to custom-font web-font
    • Default:
  • Info: Only load a font once per page. Other stacks can then use the family name. HOVER FOR MORE INFO
  • Add !important?: (button) NOTE: Only use this setting in exteme cases where another Font stack or your theme is over riding the Paragraph Pro settings
    • Enable: When Font is set to custom-font web-font
    • Default: [false]

Paragraph Pro - Column Flow

  • Columnize text?: (button-2) Allow the paragraph text to flow across repsonsive columns in a newspaper style.
    • Default: [false, true]
  • Info: Hover here for tip about enabling columns in edit mode
  • Add divider lines?: (checkbox) Add vertical divider lines between the columns
    • Enable: When Columnize text? is set to true
    • Default: false
  • Width: (number) The width of the divider lines in pixels
    • Enable: When Add divider lines? is set to true
    • Default: 1.5px
    • Min Value: px
    • Max Value: px
  • Divider Color: (color) The color of the divider lines
    • Enable: When Add divider lines? is set to true
    • Allows Opacity: true
  • Small: (number-2) Set the number of columns and the gutter (spacing) over which to flow the text.
    • Enable: When Columnize text? is set to true
    • Default: [1, 0]
    • Min Value:
    • Max Value:
  • Medium: (number-2) Set the number of columns and the gutter (spacing) over which to flow the text.
    • Enable: When Columnize text? is set to true
    • Default: [2, 40]
    • Min Value:
    • Max Value:
  • Large: (number-2) Set the number of columns and the gutter (spacing) over which to flow the text.
    • Enable: When Columnize text? is set to true
    • Default: [3, 40]
    • Min Value:
    • Max Value:
  • Extra Large: (number-2) Set the number of columns and the gutter (spacing) over which to flow the text.
    • Enable: When Columnize text? is set to true
    • Default: [3, 40]
    • Min Value:
    • Max Value:
  • Breakpoints: (number-4) Set the breakpoints at which the column settings will take effect
    • Enable: When Columnize text? is set to true
    • Default: [480, 640, 1000, 2000]
    • Min Value:
    • Max Value:

Paragraph Pro - Vertical Rhythm

  • Adjust Rhythm: (button-2) You can adjust the spacing above and below the paragraph to correct for an inconsistent vertical rhythm on your page. This will affect all Paragraph Pro stacks on the page. If you set it in more than one instance, the last one will take priority according to normal CSS rules. The stack which you have enabled to adjust Rhythm will appear with a light blue outline.
    • Default: [false, true]
  • Spacing: (number-2) Add spacing above or below to compensate for poor vertical rhythm on your page
    • Enable: When Adjust Rhythm is set to true
    • Default: [0, 0]
    • Min Value:
    • Max Value:
  • Units: (select) The units of measurement for the vertical rhythm adjustment
    • Enable: When Adjust Rhythm is set to true
    • Default:
    • Possible Values:
      • rem (Recommended): The vertical rhythm spacing should ideally be specified in REM.
      • px (Not Recommended): Only use pixels if you understand that this is an invalid technique and have a good reason to do so.

Paragraph Pro - Advanced

  • Custom Class: (input) Enter a custom class to which additional CSS can be targetted
    • Default:
Paragraph Pro allows all the control you ever wanted for a text stack in a light weight super efficient package.

Fully responsive with lots of control over the layout on both desktop and smaller screens.

Read More Child Stack Settings

Read More - Setup

  • Initial State: (select) Choose how the paragraph is displayed when the page is loaded
    • Default: Collapsed
    • Possible Values:
      • Collapsed
      • Expanded
  • Collapsed Height: (number) The height in pixels of the paragraph when collapsed. If you are using a 16px base font size (1 rem with a line height of 1.6) then multiples of 16 will ensure only whole lines are shown. So the default value of 96 will show 4 lines
    • Default: 48px
    • Min Value: 0px
    • Max Value: 2000px
  • Reveal Speed: (slider) The speed of the open / close animation
    • Default: 120ms
    • Min Value: 1ms
    • Max Value: 1500ms
  • Style collapsed text color?: (checkbox) You can apply a different color or an opacity to the text in its collapsed state. The expanded state will use the normal theme settings for text.
    • Default: false
  • Collapsed Color: (color) The color of the text when collapsed
    • Enable: When Style collapsed text color? is set to true
    • Allows Opacity: true
  • Remove Text Bottom Margin?: (checkbox) Remove the bottom margin that is added to paragraphs by many themes so that there is no gap. You can also set this in the main settings. This is an additional setting for convenience.
    • Default: false
  • Scroll back to top.: (checkbox) Scroll the page back up to the top of the paragraph. This is useful with very long paragraphs, particularly with text in columns.
    • Default: false
  • Order: (select) Choose how the paragraph is displayed when the page is loaded
    • Default: Icon - Text
    • Possible Values:
      • Icon - Text
      • Text - Icon
  • Show Icon: (input) The font awesone icon for the read more link. You can find the icon codes at http://fontawesome.io/icons/ (make sure that you use the full name starting fa- )
    • Default: fa-chevron-down
  • Show Label: (input) The text that will be shown to reveal the truncated text
    • Default: Read More
  • Hide Icon: (input) The font awesone icon for the read less link. You can find the icon codes at http://fontawesome.io/icons/ (make sure that you use the full name starting fa- )
    • Default: fa-chevron-up
  • Hide Label: (input) The text that will be shown to hide the truncated text
    • Default: Read Less
  • Show Hide Link in edit?: (checkbox) Shows the hide link in edit mode to make stying easier.
    • Default: false
  • Icon Alignment: (select) Choose how the paragraph is displayed when the page is loaded
    • Default:
    • Possible Values:
      • Default
      • Top
      • Middle
      • Bottom
  • Bottom Padding: (number) The space below the readmore link before the next element on page. 1rem will be equivalent to one line of text.
    • Default: 1rem
    • Min Value: 0rem
    • Max Value: 4rem

Read More - Link Styles

  • Align: (select) The alignment of the Read More link, either Left, Center or Right relavtive to the paragraph.
    • Default:
    • Possible Values:
      • Left
      • Center
      • Right
  • Top Spacing: (number) Adjust the space between the label and the paragraph text.
    • Default: 0px
    • Min Value: -100px
    • Max Value: 100px
  • Left Offset: (number) Indent the position of the readmore link from the left of the paragraph.
    • Enable: When Align is set to link-left
    • Default: 0px
    • Min Value: 0px
    • Max Value: 500px
  • Right Offset: (number) Indent the position of the readmore link from the right of the paragraph.
    • Enable: When Align is set to link-right
    • Default: 0px
    • Min Value: 0px
    • Max Value: 500px
  • Link Colors: (select) Choose to use the default theme colors for links or to custom style the readmore link
    • Default:
    • Possible Values:
      • Theme Colors
      • Custom Colors
  • Color: (color-2) The color of the readmore link and the link when hovered
    • Enable: When Link Colors is set to custom
    • Allows Opacity: true

Drop Cap Child Stack Settings

Drop Cap - Responsive

  • Hide Drop Cap: (select) Remove the drop capital effect for smaller screens
    • Default: Never
    • Possible Values:
      • Never
      • Mobile Portrait
      • Mobile Landscape
      • Tablet Portrait
      • Tablet Landscape

Drop Cap - Setup

  • Height: (slider) Approximately how many lines of text the Drop Cap will occupy. This will be affected by any custom sizing you apply in the "Style and Size" Settings
    • Default: 3lines
    • Min Value: 1lines
    • Max Value: 10lines
  • Size and Layout: (select) Customize the appearance of the drop capital
    • Default: Automatic
    • Possible Values:
      • Automatic
      • Custom
  • Info: Use the RapidWeaver Preview mode while adjusting these settings to make setup easier.
  • Font Size: (slider) Over ride that automatic font size of the Drop Cap to fine tune its appearance.
    • Enable: When Size and Layout is set to custom
    • Default: 1rem
    • Min Value: 0rem
    • Max Value: 6rem
  • Top Margin: (slider) This can be negative to pull up the Drop Cap
    • Enable: When Size and Layout is set to custom
    • Default: 0px
    • Min Value: -60px
    • Max Value: 60px
  • Bottom Margin: (slider) This can be negative to get the following text closer to the drop cap
    • Enable: When Size and Layout is set to custom
    • Default: 0px
    • Min Value: -60px
    • Max Value: 60px
  • Top Padding: (slider) The Padding to the right of the Drop Cap
    • Enable: When Size and Layout is set to custom
    • Default: 0px
    • Min Value: 0px
    • Max Value: 30px
  • Bottom Padding: (slider) The Padding to the bottom of the Drop Cap. This is in rem's where 1 rem is approx 1 line of text
    • Enable: When Size and Layout is set to custom
    • Default: 0rem
    • Min Value: 0rem
    • Max Value: 10rem
  • Left Padding: (slider) The padding to the left of the Drop Cap
    • Enable: When Size and Layout is set to custom
    • Default: 0px
    • Min Value: 0px
    • Max Value: 30px
  • Right Padding: (slider) The Padding to the right of the Drop Cap
    • Enable: When Size and Layout is set to custom
    • Default: 3px
    • Min Value: 0px
    • Max Value: 30px
  • Info: Styling Tip: To move a letter down it is best to apply top padding and a negative bottom margin.
  • Bold?: (checkbox) Make the drop cap bold
    • Default: true
  • Capitalize?: (checkbox) Always make the Drop Cap a capital letter
    • Default: true

Drop Cap - Font

  • Font: (select) Customise the appearance of the drop capital
    • Default:
    • Possible Values:
      • Paragraph Font
      • Google Font
      • Font Vault 1
      • Font Vault 2
      • Font Vault 3
      • Font Vault 4
      • Font Vault 5
      • Font Vault 6
      • Font Vault 7
      • Font Vault 8
  • Google Font: (input) Ensure you type the name exactly is it appears on the Google Fonts website including spaces and numbers. Press Enter when done.
    • Enable: When Font is set to custom
    • Default:
  • Fallback Font: (select) Use a serif or sans-serif font face if google fornts are not available online.
    • Enable: When Font is set to custom
    • Default:
    • Possible Values:
      • Serif
      • Sans-Serif
  • Font Weight: (select) Font Weight: see Google Fonts Website for weights available for each font.
    • Enable: When Font is set to custom
    • Default: 400 (Normal)
    • Possible Values:
      • 200 (Light)
      • 300 (Book)
      • 400 (Normal)
      • 500 (Medium)
      • 600 (Semi Bold)
      • 700 (Bold)
      • 800 (Extra Bold)
  • Subset? (Recommended): (checkbox) Only load a single letter from the font for speed. You must specify the letter manually in the CORRECT CASE - i.e. upper or lower case.
    • Default: true
  • First Character: (input) You must specify the first letter of your paragraph manually in the CORRECT CASE - i.e. upper or lower case.
    • Enable: When Subset? (Recommended) is set to true
    • Default:

Drop Cap - Styling

  • Color: (button-2) Choose to color the drop cap differently from the rest of the paragraph
    • Default: [true, false]
  • Custom Color: (color) The color of the drop capital text
    • Enable: When Color is set to true
    • Allows Opacity: true

Drop Cap - Effects

  • Apply an Effect?: (button) You can apply 3D outline or dropshadows to additionally style the drop cap
    • Default: [false]
  • Effect: (select) Customise the appearance of the drop capital
    • Enable: When Apply an Effect? is set to true
    • Default: 3 D
    • Possible Values:
      • 3 D
      • Outline Stroke
      • Drop Shadow
  • Effect: (color) The color of the text effect
    • Enable: When Apply an Effect? is set to true
    • Allows Opacity: true
  • Offset: (slider) The Offset Control is not used with 3D
    • Enable: When Apply an Effect? is set to true
    • Default: 1
    • Min Value: 1
    • Max Value: 10
  • Blur: (slider) The Blur Control is not used with 3D
    • Enable: When Apply an Effect? is set to true
    • Default: 5
    • Min Value: 0
    • Max Value: 10

Floating Image Child Stack Settings

Image - Setup

  • Mobile (Required): (image) The image used for the background on Mobile devices. You must add an image to this setting. This image will be used if you do not specify an image for larger devices.
    • Enable: When Warehouse Image? is set to false
    • Default:
  • URL: (link) The url to the image used for the background on Mobile devices. You must add an image to this setting. This image will be used if you do not specify an image for larger devices.
    • Enable: When Warehouse Image? is set to true
    • Default:
  • Warehouse Image?: (checkbox) Use a warehoused image for the background image
    • Default: false
  • Alt Text: (input) The alternative text that is added to the image
    • Default: AltText
  • Opacity: (number) Set the background Image Opacity
    • Default: 100%
    • Min Value: 0%
    • Max Value: 100%

Image - Padding

  • Padding: (number-4) Detailed padding
    • Enable: When ** is set to true
    • Default: px
    • Min Value: px
    • Max Value: px
  • Padding: (slider) Apply padding to the post articles
    • Enable: When ** is set to false
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px

Image - Position and Size

  • Align: (select) Image aligment relative to the paragraph text
    • Default: Left
    • Possible Values:
      • Left
      • Right
      • Top Center
      • Justify
  • Width: (select) Text alignment
    • Default: Responsive Proportional
    • Possible Values:
      • Responsive Proportional
      • Fixed Width
  • Width: (number) The fixed width of the image in pixels. The height is automatic based on the image size.
    • Enable: When Width is set to fixed-width
    • Default: 200px
    • Min Value: 0px
    • Max Value: 2000px
  • Width: (number) The width of the image as a percentage of the total width of the paragraph
    • Enable: When Width is set to prop-width
    • Default: 20%
    • Min Value: 0%
    • Max Value: 100%
  • Width Limits: (number-2) The minimum and maximum allowable widths for the image in pixels
    • Enable: When Width is set to prop-width
    • Default: [100, 250]px
    • Min Value: px
    • Max Value: px

Image - Responsive

  • Stack above text: (select) Remove the drop capital effect for smaller screens
    • Default: Never
    • Possible Values:
      • Never
      • Mobile Portrait
      • Mobile Landscape
      • Tablet Portrait
      • Tablet Landscape
  • Full width when stacked?: (checkbox) Makes the image the width of its container when stacked. When not enabled, the maximum width specified will be obeyed and the image will be horizontally centered.
    • Default: false
  • Hide: (select) Remove the drop capital effect for smaller screens
    • Default: Never
    • Possible Values:
      • Never
      • Mobile Portrait
      • Mobile Landscape
      • Tablet Portrait
      • Tablet Landscape

Newsletter

Sign up to the BWD newsletter. No more than 10 emails per year.

About

Big White Duck provides free stacks for RapidWeaver.

Your generous donations support running costs and are always gently appreciated.

(C) 2016 Big White Duck Stacks.