Recently Updated 
Citadela Pro plugin uses standard Gutenberg features together with WordPress Customizer. These are original WordPress tools that allow you to modify certain aspects of your WordPress theme without coding knowledge. By using the Citadela Pro plugin, you can easily change the look of your website. Blocks-based themes and WordPress full-site editing are the future of WordPress. Citadela Pro plugin is ready for the future.
is a native extension of FREE Citadela WordPress Theme
WordPress customization plugins, as mentioned before, add more options and settings into your WordPress editor and admin panel. Using the Citadela Pro plugin, you can modify the Citadela WordPress theme and create a perfectly unique website every time. Citadela Pro plugin also adds styling options for other Citadela plugins such as Citadela Listing and Citadela Blocks.
Feel good about your website
Simple changes, such as personalized colours and fonts, can lead to a significant difference in the appearance of your website. Make sure your site is designed to meet your preferences and that you feel good about your website when you’re finished customizing it.
Get started now with a risk-free trial. No credit card required.
How to work with the Citadela Pro plugin?
BUILD VISUALLY – MAKE REAL-TIME CHANGES
Customize your web design visually. Citadela Pro lets you make changes that you can preview in real-time. Depending on your theme and active WordPress plugins, there are many things you can customize, for example, Logo and site title, Colors, Fonts, Menus, Widgets, Header and Footer of your website.
Citadela Pro customization options are available after login into the WordPress admin environment. There’s no need to install anything because it’s an integral part of WordPress itself.
1. Access from admin
2. Access from frontend
What can I do with Citadela Pro?
Citadela Pro plugin strictly follows all WordPress rules and only uses standard features. Let’s have a look at Customize screen. Following the sidebar on your left-hand side, you can make various changes to your website appearance. Also, you can preview all changes in real-time before publishing them.
Site identity
The first thing you come across in the customizer is Site Identity. As the title suggests, this section will help you define your website. It’s essential not only from the web design point of view but from every other aspect too. Site identity tells your web visitors who you are and what you do, imprints the first impression and strengthens branding.
Site identity covers four crucial elements of your website:
Click Publish when you’re done filling out your Site identity. Alternatively, you can click ⚙ (the gear icon) next to the publish button for more options, such as Save Draft or Schedule.
General layout
The general Layout section offers multiple predefined designs. You can change the way website elements are arranged with a single click and see how it fits your specific site. General Layout lets you switch between different Theme layouts (e.g., modern or classic), and you can set the rules for collapsible footer widgets. There are several unique settings for your website, too:
Content width sizes
Advanced settings for website content width. You can configure it exactly as you want without worry about losing website responsiveness on mobile devices. You can set a custom size for content, wide and full size of the content.
Border radius options
Unique design setting that allows you to set rounded edges of box objects throughout the whole website globally. You can use the following setting for round buttons. In combination with a General border-radius, you can change your website’s whole look & feel.
The Citadela Pro plugin adds the General Layout section for WordPress. It is not included in Citadela Free WordPress Theme.
Appearance
If you’re looking for more customization options that will allow you to create a unique website tailor-made to fit your branding colours and style, the Appearance section is what you need. These four essential parts are super easy to set up and will make a significant difference to the final look of your website.
Header layout
These settings allow you to set the layout of the header of your website precisely. It is possible to choose two basic layouts – Classic and Center. There are settings for desktop and mobile, for more precise logo and header size configuration. It is thus possible to set a different appearance of the header on the computer and on the mobile.
This section also contains settings for how the Sticky header is displayed, divided into desktop and mobile settings. Therefore, it is possible to define on each device whether to set the Sticky header to None, Burger only, or Full Sticky header after scrolling the page.
Header background
Use an image as a background for your header. Click on Header Background under Appearance in the menu and then click “Select image.” You can choose an image from your media library or upload a new one from your computer.
This section offers one more handy setting: Header Color Overlay. If you’ve used the image as a header of your website, you can set the colour overlay for this image. It certainly adds a unique glance to your site and reduces the need for a professional designer of your homepage image.
There are more options to choose from. Try them out and decide which one is the best for your website:
- Header image repeat
- Size of your Header image
- Header image position
- Fixed background image
Special tip:
Is your site responsive? See how your website looks on screens of different sizes! There are three icons of desktop, tablet, and mobile screen on the bottom of your right-hand side menu. Click and see how different settings appear on a particular device.
Colours on your WordPress website
How to change website colours? Navigate to: Customize > Appearance > Colors. There are four colours for you to pick from:
- Decoration Color
- Page Color
- Footer Color
Each of these colours can be set using an unlimited Color Picker or defined as a HEX value. HEX value input will come in handy if you aim to match your branding colour with your website colours.
Typography
How to change the font on your WordPress website? Navigate to: Customize > Appearance > Typography and pick fonts you’d like to use: Text font and Title font.
In general, it is not recommended to use more than 2 different fonts on a single website. Following this rule improves readability and nicely contributes to a neat website design.
Citadela PRO plugin offers you the full selection of Google Fonts for the typography of your website, so you don’t need to worry that you won’t be able to find the font with the special characters of your chosen language.
Citadela Pro plugin adds the appearance section. It is not included in Citadela WordPress Theme.
Announcements bar
Do you want to bring visitor’s attention to your current special offer? Announcements bar is a perfect tool for this job. It’s a Call To Action panel you can use on your website to highlight important news or other announcements.
Settings for the announcements bar, such as text, button URL, display dates and more, are available in your wp-admin under Citadela PRO.
WordPress Customizer shows you how does your announcements bar look. Moreover, it lets you modify its background and button colors. Clicking the “Customize Colors” button will bring you to these setting directly.
It is also possible to use the settings in the admin -> Citadel PRO, where you can switch the type to Advanced to create a custom Announcements bar. In this case, you will display the fields for entering your HTML and CSS. In this section, it is also possible to time the display of the announcement bar using intervals from – to.
Citadela Pro plugin adds an announcements bar. It is not included in Citadela WordPress Theme.
Creating menus
Website navigation menus can be created and customized directly in WordPress Customizer. This is a standard WordPress feature. Therefore it is available to all WordPress users, and it’s included in the Citadela WordPress theme.
How to add a menu to WordPress website?
Follow the 3 simple steps:
1. Navigate to Menus and then click the Create New Menu button. Fill in the name of your new menu and choose its location.
2. Add items to the menu: Custom links, Pages, Posts, Categories or Tags
3. Tick Automatically add new top-level pages to this menu at the menu options section on the left-hand side – if you like.
Widgets
New Customizer makes working with Widgets very straightforward. After clicking Widgets, you’ll see all available Widget locations or Widgets Areas to choose from. Depending on your WordPress theme, some pages might have more Widget areas than others.
Choose the widget area you want to add a widget to, then click Add a Widget. From WordPress 5.8, you can also use any WordPress block in the Widget area.
Each widget has its additional option. Play around and see what suits your needs the best.
Homepage settings
Depending on the purpose of your website, you can choose between 2 basic homepage settings in Citadela Pro:
- Latest Posts
- Static page
By default, Latest Posts are perfect for blog websites. However, you can use them on any website with dynamic content, which is regularly added in blog posts, such as company news, latest events etc.
A static page is more typical for a corporate website with a clear structure and proven sales funnels. You can add any page you want to be displayed on your homepage. Also, you can add more pages or remove them at any time.
Additional custom CSS
Finally, for more advanced users, there is room for additional CSS. You can add your piece of code, which can alter the appearance of your website.
As you can see, with Citadela Pro, your WordPress website is entirely customizable and flexible. Even though we’re still in the early days of WordPress, there’s enormous growth potential as well as room for improvement. There are many things you can do with Citadela Pro without any coding knowledge. And indeed, the excellent reputation of WordPress that says “You can do almost anything in WordPress” is still alive.
More customization options for your website and attractive content. More advanced features for your business. More layouts and possibilities for comfortable work.
Custom header
Header design can be changed and customized on every page using Citadela Header Settings inside Inspector. That way you can achieve unique design using functions such as Transparent header or Header over content. You can also change logo on every sub page. Possibilities are endless.
Blog layout settings
To create attractive blog layouts Citadela Pro plugin offers options to customize blog page using WordPress Gutenberg editor. That way you have full control over design of you blog page. You can also use there all Citadela blocks such as maps or cluster to really create a page that you want. Blog posts can be displayed as List, Box or Simple Layout.
Blog posts anywhere on your website
New block called “Posts” allows you to display blog posts on any page. You can use many filter options to only display posts that you want.
Infobar
Infobar can be used to display cookies notification on top or bottom of your website. It is displayed to all new visitors that come to your website. They can click on the button to hide it. Infobar is then hidden for number of days set it “Cookie expiration” field.
Comments extension
Comments Extension can be used to add help text to every single input in WordPress Comment form. It will help you to optimize your website to meet GDPR requirements.
Custom JS codes for header & footer
Insert custom JavaScript code into header or footer of your website. Use proper JavaScript including tags.
Google analytics code
Insert your Google Analytics Tracking ID. Google Analytics tracking code will be added to your website. You website will be easily connected with your GA account to track website visitors.
WooCommerce support
By activating Pro plugin you’ll get full WooCommerce support. Shop pages and all WooCommerce blocks will get Citadela styles including many Pro design features.
Layout exporter
You’re able to export your own Citadela Layout with Citadela Pro. You can prepare a website draft on your localhost or testing domain and then easily import it to the live URL. Layout Exporter feature exports WordPress pages, posts, images and all Citadela options and settings.
Layout import
Using import layout function you can import whole layout into Citadela within few seconds. Your website will look exactly as given layout including images, content and settings. It is a good starting base for your new website.
Automatic updates
Almost every week we release new features or bug fixes. To run a website on Citadela smoother, we have developed automatic updates for each product. You only need an API key for your domain, and everything runs smoothly.
Design Extensions for other Citadela plugins
Pro plugin adds new features and extends options for blocks included in our two other Citadela plugins: Citadela Blocks and Citadela Listing.
Cluster: Width settings
Pro plugins enables you to globally set custom width for blocks. Cluster block width can be set independently from these global settings. You have your subpage width fully under control. It can be set to content, wide or full width.
Design setting for other blocks
Attractive presentation can be achieved using different design styles and various color combination of blocks. Our blocks allows you to set different background & text colors, styles & colors of lines and main decorative color. These options are added into following blocks:
- Listing items list
- Listing search results
- Listing search form
- Item Extension
- Advanced Filters
- Similar Items
- Posts Search Results
- Blog Posts
- Posts
- Authors List
Half layout with Listing map
You can switch to Half layout with left or right listing map on any page. In the first half, you can display directory items grids, text, images or another standard content format. In the second half, you can display a listing map with items and markers or even show a route using GPX data.
Language translations included in the Citadela package:
Afrikaans, Albanian, Amharic, Arabic, Arabic (Egypt), Arabic (Morocco), Armenian, Assamese, Azerbaijani, Belarusian, Bengali (Bangladesh), Bosnian, Bulgarian, Catalan, Chinese (China), Chinese (Hong Kong), Chinese (Singapore), Chinese (Taiwan), Croatian, Czech, Danish, Dutch, Dutch (Belgium), English (US), Esperanto, Estonian, Finnish, French (Canada), French (France), Galician, Georgian, German, Greek (Greece), Hebrew, Hebrew (Israel), Hindi, Hungarian, Icelandic, Indonesian, Italian, Japanese, Korean, Latvian, Lithuanian, Macedonian, Malay, Mongolian, Moroccan Arabic, Norwegian (Bokmål), Persian, Polish, Portuguese (Angola), Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Saraiki, Serbian, Sindhi, Slovak, Slovenian, South Azerbaijani, Spanish (Argentina), Spanish (Colombia), Spanish (Costa Rica), Spanish (Dominican Republic), Spanish (Ecuador), Spanish (Guatemala), Spanish (Chile), Spanish (Mexico), Spanish (Peru), Spanish (Puerto Rico), Spanish (Spain), Spanish (Uruguay), Spanish (Venezuela), Swedish, Thai (Thailand), Turkish, Ukrainian, Vietnamese
Today, designing websites in WordPress block editor is a standard way of making a website in WordPress. Gutenberg editor is universal and easy to learn.
Citadela Pro plugin extends standard WordPress editor with new unique blocks. Citadela Pro is custom built and works flawlessly with Citadela WordPress theme.
What are Citadela Pro blocks?
Citadela Pro blocks are building units of a WordPress website. They let you add text, images, multimedia content, tables and much more to your site. Each block is editable. You can find the basic block set in the top left corner of the block itself and advanced settings in Inspector. Block Inspector is on the right-hand side menu in wp-admin. Just choose the block you want to edit to see the available options.
WordPress Blocks Administration
Core WordPress blocks
WordPress comes with an original set of blocks you can build a decent website with. They’re divided into the following sections:
- Text Blocks
(Paragraph, Heading, List, Quote, Code, Classic, Preformatted, Pullquote, Table, Verse) - Media blocks
(Image, Gallery, Audio, Cover, File, Media & Text, Video) - Design blocks
(Buttons, Columns, Group, More, Page Break, Separator, Spacer) - Widgets blocks
(Shortcode, Archives, Calendar, Categories, Custom HTML, Latest Comments, Latest Posts, RSS, Search, Social Icons, Tag Cloud) - Embed blocks
(Embed, Twitter, Youtube, Facebook, Instagram, WordPress, SoundCloud, Spotify, Flickr, Vimeo, etc.)
How to add a block to the page in WordPress?
Adding and reordering blocks on the page or within a blog post is simple: click on the plus button located in the left top corner of your page. Then find a block you need in the displayed list of blocks. You can also search for a block using a search row.
How to reorder WordPress blocks? Click on the block you want to move and use the arrows displayed in the block menu to move the block up or down.
WordPress plugins that add blocks
Even though the list of the original WordPress blocks is pretty long, there are some essential functionalities missing among them. When you find yourself in a situation that you cannot do or style something the way you need, it’s time to look for a WordPress plugin that will extend your Block Editor by adding more blocks.
Main Advantages
of Citadela Pro Blocks
Citadela Pro is a state of the art plugin that we continually work on to reflect the needs of websites for specific businesses. It’s based on 12 years of web creation experience in our team of developers and web designers. Therefore the main advantages include:
- Extends WP editor with more gutenberg WordPress blocks
- High compatibility with all WordPress themes built on WordPress 5.2 and above
- New blocks added regularly
- Based on latest trends and specific business needs
- Well coded, using standard WordPress code and best practices
- Responsive WordPress blocks
- No 3rd party page builder needed
WordPress Gutenberg and Citadela WordPress Theme is the right combination for building a fast and elegant website.
WordPress blocks included in Citadela Pro plugin
Citadela Pro plugin offers you the following custom made blocks:
Cluster block
Important design and functional element on any website: Cluster or Block of Blocks. You can add multiple blocks into the Cluster block and set the alignment and background. This unique container is perfect for blocks grouping.
Alignment options for the Cluster block:
- Content size
- Wide size
- Fullwidth size
More settings of Cluster block
You can set their background colour or even background image after you group blocks on your WordPress website. Moreover, you can define border, shadow, specific height and width. You can fill in the Additional CSS Class section (suitable for advanced users) and more.
Responsive options are available when an image is set up as a background. It helps you to design a website in a better way for mobile devices. You have available several parameters. Also, you can choose smaller image sizes for mobile devices and speed uploading time. Change the image for mobile resolution through the block toolbar.
Opening Hours block
This same specific WordPress block will make building your website faster and easier. Add Opening Hours WordPress block on any page you like and fill in the particular time slots. In the block’s settings on your right-hand side, there’s an option to hide empty days and various colour settings in Inspector. Handy.
The opening hours block doesn’t come with the title, so don’t forget to add one by using regular Heading or Paragraph block. This way, you can use the Opening hours block for call centre availability or support hours too.
Custom Page Title block
The page title and subtitle block that you can use anywhere on the web page. The idea behind the Custom Page Title block is to increase the variety of your page’s layout. A simple option, such as moving the title and subtitle further down the page, will allow you to light up your website with an image or a map at the top.
Custom page title Includes basic alignment settings (Align Left, Center, Right), bold and italic font style and space for typing in the subtitle. The title itself will be automatically copied from the actual page title, so go there if you want to change it. Then hide the page title in the page settings, and you’re all set.
There’s also an option to add a hyperlink if you want to bring visitors to any other page or website.
Price Table WordPress block
Display prices, special offers and featured items using the Price table block. This genuinely unique Citadela WordPress block has been designed for you to present deals in a way that cannot be overlooked. Group Price table block with an image using Cluster block for even better results.
Price table block features:
- Multiple text entries:
title, subtitle, price, product description rows - Featured item mark
- Discount price field for showing old and new prices next to each other
- CTA button (buy now)
Customization settings of Price table block
- Unlimited colour picker:
Header background, Header text, Button background, Button text - Button settings:
Smooth switcher between round and angled button edges, Open link in new tab option
Service block
Special block that lets you create an overview of your offered services. Service block includes icon, title, subtitle and description, which you can link to a subpage of your choice.
You can use several service blocks grouped using cluster block not only to list your services. They’re perfect for any of your product presentation pages, too!
Using grouped service blocks, you can create an overview of subscription packages or arrange any content on your website (e.g. list the advantages of your product).
Responsive Spacer block
Airy web design increases the readability of your content and encourages your web visitors to stay on your website for a longer time. However, adding fixed spaces between page elements will ruin the mobile version of your website. Therefore we’ve created a responsive spacer as one of the first blocks added to our Citadela Pro plugin.
Settings are simple. Choose unit and height. Height units for Responsive Spacer block are:
px, vw, vh, rem, em, %
An additional option is available for responsive design.
Choose this setting to modify block parameters for mobile resolution. Define breakpoint size, height unit and spacer height.
Responsive Text block
Typography on your website should be straightforward. Using 1 or 2 fonts is recommended. But what if you need to spice up the page with an extra font and style? The responsive text block will allow you to do just that. Add text with a different font to your WordPress website.
Settings let you choose:
- Any of the Google fonts
- HTML tag for your text
- Font size
- Line height
- Letter spacing
- Text colour
- Background colour
Customize fancy text area on devices differently
Use responsive options to set up essential parameters for desktop and mobile separately. You have under control mobile width breakpoint size. You can regulate text alignment, font size unit, font size and line-height. Responsive typography block helps you to play with typography easily. Create eye-catching presentations.
This block is available on standard Page, Post or even Special Pages along with Citadela Directory Plugin.
