Changing your blog’s font, colors, and layout
Here, you’ll learn about the design customizations you can make from your DropInBlog admin account.
To adjust the look of your blog’s links, images, and text, go to the Code & Layout (1) page within your admin account.
Right below Blog Code, you’ll find the Advanced (2) section with the expandable Design Customizations (3) section underneath it.
In this section, you can make the following changes:
Change your link color and select whether or not to have links underlined.
Set the font family for your blog’s paragraph and heading text, and adjust the font size.
Enable/disable frames on your post images.
Choose how many posts per row to display.
Set your first post as a full-width featured post.
Change the CTA button background and text color.
The first field in the Design Customizations section is Link Color.
Clicking inside the text box below will open a color palette with a selection of colors you can choose from.
On the right side of the screen, you’ll see how the updated link color will look on your blog when you choose a new link color.
If you want to add a color that’s not shown in the color palette, you can simply enter the hex code of the color you want to use into the text box below Link Color.
Next, Link Underline shows three options: Inherit, Underline, and None.
The first option, Inherit, will take on the underline style of your main website. The second option, Underline, will underline your links, while the third, None, will remove the underlines below the links on your blog.
Below the link customization options, you’ll see three font-related fields: Primary Font Size (1), Primary Font Family (2), and Heading Font Family (3).
If you leave the Inherit option, your blog will attempt to have the same font family and font size as the text on your main website.
You can change these settings by selecting the font size and family from the dropdown menu below each of these three fields.
Apart from choosing a font from the dropdown, you can also select Custom Google Font.
This option gives you access to over 1,000 fonts, which you can view by visiting Google’s font site.
Once you find a font you like, copy the font name, and paste it into the text field below Google Font Name (Primary).
In the image below you can see an example blog page that uses a custom Google Font (Product Sans) for the paragraph text and the system font Roboto for the headings.
As is the case with link color and underline style, the font family and size you’ll choose for your blog depends on your personal preferences.
💡 Did you know that Google Fonts has 1,790 free open-source font families? But the one font family you won’t find available on Google Fonts is Google Sans, which is used only for Google products!
By default, when you add an image to your blog post, it will have a frame around it. The dropdown below Image Frame allows you to turn this border on or off.
Select the On or Off option depending on whether you want the images on your blog to have a frame or not.
These settings will be applied to all the images on your blog, but you can also change the selected option for individual images within each of your posts.
To do that, open up the post you want to edit, find the image in the editor, and, upon clicking on it, select Style → No Border.
To learn more about the available image options, read our Image settings guide.
Below the Image Frame field, you’ll find a dropdown menu that lets you choose the number of Posts per Row you want to display.
As shown in the image below, you can display two, three, or four posts in a row.
Below Posts per Row, you’ll see a checkbox labeled Display the first post as a featured post, which, when checked, will display the first post on your blog as a full-width featured post.
Note, that these two settings are only applicable to the Grid layout.
The last two fields are CTA button background color and CTA button text color.
To change the background and text color, click inside the box under each of these two fields. Doing so will open a color palette with the colors you can select in a single click. Alternatively, you can paste any hex code into this field.
Upon saving your changes, you’ll see the updated button colors applied to existing CTAs on your blog, as well as any new CTA buttons you add to your blog posts. These changes will also be applied to any embedded product CTAs from e-commerce platforms like Shopify, BigCommerce, and Big Cartel.
If you want to make advanced design changes, you can use the Custom CSS section on the Code & Layout page.
When you click on the arrow next to Custom CSS, a code editor will open where you can enter your own CSS. This will be injected after all other CSS, making it easy to overwrite any style in the DropInBlog templates. Every element has a unique class on it making it easy to customize every aspect of your blog.
On the Code & Layout page, you’ll also find three blog layout options to choose from.
The available layouts are Grid, Basic, and Raw.
The first layout you’ll see is Grid, which is the default blog layout. It’s characterized by big titles and featured images and can be set to show two, three, or four posts in a row.
The image below shows how the Grid layout looks on the live site.
Tip: Use the same image dimensions for all featured images to give your blog’s homepage and category pages a uniform look.
Next is the Basic layout, which displays one post per line with the Title and Post Info on the left and the Featured image on the right side.
Lastly, the Raw layout uses HTML without any CSS styling. You should use this layout if you want to add your own CSS.
The image below shows how this layout looks on the live site.
Note that selecting this layout will remove the Design Customizations section from the Code & Layout page.
Upon selecting the desired layout, you don’t have to save your changes as the chosen layout will be automatically applied to your blog.
That’s all for this guide about the customization options on the Code & Layout page.
Happy blogging!
Accessing Design Customization settings
To adjust the look of your blog’s links, images, and text, go to the Code & Layout (1) page within your admin account.
Right below Blog Code, you’ll find the Advanced (2) section with the expandable Design Customizations (3) section underneath it.
In this section, you can make the following changes:
Change your link color and select whether or not to have links underlined.
Set the font family for your blog’s paragraph and heading text, and adjust the font size.
Enable/disable frames on your post images.
Choose how many posts per row to display.
Set your first post as a full-width featured post.
Change the CTA button background and text color.
Changing the link color and the link underline style
The first field in the Design Customizations section is Link Color.
Clicking inside the text box below will open a color palette with a selection of colors you can choose from.
On the right side of the screen, you’ll see how the updated link color will look on your blog when you choose a new link color.
If you want to add a color that’s not shown in the color palette, you can simply enter the hex code of the color you want to use into the text box below Link Color.
Next, Link Underline shows three options: Inherit, Underline, and None.
The first option, Inherit, will take on the underline style of your main website. The second option, Underline, will underline your links, while the third, None, will remove the underlines below the links on your blog.
Changing font family and size
Below the link customization options, you’ll see three font-related fields: Primary Font Size (1), Primary Font Family (2), and Heading Font Family (3).
If you leave the Inherit option, your blog will attempt to have the same font family and font size as the text on your main website.You can change these settings by selecting the font size and family from the dropdown menu below each of these three fields.
Apart from choosing a font from the dropdown, you can also select Custom Google Font.This option gives you access to over 1,000 fonts, which you can view by visiting Google’s font site.
Once you find a font you like, copy the font name, and paste it into the text field below Google Font Name (Primary).
In the image below you can see an example blog page that uses a custom Google Font (Product Sans) for the paragraph text and the system font Roboto for the headings.
As is the case with link color and underline style, the font family and size you’ll choose for your blog depends on your personal preferences.💡 Did you know that Google Fonts has 1,790 free open-source font families? But the one font family you won’t find available on Google Fonts is Google Sans, which is used only for Google products!
Image frames
By default, when you add an image to your blog post, it will have a frame around it. The dropdown below Image Frame allows you to turn this border on or off.
Select the On or Off option depending on whether you want the images on your blog to have a frame or not.These settings will be applied to all the images on your blog, but you can also change the selected option for individual images within each of your posts.
To do that, open up the post you want to edit, find the image in the editor, and, upon clicking on it, select Style → No Border.
To learn more about the available image options, read our Image settings guide.
Customizing blog post display settings
Below the Image Frame field, you’ll find a dropdown menu that lets you choose the number of Posts per Row you want to display.
As shown in the image below, you can display two, three, or four posts in a row.
Below Posts per Row, you’ll see a checkbox labeled Display the first post as a featured post, which, when checked, will display the first post on your blog as a full-width featured post.Note, that these two settings are only applicable to the Grid layout.
Customizing call-to-action buttons
The last two fields are CTA button background color and CTA button text color.
To change the background and text color, click inside the box under each of these two fields. Doing so will open a color palette with the colors you can select in a single click. Alternatively, you can paste any hex code into this field.Upon saving your changes, you’ll see the updated button colors applied to existing CTAs on your blog, as well as any new CTA buttons you add to your blog posts. These changes will also be applied to any embedded product CTAs from e-commerce platforms like Shopify, BigCommerce, and Big Cartel.
Custom CSS
If you want to make advanced design changes, you can use the Custom CSS section on the Code & Layout page.
When you click on the arrow next to Custom CSS, a code editor will open where you can enter your own CSS. This will be injected after all other CSS, making it easy to overwrite any style in the DropInBlog templates. Every element has a unique class on it making it easy to customize every aspect of your blog. Changing blog layout
On the Code & Layout page, you’ll also find three blog layout options to choose from.
The available layouts are Grid, Basic, and Raw.The first layout you’ll see is Grid, which is the default blog layout. It’s characterized by big titles and featured images and can be set to show two, three, or four posts in a row.
The image below shows how the Grid layout looks on the live site.
Tip: Use the same image dimensions for all featured images to give your blog’s homepage and category pages a uniform look.
Next is the Basic layout, which displays one post per line with the Title and Post Info on the left and the Featured image on the right side.
Lastly, the Raw layout uses HTML without any CSS styling. You should use this layout if you want to add your own CSS.The image below shows how this layout looks on the live site.
Note that selecting this layout will remove the Design Customizations section from the Code & Layout page.Upon selecting the desired layout, you don’t have to save your changes as the chosen layout will be automatically applied to your blog.
That’s all for this guide about the customization options on the Code & Layout page.
Happy blogging!
Updated on: 08/01/2025